/* ---------- Design tokens ---------- */ :root { --color-text: #1a1b1f; --color-bg: #ffffff; --color-muted: #6b6b6f; --font-body: 'Space Grotesk', sans-serif; --font-display: 'Space Grotesk', sans-serif; --container-max: 1140px; --gutter: 24px; } /* ---------- Blur-in media ---------- All images/video start blurred; each one sharpens independently the moment it finishes loading, so images near the top of the page (which the browser fetches first) don't wait on slower ones further down (see blur-media.js). Scoped under .nadpan-js-blur-media (set by an inline script at the very top of , before anything below it paints) rather than blurring unconditionally, so a page never gets stuck permanently blurred if JS fails to load. Scoped to .site-main so it only touches real page content, not the wp-admin toolbar. */ .nadpan-js-blur-media .site-main img, .nadpan-js-blur-media .site-main video, .nadpan-js-blur-media .play-grid__item--video iframe { filter: blur(16px); transition: filter 0.7s ease; } .nadpan-js-blur-media .site-main img.is-crisp, .nadpan-js-blur-media .site-main video.is-crisp, .nadpan-js-blur-media .play-grid__item--video iframe.is-crisp { filter: blur(0); } /* ---------- Page transition (Barba + GSAP overlapping parallax) ---------- The outgoing page parallax-shifts up while a dark wash fades in over it; the incoming page then slides up from below on top of that wash. Positioned outside the Barba container so it persists across transitions. Sits above page content but below .site-nav (z-index 100), which stays fixed and untouched throughout. */ .transition { z-index: 99; pointer-events: none; position: fixed; inset: 0; overflow: clip; } .transition__dark { opacity: 0; background-color: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ---------- Custom cursor (reference: julienpianetti.com) ---------- A small circle that follows the pointer (with a bit of trailing delay -- see custom-cursor.js), on top of the native cursor rather than replacing it. mix-blend-mode: difference keeps it visible over anything, light or dark. Only grows into a bigger circle with a text label over homepage grid thumbnails -- no other hover target on the site gets the enlarged variant. */ .custom-cursor { position: fixed; top: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0); transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s ease; } .nadpan-js-custom-cursor .custom-cursor { opacity: 1; } .custom-cursor--active { width: 110px; height: 110px; } .custom-cursor__text { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #000; opacity: 0; transition: opacity 0.3s ease; } .custom-cursor--active .custom-cursor__text { opacity: 1; } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--color-text); background: var(--color-bg); } /* The outgoing/incoming pages are each individually translated (position: fixed + GSAP "y") during the parallax transition, which promotes them to their own compositing layer -- without their own solid background they're transparent, letting whatever's briefly behind them (or nothing) show through the gap the slide opens up. Give every page container its own solid backing instead of relying on body's. */ [data-barba="container"] { background: var(--color-bg); } /* Same gradient as .about-shader-bg's own CSS placeholder (see that rule further down), not transparent -- this used to be transparent, so the canvas (which lives outside this container, see header.php) could show through it during a transition. That turned out to be fundamentally fragile: the enter animation gives this container position: fixed + a z-index above the canvas's own for the ~1.2s slide, and getting the canvas to reliably out-stack this container (and whatever page is still leaving alongside it) through every phase of that animation -- entering, leaving, re-entering -- kept surfacing new edge cases (transparent flashes, wrong z-index ordering, the shader failing to reappear at all) no matter how carefully the timing was split across Barba's hooks. Giving this container the SAME gradient as its own background instead sidesteps the whole problem: it's self-sufficient during a transition (no dependency on the canvas behind it at all), and looks identical to the canvas's own placeholder, so when the real canvas actually takes over -- see initAfterEnterFunctions in page-transitions.js, which now waits until the transition has fully settled -- the handoff is invisible. */ [data-barba="container"][data-page-name="About"] { /* TEMPORARY: flat var(--color-bg) (matching the homepage/every other page's background) instead of the gradient below, for a side-by-side comparison. Delete this line (and un-comment the gradient) to restore it. */ background: var(--color-bg); /* background: radial-gradient(120% 120% at 22% 12%, #f2f2ff 0%, #ffffff 55%, #f4f4f4 100%); */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; } p { margin: 0 0 1em; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ---------- Header / nav ---------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; /* mix-blend-mode has to live here, on the element that establishes the stacking context (position: fixed already does that; isolation makes it explicit), not on the individual logo/link descendants -- a descendant's mix-blend-mode can only blend against other content painted within its own ancestor's stacking context, which for those elements is just .site-nav's own (transparent) background, not the real page behind it. Putting it here instead treats the whole nav's rendered output (all its children's actual white pixels, wherever they are, ignoring the transparent gaps between them) as one flattened layer and blends THAT against the page -- confirmed by testing both ways: mix-blend-mode on the children alone rendered the nav completely invisible over the white page. */ isolation: isolate; mix-blend-mode: difference; /* Uniform padding: the logo is a graphic (no text leading to compensate for like the old text logo needed), so the top gap already matches the left gap with the same value on all sides. */ padding: 48px; } .site-nav__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Top-aligned rather than centered: the logo mark is taller than the nav text (2x its font-size), so centering would hang it below the text's midline instead of lining up both at the top. */ align-items: start; } .site-nav__logo { grid-column: 1; justify-self: start; } .site-nav__logo-mark { display: block; width: auto; /* fill="currentColor" in the SVG picks this up. Plain white -- the actual inversion comes from mix-blend-mode on .site-nav itself (see above), not from anything set here. This replaces the old JS-driven luminance-sampling class swap (nav-invert.js, now removed): a white nav blended with difference reads as black over a white backdrop, white over black, and auto-inverts over any other color/photo too, without needing to sample pixels or special-case the Play page's solid black background. */ color: #fff; /* Twice the nav link text's font-size (24px); the max-width: 900px / 360px tiers below rescale this to match as the link text resizes. */ height: 60px; } /* .site-nav__links wraps the two nav items (About, Play); "contents" promotes them to direct grid items of .site-nav__inner so each can be positioned independently -- About centered on the screen, Play at the right margin -- regardless of the logo's width. */ .site-nav__links { display: contents; } .site-nav__links > *:nth-child(1) { grid-column: 2; justify-self: center; } .site-nav__links > *:nth-child(2) { grid-column: 3; justify-self: end; } .site-nav__links li { list-style: none; margin: 0; padding: 0; } .site-nav__link, .site-nav__links a { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.1px; color: #fff; } /* Underline-on-hover, shared by nav links and footer links: a hidden line grows in from the left over the text on hover. */ .site-nav__link, .site-nav__links a, .site-footer__item { position: relative; } .site-nav__link::before, .site-nav__links a::before, .site-footer__item::before { content: ""; position: absolute; bottom: -0.0625em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } @media (hover: hover) and (pointer: fine) { .site-nav__link:hover::before, .site-nav__links a:hover::before, .site-footer__item:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } } /* ---------- Site main ---------- .site-nav is now position: fixed (taken out of flow) to match the reference's persistent, transparent nav; this top padding reserves the space it would otherwise occupy so page content isn't hidden underneath it. */ .site-main { /* Clears the logo (60px tall + 20px top padding, with a small buffer below it) -- keep in sync with .site-nav__logo-mark's height and .case-header-image's matching negative margin below. */ padding-top: 89px; } @media (max-width: 900px) { /* Logo shrunk by 42.5px on mobile (85px -> 42.5px), so this clears by 42.5px less too, keeping the same buffer below it. */ .site-main { padding-top: 48px; } } /* ---------- Hero ---------- */ .hero { padding: 134px 0; } .hero__heading { font-size: 60px; line-height: 72px; font-weight: 400; } /* Hidden the instant the document starts parsing (see header.php's inline pre-paint script), not just once text-reveal.js gets around to masking it -- text-reveal.js is a footer script, so without this the raw, unsplit heading text paints fully visible for a moment before that script even runs, then vanishes into its mask, then reveals -- a flash-then-hide-then-reveal instead of a clean hide-then-reveal. Un-hidden explicitly once the page is actually ready to show it: from runPageOnceAnimation on first load, and from initBeforeEnterFunctions on any later Barba navigation back to the homepage (see page-transitions.js) -- scoped to the JS-added class so a visitor with JS disabled still sees the heading normally instead of it staying hidden forever. */ .nadpan-js-hero-reveal .hero__heading { opacity: 0; } /* ---------- Works grid ---------- A 6-column grid; each card spans 2, 3, 4 or 6 columns (curated per case study via the "Homepage Grid Width" field), all sharing one fixed row height, images cropped to fill with object-fit: cover -- matching the original site's manually curated masonry grid. */ .works { padding: 25px 0 100px; } .works-container { margin: 0 auto; padding: 0 48px; } .works-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 20px; } .work-card--span-2 { grid-column: span 6; } .work-card--span-3 { grid-column: span 6; } .work-card--span-4 { grid-column: span 6; } .work-card--span-6 { grid-column: span 6; } @media (min-width: 700px) { .work-card--span-2 { grid-column: span 2; } .work-card--span-3 { grid-column: span 3; } .work-card--span-4 { grid-column: span 4; } .work-card--span-6 { grid-column: span 6; } } .work-card__image { display: block; width: 100%; height: min(32vw, 460px); background-color: #f2f2f2; margin-bottom: 14px; overflow: hidden; } @media (max-width: 699px) { .work-card__image { height: 80vw; } .work-card__title, .work-card__subtitle { font-size: 18px; line-height: 21.6px; } } .work-card__image img, .work-card__image video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Same specificity as .nadpan-js-blur-media .site-main img's own transition (2 classes + tag) and later in the cascade, so this wins and replaces it -- shorthand "transition" fully overrides rather than merging, so the blur-in filter transition has to be repeated here alongside transform, or hovering a still-blurring image would snap its filter instantly instead of continuing to fade smoothly. */ .works-grid .work-card__image img, .works-grid .work-card__image video { /* No grey/hidden state and no separate entrance transition any more -- grid items just render straight into their blurred state (the default .nadpan-js-blur-media look, same as everywhere else on the site) the moment they're in the DOM. The "reveal" is entirely the blur-to-crisp handoff below, which grid-reveal.js now holds off on until the item has scrolled into view (see that file). Same easing curve as dnco.com's grid hover zoom for the transform, slightly slower (0.6s vs their 0.3s) for an even smoother, less hurried feel. */ transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .work-card__image:hover img, .work-card__image:hover video { transform: scale(1.05); } .work-card__meta { text-align: left; } .work-card__title { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 28.8px; letter-spacing: -0.1px; color: var(--color-text); } .work-card__subtitle { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 28.8px; letter-spacing: -0.1px; color: #929292; margin-top: 0; } /* ---------- Case study: header image ---------- */ .case-header-image { line-height: 0; /* Cancels out .site-main's padding-top (reserved for the fixed nav) just for this element, pulling it up to the true top of the page so the nav floats directly over the header image instead of a white gap above it. */ margin-top: -89px; } @media (max-width: 900px) { .case-header-image { margin-top: -48px; } } .case-header-image img { width: 100%; height: 85vh; object-fit: cover; } @media (max-width: 900px) { .case-header-image img { height: auto; aspect-ratio: 1 / 1; } } /* ---------- Case study: overview grid ---------- Title/subtitle sit in their own full-width row above; the overview and services columns share the row below, split evenly. */ .case-overview { padding: 50px 0 60px; } .case-overview__grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Row gap is the space between the discipline line (end of the title row) and "Project Overview" (start of the row below). */ gap: 50px 50px; } .case-overview__title { grid-column: 1 / 4; } .case-overview__body { grid-column: 1 / 3; } .case-overview__services { grid-column: 3 / 5; } .heading-jumbo { font-size: 70px; line-height: 84px; font-weight: 400; margin-bottom: 0; } /* Discipline line under the project name (e.g. "Branding"). */ .case-overview__title .paragraph-light { color: var(--color-muted); /* rgb(107, 107, 111) */ } .paragraph-light { font-family: var(--font-display); font-size: 18px; line-height: 1.4; } .case-overview__label { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text); margin-bottom: 12px; } .case-overview__body .paragraph-light { margin-bottom: 16px; } .case-overview__client { color: var(--color-muted); } .case-overview__services { display: flex; flex-direction: column; } .case-overview__service { font-size: 18px; line-height: 28px; padding-bottom: 0; margin-bottom: 5px; color: var(--color-muted); /* rgb(107, 107, 111) */ border-bottom: 1px solid var(--color-muted); /* rgb(107, 107, 111) */ } /* ---------- Case study: body content blocks (Gutenberg output) ---------- .case-body__inner spans the full viewport width (no container). Each block is either full-bleed (edge to edge) or "contained" at 65% width, centered -- matching the original site's two treatments exactly. */ .case-body { padding-bottom: 60px; } .case-body__inner > * { margin: 60px auto 0; width: 65%; } .case-body__inner > *:first-child { margin-top: 0; } .case-body__inner > .alignfull { width: 100%; } .case-body__inner img { width: 100%; height: auto; display: block; } .case-body__inner video { width: 100%; height: auto; display: block; } .case-body__inner .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } /* Vimeo "background" embeds (autoplay+loop+muted "cover" videos) scale their video to fill the iframe's own aspect ratio; an iframe sized to match our 16:9 box exactly can end up letterboxed and left- anchored instead of centered when the source video isn't 16:9. Oversizing the iframe relative to the box and centering it with a transform guarantees full, evenly-cropped coverage instead -- the iframe crops the same way a CSS background-image: cover would. */ .wp-block-embed--bg-video { container-type: size; } .wp-block-embed--bg-video iframe { position: absolute; top: 50%; left: 50%; width: 177.78cqh; height: 100cqh; min-width: 100cqw; min-height: 56.25cqw; aspect-ratio: auto; transform: translate(-50%, -50%); } /* Two square items (image/video) side by side, no gap -- 90vw wide. Native core/columns block: each item is a real, editable wp:image or wp:video block inside a .wp-block-column -- no extra wrapper div. */ .case-body__inner > .case-square-pair { width: 90vw; display: flex; gap: 0; } .case-square-pair > .wp-block-column { flex: 1 1 50%; aspect-ratio: 1 / 1; overflow: hidden; margin: 0; } .case-square-pair .wp-block-image, .case-square-pair .wp-block-video, .case-square-pair figure { margin: 0; width: 100%; height: 100%; } .case-square-pair img, .case-square-pair video { width: 100%; height: 100%; object-fit: cover; display: block; } /* 4-column grid of square photos -- 80vw wide. Native core/gallery block: each photo is a real, editable wp:image block -- addable/removable/reorderable via the Gallery UI. */ .case-body__inner > .case-photo-grid { width: 80vw; gap: 16px !important; } /* WordPress's own ".columns-4" width rule only targets the legacy gallery markup (":not(.has-nested-images)"); the modern "has-nested-images" format we use relies on a per-instance inline