/* ============================================================ custom.css — additions on top of the Webflow export Loaded AFTER webflow-style.css so equal-specificity rules win. ============================================================ */ /* ── Theming ────────────────────────────────────────────── The Webflow export already drives every colour through --background-* / --text-* tokens defined on :root (dark). We add a light palette + a system-follow rule + an explicit override driven by [data-theme] on . ------------------------------------------------------------ */ /* Default (dark): smiley SVG ships white, so no inversion needed. */ :root { --smiley-invert: 0; } /* Light palette — used when the user explicitly picks light. */ :root[data-theme="light"] { --background-1: #ffffff; --background-2: #f3f3f4; --background-3: #e4e4e7; --background-4: #d6d6da; --text-1: #0a0a0a; --text-2: #1f1f1f; --text-3: #3f3f46; --text-4: #71717a; --smiley-invert: 1; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --background-1: #ffffff; --background-2: #f3f3f4; --background-3: #e4e4e7; --background-4: #d6d6da; --text-1: #0a0a0a; --text-2: #1f1f1f; --text-3: #3f3f46; --text-4: #71717a; --smiley-invert: 1; } } /* The smiley.svg has a hard-coded white stroke; invert it in light mode so it stays visible. Also kill the stray Webflow logo-wrapper shadow that shows up as a box artefact on a light background. */ .logo img { filter: invert(var(--smiley-invert, 0)); transition: filter .35s ease; } .logo-wrapper { box-shadow: none; } /* ── Header shares the background ────────────────────────────────── A frosted, translucent nav so the background reveal (and the blob peeking from the logo) shows through the header instead of being covered. Falls back to a solid-ish tint where backdrop-filter is unsupported. */ .nav { background-color: color-mix(in srgb, var(--background-1) 55%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } /* ── Unified nav buttons — links and the icon toggle share every state ── */ .nav-link, .theme-toggle { color: var(--text-3); background-color: transparent; border: none; border-radius: 8px; transition: color .2s ease, background-color .2s ease, transform .12s ease; } .nav-link:hover, .theme-toggle:hover { color: var(--text-1); background-color: color-mix(in srgb, var(--text-1) 10%, transparent); opacity: 1; } .nav-link:active, .theme-toggle:active { transform: scale(.94); } .nav-link.w--current { color: var(--text-1); background-color: color-mix(in srgb, var(--text-1) 14%, transparent); } .nav-link:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--text-4); outline-offset: 2px; } /* Smooth the flip between themes */ body, .nav, .nav-link, .work-item { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* ── Theme toggle button ──────────────────────────────────── */ .theme-toggle { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 0; cursor: pointer; } .theme-toggle svg { width: 20px; height: 20px; display: block; } /* Show the icon for the mode you'll switch TO: sun while in dark mode, moon while in light mode. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } .theme-toggle[data-mode="light"] .icon-sun { display: none; } .theme-toggle[data-mode="light"] .icon-moon { display: block; } /* ── Unified grid: header + pill filter ───────────────────── */ .grid-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { appearance: none; border: 1px solid var(--background-3); background-color: transparent; color: var(--text-4); font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .15s ease; } .pill:hover { color: var(--text-1); border-color: var(--text-4); } .pill:active { transform: scale(.96); } .pill:focus-visible { outline: 2px solid var(--text-4); outline-offset: 2px; } .pill.is-active { background-color: var(--text-1); border-color: var(--text-1); color: var(--background-1); } /* ── Responsive masonry: 1 / 2 / 3 / 4 columns ────────────── */ .work-grid { column-count: 1; column-gap: 24px; } @media (min-width: 641px) { .work-grid { column-count: 2; } } @media (min-width: 992px) { .work-grid { column-count: 3; } } @media (min-width: 1600px) { .work-grid { column-count: 4; } } /* Experiment tiles without an actual link are placeholders — kill the fake-clickable hover. */ .work-item[data-category="experiment"]:not(:has(a)):hover { transform: none; box-shadow: none; cursor: default; } /* Keep cards intact across column breaks */ .work-item { -webkit-column-break-inside: avoid; break-inside: avoid; /* Allow the item to shrink below the intrinsic width of its content, so a large image can't push the column wider than its share. */ min-width: 0; } /* Make tile images proper block-level responsive images. Webflow's base sets `width:100%; height:100%`, which combined with the default inline-block display lets a large natural-size image leak its intrinsic width into the column track and blow the grid out. */ .work-image { display: block; width: 100%; height: auto; max-width: 100%; } /* ── Filter show/hide with a soft fade-in ─────────────────── */ .work-item.is-hidden { display: none; } /* No fill-mode: after the intro finishes the transform reverts to base, so it never lingers and override the :hover transform. */ .work-item.is-shown { animation: tile-in .5s cubic-bezier(.34, 1.4, .5, 1); } @keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .work-item.is-shown { animation: none; } } @media screen and (max-width: 479px) { .grid-header { flex-direction: column; align-items: flex-start; } } /* ── Blur the page content while the nav panel is open ─────── */ .section { transition: filter .35s ease; } body.nav-open .section { filter: blur(7px); } @media (prefers-reduced-motion: reduce) { .section { transition: none; } } /* ── Cross-document view transition: tile image → case-study hero ─── Opt the page into same-origin nav transitions. The clicked tile's image is tagged `tile-media` (in JS) to pair with the hero image on the destination, so it morphs into place. Only fires on navigation, never on a direct URL load. Degrades to a normal load when unsupported. */ @view-transition { navigation: auto; } ::view-transition-group(tile-media) { animation-duration: .55s; animation-timing-function: cubic-bezier(.34, 1.15, .35, 1); } /* A soft, quick cross-fade for the rest of the page. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } /* ── Anchor scrolling ────────────────────────────────────────────── In-page smooth scrolling is handled in JS (single, offset-aware pass), so neutralise the CSS smooth-scroll to avoid a competing animation and a janky smooth jump on hash page-loads. scroll-margin-top keeps a section's heading clear of the sticky nav when landed on via #hash. */ html { scroll-behavior: auto; } .section[id] { scroll-margin-top: 80px; } /* ── Skip link (visually hidden until focused) ───────────────── */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--background-2); color: var(--text-1); padding: 12px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 12px; top: 12px; outline: 2px solid var(--text-4); outline-offset: 2px; } /* The skip-link target shouldn't show a focus ring when it receives focus programmatically (it's not a real interactive element). */ [id="main"]:focus { outline: none; } /* ── Screen-reader-only utility ──────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Reduced-motion safeguard ─────────────────────────────────── Anyone with prefers-reduced-motion gets a near-still interface: no animations, no transitions, no smooth scroll. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* The hamburger trigger is a real