elements, so the rule above painted the first block muted grey, while the second only looked white because GSAP writes an inline #fff onto its per-character spans. */ :is(.hero-story__headline,.hero-story__support,.hero-story__word) { color:#fff !important; } /* Same reasoning as the hero story above: the travel-preview caption sits over a full-bleed photo, not a theme surface, so its heading must stay white in both themes. The blanket h1-h4 rule above painted it var( --text-primary) — near-black in light mode — which read as broken text on a dark photo. */ #perspective .pg-preview__caption h3 { color:#fff !important; } /* NOTE: .hero-story__char is deliberately NOT in the list above. The second panel lights its characters one at a time from dim grey to white, and GSAP drives that by writing an inline `color` onto each span. A stylesheet `!important` outranks a non-important inline declaration, so including the chars here (or restating their dim start with !important) froze all 96 of them at rgba(255,255,255,.22) and killed the fill outright. The dim start already comes from codex-final-pass-v2.css without !important, which is exactly what lets the inline animation win. Primary-panel chars have no colour of their own and inherit #fff from the headline. */ :is(small,.mono-label,.counter__key,.exp__meta,.folio-footer__eyebrow) { color:var(--text-tertiary); } :is(.capability-card-v2,.value-card,.toolkit-tile,.partnership-card,.counter) { background-color:var(--surface-card); border-color:var(--line); } /* Editorial rows stay integrated with the page instead of becoming cards. */ #experience .exp__row, #experience .exp__list--education .exp__row, #insights .accordion__item, #contact .folio-footer__directories, #contact .folio-footer__column { background:transparent !important; } :is(#work .sw-pill,#perspective .pg-gallery__tabs button) { background:var(--surface-control) !important; color:var(--text-secondary) !important; border-color:var(--line) !important; } :is(#work .sw-pill,#perspective .pg-gallery__tabs button).is-active { background:var(--surface-active) !important; color:var(--text-on-active) !important; } /* ---- Header --------------------------------------------------------- codex-final-pass-v2.css declares `#nav { background:transparent !important }` and only paints a capsule once `.nav--post-hero` lands. An ID + !important outranks `.nav--glass`, so in every state where post-hero was off — at the top of the page, and any time the class went stale while an overlay owned the scroll — the header rendered with no background at all and its labels sat directly on the page. These rules match that specificity (#nav + !important, later in the cascade) so the capsule is ALWAYS painted. post-hero now only deepens it rather than being the thing that creates it. -------------------------------------------------------------------- */ #nav, #nav.nav--glass { backdrop-filter:blur(20px) saturate(1.3) !important; -webkit-backdrop-filter:blur(20px) saturate(1.3) !important; } #nav.nav--post-hero { background:var(--surface-glass) !important; border-color:var(--line-strong) !important; color:var(--text-primary) !important; } .nav__brand svg { fill:currentColor; } .theme-toggle { appearance:none; display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border:1px solid var(--line-strong); transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease,border-color var(--dur-fast) ease; } .theme-toggle:hover { transform:translateY(-2px) rotate(-4deg); } .theme-toggle:active { transform:translateY(0) scale(.94); } .theme-toggle:focus-visible { outline:2px solid var(--focus-ring);outline-offset:3px; } .theme-toggle__track { display:grid;place-items:center;width:22px;height:22px; } .theme-toggle__icon { width:22px;height:22px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .theme-toggle__sun-core,.theme-toggle__sun-rays,.theme-toggle__moon { transform-origin:12px 12px;transition: transform var(--dur-2) var(--ease-out),opacity var(--dur-2) ease; } .theme-toggle__moon { opacity:0;transform:rotate(-95deg) scale(.25);fill:currentColor;stroke:none; } :root[data-theme="dark"] .theme-toggle__sun-core { opacity:0;transform:rotate(70deg) scale(.2); } :root[data-theme="dark"] .theme-toggle__sun-rays { opacity:0;transform:rotate(105deg) scale(.45); } :root[data-theme="dark"] .theme-toggle__moon { opacity:1;transform:rotate(0) scale(1); } .theme-toggle--mobile { display:none; } /* The three Motion studies intentionally remain white in both themes — the recordings themselves have white backgrounds, so a dark panel would just put a hard seam around the footage. */ #perspective .pg-panel--motion figure { background:#fff; border:1px solid rgba(20,24,21,.09); } #perspective .pg-panel--motion video { background:#fff; } /* In dark mode that white slab needs to read as a deliberate light media surface rather than a hole in the page: inset the frame slightly, and swap the light-on-light border and shadow for ones that actually register against black. */ /* No drop shadow on these. The dark-theme pair in particular ended with a 0 0 0 1px spread, which against a white card renders as a hard dark ring just inside the edge and reads as an inner shadow rather than depth. The hairline border alone is what separates the white slab from the page. */ :root[data-theme="dark"] #perspective .pg-panel--motion figure { border-color:rgba(255,255,255,.14); } /* Dark mode used a near-opaque .96 fill, which flattened the tray and killed the frost the light theme shows. Both themes now use the same translucent tint so the blur behind it actually reads. */ :root[data-theme="dark"] .mobnav a,:root[data-theme="dark"] .mobnav span { color:var(--text-primary); } :root[data-theme="dark"] body :is(#services,#contact,.capabilities-v2,.folio-footer) { color:var(--text-primary) !important; } :root[data-theme="dark"] body :is(.capability-card-v2,.value-card,.toolkit-tile,.partnership-card,.counter) { background:var(--surface-card); color:var(--text-primary); } /* Dark-mode sections that still carried authored light surfaces. */ :root[data-theme="dark"] body #process .design-process__step, :root[data-theme="dark"] body #process .design-process__step.is-active { background:var(--surface-card); } /* codex-final-pass-v2.css tints the inactive process steps with literal rgba(17,17,17,…) — near-black ink that vanished on the dark step surface. Recede them with the theme's own text ramp instead. */ :root[data-theme="dark"] body #process .design-process__step:not(.is-active) { background:var(--surface-sunken); } :root[data-theme="dark"] body #process .design-process__step:not(.is-active) .design-process__copy p { color:var(--text-tertiary) !important; } /* Work pagination retains both its base rail and active progress in dark mode. */ #work .sw__track > i { background:var(--text-primary); } :root[data-theme="dark"] body #services .capability-card-v2, :root[data-theme="dark"] body #client-value .value-card, :root[data-theme="dark"] body #partnerships .partnership-card { background:var(--surface-card); color:var(--text-primary); } :root[data-theme="dark"] body :is(#work,#services,#process,#about-me,#client-value,#toolkit,#perspective,#partnerships,#experience,#insights,#contact) :is(h1,h2,h3,h4,h5,h6,strong,blockquote) { color:var(--text-primary) !important; } :root[data-theme="dark"] body :is(#work,#services,#process,#about-me,#client-value,#toolkit,#perspective,#partnerships,#experience,#insights,#contact) :is(p,small,.sw-li,.counter__key,.exp__meta,.capability-card-v2__tags span,.folio-footer__link) { color:var(--text-secondary) !important; } /* --text-on-active is for text sitting ON the filled active chip. The work list items are plain text on the page background — not chips — so giving them the inverted colour rendered them black on black. */ :root[data-theme="dark"] body :is(#work .sw-pill,#perspective .pg-gallery__tabs button).is-active { color:var(--text-on-active) !important; } #work .sw-li:not(.is-active) { color:var(--text-tertiary) !important; } :root[data-theme="dark"] body :is(.capability-card-v2,.value-card,.toolkit-tile,.partnership-card,.folio-footer__column) p { color:var(--text-secondary) !important; } :root[data-theme="dark"] :is(.capability-card-v2__visual,.value-card__visual,.toolkit-tile__visual) { background:var(--surface-media) !important; } :root[data-theme="dark"] :is(.folio-footer__link,.accordion__item,.exp__row) { border-color:var(--line) !important; } /* ---- Footer CTAs ---------------------------------------------------- annotation-pass-v3.css authored these with literal #141414 / #1a1a1a, so "Book a Call" (the --secondary variant: dark text and dark border on a transparent fill) disappeared completely against the dark page. Both variants are now token-driven and invert with the theme. -------------------------------------------------------------------- */ .folio-footer__button { border-color:var(--text-primary); color:var(--text-primary); background:transparent; } .folio-footer__button--primary { background:var(--surface-active); border-color:var(--surface-active); color:var(--text-on-active); } @media (hover:hover) and (pointer:fine) { .folio-footer__button--primary:hover { background:var(--accent) !important; border-color:var(--accent) !important; color:#111 !important; } .folio-footer__button--secondary:hover { background:var(--surface-active) !important; border-color:var(--surface-active) !important; color:var(--text-on-active) !important; } } /* Primary pill: base .pill paints background:var(--ink) / color:var(--surface), which the bridge now inverts per theme. Hover flips to the brand green, so the label must go dark to stay legible on it in both themes. */ .pill:hover,.pill:focus-visible { color:#111 !important; } @media (max-width:1024px) { .theme-toggle--mobile { display:grid;margin-left:auto; } } @media (prefers-reduced-motion:reduce) { .theme-toggle,.theme-toggle__sun-core,.theme-toggle__sun-rays,.theme-toggle__moon { transition:none; } } /* ===== end theme-system.css ===== */ /* ===== begin css/micro-interactions.css ===== */ /* ===================================================================== MICRO-INTERACTIONS Three shared motion primitives, used site-wide so the small moments feel like one system rather than per-component one-offs: .reel digits spin into place like an odometer .stagger lines rise + defocus in, then leave as one quiet fade .icon-swap one glyph dissolves into another All three respect prefers-reduced-motion, and each hands its compositor layer back once it settles — the site keeps a deliberately low permanent layer count and these must not erode it. ===================================================================== */ :root { /* Reel */ --reel-dur: 1400ms; --reel-stagger: 90ms; --reel-blur: 3px; --reel-ease: var(--ease-out); /* Staggered reveal */ --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-step: 40ms; --stagger-blur: 3px; --stagger-ease: var(--ease-out); --stagger-exit: 200ms; /* Icon swap */ --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: .25; --icon-swap-ease: ease-in-out; } /* ===================================================================== 1 · REEL — spinning digits Each digit is a clipped window onto a strip of 0-9 repeated; the strip translates up (spins x 10 + digit) cells, so it spins before landing. Columns are staggered left-to-right. `--reel-cell` is set per instance from JS, derived from the element's own computed line-height. One hardcoded cell height cannot work here: the Experience stats run a 100.8px line box, the Work pager 20.48px. ===================================================================== */ .reel { display: inline-flex; align-items: center; /* Deliberately NOT tabular. Tabular figures were here to stop the columns resizing mid-spin, but they are a different set of glyphs: in Geist the tabular "1" is 120px wide against the proportional one's 76.8px (at 200px), with a different shape — so the number visibly changed face as it landed. Column width is now pinned from the settled text's own advances (see measureAdvances in js/micro-interactions.js), which holds the layout steady without swapping figure sets. */ font-variant-numeric: normal; line-height: inherit; } .reel__col { position: relative; height: var(--reel-cell, 1em); flex: 0 0 auto; width: 1ch; /* clip-path, not `overflow: hidden`. The reel only needs a VERTICAL window for digits to roll through; overflow clipped horizontally too, and because .counter__value sets letter-spacing: -.055em the digit ink is wider than its column box, so the tightest glyphs were being shaved on mobile. Clipping to the box top/bottom while extending sideways keeps the roll intact and stops the trimming. */ clip-path: inset(0 -0.12em); /* Fade the window edges rather than hard-cropping, so digits arrive and leave instead of being sliced. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); } .reel__strip { display: flex; flex-direction: column; } .reel__digit { height: var(--reel-cell, 1em); display: flex; align-items: center; justify-content: center; /* Pin every cell to one tabular figure width. When the reel finishes it tears itself down and re-renders the value as plain text; if the rolling cells and the settled text measure differently the number visibly jumps at the end. 1ch under font-variant-numeric: tabular-nums is exactly one figure advance, which is what the plain text will use too, so the two states line up. */ /* The column carries the width (JS pins it to the advance the character occupies in the settled text); the cell just fills it. letter-spacing is zeroed here because that tracking already lives in the column width — applying it again would push the glyph off-centre. */ width: 100%; letter-spacing: 0; box-sizing: border-box; } /* Separators and suffixes ride along without a reel of their own. */ .reel__fixed { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; letter-spacing: 0; height: var(--reel-cell, 1em); } @media (prefers-reduced-motion: reduce) { .reel__strip { transition: none !important; filter: none !important; } } /* ===================================================================== 3 · ICON SWAP — one glyph dissolves into another Both glyphs occupy the same grid cell, so nothing reflows. The outgoing one shrinks and defocuses as the incoming one resolves. ===================================================================== */ .icon-swap { position: relative; display: inline-grid; place-items: center; } .icon-swap > * { grid-area: 1 / 1; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); } .icon-swap[data-state="a"] [data-icon="a"], .icon-swap[data-state="b"] [data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); } .icon-swap[data-state="a"] [data-icon="b"], .icon-swap[data-state="b"] [data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .icon-swap > * { transition: none !important; filter: none !important; } } /* ===== end css/micro-interactions.css ===== */ /* ===== begin css/theme-dissolve.css ===== */ .theme-dissolve { position: fixed; z-index: 2147482500; inset: 0; pointer-events: none; opacity: 0; will-change: opacity, transform; transform: translateZ(0); backface-visibility: hidden; contain: strict; /* The fill is opaque, so there is nothing for a backdrop blur to do. */ } /* The veil is now a circle that grows from the control that was pressed, painted in the incoming theme's own page colour (set inline by js/theme.js) — so the switch reads as the new theme sweeping in rather than as a scrim passing over the old one. It is fully opaque, which is why the old midpoint flash cannot return: the page underneath is never seen half-changed. */ /* js/theme.js sets the fill inline (a white frost going to light, the solid page colour going to dark); these are the fallbacks if it does not. Anything painted ON the sweep is white, which is legible over the frost while the darker page still shows through it. */ .theme-dissolve { color: #ffffff; } @media (prefers-reduced-motion: reduce) { .theme-dissolve { display: none; } } /* Theme reveal (View Transitions). The browser snapshots the page in the old theme, js/theme.js commits the new one, and the new page is unmasked by a circle growing from the pressed control. The circle's edge is a wide feathered falloff rather than a hard clip, so the two themes melt into each other along the wavefront instead of being cut. The .theme- dissolve veil above stays as the fallback where the API is missing. */ @property --theme-reveal-r { syntax: ""; inherits: false; initial-value: 0px; } html.is-theme-revealing::view-transition-old(root), html.is-theme-revealing::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.is-theme-revealing::view-transition-new(root) { --theme-reveal-soft: var(--theme-reveal-feather, 220px); -webkit-mask-image: radial-gradient( circle at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 0px), #000 calc(var(--theme-reveal-r) - var(--theme-reveal-soft)), rgba(0, 0, 0, .86) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .75), rgba(0, 0, 0, .5) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .5), rgba(0, 0, 0, .14) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .25), transparent var(--theme-reveal-r) ); mask-image: radial-gradient( circle at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 0px), #000 calc(var(--theme-reveal-r) - var(--theme-reveal-soft)), rgba(0, 0, 0, .86) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .75), rgba(0, 0, 0, .5) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .5), rgba(0, 0, 0, .14) calc(var(--theme-reveal-r) - var(--theme-reveal-soft) * .25), transparent var(--theme-reveal-r) ); } /* The pressed toggle is lifted into its own layer above the sweep. Its new view is live, so the sun/moon morph plays in real time on top while the page around it changes; the old icon simply steps out of the way. */ /* Other named elements (the case-study cover) would otherwise get their own groups and crossfade outside the mask; fold them back into root. */ html.is-theme-revealing #swThumb, html.is-theme-revealing [style*="view-transition-name"]:not(.theme-toggle) { view-transition-name: none !important; } html.is-theme-revealing::view-transition-group(theme-toggle) { animation: none; z-index: 1; } html.is-theme-revealing::view-transition-old(theme-toggle) { display: none; } html.is-theme-revealing::view-transition-new(theme-toggle) { animation: none; } /* Everything else holds still while the snapshot swaps, so colour transitions on the live page never race the mask. The toggle's own icon is exempt: its morph is the one motion that should read. */ html.is-theme-revealing *:not(.theme-toggle__sun-core, .theme-toggle__sun-rays, .theme-toggle__moon) { transition: none !important; } html.is-theme-revealing .theme-toggle__sun-core, html.is-theme-revealing .theme-toggle__sun-rays, html.is-theme-revealing .theme-toggle__moon { transition: transform 620ms var(--ease-toggle), opacity 380ms var(--ease-in-out) !important; } /* ===== end css/theme-dissolve.css ===== */ /* ===== begin css/custom-cursor.css ===== */ /* Desktop-only portfolio cursor. Native cursors remain intact for touch, coarse pointers, and devices that do not support hover. */ @media (hover: hover) and (pointer: fine) { html.has-portfolio-cursor, html.has-portfolio-cursor body, html.has-portfolio-cursor body * { cursor: none !important; } /* The root carries only the position — it has no size of its own, so the arrow's tip can sit exactly on the pointer while the bubble centres on the same point. */ .portfolio-cursor { position: fixed; z-index: 2147483000; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transform: translate3d(-40px, -40px, 0); transition: opacity var(--dur-1) ease; will-change: transform; } .portfolio-cursor.is-visible { opacity: 1; } /* Tip at 0,0: the path's origin is the arrow point, so no offset is needed to line it up with the real pointer position. */ .portfolio-cursor__arrow { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; /* The global `img, video, svg, canvas { max-width: 100% }` resolves against the zero-width root and collapsed the arrow to 0. */ max-width: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); transform-origin: 2px 2px; transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out); } .portfolio-cursor__bubble { position: absolute; top: 0; left: 0; display: grid; width: 0; height: 0; place-items: center; overflow: hidden; color: #f4f4f4; background: rgba(12, 14, 15, .68); box-shadow: 0 18px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(1.45); backdrop-filter: blur(18px) saturate(1.45); opacity: 0; transform: translate(-50%, -50%); transition: width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out), opacity var(--dur-2) ease; will-change: width, height; } /* Over the Work cover the arrow gives way to the bubble. */ .portfolio-cursor.is-work-cover .portfolio-cursor__arrow { opacity: 0; transform: scale(.6); } .portfolio-cursor.is-work-cover .portfolio-cursor__bubble { width: 118px; height: 118px; opacity: 1; } .portfolio-cursor__label { font: 400 13px/1.18 var(--font-sans, Arial, sans-serif); letter-spacing: -.01em; white-space: nowrap; opacity: 0; transform: translateY(4px) scale(.94); transition: opacity var(--dur-1) ease, transform var(--dur-3) var(--ease-out); } .portfolio-cursor.is-work-cover .portfolio-cursor__label { opacity: 1; transform: translateY(0) scale(1); transition-delay: .06s; } .portfolio-cursor.is-pressed .portfolio-cursor__arrow { transform: scale(.86); } .portfolio-cursor.is-work-cover.is-pressed .portfolio-cursor__bubble { width: 110px; height: 110px; } } @media (prefers-reduced-motion: reduce) { .portfolio-cursor, .portfolio-cursor__arrow, .portfolio-cursor__bubble, .portfolio-cursor__label { transition-duration: var(--dur-1) !important; } } @media (prefers-reduced-transparency: reduce) { .portfolio-cursor__bubble { background: #1a1a1a; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ===== end css/custom-cursor.css ===== */ /* ===== begin refinements.css ===== */ /* ===================================================================== folio-v2 — REFINEMENT PASS Loaded last, on purpose. Targeted layout/aesthetic corrections sitting on top of the token + theme layers. Kept in one reviewable file rather than edited into the five historical pass stylesheets, so any single item is easy to find or revert. ===================================================================== */ /* ===================================================================== 1 · HEADER — bare over the hero, frosted below it Two states, driven by one class: .nav--on-dark the hero portrait is still painted behind the header. No fill, no border, no blur — just white labels over the video, so nothing boxes in the opening shot. (no class) the hero has handed off and the page surface is behind the header. The frosted capsule fades in and the labels take the theme's ink. js/nav-contrast.js owns that class. It tests the hero media's geometry and opacity directly rather than reading `.nav--post-hero`, which is unreliable: #hero is 400svh, so that class stays false long after the video has visually handed off. Every property that differs between the two states is transitioned, so the capsule materialises rather than snapping in. ===================================================================== */ #nav { transition: background-color var(--dur-4) var(--ease-out), backdrop-filter var(--dur-4) var(--ease-out), -webkit-backdrop-filter var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out) !important; } /* Over the hero — nothing behind the labels. */ #nav.nav--on-dark, #nav.nav--on-dark.nav--glass, #nav.nav--on-dark.nav--post-hero { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Returning upward into the hero must be bare before the header becomes visible. Material transitions here briefly interpolated the light capsule edge over the second story block. The reverse transition, into the post-hero capsule, remains smooth via the base #nav rule. */ transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out) !important; } /* Past the hero — the frosted capsule, theme-driven so it reads in both light and dark. codex-final-pass-v2.css declares `#nav { background: transparent !important }` at ID specificity, so this has to match it and come later to land. */ #nav:not(.nav--on-dark), #nav:not(.nav--on-dark).nav--glass, #nav:not(.nav--on-dark).nav--post-hero { background: var(--surface-glass) !important; border: 0 !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: blur(20px) saturate(1.3) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3) !important; } /* ---- Fade in / out on scroll ---------------------------------------- js/nav-contrast.js adds `.nav--hidden` on a downward scroll past 24px, and ui-consistency.css hides it by sliding it off the top edge. A slide is abrupt and fights the capsule's own fade, so the hide becomes an opacity fade instead. js/nav-contrast.js brings it back once scrolling settles, in either direction. `!important` is required: GSAP writes an inline `opacity` onto #nav for its own reveal, and an inline declaration outranks a normal rule. -------------------------------------------------------------------- */ /* UPDATE — hiding by opacity alone is what caused the "frosted bar with no nav in it" bug on mobile. #nav carries backdrop-filter: blur(20px), and iOS Safari composites a backdrop-filter layer independently of its element's opacity: mid-fade (and sometimes after it) the blurred plate kept painting while the logo and controls did not, so scrolling back up showed a frosted strip with nothing in it. Translating the bar off the top edge as well means the frosted plate physically leaves the viewport instead of relying on opacity to stop it painting, which no compositor can get wrong. The opacity fade is kept so the motion still reads as a fade rather than a hard slide. The old comment about GSAP writing an inline transform no longer applies — the GSAP nav reveal was removed with the previous hero. */ #nav.nav--hidden { opacity: 0 !important; transform: translate3d(0, -140%, 0) !important; pointer-events: none !important; } /* js/nav-contrast.js sets `.nav--on-dark` whenever the hero media is still painted behind the header box, and clears it otherwise — so the labels are white over the portrait and take the theme's ink everywhere else. `.nav__talk` is excluded: it is an inside .nav__links, so it would otherwise pick up this colour and go light-on-light against its own filled pill. */ #nav.nav--on-dark :is(.nav__brand, .nav__links a:not(.nav__talk), .theme-toggle, .nav__toggle) { color: #fff !important; } #nav:not(.nav--on-dark) :is(.nav__brand, .nav__links a:not(.nav__talk), .theme-toggle, .nav__toggle) { color: var(--text-primary) !important; } /* The CTA keeps its filled treatment in both scroll states and both themes — it is the one element in the bar that should read as a button. */ #nav .nav__links a.nav__talk { background: var(--surface-active) !important; color: var(--text-on-active) !important; border-color: var(--surface-active); } /* The toggle loses its own fill too, so the bar reads as one transparent unit rather than a chip floating on nothing. Border uses --line-strong (the shared control-border token) instead of currentColor so the ring reads as a muted grey, not the same near-white as the sun/moon glyph. */ #nav .theme-toggle { background: transparent !important; } /* Theme toggle + Let's Talk read as one stacked group, closer together than the regular nav-link rhythm around them. */ #nav .nav__cta-group { display: flex; align-items: center; gap: 10px; } /* ===================================================================== 2 · WORK — no text movement, unmistakable active state ===================================================================== */ /* styles.css:5599-5600 nudged list items ±5px on hover. Colour alone carries the hover now, so nothing shifts under the cursor. */ #work .sw__list--left .sw-li:hover, #work .sw__list--right .sw-li:hover, #work .sw-li:hover, #work .sw-li { transform: none !important; transition: color var(--dur-2) ease, opacity var(--dur-2) ease !important; } /* Work detail remains an image-overlay composition in both themes. Global heading/body theme rules must not turn this copy black in light mode. */ #work .sw__overlay .sw__ov-title, #work .sw__overlay .sw__ov-sub { color: #fff !important; text-shadow: 0 2px 20px rgba(0, 0, 0, .28); } #work .sw__overlay .sw-meta-col span { font-weight: 500 !important; } /* The selected case study goes to the absolute end of the ramp — pure black on light, pure white on dark — so which one is active is never in question. Everything else recedes well behind it. */ #work .sw-li.is-active { color: #000 !important; font-weight: 600; opacity: 1 !important; } :root[data-theme="dark"] #work .sw-li.is-active { color: #fff !important; } /* theme-system.css reaches these through an :is(#work, …) group, which carries ID specificity — so the recede has to match it to land. */ :root[data-theme] body #work .sw-li:not(.is-active), :root body #work .sw-li:not(.is-active) { color: var(--text-tertiary) !important; font-weight: 500 !important; opacity: .72 !important; } :root[data-theme] body #work .sw-li:not(.is-active):hover, :root body #work .sw-li:not(.is-active):hover { color: var(--text-secondary) !important; opacity: 1 !important; } /* ===================================================================== 3 · BUILT AROUND OUTCOMES — tighter cards The card carried 32px of its own padding and then nested another ~18px inside .value-card__copy — a ~50px inset on a 293px card. Other sections sit nearer 8-9% of card width; this brings it in line. ===================================================================== */ #client-value .value-card { padding: 18px !important; } /* ===================================================================== 5 · PLAYGROUND / MOTION — smaller, bottom-anchored artwork `cover` was zooming each 912x1178 frame to 1.086x to fill the 399x560 card, cropping ~34px off both sides and inflating the artwork. Switching to `contain` removes that zoom — the artwork comes down to its true proportion and stops running edge-to-edge — and `object-position: 50% 100%` pins the frame to the bottom of the card. Applied to all three cards, not just Design and Delivery: the title and pills live in the same baked frame as the artwork, so scaling only two of them dropped their titles out of line with Strategy's. Uniform treatment keeps the row aligned. NOTE: a further reduction of just the Design/Delivery artwork is not reachable from CSS — it needs those two .webm files re-exported with a smaller illustration. ===================================================================== */ #perspective .pg-panel--motion video { object-fit: contain; object-position: 50% 100%; } /* ===================================================================== 6 · One card surface across every section in dark mode ===================================================================== */ :root[data-theme="dark"] body :is( .capability-card-v2, .value-card, .value-card__copy, .toolkit-tile, .partnership-card, .counter, .accordion__item ) { background-color: var(--surface-card) !important; } /* ===================================================================== 7 · TRUSTED PARTNERSHIPS — green stroke on hover (dark mode) ===================================================================== */ .partnership-card { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } @media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] #partnerships .partnership-card:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), 0 18px 48px rgba(0, 0, 0, .55) !important; } } /* ===================================================================== 9 · MODERN PRODUCT STACK — kill the hairlines, rebuild the glow The stray lines: .toolkit-tile::after painted two 0.5%-wide gradient stops — a green one at 62% and a dark one at 68% — as faux grid rules. Hard colour stops render as crisp 1px lines, and on a dark card the green one reads as a scratch across the tile. Removed outright. The glow: .toolkit-tile::before is a radial whose midpoint is rgba(221,244,213,.28) — a pale mint that turns milky-grey over #1a1a1a — and it sat at opacity .72 permanently, so every tile glowed at rest. Replaced with a soft, brand-tinted bloom that is invisible until hover and reads correctly in both themes. ===================================================================== */ #toolkit .toolkit-tile::after { background: none !important; opacity: 0 !important; } #toolkit .toolkit-tile:hover::after { background: none !important; } #toolkit .toolkit-tile::before { inset: 0 !important; border-radius: inherit; background: radial-gradient( circle at var(--mx, 50%) var(--my, 45%), color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) 42%, transparent 68% ) !important; filter: blur(26px) !important; /* At rest the tile is clean; the bloom is a hover reward. Kept inset:0 (was -35%) and clipped by the tile's own overflow:hidden, so the glow tracks the cursor and stays inside the card instead of blooming past its edges. */ opacity: 0 !important; transition: opacity var(--dur-3) var(--ease-out) !important; } #toolkit .toolkit-tile:hover::before { opacity: .85 !important; } /* The lift, the accent edge and a soft ambient shadow that picks up the theme's own accent, so the effect matches in light and dark instead of being tuned for white cards only. filter:drop-shadow (not box-shadow) is deliberate — box-shadow is clipped by this element's own overflow:hidden (needed to contain the glow above), which trimmed the shadow to a hard edge at the card boundary instead of spreading softly behind it. */ #toolkit .toolkit-tile { transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out), border-color var(--dur-3) ease !important; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) !important; } @media (hover: hover) and (pointer: fine) { #toolkit .toolkit-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; transform: translate3d(0, -6px, 0) !important; filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--accent) 18%, transparent)) drop-shadow(0 24px 44px rgba(0, 0, 0, .16)) !important; } :root[data-theme="dark"] #toolkit .toolkit-tile:hover { filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent)) drop-shadow(0 26px 52px rgba(0, 0, 0, .55)) !important; } } /* Next.js, Three.js and the ChatGPT mark are supplied as black-on- transparent artwork, so they sank into the dark tile. These three are pure monochrome, so a straight inversion is exact — it does not shift any hue, unlike the multi-colour marks (Figma, Framer, Gemini, Supabase, Claude), which are left alone. */ :root[data-theme="dark"] #toolkit :is( .toolkit-logo--next, .toolkit-logo--three, .toolkit-ai__logo--chatgpt ) { filter: invert(1) !important; } /* The copy panel's divider was a literal #e4e4e4 hairline. */ :root[data-theme="dark"] #client-value { --vv-stroke: rgba(255, 255, 255, .58); --vv-stroke-soft: rgba(255, 255, 255, .3); --vv-fill: #2b2b2b; } /* value-node-pulse animates toward a light mint mid-keyframe; on dark that flashes white, so it pulses to the accent instead. */ @keyframes value-node-pulse-dark { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.14); fill: color-mix(in srgb, var(--accent) 34%, transparent); stroke: var(--accent); } } /* ===================================================================== 11 · WORK — promote the cover layers for the dissolve selected-work.js cross-fades the two covers through a blur. Declaring the properties it animates keeps that off the scroll repaint path. ===================================================================== */ #work :is(#swCoverPrev, #swCoverTop) { will-change: opacity, transform, filter; backface-visibility: hidden; } /* ===================================================================== 12 · Old Expertise section — hidden pending review The `hidden` attribute is only a UA-level `display:none`, and both the section and the nav links carry authored `display` rules that override it. Restore by removing the `hidden` attributes in index.html; this block then matches nothing. ===================================================================== */ #services[hidden], [data-expertise-link][hidden] { display: none !important; } /* ===================================================================== 8 · FOOTER WORDMARK — full-bleed FOLIO with room for its own blur The wordmark is four stacked copies, blurred 5/12/24px and masked into a progressive falloff. .folio-footer__media is overflow:hidden for its corner radius, so those blurred copies were sliced off at the left, right and bottom edges. Two changes: size the word off the CONTAINER rather than the viewport so it actually spans the image, and inset it by enough pixels that the softest layer finishes inside the frame instead of against it. 3.351 is the measured width-to-font-size ratio of "FOLIO" in Zalando Sans Expanded at -0.045em tracking; it is em-proportional, so it holds at every size. ===================================================================== */ .folio-footer__media { container-type: inline-size; } .folio-footer__wordmark { --fm-inset-x: clamp(20px, 2.4cqw, 46px); --fm-inset-b: clamp(24px, 3cqw, 58px); right: 0 !important; left: 0 !important; bottom: var(--fm-inset-b) !important; } .folio-footer__word { font-size: min(calc((100cqw - (2 * var(--fm-inset-x))) / 3.351), 29rem) !important; /* -0.045em of tracking is still applied after the final "O", so the element box ends short of the ink and justify-self:center parks the word off-centre. Cancelling that trailing advance re-centres it. */ margin-inline-start: -.0225em; } @media (max-width: 900px) { .folio-footer__wordmark { --fm-inset-x: clamp(14px, 3cqw, 26px); --fm-inset-b: clamp(16px, 3.6cqw, 32px); } } /* ===================================================================== 9 · JULY 2026 INTERACTION REFINEMENT ===================================================================== */ /* Playground tabs sit directly on the section in both themes. */ /* Hover changes color, never geometry: the card remains a single 1px line. */ #partnerships .partnership-card, #partnerships .partnership-card:hover { border-width: 1px !important; border-style: solid !important; } #partnerships .partnership-card { border-color: var(--line); } #partnerships .partnership-card:hover { border-color: var(--line-strong) !important; box-shadow: 0 18px 46px color-mix(in srgb, var(--text-primary) 7%, transparent) !important; } /* Footer base now uses the former back-to-top position for the email. */ .folio-footer__base { grid-template-columns: minmax(0, 1fr) auto; } .folio-footer__base > a[href^="mailto:"] { display: inline-flex; justify-self: end; text-align: right; } /* Neutral CTA feedback: no brand green in either theme. */ @media (hover: hover) and (pointer: fine) { .folio-footer__button--primary:hover, .folio-footer__button--primary:focus-visible { background: #212121 !important; border-color: #212121 !important; color: #fff !important; } :root[data-theme="dark"] .folio-footer__button--primary:hover, :root[data-theme="dark"] .folio-footer__button--primary:focus-visible { background: #3a3a3a !important; border-color: #3a3a3a !important; color: #fff !important; } } /* ===================================================================== 12 · MOBILE SELECTED WORK Desktop retains the pinned three-column story. Mobile becomes a focused image-led case-study browser derived from the supplied reference. ===================================================================== */ .sw__mobile-copy, .sw__mobile-nav { display: none; } @media (max-width: 900px) { #work .sw__inner { padding: var(--header-content-clearance) 20px 52px; } #work .sw__head { display: block; } #work .sw__pills, #work .sw__list, #work .sw__pager { display: none !important; } #work .sw__main { display: block; min-height: 0; } #work .sw__thumb { width: 100% !important; max-height: none !important; isolation: isolate; } #work .sw__thumb::after { content: ""; position: absolute; z-index: 1; inset: 38% 0 0; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(8, 7, 6, .2) 25%, rgba(8, 7, 6, .88) 100%); } #work .sw__mobile-copy { position: absolute; z-index: 2; right: clamp(24px, 7vw, 34px); bottom: clamp(28px, 8vw, 40px); left: clamp(24px, 7vw, 34px); display: block; color: #fff; pointer-events: none; } #work .sw__mobile-copy h3 { max-width: 16ch; color: #fff !important; font-weight: 500; letter-spacing: -.045em; } #work .sw__mobile-copy p { margin: 14px 0 0; color: rgba(255, 255, 255, .58); } #work .sw__mobile-nav button { font: inherit; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-1) ease; } #work .sw__mobile-nav button:active { transform: scale(.975); } #work .sw__mobile-prev { place-items: center; border: 1.5px solid var(--text-primary); } #work .sw__mobile-prev svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #work .sw__mobile-next { width: 100%; padding: 0 24px; border: 1px solid var(--surface-active); color: var(--text-on-active); letter-spacing: -.025em; } #work .sw__mobile-nav.is-first { grid-template-columns: minmax(0, 1fr); } #work .sw__mobile-nav.is-first .sw__mobile-next { grid-column: 1 / -1; } #work .sw__mobile-nav [hidden] { display: none; } html.is-hero-work-handoff #work .sw__mobile-nav { display: none; } } @media (max-width: 420px) { #work .sw__mobile-nav { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; } #work .sw__mobile-nav button { min-height: 58px; } #work .sw__mobile-prev { width: 58px; } } /* ===================================================================== 11 · WORK STORY + THEME CONTROL POLISH ===================================================================== */ /* Work remains the foreground scroll story until its sticky track has completed. Expertise then enters in normal document flow underneath it. */ #work { /* Work starts one layer below the pinned hero. Promoting it here caused its dark surface to cut across the secondary hero statement before the handoff had begun. */ z-index: 1 !important; isolation: isolate; background: var(--surface-page); } #work .sw__inner { background: var(--surface-page); } #work + #expertise, #expertise { position: relative; z-index: 1; background: var(--surface-page); } html.is-hero-work-handoff #work { z-index: 20 !important; background: transparent !important; } html.is-work-stage-live #work { z-index: 2 !important; } /* Directional cover wipes are clip-driven; keeping that property promoted avoids a final-frame repaint when the old cover is discarded. */ #work :is(#swCoverPrev, #swCoverTop) { will-change: clip-path, opacity, transform; backface-visibility: hidden; } #work .sw-no-trans { transition: none !important; } /* The control stays still while the page-level Motion sweep communicates the theme change. Long per-ray and moon animations were removed so one interaction owns the transition timeline. */ .theme-toggle, .theme-toggle:hover, .theme-toggle:active { transform: none !important; } .theme-toggle__sun-ray { opacity: 1; } /* ===================================================================== 15 · MOBILE WORK — ONE CONTINUOUS PINNED STORY The hero handoff, the mobile case-study browser and the release into Expertise now share one viewport-sized sticky stage. Scroll advances through the project sequence; the Back/Next controls move the same ScrollTrigger, so neither input can leave the card in an in-between state. Expertise enters only after the final project step completes. ===================================================================== */ @media (max-width: 900px) { #work { height: var(--sw-story-height, 478svh); } #work .sw__inner, html.is-hero-work-handoff #swRoot { height: 100svh; min-height: 100svh; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(82px, 10svh, 98px) 20px 18px; background: var(--surface-page); } html.is-hero-work-handoff #swRoot { position: fixed !important; inset: 0 !important; z-index: 20 !important; } #work .sw__head, html.is-hero-work-handoff #work .sw__head { display: block !important; } /* The handoff selector deliberately does NOT appear here. Including it gave the description a larger font-size while the hero->work handoff was active than it has once settled (measured 20.64px vs 15px at 430px), so the copy visibly shrank the moment the class dropped — the "text size larger on reveal" artifact. The handoff now inherits whatever governs the resting state, so both read identically. */ #work .sw__support { margin-top: 16px !important; } #work .sw__main, html.is-hero-work-handoff #work .sw__main { display: block; align-self: stretch; min-height: 0; height: 100%; } #work .sw__center, html.is-hero-work-handoff #work .sw__center { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; } #work .sw__thumb, html.is-hero-work-handoff #work .sw__thumb { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; aspect-ratio: auto !important; } #work .sw__mobile-nav, html.is-hero-work-handoff #work .sw__mobile-nav { align-self: end; } #work .sw__mobile-nav[style*="opacity: 0"] { pointer-events: none !important; } } @media (max-width: 420px) { #work .sw__inner, html.is-hero-work-handoff #swRoot { padding: clamp(78px, 9.5svh, 88px) 16px 14px; } #work .sw__main, html.is-hero-work-handoff #work .sw__main { padding-top: var(--gutter) !important; } #work .sw__mobile-nav, html.is-hero-work-handoff #work .sw__mobile-nav { margin-top: 12px !important; } } @media (max-width: 900px) { .folio-footer__base > a[href^="mailto:"] { justify-self: end !important; } } /* ===================================================================== 10 · SECTION STATE AND REVEAL STABILITY ===================================================================== */ /* Work tabs float directly on the section, matching Playground. */ /* Approach: selected is always a high-contrast white card. The former selected grey becomes the inactive surface in dark mode. */ :root body #process .design-process__step.is-active, :root[data-theme] body #process .design-process__step.is-active { background: #f4f4f4 !important; border: 1px solid #d4d4d4 !important; color: #111 !important; } :root body #process .design-process__step.is-active .design-process__number, :root[data-theme] body #process .design-process__step.is-active .design-process__number { color: #111 !important; } :root body #process .design-process__step.is-active .design-process__copy h3, :root[data-theme] body #process .design-process__step.is-active .design-process__copy h3 { color: #111 !important; } :root body #process .design-process__step.is-active .design-process__copy p, :root[data-theme] body #process .design-process__step.is-active .design-process__copy p { color: #555 !important; } :root[data-theme="dark"] body #process .design-process__step:not(.is-active) { background: #1a1a1a; } /* Partnership hover preserves the exact default stroke geometry. */ #partnerships .partnership-card:hover { outline: 0 !important; border-width: 1px !important; box-shadow: 0 18px 46px color-mix(in srgb, var(--text-primary) 7%, transparent) !important; } /* ===================================================================== 13 · MOBILE HERO + AI TOOLKIT TILE The portrait reference uses a smaller media field, a sharp central subject with four-sided progressive blur, and centered identity copy. Everything here is phone-only; desktop geometry and motion are untouched. ===================================================================== */ @media (max-width: 600px) and (orientation: portrait) { #hero .hero__titles { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 0 clamp(22px, 4.2vh, 36px) !important; padding-inline: 22px !important; gap: 7px !important; text-align: center !important; } #hero .hero__titles > span { justify-self: center !important; width: 100%; max-width: 100%; overflow: visible; padding: 0; text-align: center !important; } #hero .hero__titles .hero__title-text { display: none !important; } #hero .hero__titles > span::after { content: attr(data-mobile-label); display: block; white-space: normal; } #hero .hero__titles > span:first-child::after { color: #fff; font-size: clamp(1.5rem, 7.2vw, 1.85rem); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; } #hero .hero__titles > span:last-child::after { color: rgba(255, 255, 255, .36); font-size: clamp(.78rem, 3.8vw, .94rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; } } /* ===================================================================== MOBILE LINEAR EXPERIENCE Desktop retains the pinned hero and Selected Work explorer. Phones use normal document flow: scaled film, two readable statements, filterable stacked project cards. Keep this final in the cascade intentionally. ===================================================================== */ .sw-mobile-cards { display: none; } @media (max-width: 900px) { /* The desktop story remains in the DOM for accessibility and breakpoint continuity, but the visual mobile version lives immediately below. */ #work.sw { height: auto; background: var(--surface, #fafafa); } #work .sw__inner { min-height: 0; padding: 76px 20px 96px; } #work .sw__head { gap: 24px; } #work .sw__pills { margin-top: 2px; } #work .sw__main, #work .sw__mobile-nav, #work .sw__pager, #work .sw__overlay { display: none; } .sw-mobile-cards { display: grid; grid-template-columns: minmax(0, 1fr); } .sw-mobile-card { -webkit-tap-highlight-color: transparent; } .sw-mobile-card:active { transform: scale(.985); } .sw-mobile-card__media { position: relative; overflow: hidden; } .sw-mobile-card__media :is(img, video) { width: 100%; height: 100%; display: block; object-fit: cover; } .sw-mobile-card__copy { display: grid; } .sw-mobile-card__description { max-width: 42ch; } } @media (prefers-reduced-motion: reduce) and (max-width: 900px) { .sw-mobile-card { opacity: 1 !important; transform: none !important; } } /* Final footer baseline guard. Kept at the end of the cascade because this legacy stylesheet contains earlier footer annotation passes. */ .folio-footer__wordmark { --fm-inset-b: clamp(100px, 7cqw, 140px) !important; } @media (max-width: 900px) { .folio-footer__wordmark { --fm-inset-b: clamp(68px, 12cqw, 88px) !important; } } /* ===================================================================== SOHAN J. LOCKUP — FINAL SPACING AND FOOTER FIT ===================================================================== */ .folio-footer__wordmark { --fm-inset-b: clamp(80px, 7cqw, 124px) !important; } .folio-footer__word { font-size: min(calc((100cqw - (2 * var(--fm-inset-x))) / 5.19), 22rem) !important; letter-spacing: -.045em !important; } @media (max-width: 900px) { .folio-footer__wordmark { --fm-inset-b: clamp(68px, 12cqw, 88px) !important; } } /* ===================================================================== AUGUST 2026 ANNOTATION PASS — precise mobile ordering and polish ===================================================================== */ /* Footer wordmark: one crisp layer, equally inset from the three image edges. The former stacked masks intentionally blurred its lower half. */ .folio-footer__wordmark { --fm-inset-x: clamp(14px, 3cqw, 30px) !important; --fm-inset-b: clamp(14px, 3cqw, 30px) !important; } .folio-footer__word--base { opacity: 1 !important; filter: none !important; } .folio-footer__word--s1, .folio-footer__word--s2, .folio-footer__word--s3 { display: none !important; } /* A slightly taller, unmasked viewport preserves the rolling reel while preventing large mobile numerals from losing their top/bottom pixels. */ #expCounters .reel__col { height: var(--reel-cell, 1em) !important; margin-block: 0; -webkit-mask-image: none !important; mask-image: none !important; } /* Process indices use the same tight display tracking as the site type system instead of the browser's loose numeric spacing. */ #process .design-process__number { font-variant-numeric: tabular-nums; } /* Expertise ends cleanly and its mobile live cover sits between the title control and the panel containing description and tags. */ #expertise::after { display: none !important; } /* Work detail titles are typographic only and remain optically centred. */ #work .sw__ov-copy { align-items: center; text-align: center; } #work .sw__ov-title::before, #work .sw__ov-title > svg, #work .sw__ov-title > i { display: none !important; content: none !important; } /* FAQ height follows its content intrinsically; the icon rotation and answer movement share one easing curve for a single smooth gesture. */ #insights .accordion__body { will-change: grid-template-rows, opacity; transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-3) ease !important; } #insights .accordion__body > p { transition: transform var(--dur-3) var(--ease-out), padding-bottom var(--dur-3) var(--ease-out) !important; } #insights .accordion__icon { transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) ease !important; } #insights .accordion__item.is-open .accordion__icon { transform: rotate(45deg); } @media (max-width: 760px) { /* Logos are centred in the visual region above the fixed copy block. */ #contact #contactTitle { margin-bottom: 30px !important; } } /* ===================================================================== 14 · MOBILE HANDOFF GEOMETRY + PERSISTENT NATIVE HEADER The fixed hero-to-work handoff used an older 4:5 thumbnail stage. That made the first painted frame wider and shorter than the final 13:20 mobile case-study card, so the card visibly snapped after the handoff. The fixed and in-flow states now share the exact same geometry. Mobile also keeps one capsule header throughout the experience. Only its material and foreground colours respond to the surface beneath it; dimensions and control placement never change during a theme switch. ===================================================================== */ @media (max-width: 600px) { html.is-hero-work-handoff #swRoot { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important; padding: var(--header-content-clearance) 20px 52px !important; overflow: hidden !important; background: var(--surface-page) !important; } html.is-hero-work-handoff #work .sw__head { display: block !important; } html.is-hero-work-handoff #work .sw__support { max-width: 29ch !important; margin-top: 28px !important; } html.is-hero-work-handoff #work .sw__main { display: block !important; min-height: 0 !important; padding: 42px 0 0 !important; } html.is-hero-work-handoff #work .sw__center { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; } html.is-hero-work-handoff #work .sw__thumb { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 13 / 20 !important; border-radius: clamp(20px, 6vw, 28px) !important; } #nav, #nav.nav--on-dark, #nav:not(.nav--on-dark) { inset: 12px 12px auto !important; backdrop-filter: blur(20px) saturate(1.3) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3) !important; } #nav:not(.nav--on-dark) { border-color: var(--line) !important; background: var(--surface-glass) !important; box-shadow: var(--shadow-soft) !important; } #nav::before { display: none !important; } #nav .nav__brand { width: 42px; } #nav .theme-toggle--mobile { margin-left: auto; border: 0 !important; background: color-mix(in srgb, currentColor 10%, transparent) !important; } #nav .nav__toggle { width: 46px; height: 46px; } #nav .nav__toggle svg { stroke-width: 1.7; } } @media (max-width: 420px) { html.is-hero-work-handoff #swRoot { padding-inline: 16px !important; } html.is-hero-work-handoff #work .sw__main { padding-top: 36px !important; } } /* Mobile Work filters stay visible inside the pinned stage. The default four-column row fits current phone widths; genuinely narrow screens use a complete 2x2 grid instead of horizontal scrolling or clipped labels. */ @media (max-width: 900px) { #work .sw__pills, html.is-hero-work-handoff #work .sw__pills { position: static !important; margin: 14px 0 0 !important; } } /* Final cascade guard: the pinned mobile stage must retain the same grid while the hero handoff class is present. This intentionally follows the earlier geometry migration rules so there is no intermediate block-flow frame before sticky ownership begins. */ @media (max-width: 900px) { html.is-hero-work-handoff #swRoot { position: fixed !important; inset: 0 !important; display: grid !important; height: 100svh !important; min-height: 100svh !important; grid-template-rows: auto minmax(0, 1fr) auto !important; padding: clamp(82px, 10svh, 98px) 20px 18px !important; } html.is-hero-work-handoff #work .sw__support { max-width: 31ch !important; margin-top: 16px !important; } html.is-hero-work-handoff #work .sw__main { height: 100% !important; padding-top: 24px !important; } html.is-hero-work-handoff #work .sw__center { display: grid !important; height: 100% !important; place-items: center !important; } html.is-hero-work-handoff #work .sw__thumb { width: 100% !important; height: 100% !important; max-height: 100% !important; aspect-ratio: auto !important; } } @media (max-width: 420px) { html.is-hero-work-handoff #swRoot { padding: clamp(78px, 9.5svh, 88px) 16px 14px !important; } html.is-hero-work-handoff #work .sw__main { padding-top: var(--gutter) !important; } } /* ===================================================================== MOBILE CONTROL CONTRAST Icon artwork inherits the semantic colour of its control. This defeats the historical "hamburger always white" rule while preserving white icons on genuinely dark media/overlay controls. The parent surface now owns contrast in light, dark, scrolled and menu-open states. ===================================================================== */ @media (max-width: 1024px) { #nav .nav__toggle svg { color: inherit; stroke: currentColor; } #nav:not(.nav--on-dark) .nav__toggle, #nav:not(.nav--on-dark) .theme-toggle--mobile { color: var(--text-primary) !important; } :is( #nav .theme-toggle--mobile, #work .sw__mobile-prev, #work .sw__mobile-next, .pg-aerial__fullscreen, .pg-preview__close, .pg-preview__nav, .cs__close, .to-top ) :is(svg, .lucide) { stroke: currentColor; } #work .sw__mobile-next { color: var(--text-on-active); } } /* Static and hover-driven components: the hint is only useful while the pointer is actually on them, so it is withdrawn by default and granted on hover. `.tool` chips alone accounted for 22 permanent layers. */ :is(.toolkit-tile, .capability-card-v2, .partnership-card, .value-card, .exp__row, .accordion__item, .design-process__step, .design-process__number, .design-process__copy, .tool, .flow__stage, .hero__slice-inner) { will-change: auto !important; } @media (hover: hover) and (pointer: fine) { :is(.toolkit-tile, .capability-card-v2, .partnership-card, .value-card, .tool):hover { will-change: transform !important; } } /* The hero story's per-character spans are hinted permanently in codex-final-pass-v2.css. They only animate inside the hero, so once the handoff to Work has happened the layers are pure overhead. */ html.is-work-stage-live :is(.hero-story__char, .hero-story__word, .nav-reveal__char) { will-change: auto !important; } /* ===================================================================== MOBILE ANNOTATION PASS — compact controls, collision-free grids ===================================================================== */ /* Intrinsic grid-height interpolation keeps FAQ answers smooth regardless of their copy length; fixed max-height values snapped on shorter answers. */ #insights .accordion__body { display: grid !important; grid-template-rows: 0fr; max-height: none !important; opacity: 0; overflow: hidden; transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2) ease !important; } #insights .accordion__body > p { min-height: 0; overflow: hidden; transform: translateY(-6px); transition: transform var(--dur-3) var(--ease-out), padding-bottom var(--dur-3) var(--ease-out) !important; } #insights .accordion__item.is-open .accordion__body { grid-template-rows: 1fr; opacity: 1; } #insights .accordion__item.is-open .accordion__body > p { /* --gutter is a page-level 4vw measure (~53px here) — far more air than a two-line answer needs, and it read as dead space before the next question once the row padding came down. */ padding-bottom: clamp(14px, 1.8vh, 22px) !important; transform: translateY(0); } @media (max-width: 760px) { /* Process artwork is uniformly reduced so no alpha-video frame clips. */ #process .design-process__visual { display: grid; height: 190px; place-items: center; } #process .design-process__visual video { width: 84% !important; height: 84% !important; margin: auto !important; object-fit: contain !important; object-position: center !important; transform: scale(1) !important; } /* Explicit automatic rows prevent the full-width AI tile from sharing a stale fixed row with the two tiles below it. */ #experience .counter__key { max-width: 20ch !important; white-space: normal; font-family: var(--font-sans, Geist, sans-serif); letter-spacing: -.01em !important; } } @media (max-width: 600px) { #nav, #nav.nav--on-dark, #nav:not(.nav--on-dark) { padding: 7px 8px 7px 14px !important; } #nav .nav__brand { width: 34px; } #nav .theme-toggle--mobile { margin-right: 4px !important; } #nav .nav__toggle { width: 40px; height: 40px; } #nav .nav__toggle svg { width: 24px !important; height: 24px !important; } } /* Final cascade guard for the August annotation pass. This file contains several historical responsive passes; these rules intentionally sit last so the current component decisions cannot be undone by an older pass. */ .folio-footer__wordmark { --fm-inset-x: clamp(14px, 3cqw, 30px) !important; /* Was clamp(4px, 0.6cqw, 10px) — near-zero, so FOLIO's baseline sat right against the footer image's bottom edge with no breathing room. */ --fm-inset-b: clamp(16px, 2.4cqw, 40px) !important; } .folio-footer__word--base { opacity: 1 !important; filter: none !important; } .folio-footer__word--s1, .folio-footer__word--s2, .folio-footer__word--s3 { display: none !important; } #expCounters .reel__col { height: var(--reel-cell, 1em) !important; margin-block: 0; -webkit-mask-image: none !important; mask-image: none !important; } #process .design-process__number { font-variant-numeric: tabular-nums; } #expertise::after { display: none !important; } #work .sw__ov-copy { align-items: center; text-align: center; } #work .sw__ov-title::before, #work .sw__ov-title > svg, #work .sw__ov-title > i { display: none !important; content: none !important; } #insights .accordion__body { will-change: grid-template-rows, opacity; transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-3) ease !important; } #insights .accordion__body > p { transition: transform var(--dur-3) var(--ease-out), padding-bottom var(--dur-3) var(--ease-out) !important; } #insights .accordion__icon { transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) ease !important; } #insights .accordion__item.is-open .accordion__icon { transform: rotate(45deg); } @media (max-width: 760px) { #contact #contactTitle { margin-bottom: 30px !important; } } /* ===================================================================== AUGUST 2026 MOTION + FOOTER DETAIL PASS ===================================================================== */ /* CTA hover communicates through a quiet dissolve only—never geometry. */ .folio-footer__button, .folio-footer__button:hover, .folio-footer__button:focus-visible { transform: none !important; translate: 0 0 !important; } .folio-footer__button { transition: color var(--dur-3) var(--premium-ease), background-color var(--dur-3) var(--premium-ease), border-color var(--dur-3) var(--premium-ease), opacity var(--dur-3) ease !important; } /* ===================================================================== Availability badge — pill shape + live dot The site's control radius is square (--radius-control: 0px), which is right for buttons but reads as a hard chip on a status label. These badges are pills wherever they appear, and their dot pulses so the "available" state looks live rather than printed. ===================================================================== */ /* tokens.css runs an id-scoped square-radius sweep over everything inside the page sections, with !important — so the pill has to out-specify it (an id plus repeated attribute selectors), the same trick the FAQ icon uses in css/playground-all.css. */ :root body #contact .folio-footer__availability[class][class], .folio-footer__availability { border-radius: 999px; } :root body #contact .folio-footer__availability[class][class] > i { border-radius: 50%; } @keyframes availability-pulse { 0% { box-shadow: 0 0 0 0 rgba(77,206,22,.45); } 70% { box-shadow: 0 0 0 9px rgba(77,206,22,0); } 100% { box-shadow: 0 0 0 0 rgba(77,206,22,0); } } .folio-footer__availability i { animation: availability-pulse 2.1s var(--ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { .folio-footer__availability i { animation: none; } } /* Dark frosted controls remain legible over both light and dark media. */ .folio-footer__availability, :root[data-theme="dark"] .folio-footer__availability { color: rgba(255,255,255,.94); border-color: rgba(255,255,255,.22); background: rgba(13,16,17,.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 42px rgba(0,0,0,.24); -webkit-backdrop-filter: blur(18px) saturate(1.18) !important; backdrop-filter: blur(18px) saturate(1.18) !important; } .to-top, .to-top:hover, .to-top:focus-visible { color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(13,16,17,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 14px 38px rgba(0,0,0,.28) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; backdrop-filter: blur(18px) saturate(1.15) !important; } @media (max-width: 760px) { /* A fixed three-row composition centres every transparent process clip between its large index and copy, independent of the asset bounds. */ #process .design-process__step { align-items: stretch; } #process .design-process__visual { place-self: center; display: grid; width: min(100%, 300px); height: 244px; aspect-ratio: auto !important; place-items: center; } #process .design-process__visual video { width: 100% !important; height: 100% !important; max-width: 300px !important; max-height: 244px !important; margin: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* Keep the odometer glyphs intact at the right edge without loosening the site's display tracking. */ #expCounters .counter__value { box-sizing: content-box; } #expCounters .reel, #expCounters .reel__fixed { overflow: visible !important; } /* Footer legal and email become a readable, centred two-line epilogue. */ #contact .folio-footer__base { grid-template-columns: 1fr !important; justify-items: center; gap: 8px !important; padding-top: var(--gutter); line-height: 1.45; text-align: center; } #contact .folio-footer__base > span, #contact .folio-footer__base > a[href^="mailto:"] { justify-self: center; } } /* ===================================================================== 10 · PLAYGROUND — stop the tab row from shifting on selection #perspective is display:grid with three `auto` row tracks inside a fixed min-height:100svh box. Default align-content:stretch distributes that fixed space across all three tracks proportionally to their content size — so switching panels (whose stage row has a different intrinsic height) reflows rows 1 and 2 as well, even though the title and tabs never changed. Pinning content to the top stops the tab row from moving when only the stage panel changes. ===================================================================== */ #perspective { align-content: start !important; } /* Playground keeps the same visual composition while scroll advances its four authored tabs. The inner stage pins for the story; the outer section provides only the measured travel, then releases directly into Trusted Partnerships. Small screens retain the existing touch-first tab layout. */ #perspective .pg-gallery__sticky { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(260px, 32%); grid-template-rows: auto auto minmax(0, 1fr); width: 100%; min-width: 0; } @media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) { #perspective { /* 340svh gives each of the four tabs 50-65vh of scroll. At 265svh the middle tabs flashed past in ~200px, so one trackpad flick skipped two. */ height: 340svh !important; min-height: 340svh !important; align-content: stretch !important; } #perspective .pg-gallery__sticky { position: sticky; top: 0; grid-template-rows: auto auto minmax(0, 1fr); align-content: start; width: 100%; height: 100svh; min-height: 100svh; padding-top: clamp(88px, 10vh, 116px); padding-bottom: clamp(38px, 5vh, 58px); overflow: hidden; } #perspective .pg-gallery__stage { height: auto !important; min-height: 0; } } @media (max-width: 900px) { #perspective .pg-gallery__sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); } } @media (max-width: 720px) { } /* ===================================================================== 11 · HERO -> WORK HANDOFF — no rounded corners mid-transition .sw__thumb's resting mobile card is intentionally rounded (border-radius: clamp(20px,6vw,28px), set at several responsive breakpoints above). Blown up to near-fullscreen size during the hero handoff, that same rounding read as a large, unexplained rounded rectangle floating over the dissolving hero for the ~1s the crossfade takes. Sits last in the file so it beats every earlier breakpoint-specific radius while the handoff is active; CSS hands the corners back the instant is-hero-work-handoff is removed and the card settles into its normal grid position. ===================================================================== */ html.is-hero-work-handoff #work .sw__thumb { /* The handoff now uses the exact resting card geometry. */ border-radius: 0 !important; } @media (max-width: 900px) { html.is-hero-work-handoff #work .sw__thumb { border-radius: clamp(20px, 6vw, 28px) !important; } } /* ===================================================================== 12 · HERO PRELOAD GATE The same monogram-to-portrait choreography now opens every viewport. ===================================================================== */ #pageLoader { align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; will-change: opacity; } /* Belt-and-braces with the `hidden` attribute in the markup: nothing, including the mobile rule below, can reveal the loader until the inline script deliberately clears `hidden`. */ #pageLoader[hidden] { display: none; } .page-loader__mark { position: relative; width: clamp(37.12px, 3.84vw, 58.88px); transform-origin: 50% 50%; will-change: transform, opacity; } .page-loader__layer { display: block; width: 100%; } .page-loader__base { fill: #545454; } /* Reveal window: the script clips it back from the top as real buffered bytes arrive, so the white mark fills the grey one bottom-up. The inner svg is full size and bottom-pinned, so this uncovers it rather than squashing it. clip-path is applied to THIS wrapper, never to the itself: clip-path on an svg element does not interpolate here (measured frozen near inset(100%) whether fed a calc()+custom-property or a plain inset()), whereas on a regular element it tracks exactly. Clipping also keeps this off the layout path — an earlier version animated the wrapper's height, which worked but thrashed layout. */ .page-loader__fillclip { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-2) linear; } .page-loader__fill { position: absolute; left: 0; bottom: 0; fill: #fff; } @media (max-width: 900px) { .page-loader__mark { width: clamp(33.28px, 8.96vw, 43.52px); } } @media (prefers-reduced-motion: reduce) { .page-loader__fillclip { transition: none; } } /* Mobile identity lockup: location is desktop-only, while the role and name remain one compact unit above the fold. This sits after the older responsive title rules so no generated duplicate label reserves space. */ @media (max-width: 900px) { #hero .hero__titles { gap: 0 !important; margin-bottom: 4px !important; } #hero .hero__titles > .hero__title-line:first-child { display: none !important; } #hero .hero__titles > .hero__title-line:last-child .hero__title-text { font-size: 1rem !important; line-height: 1.15 !important; } } /* ===================================================================== APPROACH ICON SYSTEM Animated line icons replace codec-dependent transparent videos. The active card restarts its own concise motion; hover/focus can replay it. ===================================================================== */ #process .design-process__visual { display: grid; place-items: center; overflow: visible !important; } /* Launch - plane darts forward off its resting position, fold-line draws in behind it, then it settles back for the next replay. */ @keyframes process-needle-settle { 0%{transform:rotate(0)} 30%{transform:rotate(48deg)} 55%{transform:rotate(-26deg)} 78%{transform:rotate(10deg)} 100%{transform:rotate(0)} } @keyframes process-layer-shift { 0%,100%{transform:translateY(0);opacity:.7} 45%{transform:translateY(var(--layer-shift, 0));opacity:1} } @keyframes process-draw { from{stroke-dashoffset:70;opacity:.15} to{stroke-dashoffset:0;opacity:1} } @keyframes process-bubble-rise { 0%{opacity:0;transform:translateY(0) scale(.4)} 40%{opacity:1;transform:translateY(-2px) scale(1)} 100%{opacity:0;transform:translateY(-6px) scale(.8)} } @keyframes process-plane-launch { 0%,100%{transform:translate(0,0);opacity:1} 55%{transform:translate(4px,-4px);opacity:.55} } /* Final state ownership: the hero uses a completely bare header; the frosted capsule only materialises after the hero has left the header band, and dissolves again when the user returns. This final block also beats the historical mobile rule that painted the capsule constantly. */ #nav.nav--on-dark, #nav.nav--on-dark.nav--glass, #nav.nav--on-dark.nav--post-hero { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out) !important; } #nav:not(.nav--on-dark), #nav:not(.nav--on-dark).nav--glass, #nav:not(.nav--on-dark).nav--post-hero { background: var(--surface-glass) !important; border: 0 !important; box-shadow: var(--shadow-soft) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3) !important; backdrop-filter: blur(20px) saturate(1.3) !important; } /* Give the footer wordmark a true optical baseline inset. Large display glyphs extend below their line box, so this is intentionally roomier than ordinary text padding. */ .folio-footer__wordmark { --fm-inset-b: clamp(72px, 6.5cqw, 112px) !important; } @media (max-width: 900px) { .folio-footer__wordmark { --fm-inset-b: clamp(52px, 11cqw, 74px) !important; } } /* Absolute final footer baseline guard: this must follow every historical footer annotation block in the stylesheet. */ .folio-footer__wordmark { --fm-inset-b: clamp(10px, 1.25cqw, 22px) !important; } @media (max-width: 900px) { .folio-footer__wordmark { --fm-inset-b: clamp(8px, 2.4cqw, 14px) !important; } } /* ===================================================================== MOBILE — simplified scroll architecture The hero's ~360-400svh height (annotation-pass-v3.css, !important) and the .hero__sticky position:sticky pin exist to give GSAP's storyTimeline scrub something to scroll through on desktop. js/main.js already skips that scrub entirely on mobile (max-width: 900px) — this is the matching CSS half: without it, the empty multi-screen-tall track would still be there even though nothing scrubs through it anymore. #work's own mobile override two files over (codex-final-pass-v2.css) already does the same thing for the Work carousel — position: relative, not static, so position: absolute children (.hero__frames, the video/fallback image) keep a containing block and don't fall out of layout. scroll-snap-type: y PROXIMITY, not mandatory — it settles on a section boundary once a scroll gesture ends near one, but never fights a gesture mid-flight or traps keyboard/assistive scrolling the way mandatory is known to. Lenis isn't in the way here: it only intercepts wheel input (smoothWheel: true, no syncTouch), so touch scrolling on this site has always been native. ===================================== */ @media (max-width: 900px) { /* Reverted the previous "stack everything statically" restructuring — it read as broken/flat rather than simplified. Back to the original sticky + absolute-overlay crossfade pattern (.hero__sticky stays position: sticky, .hero__story/.hero-story__panel stay position: absolute; inset: 0, all untouched, unlike the last pass), just with a much shorter track: 300svh (portrait hold+fade, text block 1, text block 2) instead of desktop's ~360-400svh. js/main.js drives the crossfade with a scrub timeline scoped to opacity/scale/y only — no filter: blur(), no per-word splitting — which is what actually caused the jank complained about earlier, not scroll-linked opacity itself. */ /* Work overlaps the final hero viewport and rises over it as a real layer. Desktop uses a fixed handoff coordinator; mobile gets the same visual replacement through normal document movement, which stays reliable as Safari's browser chrome expands and collapses. */ /* Native touch momentum owns mobile scrolling. Proximity snapping could jump across an entire hero chapter when Safari collapsed its address bar, skipping the Motion transition and exposing a blank sticky frame. */ /* Use the same real, split title characters as desktop. An older mobile presentation hid them and painted duplicate ::after labels, so Motion was animating invisible content while the replacement text stayed still. */ #hero .hero__titles .hero__title-text { display: inline-flex !important; flex-wrap: wrap; justify-content: center; align-items: baseline; } #hero .hero__titles > span::after { content: none !important; display: none !important; } #hero .hero__titles > span:first-child .hero__title-text { color: #fff; font-size: clamp(1.5rem, 7.2vw, 1.85rem); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; } #hero .hero__titles > span:last-child .hero__title-text { color: rgba(255, 255, 255, .46); font-size: clamp(.78rem, 3.8vw, .94rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; } #hero .hero__title-char { display: inline-block; backface-visibility: hidden; } } /* Mobile navigation uses one shared control box for the mark, theme button and hamburger. Their glyphs differ optically, but their hit areas now sit on the exact same vertical axis at every mobile breakpoint. */ @media (max-width: 900px) { #nav { --mobile-nav-control: 46px; align-items: center; } #nav .nav__brand { flex: 0 0 var(--mobile-nav-control) !important; width: var(--mobile-nav-control); height: var(--mobile-nav-control) !important; align-self: center; } #nav .nav__brand svg { width: 42px; height: 27px; } #nav .theme-toggle--mobile, #nav .nav__toggle { flex-basis: var(--mobile-nav-control); width: var(--mobile-nav-control); height: var(--mobile-nav-control); min-width: var(--mobile-nav-control) !important; min-height: var(--mobile-nav-control) !important; align-self: center; } #nav .nav__toggle { line-height: 0; } } @media (max-width: 600px) { #nav { --mobile-nav-control: 42px; } #nav .nav__brand svg { width: 34px !important; height: 22px !important; } } /* ===== end refinements.css ===== */ /* ===== begin css/expertise.css ===== */ /* ===================================================================== EXPERTISE — scroll-pinned discipline explorer (ported into the site) The standalone preview carried its own warm-Swiss palette and a Zalando display face. This version drops all of that and reads only from tokens.css, so the section inherits the site's surfaces, ink ramp, brand accent, radii, easing and type scale. Nothing here hard-codes a colour that a token already covers. Type follows the other section heads: Geist at --codex-section-title, weight 500, -0.055em — the same treatment as "Modern Product Stack" and "Playground", rather than the spec's 11vw expanded display. ===================================================================== */ #expertise { position: relative; background: var(--surface-page); /* The .section class contributes its own vertical padding, which pushed the pinned stage 94px down inside the section — so a stage that is exactly 100svh tall overflowed the viewport by that much. The stage owns its own top/bottom padding, so the section's is zeroed rather than double-counted. */ padding-block: 0 !important; } /* The pinned element — exactly one viewport tall. Content is top-aligned and the body then STRETCHES to fill what is left, rather than the whole block being centred. Centring a 635px composition inside a 933px viewport left ~149px of dead space above the title and the same below, which read as far looser than every other section. Filling instead means the section is as dense as its neighbours and the title sits just under the header. */ .xp__stage { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; /* Slightly more top clearance than the other sections (they sit their h2 ~85px down) and that is deliberate: those titles only pass under the floating header for a moment while scrolling, whereas this section is PINNED, so its title would sit behind the capsule the whole time. ~103px at a 933px viewport clears the header's bottom edge (80px) with room to breathe. */ padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(2rem, 5vh, 3.5rem); } /* ---- Head: mirrors .toolkit__head / .client-value__head -------------- */ .xp__head { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: start; } .xp__title { /* --fs-section-title, not --codex-section-title: measured against the live page, every other section head ("Modern Product Stack", "Playground", "Trusted Partnerships") resolves to 48px via ui-consistency's cap, and the codex scale would have run this one ~7px larger than its neighbours. */ font-size: var(--fs-section-title); } .xp__lede { justify-self: end; max-width: 34ch; } /* ---- Accordion ------------------------------------------------------ One list of six. The active row expands in place; the others stay put as plain names. Every panel is given the SAME reserved height (set in JS from the tallest content), so the list never changes overall size and rows do not jump as the selection moves. Deliberately absent, to match the reference: step number, 01-06 rail numbers, progress hairline, travelling marker. -------------------------------------------------------------------- */ .xp__item-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; font-family: var(--font-display); font-size: clamp(1.25rem, 1.55vw, 1.7rem); font-weight: var(--fw-medium); letter-spacing: var(--track-heading); line-height: 1.7; color: var(--text-tertiary); text-align: left; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); } .xp__item-btn:hover { color: var(--text-secondary); } .xp__item-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; } /* Height is animated in JS; overflow hides the collapsed content. */ .xp__panel { overflow: hidden; } /* Tags match .capability-card-v2__tags span. */ .xp__tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; } .xp__tags li { white-space: nowrap; } /* ---- Cover ----------------------------------------------------------- */ .xp__cover { position: relative; background: var(--surface-media); align-self: stretch; min-height: 0; /* No aspect-ratio while pinned: the row supplies the height and object-fit:cover crops. A fixed ratio here capped the body at 542px and reintroduced the slack. The stacked breakpoint restores one. */ } /* Exactly two layers are ever composited; they swap roles each switch. Each layer is a triptych — three panels tiling the frame at the fixed 394 : 584 : 366 ratio the comps were cut at (flex-grow is set inline from PANEL_RATIO in js/expertise.js). Identical proportions across disciplines keep both seams stationary through a switch. */ .xp__layer { position: absolute; inset: 0; display: flex; align-items: stretch; } .xp__panel { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; /* Panels animate their own clip-path and transform on a switch; keeping them on their own layer stops the stagger repainting its neighbours. */ will-change: clip-path, transform, opacity; transform: translateZ(0); } .xp__layer img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Travels with the clip edge during the wipe. */ .xp__wipe { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); opacity: 0; pointer-events: none; } /* Below the pinned desktop layout the cover is a portrait/landscape card inside an accordion, and a three-across triptych there would reduce each panel to a sliver. The wide centre panel carries the topic on its own; the flanking two are dropped rather than squeezed. */ @media (max-width: 1024px) { .xp__panel:first-child, .xp__panel:last-child { display: none; } .xp__panel { flex-grow: 1 !important; } } /* ===================================================================== Responsive <=1024px unpinned single column (matches the site's nav breakpoint) <=600px index rail becomes a snapping chip row ===================================================================== */ @media (max-width: 1024px) { .xp__head { grid-template-columns: 1fr; } .xp__lede { display: none; } /* The cover is moved by JS into the active accordion item after its panel. */ .xp__item-btn { line-height: 1.45; } } /* ===================================================================== Reduced motion — no pin, no split, no wipe. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .xp__stage { min-height: 0; } .xp__wipe { display: none; } .xp__item-btn { transition: none; } } /* ===== end css/expertise.css ===== */ /* ===== begin css/mobile-linear.css ===== */ /* Mobile hero + linear Work ownership. This file is deliberately last in the cascade so the rebuilt phone experience cannot inherit old sticky story or hero-to-Work overlap patches. Desktop is intentionally untouched. */ .sw-mobile-cards { display: none; } @media (max-width: 900px) { :root { --mobile-section-space: clamp(60px, 15vw, 72px); } .portfolio-cursor { display: none; } #hero, .hero { /* The film is one stable viewport. Story copy no longer lives in this sticky region; it has normal-flow chapters immediately below. */ height: 100svh !important; } /* A separate opaque layer owns the final story-to-Work handoff. Keeping this out of the frosted background avoids `!important` cascade fights and guarantees that no portrait/frame can bleed through while Work rises into view. */ #work.sw { height: auto; margin-top: 0; opacity: 1 !important; transform: none !important; overflow: visible; background: var(--surface, #fafafa); z-index: 6 !important; } #work .sw__inner { position: relative; display: block; height: auto; min-height: 0; padding: 76px 20px 104px; overflow: visible; } #work .sw__head { gap: 24px; } #work .sw__pills { margin-top: 2px; } #work .sw__main, #work .sw__mobile-nav, #work .sw__pager, #work .sw__overlay { display: none; } .sw-mobile-cards { display: grid; grid-template-columns: minmax(0, 1fr); } .sw-mobile-card { position: relative; min-height: 0; -webkit-tap-highlight-color: transparent; } .sw-mobile-card:active { transform: scale(.985); } .sw-mobile-card__media { position: relative; overflow: hidden; } .sw-mobile-card__media :is(img, video) { width: 100%; height: 100%; display: block; object-fit: cover; } .sw-mobile-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(10, 11, 13, .62)); } .sw-mobile-card__copy { z-index: 2; display: grid; } .sw-mobile-card__copy::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient( to bottom, rgba(18, 19, 22, .12) 0%, rgba(18, 19, 22, .62) 34%, rgba(18, 19, 22, .86) 66%, rgba(18, 19, 22, .94) 100% ); -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.38) 20%, #000 42%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.38) 20%, #000 42%); } .sw-mobile-card__description { max-width: 42ch; } } @media (prefers-reduced-motion: reduce) and (max-width: 900px) { .sw-mobile-card { opacity: 1 !important; transform: none !important; } } /* August mobile annotation pass. Kept in this last-loaded ownership layer so none of the legacy responsive experiments can override it. */ @media (max-width: 900px) { /* Real touch screens have no pointer. Fine-pointer phone emulation does, so restore the native cursor instead of leaving an invisible custom one. */ html.has-portfolio-cursor, html.has-portfolio-cursor body, html.has-portfolio-cursor body * { cursor: default !important; } html.has-portfolio-cursor :is(a, button, [role="button"]) { cursor: pointer !important; } .portfolio-cursor { display: none; } /* Work cards: the media and frosted copy are one continuous, fully tappable surface. The mask feathers only the top of the frost. */ .sw-mobile-card__copy::before { border-radius: 0 0 22px 22px !important; background: linear-gradient(to bottom, rgba(12,14,18,0) 0%, rgba(12,14,18,.62) 25%, rgba(12,14,18,.9) 50%, rgba(12,14,18,.96) 100%) !important; -webkit-backdrop-filter: blur(28px) saturate(1.18) !important; backdrop-filter: blur(28px) saturate(1.18) !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 22%, #000 43%) !important; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 22%, #000 43%) !important; } /* The two narrative chapters and Work now read as one continuous mobile surface instead of changing black values at the handoff. Scoped to .is-handoff only — the unscoped .mobile-hero-narrative/__stage selectors previously here painted this light surface color over the narrative's negative-margin overlap with #hero at rest (before any scroll), hiding the hero name/designation behind an opaque white patch in light theme. */ #work.sw { background: var(--surface, #fafafa); } /* One consistent vertical rhythm between normal-flow mobile sections. Sticky stories retain their own viewport tracks, while their content insets use the same shared value at the boundary. */ #work .sw__inner, #process .design-process__stage, #about-me, #client-value, #toolkit, #perspective, #partnerships, #experience, #insights, #contact { padding-top: var(--mobile-section-space) !important; padding-bottom: var(--mobile-section-space) !important; } /* Scroll-owned Expertise story. */ #expertise.is-mobile-scroll-story { position: relative; min-height: 100svh; padding: 0; } #expertise.is-mobile-scroll-story .xp__stage { min-height: 100svh; padding: max(72px, env(safe-area-inset-top)) 20px 30px; gap: 14px; overflow: hidden; background: var(--surface, #fafafa); } #expertise.is-mobile-scroll-story .xp__head { gap: 0; } #expertise.is-mobile-scroll-story .xp__title { /* The shared section-title token, not a 12vw ramp of its own. That ramp resolved to 45px on a 375px phone while every other section heading sat at 36px, so Services read a size larger than the rest. */ font-size: var(--fs-section-title) !important; } #expertise.is-mobile-scroll-story .xp__item-btn { padding-block: 3px !important; font-size: 1.05rem !important; line-height: 1.25 !important; } #expertise.is-mobile-scroll-story .xp__tags { gap: 5px; margin-top: 9px; } #expertise.is-mobile-scroll-story .xp__tags li { padding: 6px 9px; } /* Compact Approach cards and keep every index anchored to the top-left. */ #process .design-process__step, #process .design-process__step.is-active { height: 410px; grid-template-rows: auto 154px minmax(0, 1fr) !important; } #process .design-process__number { top: 24px; left: 24px; z-index: 2; } #process .design-process__visual { height: 154px; } #process .design-process__copy { padding: 0; transform: none !important; } /* About lede annotation. */ :root[data-theme] body #about-me .about-v2__lede, body #about-me .about-v2__lede { color: #fff !important; font-size: clamp(1.2rem, 5.3vw, 1.45rem) !important; line-height: 1.28 !important; } /* Aerial media stays user-initiated on phones. Existing transparent trigger becomes a clear frosted play control. */ #perspective .pg-panel--aerial .pg-aerial__preview-trigger { z-index: 5; inset: 50% auto auto 50% !important; display: grid; width: 58px; height: 58px; place-items: center; background: rgba(12,14,16,.62) !important; -webkit-backdrop-filter: blur(18px) saturate(1.25) !important; backdrop-filter: blur(18px) saturate(1.25) !important; transform: translate(-50%, -50%) !important; } #perspective .pg-panel--aerial .pg-aerial__preview-trigger::before { content: ""; width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; } /* Mobile Music cards follow the supplied compact player composition: title top-left, visualizer/play control centered, and metadata split across the bottom edge. Desktop retains its existing centered layout. */ #perspective .pg-panel--sound .pg-track__number { display: none; } #perspective .pg-panel--sound .pg-track { width: 100%; aspect-ratio: 4 / 3; min-height: 300px; transform: none !important; } #perspective .pg-panel--sound .pg-track__play { top: 50%; left: 50%; width: clamp(76px, 20vw, 88px); height: clamp(76px, 20vw, 88px); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; backdrop-filter: blur(18px) saturate(1.15) !important; transform: translate(-50%, -50%) !important; } #perspective .pg-panel--sound .pg-track__play > svg { width: 27px; height: 27px; stroke-width: 2; } #perspective .pg-panel--sound .pg-track__meta { inset: 0 !important; width: auto; text-align: left; } #perspective .pg-panel--sound .pg-track__meta strong { position: absolute; top: clamp(20px, 6vw, 28px); right: clamp(20px, 6vw, 28px); left: clamp(20px, 6vw, 28px); overflow: hidden; font-weight: 600; line-height: 1.08; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; } :root body #perspective .pg-panel--sound .pg-track__meta small[class], :root body #perspective .pg-panel--sound .pg-track__meta small { position: absolute; right: clamp(20px, 6vw, 28px); bottom: clamp(20px, 5.4vw, 27px); left: clamp(20px, 6vw, 28px); justify-content: space-between; flex-direction: row !important; gap: 16px !important; margin: 0; color: rgba(255,255,255,.88) !important; font-size: clamp(.95rem, 4.3vw, 1.1rem); line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; } :root body #perspective .pg-panel--sound .pg-track__genre[class], :root body #perspective .pg-panel--sound .pg-track__genre { overflow: hidden; text-overflow: ellipsis; } :root body #perspective .pg-panel--sound .pg-track__duration[class], :root body #perspective .pg-panel--sound .pg-track__duration { flex: 0 0 auto; margin-left: auto; color: #fff; } #perspective .pg-panel--sound .pg-track__canvas { inset: 0 !important; width: 100%; height: 100%; opacity: .34 !important; -webkit-mask-image: radial-gradient(circle at center, #000 28%, rgba(0,0,0,.78) 52%, transparent 78%); mask-image: radial-gradient(circle at center, #000 28%, rgba(0,0,0,.78) 52%, transparent 78%); transition: opacity var(--dur-3) ease !important; } #perspective .pg-panel--sound .pg-track.is-playing .pg-track__canvas { opacity: .96 !important; } /* Odometer glyphs need a little optical breathing room on both sides. */ #expCounters .counter__value { display: inline-flex; max-width: none !important; padding-inline: .08em .28em !important; margin-inline: -.08em 0; } } /* ===== end css/mobile-linear.css ===== */ /* ===== begin css/home-dark-surfaces.css ===== */ /* Homepage dark-mode canvas ------------------------------------------------------------------ Keep every post-hero section on one neutral charcoal plane. Component cards and media retain their own elevated surfaces; only the page shells, sticky stages and tab-panel beds are unified here. This file is loaded last so older section-specific backgrounds cannot reintroduce seams. */ :root[data-theme="dark"] { --home-section-canvas: var(--surface-page, #0f0f0f); } :root[data-theme="dark"] body > main, :root[data-theme="dark"] body > main > :is(section:not(#hero), footer), :root[data-theme="dark"] body :is( #mobileHeroNarrative .mobile-hero-narrative__stage, #work .sw__inner, #expertise .xp__stage, #process .design-process__stage, #perspective .pg-gallery__sticky, #perspective .pg-gallery__content, #perspective .pg-panel ) { background-color: var(--home-section-canvas) !important; } /* Avoid a thin contrasting strip where consecutive full-width sections meet during sticky/scroll handoffs. */ :root[data-theme="dark"] body > main > :is(section:not(#hero), footer)::before, :root[data-theme="dark"] body > main > :is(section:not(#hero), footer)::after { border-color: var(--line-soft, rgba(255, 255, 255, .06)); } /* ===== end css/home-dark-surfaces.css ===== */ /* --------------------------------------------------------------------- [hidden] must outrank the id-scoped display rules above (`#about-me { display: grid !important }` and friends), so it needs id specificity of its own. Last rule in the bundle, deliberately. --------------------------------------------------------------------- */ #about[hidden], #about-me[hidden], #services[hidden], #stack[hidden], #testimonials[hidden] { display: none !important; } /* --------------------------------------------------------------------- Figma header (516:285-288) sets the nav item for the section in view at full opacity and the rest at 50%. The .nav--on-dark contrast rules above force a flat colour with !important, so the dimmed state needs to out-specify them rather than sit before them. --------------------------------------------------------------------- */ #nav.nav--on-dark .nav__links a:not(.nav__talk):not([aria-current]):not(:hover):not(:focus-visible) { color: rgba(255, 255, 255, 0.5) !important; } #nav:not(.nav--on-dark) .nav__links a:not(.nav__talk):not([aria-current]):not(:hover):not(:focus-visible) { color: color-mix(in srgb, var(--text-primary) 50%, transparent) !important; } /* --------------------------------------------------------------------- Work — centered editorial layout. Matches the reference comp: the title is centred and set in caps over the full width, the four filters lose their capsules and read as plain type, and the pager collapses from a progress track to "01 / 04". Desktop only — the ≤900px stack above is untouched. Last block in the bundle because every rule it replaces is itself !important. --------------------------------------------------------------------- */ @media (min-width: 901px) { #work .sw__head { display: block; text-align: center; } #work .sw__title { width: 100% !important; max-width: none !important; text-align: center !important; white-space: nowrap !important; } /* The comp runs the title straight into the filters. The line stays in the DOM for search and screen readers; only the desktop head drops it. */ #work .sw__support { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* Filters read as type, not buttons. */ #work .sw__pills { position: static !important; flex-wrap: wrap !important; width: auto !important; /* Same rhythm as .sw__main's columns, so the filters sit on the grid set by the two title lists and the thumbnail below them. */ column-gap: clamp(28px, 4vw, 72px) !important; margin: clamp(26px, 3.6vh, 52px) auto 0 !important; text-align: center !important; } #work .sw-pill, #work .sw__pills .sw-pill { min-height: 0 !important; border: 0 !important; background: transparent !important; letter-spacing: -.01em !important; color: var(--text-tertiary) !important; } #work .sw-pill:is(:hover, :focus-visible), #work .sw__pills .sw-pill:is(:hover, :focus-visible) { transform: none !important; background: transparent !important; color: var(--text-primary) !important; } #work .sw-pill.is-active, #work .sw__pills .sw-pill.is-active { background: transparent !important; color: var(--filter-ink-active, var(--text-primary)) !important; } /* The active filter sits on the travelling .filter-thumb capsule (tokens.css), so it takes the thumb's paired ink rather than the page ink. --text-primary here put near-white text on the near-white dark thumb. --filter-ink-active is what Expertise and Playground use. */ html:root[data-theme="dark"] body #work .sw__pills .sw-pill.is-active { background: transparent !important; color: var(--filter-ink-active, var(--text-primary)) !important; } /* Pull the filters down onto the thumbnail. .sw__main was the grid's 1fr row, so it stretched to fill the stage and centred a ~420px thumbnail inside ~680px — leaving 137px between the filters and the image against the 51px the two lists sit from it. Giving main an auto row and handing the slack to the pager row instead lets .sw__main's own padding set that distance, and the pager still parks at the bottom of the stage. */ #work .sw__inner { grid-template-rows: auto auto minmax(0, 1fr); } #work .sw__main { padding-bottom: 0; } /* Pager: "01 / 04" in place of the progress track. */ #work .sw__pager { gap: .6rem; color: var(--text-tertiary); } #work .sw__track { width: auto; height: auto; background: none !important; } #work .sw__track > i { display: none; } #work .sw__track::before { content: "/"; } } /* --------------------------------------------------------------------- Section titles: Zalando Sans Expanded Semibold. The display line of every section takes the expanded cut at 600. The mono eyebrow labels (`.section__label`, `.words__label`) are not display titles and keep Geist. Every selector here already carries a `font-weight` !important from the passes above, so this has to match their id-level specificity and sit last. --------------------------------------------------------------------- */ :is( #work .sw__title, #expertise .xp__title, #services .help__title, #process #processTitle, #about-me .about-v2__title, #toolkit #toolkitTitle, #perspective #perspectiveTitle, #partnerships #partnershipsTitle, #education-recognition #educationTitle, #contact #contactTitle, .cs__title, .sw__ov-title ) { font-family: var(--font-title) !important; font-weight: 600 !important; } /* Section titles are set in caps. Scoped to the section headings only — the ledes beside them stay sentence case, and so do .cs__title / .sw__ov-title above, which are project names rather than headings. */ :is( #work .sw__title, #expertise .xp__title, #services .help__title, #process #processTitle, #about-me .about-v2__title, #toolkit #toolkitTitle, #perspective #perspectiveTitle, #partnerships #partnershipsTitle, #education-recognition #educationTitle, #contact #contactTitle ) { text-transform: uppercase !important; } /* --------------------------------------------------------------------- EXPERTISE — tab row over one wide cover. Replaces the left accordion + right cover split. The five disciplines read as a row of plain-type tabs (same treatment as the Work filters), and the active discipline's line and tags sit over the bottom of a single full-width cover. Legacy .xp__body / .xp__left / .xp__list / .xp__item rules above no longer match anything — the markup they targeted is gone. --------------------------------------------------------------------- */ #expertise .xp__tabs { flex-wrap: wrap; } #expertise .xp__tab { background: transparent; transition: color var(--dur-3) var(--ease-out); } #expertise .xp__tab:hover { color: var(--text-secondary); } #expertise .xp__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; } /* The cover is now the section's whole lower half and carries the copy. */ #expertise .xp__cover { flex: 1 1 auto; align-self: stretch; min-height: 0; } /* Keeps the overlay legible over a bright photograph without dimming the whole frame — the scrim only covers the band the text sits in. */ #expertise .xp__cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 3; } #expertise .xp__overlay { position: absolute; z-index: 4; inset: auto 0 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(1rem, 2.5vw, 2.5rem); padding: clamp(1.25rem, 2.6vw, 2.25rem); } #expertise .xp__desc { /* The overlay is a flex row (description left, tags right). A 46ch cap wrapped the description onto a second line while ~320px of the row sat empty, so it takes the space the tags do not need instead. */ flex: 1 1 auto; min-width: 0; color: #fff; } #expertise .xp__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; list-style: none; } #expertise .xp__tags li { padding: .5rem 1rem; line-height: 1.2; color: #fff; white-space: nowrap; } @media (max-width: 900px) { #expertise .xp__tabs { scrollbar-width: none; } #expertise .xp__tabs::-webkit-scrollbar { display: none; } /* Stacked, the chips would crowd a portrait crop, so the copy takes the full width and the tags wrap beneath it. */ #expertise .xp__overlay { flex-direction: column; align-items: flex-start; } #expertise .xp__cover::after { height: 68%; } } /* ===================================================================== Typographic polish + square media. Two changes, both deliberately narrow: 1 · The body scale steps down. Everything that is NOT a display title — ledes, body copy, meta, tags, labels — drops roughly one notch and loses a little weight. The Figma scale set body at 18px, which reads heavy next to the expanded caps titles; 16px at the comp width holds the same measure with far less shout. Because these are the shared tokens, mobile inherits the same restraint rather than needing a second set of numbers. --fs-display / --fs-section-title / --fs-card-title are untouched: the big titles keep their presence, and the widened gap between them and the body copy is the point. 2 · Media goes square on desktop. Rounded corners stay on the mobile card stack, where the radius is doing real work separating stacked cards from the page. ===================================================================== */ /* The six reading-copy tokens that used to be redeclared here now live in tokens.css, which is the single source of truth. This block only ever restated them; type-scale.css loaded later and won, so what rendered was 1rem / 0.875rem / 0.75rem. tokens.css now carries exactly those values. */ /* Controls and list type: one step down, one weight lighter. These carry !important because the passes above set their size that way. */ @media (min-width: 901px) { #work .sw-li.is-active { font-weight: 500 !important; } } @media (max-width: 900px) { /* The mobile filters are capsules, not type — they only need the size step, not the weight change, or the active pill loses its read. */ } #expertise .xp__tags li { font-weight: 400; letter-spacing: 0; } /* ---- Square media (desktop only) ------------------------------------ */ @media (min-width: 901px) { :root { --radius-media: 0px; } #work .sw__thumb, #work .sw__cover, #expertise .xp__cover, #expertise .xp__layer img, .pg-panel figure, .pg-panel--travel figure, .pg-aerial__viewer, .pg-track, .pg-media-placeholder, .about-v2 .about-v2__figure { border-radius: var(--radius-media, 16px) !important; } } /* --------------------------------------------------------------------- Expertise, mobile scroll story: the cover fills the stage. The rules above cap it at `aspect-ratio: 16/9; max-height: 31svh` — correct when the cover was a small inline image between an accordion row and its copy, wrong now that it IS the section's main surface. At 31svh the overlay copy sat on top of the subject and the rest of the pinned stage was empty. --------------------------------------------------------------------- */ @media (max-width: 1024px) { #expertise.is-mobile-scroll-story .xp__tabs { flex: 0 0 auto; } #expertise.is-mobile-scroll-story .xp__cover { flex: 1 1 auto; aspect-ratio: auto !important; max-height: none !important; min-height: 0; margin: 4px 0 0 !important; } } /* --------------------------------------------------------------------- Expertise overlay: frosted scrim + frosted labels. The scrim carries the blur itself, masked so its TOP edge is fully transparent — mask-image fades a backdrop-filter along with the tint, which a plain gradient background cannot do (backdrop-filter has no gradient form of its own). Result: the image is untouched at the top of the band and progressively frosts toward the copy. The labels keep a dark tint under their own blur rather than a light one. Several covers are bright, and a white-tinted frost put white text on a near-white plate. --------------------------------------------------------------------- */ #expertise .xp__cover::after { background: linear-gradient(to top, rgba(0, 0, 0, .52), rgba(0, 0, 0, 0)); -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%); } #expertise .xp__tags li { background: rgba(16, 16, 16, .34); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } /* Safari on iOS drops backdrop-filter inside a masked ancestor often enough to matter; the tint alone still has to carry the contrast. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #expertise .xp__tags li { background: rgba(16, 16, 16, .72); } #expertise .xp__cover::after { background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0)); } } /* --------------------------------------------------------------------- Expertise: true progressive blur + the reference's vertical rhythm. The single masked blur added earlier fades its STRENGTH but the whole band still blurs at one radius, which reads as a hard frost with a soft edge. A progressive blur needs several layers: each one starts lower than the last and doubles the radius, so at any height the accumulated blur is the sum of every layer covering that point — a smooth ramp from clean image to heavy frost. --------------------------------------------------------------------- */ #expertise .xp__frost { position: absolute; inset: auto 0 0 0; height: 46%; z-index: 3; pointer-events: none; } #expertise .xp__frost span { position: absolute; inset: 0; } /* Each layer: mask start -> blur radius. The masks overlap by design; the overlap is what makes the ramp continuous rather than banded. */ #expertise .xp__frost span:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); } #expertise .xp__frost span:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 42%); mask-image: linear-gradient(to bottom, transparent 20%, #000 42%); } #expertise .xp__frost span:nth-child(3) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 62%); mask-image: linear-gradient(to bottom, transparent 40%, #000 62%); } #expertise .xp__frost span:nth-child(4) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 82%); mask-image: linear-gradient(to bottom, transparent 60%, #000 82%); } #expertise .xp__frost span:nth-child(5) { -webkit-backdrop-filter: blur(28px) saturate(115%); backdrop-filter: blur(28px) saturate(115%); -webkit-mask-image: linear-gradient(to bottom, transparent 78%, #000 100%); mask-image: linear-gradient(to bottom, transparent 78%, #000 100%); } /* The ::after now only tints — the frost stack owns the blur. Kept shorter and lighter so the ramp above stays readable as a ramp. */ #expertise .xp__cover::after { height: 46%; background: linear-gradient(to top, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; } /* ---- Vertical rhythm, measured off the reference --------------------- Reference proportions at 1125px tall: title ~8%, tabs ~22%, cover 26% -> 94%. The stage's single flex gap spaced head/tabs/cover evenly, which put the tabs too close to the title and left the cover starting late. Explicit margins reproduce the reference's uneven rhythm: a generous gap under the head, a tight one under the tabs. */ @media (min-width: 901px) { #expertise .xp__stage { gap: 0; padding-block: clamp(4.5rem, 9vh, 6.5rem) clamp(1.5rem, 3.5vh, 2.5rem); } #expertise .xp__tabs { margin-top: clamp(2.5rem, 6vh, 5rem); } } /* --------------------------------------------------------------------- One spacing value for every plain-type filter row. The two rows had drifted apart: Expertise sat at 22-44px while the Work filters were on clamp(28px, 4vw, 72px) — that value was chosen to match .sw__main's column gap so the filters lined up with the grid below them, but at wide viewports 72px read as four unrelated words rather than one control. A single token, tighter than both, keeps them consistent and legible as a set. Playground's row is still capsule buttons in a 4-column grid, a different component with its own 8px gap; it is deliberately not folded in here. --------------------------------------------------------------------- */ :root { --filter-gap: clamp(1rem, 1.6vw, 1.75rem); } @media (min-width: 901px) { } @media (max-width: 900px) { /* Mobile Expertise scrolls horizontally, so it wants the same rhythm rather than the wider desktop one. Work keeps its capsule grid. */ } /* --------------------------------------------------------------------- Work pager sits on the same gap as everything else around the cover. It was parked at the bottom of the stage (align-self:end), which left it floating far below the thumbnail while the filters above and the two lists either side both sit clamp(28px, 4vw, 72px) away from it. Anchoring it to the top of its row with that same gap puts all four edges — top, left, right, bottom — on one measure; the leftover height falls below it, where nothing reads it as a gap. --------------------------------------------------------------------- */ @media (min-width: 901px) { #work .sw__pager { margin-top: clamp(28px, 4vw, 72px); } } /* --------------------------------------------------------------------- Work: centre everything below the title in the space the title leaves. The filters live inside .sw__head with the title, so they could not be centred with the cover while that wrapper stayed a layout box — `display: contents` dissolves .sw__head and .sw__intro so the title, filters, cover grid and pager all become direct children of .sw__inner. The stage then runs as a flex column and the group is centred with the auto-margin pair: `margin-top:auto` on the first item of the group and `margin-bottom:auto` on the last splits the leftover height evenly above and below them, leaving the title parked at the top on its own. The gaps inside the group (filters -> cover -> pager) are already set by their own margins and are untouched by this. --------------------------------------------------------------------- */ @media (min-width: 901px) { #work .sw__inner { display: flex; flex-direction: column; grid-template-rows: none !important; } #work .sw__head, #work .sw__intro { display: contents !important; } #work .sw__title { flex: 0 0 auto; } /* The group: filters, cover, pager. */ #work .sw__pills { margin-top: auto !important; } #work .sw__main { flex: 0 0 auto; } #work .sw__pager { margin-bottom: auto; /* The grid-era rule above set align-self:start to pull the pager up to its gap. On a flex COLUMN align-self is the horizontal axis, so that same value shoved it to the left edge; the auto-margin pair owns the vertical placement now, and this just has to fill the width so the pager's own justify-content can centre the digits. */ align-self: stretch !important; } } /* ===================================================================== APPROACH — four equal white cards. Was a scroll-emphasis story: one card grew to 1.6fr while the other three sat at 0.24 opacity with shrunken numbers, separated by hairline rules on a grey ground. The comp is a flat set — four equal white panels on the grey, thin gaps, no borders, square corners, every card fully legible at once. js/main.js no longer writes the emphasis styles; this owns the rest. ===================================================================== */ #process .design-process__steps { align-items: stretch; } #process .design-process__step { flex: 1 1 0; /* The shared card contract earlier in the bundle paints these with --surface-card and --radius-card, both !important; the comp wants flat white squares. */ border-radius: var(--radius-card, 16px) !important; background: #fff; display: flex; flex-direction: column; will-change: auto; } /* Big, light, and top-left — the comp's numeral is a thin weight at a fixed size rather than one that scales with the card's width. */ #process .design-process__number { font-size: clamp(3.25rem, 4.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; transform: none !important; opacity: 1 !important; } /* The glyph floats in the middle of the card, copy sits at the bottom; the auto margins hold that split at any card height. */ #process .design-process__visual { width: auto; height: auto; opacity: 1 !important; display: grid; place-items: center; } #process .process-glyph { display: block; height: auto; max-width: none; transition: transform var(--dur-3) var(--ease-out); } /* The only thing the scroll position still changes. */ #process .design-process__step.is-active .process-glyph { transform: scale(1.06); } #process .design-process__copy { transform: none !important; opacity: 1 !important; } #process .design-process__copy h3 { margin: 0 0 .4rem; } @media (prefers-reduced-motion: reduce) { #process .process-glyph { transition: none; } } @media (max-width: 900px) { /* Stacked, a card only needs to be tall enough to hold its glyph. */ } /* Theme passes paint these through `:root body #process .design-process__step` selectors carrying !important, which outrank the plain `#process .step` block above — so the flat white square has to match that specificity. Both states get the same surface: the comp has no active-card colour. */ :root body #process .design-process__step, :root body #process .design-process__step.is-active, :root[data-theme] body #process .design-process__step, :root[data-theme] body #process .design-process__step.is-active { background: #fff; /* Deliberately NOT !important: the legacy base rule dims every step to 0.24 and only lifted the scroll-focused one, so this has to beat it — but the stagger reveal sets opacity inline, and an !important here would outrank that and freeze the cards visible. Specificity alone is enough to win against the base rule while still yielding to inline. */ opacity: 1; } /* The same themed pass dims the non-active card's number to 28% ink and its copy to 72/54% — carried over from the emphasis story, where only one card was ever meant to be readable. All four read equally now. */ :root body #process .design-process__number, :root[data-theme] body #process .design-process__number { color: var(--process-ink) !important; opacity: 1 !important; } :root body #process .design-process__copy h3, :root[data-theme] body #process .design-process__copy h3 { color: var(--process-ink) !important; } :root body #process .design-process__copy p, :root[data-theme] body #process .design-process__copy p { color: var(--process-muted) !important; } /* Mobile ran a different card entirely: display:grid with a 410px min-height and the number absolutely positioned, which left the glyph sitting beside the numeral above a tall void. Stacked cards now use the same model as desktop — number, glyph, copy — sized to their content. */ @media (max-width: 900px) { :root body #process .design-process__step, :root[data-theme] body #process .design-process__step { display: flex; flex-direction: column; min-height: 0 !important; height: auto; padding: 1.5rem 1.25rem !important; } :root body #process .design-process__number, :root[data-theme] body #process .design-process__number { position: static !important; font-size: 2.75rem !important; } :root body #process .design-process__visual, :root[data-theme] body #process .design-process__visual { width: 100% !important; height: auto; margin: 1.5rem 0 !important; display: grid; place-items: center; } } /* The stage is a sticky 100svh pin with .design-process__steps taking the remaining height — fine for a 4-across row, impossible for a stacked list, which then collapsed each card and clipped its copy. Mobile drops the pin and lets the section run at its natural height. */ @media (max-width: 900px) { :root body #process .design-process__story, :root[data-theme] body #process .design-process__story { height: auto; } :root body #process .design-process__stage, :root[data-theme] body #process .design-process__stage { position: static !important; height: auto; } :root body #process .design-process__steps, :root[data-theme] body #process .design-process__steps { flex: 0 0 auto; min-height: 0; } :root body #process .design-process__step { overflow: visible; } } /* Last piece of the old mobile card: the copy block was absolutely positioned against the step, so once the step stopped being a fixed 410px box it collapsed to 48px and the copy floated free of its card. */ @media (max-width: 900px) { :root body #process .design-process__copy, :root[data-theme] body #process .design-process__copy { position: static !important; inset: auto !important; transform: none !important; /* align-self: end came from the absolutely-positioned mobile card, where it did nothing. Once the copy went back into flex flow it shrank the block to its text and pushed it against the card's right edge — every card but the longest one sat indented. */ align-self: stretch !important; } } /* `flex: 1 1 0` was written unscoped for the desktop row, where it makes four equal columns. On mobile the same declaration lands in a COLUMN container, where a zero basis plus shrink collapsed every card to its own padding (48px) and spilled the content underneath. */ @media (max-width: 900px) { :root body #process .design-process__step, :root[data-theme] body #process .design-process__step { flex: 0 0 auto !important; } } /* The old mobile card indented its copy to clear the absolutely positioned numeral; in the stacked card they share the left edge. */ @media (max-width: 900px) { :root body #process .design-process__copy, :root[data-theme] body #process .design-process__copy { margin-top: 1.5rem !important; text-align: left; } } /* ===================================================================== Consolidated pass: Approach card geometry, one universal grid gap, square cards everywhere, aligned section ledes, and the Playground filters brought onto the shared plain-type tab styling. ===================================================================== */ /* ---- 1 · Approach is a plain section now, not a 400svh pin ---------- The stagger reveal in js/main.js replaced the scroll story, so the track height and the sticky stage have nothing left to drive. */ @media (min-width: 901px) { #process .design-process__story { height: auto !important; } #process .design-process__stage { position: static; height: auto; min-height: 0; padding-bottom: clamp(3rem, 6vh, 5rem); } #process .design-process__steps { flex: 0 0 auto; min-height: 0; } #process .design-process__step { /* One padding on all four sides. The old bottom value was smaller than the top, which read as slack under the copy. */ padding: clamp(0.9rem, 1.45vw, 1.5rem) !important; min-height: clamp(22rem, 34vw, 30rem); } } /* Every card reserves the same two lines for its description, so the titles sit on one line across the row. Without it the copy block grows with the longest description and pushes that card's h3 up (Discover sat 19px above the other three). */ #process .design-process__copy { /* The copy block carried its own bottom padding on top of the card's, so the bottom inset measured 46px against 19px on the other three sides. The card's padding is the only inset now. */ padding-bottom: 0 !important; max-width: none; } #process .design-process__copy p { /* Every card reserves the same two lines, so the titles stay on one line across the row; the 26ch cap is dropped so the description uses the card's full width at any card size. */ min-height: calc(2 * 1.5em); max-width: none; } /* The glyph takes the whole middle band, so it centres between the numeral and the copy at any card height rather than being pushed by competing auto margins. +15% over the previous size. */ #process .design-process__visual { flex: 1 1 auto; display: grid; place-items: center; } #process .process-glyph { width: clamp(6.3rem, 10.9vw, 10.9rem) !important; } /* The four process glyphs are light-mode 3D art: their volume is drawn in pale near-white greens (the dominant tint is rgb(192,224,192), and the Discover magnifier's handle is a flat rgb(224,224,224)). On the dark card those washes read as milky white rather than as highlights. This damps them and pushes the remaining colour back toward the accent — a mitigation, not a cure. Replacing the four PNGs with dark-mode art is the real fix. */ :root[data-theme="dark"] #process .process-glyph, :root[data-theme="dark"] body #process .process-glyph { filter: saturate(1.38) brightness(.82) contrast(1.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #process .process-glyph { filter: saturate(1.38) brightness(.82) contrast(1.06); } } /* ---- 2 · One gap for every card grid, gallery and masonry gutter ---- */ #process .design-process__steps, #perspective .pg-track, .sw-mobile-cards { gap: var(--grid-gap); } /* ---- 3 · Square cards and media, everywhere ------------------------ The radius tokens are 0 now; these are the surfaces that hardcoded a value instead of reading them. */ .pg-panel figure, .pg-panel--travel figure, .pg-aerial__viewer, .pg-track, .pg-media-placeholder, .sw-mobile-cards > *, #process .design-process__step, #toolkit .toolkit-tile, #client-value .value-card, #services .capability-card-v2 { border-radius: var(--radius-card, 16px); } /* ---- 4 · Section ledes share one left edge ------------------------- They were `justify-self: end`, so the block hugged the right margin and its LEFT edge moved with the character count — every section's sub-text started somewhere different. Anchoring them to the start of a fixed-width column puts them all on the same line. */ @media (min-width: 901px) { :is( #expertise .xp__lede, #process .design-process__lede, #services .help__sub, #client-value .client-value__lede, #toolkit .toolkit__lede, #perspective .pg-gallery__summary, #partnerships .editorial-head > p, #contact .contact-light__head > p ) { /* A FIXED width anchored to the container's right edge. max-width let a short lede shrink to its text, so its left edge moved with the character count — which is what made every section start at a different x. A fixed box right-anchored puts them all on one line. */ justify-self: end !important; align-self: start !important; text-align: left !important; /* rem, not ch: `ch` is the width of the font's "0", so a section whose lede sits at a different size resolved 34ch to a different box and slipped out of the shared line. */ width: 21.125rem !important; max-width: 21.125rem !important; min-width: 21.125rem !important; } /* Expertise sized its head columns as `auto 1fr`, so the lede column began wherever the title happened to end — far left of every other section. All heads now split the same way. */ #expertise .xp__head, #process .design-process__intro { /* A hard 34ch second column. `auto` let the track shrink to the lede's own text width, which put Expertise's left edge 22px inside everyone else's. */ grid-template-columns: minmax(0, 1fr) 21.125rem !important; } /* Every other section head spans the shared container (51px inset at a 1297px viewport); the Approach stage used its own max(3.5vw, 2rem), landing 6px wider on each side and dragging its lede out of line. */ #process .design-process__stage { padding-inline: max(3.94vw, 2rem); } } /* ---- 5 · Playground filters match Approach / Expertise ------------- They were the last capsule row on the site; the other two filter rows read as plain type with a weight change for the active item. */ #perspective .pg-gallery__tabs { display: flex !important; flex-wrap: wrap !important; grid-template-columns: none !important; width: auto !important; } #perspective .pg-gallery__tabs button { min-height: 0 !important; box-shadow: none !important; letter-spacing: -.01em !important; } #perspective .pg-gallery__tabs button:is(:hover, :focus-visible) { transform: none !important; background: transparent !important; color: var(--text-primary) !important; } :is(#work) .sw__pills { display:none !important; }