/* ============================================================ DESIGNS & WORDS — DESIGN SYSTEM Layout modelled on the Opus template: squared-off, wide container, very tight display tracking, flat surfaces. COLOUR IS PER SECTION. Sections alternate pure black and pure white down the page; brand red is an accent only — marks, hovers, focus — never a field. Nothing below hardcodes a hex; every rule reads a *role* token, and each theme class re-declares the roles. Add .t-black / .t-white to a section and everything inside re-colours. ============================================================ */ :root { /* the three literals — the only place these hexes are written */ --brand-red:#ED2B2E; --brand-black:#000000; --brand-white:#FFFFFF; --c-brand:#ED2B2E; --c-accent-dark:#1A1A1A; /* ---------- TYPE ---------- */ --font-display:'Onest', 'Inter', system-ui, sans-serif; --font-body:'Manrope', 'Inter', system-ui, sans-serif; --fs-stat: clamp(2.5rem, 5vw, 4rem); /* 40 → 64 */ --fs-mega: clamp(2.25rem, 4.6vw, 4.25rem); /* 36 → 68 */ --fs-display: clamp(1.75rem, 3vw, 2.75rem); /* 28 → 44 */ --fs-h1: clamp(1.5rem, 2.4vw, 2.25rem); /* 24 → 36 */ --fs-h2: clamp(1.25rem, 1.8vw, 1.75rem); /* 20 → 28 */ --fs-h3: 1.25rem; /* 20 */ --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --ls-mega:-0.04em; --ls-display:-0.03em; --ls-tight:-0.02em; --ls-eyebrow:0.02em; /* ---------- SHAPE — squared off ---------- */ --r-lg:0; --r-md:0; --r-sm:0; --r-pill:0; /* ---------- LAYOUT ---------- */ --maxw:1439px; --maxw-text:699px; --pad-x:clamp(20px, 4vw, 60px); --gap:20px; /* the one two-column split the hero and the intro share, so their right columns start on the same line */ --split-gap:clamp(32px,6vw,96px); --ease:cubic-bezier(.16,1,.3,1); } /* ============================================================ SECTION THEMES Roles, not colours: --c-bg / --c-surface the field the section sits on --c-text … --c-dim copy, in descending emphasis --c-line … -strong hairlines --c-invert/--c-on-dark a solid block cut out of the field, and its ink --c-fill-h/-ink what that block flips to on hover --c-accent the emphasis mark (big figures, link hovers) --c-veil a translucent wash for row hovers --nav-ink/--nav-veil what the fixed bar has to become over this section Both themes mark in brand red. Solid blocks are the counter-colour (white on black, black on white) and turn red on hover. ============================================================ */ .t-black, .t-white { background:var(--c-bg); color:var(--c-text); } /* :root carries the black set as the fallback, so anything outside a themed section (the fixed bar, the gutter behind the page) still resolves. */ :root, .t-black { --c-bg:var(--brand-black); --c-surface:var(--brand-black); --c-surface-2:var(--brand-black); --c-text:#E6E6E6; --c-text-2:#C2C2C2; --c-muted:#9A9A9A; --c-dim:#6E6E6E; --c-line:rgba(255,255,255,0.18); --c-line-strong:rgba(255,255,255,0.40); --c-invert:#FFFFFF; --c-on-dark:#000000; --c-on-dark-muted:rgba(0,0,0,0.64); --c-accent:var(--brand-red); --c-fill-h:var(--brand-red); --c-fill-h-ink:#FFFFFF; --c-veil:rgba(255,255,255,0.06); --c-glow:rgba(255,255,255,0.06); --c-card:#111111; --c-card-mark:var(--brand-red); --c-err:#FF8A8C; --nav-ink:#FFFFFF; --nav-veil:rgba(0,0,0,0.92); --nav-veil-solid:#000000; } .t-white { --c-bg:var(--brand-white); --c-surface:var(--brand-white); --c-surface-2:var(--brand-white); --c-text:#1F1F1F; --c-text-2:#3D3D3D; --c-muted:#666666; --c-dim:#8C8C8C; --c-line:rgba(0,0,0,0.12); --c-line-strong:rgba(0,0,0,0.30); --c-invert:#000000; --c-on-dark:#FFFFFF; --c-on-dark-muted:rgba(255,255,255,0.72); --c-accent:var(--brand-red); --c-fill-h:var(--brand-red); --c-fill-h-ink:#FFFFFF; --c-veil:rgba(0,0,0,0.04); --c-glow:rgba(0,0,0,0.04); --c-card:#F5F5F5; --c-card-mark:var(--brand-red); --c-err:#B3181B; --nav-ink:#000000; --nav-veil:rgba(255,255,255,0.94); --nav-veil-solid:#FFFFFF; } /* ---------- TYPE UTILITIES ---------- */ .t-stat { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-stat); line-height:0.86; letter-spacing:var(--ls-mega); } .t-mega { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-mega); line-height:0.96; letter-spacing:var(--ls-mega); } .t-display { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-display); line-height:1.04; letter-spacing:var(--ls-display); } .t-h1 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h1); line-height:1.1; letter-spacing:var(--ls-display); } .t-h2 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h2); line-height:1.15; letter-spacing:var(--ls-display); } .t-h3 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h3); line-height:1.25; letter-spacing:var(--ls-tight); } .t-lead { font-family:var(--font-body); font-weight:var(--fw-regular); font-size:var(--fs-lead); line-height:1.5; letter-spacing:var(--ls-tight); color:var(--c-muted); } .t-body { font-family:var(--font-body); font-weight:var(--fw-regular); font-size:var(--fs-body); line-height:1.6; letter-spacing:var(--ls-tight); } .t-small { font-family:var(--font-body); font-weight:var(--fw-medium); font-size:var(--fs-small); line-height:1.5; letter-spacing:var(--ls-tight); color:var(--c-muted); } .t-eyebrow { font-family:var(--font-body); font-weight:var(--fw-medium); font-size:var(--fs-eyebrow); line-height:1.4; letter-spacing:var(--ls-eyebrow); color:var(--c-muted); } .t-accent { color:var(--c-accent); } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing:border-box; } * { margin:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } :root { color-scheme:light; } html { scroll-behavior:smooth; scroll-padding-top:110px; } /* Lenis owns the easing when it runs, so native smooth-scroll must step aside */ html.lenis, html.lenis body { height:auto; } html.lenis.lenis-smooth { scroll-behavior:auto !important; } .lenis [data-lenis-prevent] { overscroll-behavior:contain; } .lenis.lenis-stopped { overflow:clip; } .lenis.lenis-smooth iframe { pointer-events:none; } [id] { scroll-margin-top:110px; } body { background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6; letter-spacing:var(--ls-tight); /* `clip` trims sideways overflow WITHOUT making the body a scroll container. `hidden` here forces overflow-y to auto, body becomes the scrollport, and every position:sticky inside it quietly stops sticking to the viewport. The hidden declaration stays first as the fallback for anything that does not know clip. */ overflow-x:hidden; overflow-x:clip; } img, svg, video { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } ul { list-style:none; padding:0; } button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ::selection { background:var(--c-text); color:var(--c-bg); } :focus-visible { outline:2px solid var(--c-accent); outline-offset:3px; } .wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); } .section { padding-block:clamp(72px, 10vh, 140px); } .section + .section { border-top:1px solid var(--c-line); } .hero-grid { display:none; } /* ============================================================ NAV — flat bar, squared ============================================================ */ /* The bar is fixed, so it crosses black, white and red sections in one scroll. dw.js reads the theme of whatever section is under it and copies that section's --nav-ink / --nav-veil onto .nav, so the logo and pill stay legible the whole way down. */ /* The bar is a fixed white strip on every page and at every scroll position. Its own ink tokens are pinned here, so the per-section values dw.js copies onto the root no longer reach it; the Menu pill and the logo read them. */ .nav { position:fixed; inset:0 0 auto 0; height:72px; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--pad-x); --nav-ink:#000000; --nav-veil:#FFFFFF; --nav-veil-solid:#FFFFFF; background:#FFFFFF; color:#000000; border-bottom:1px solid rgba(0,0,0,0.08); transition:background .4s ease, border-color .4s ease, color .35s ease; } .nav.stuck { background:#FFFFFF; border-bottom-color:rgba(0,0,0,0.1); } /* ---------- the logo ---------- The studio's own mark, flat and still. The SVG paths are traced from the master artwork, and the wordmark is the master's lettering used as a mask, so both take the bar's ink on either section. The nib stays red throughout. Shared by the nav and the footer. */ .nav-brand, .foot-logo { display:inline-flex; align-items:center; gap:12px; color:inherit; } .nav-brand { position:relative; z-index:82; } /* the way through to the AI film studio, sat beside the mark; it takes the bar's ink like the logo does, and warms to red on hover */ .nav-ai { position:relative; z-index:82; margin-right:auto; margin-left:clamp(18px,3vw,40px); display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px; border-radius:99px; border:1px solid color-mix(in srgb, currentColor 32%, transparent); font-family:var(--font-body); font-weight:var(--fw-medium); font-size:0.8125rem; letter-spacing:var(--ls-tight); transition:background .3s ease, border-color .3s ease, color .3s ease; } .nav-ai svg { width:12px; height:12px; transition:transform .4s var(--ease); } .nav-ai:hover { background:var(--brand-red); border-color:var(--brand-red); color:#fff; } .nav-ai:hover svg { transform:translate(2px,-2px); } .nav-ai-dot { width:6px; height:6px; border-radius:50%; background:var(--brand-red); flex:none; } .nav-ai:hover .nav-ai-dot { background:#fff; } body.menu-open .nav-ai { opacity:0; pointer-events:none; } @media (max-width:440px) { .nav-ai { display:none; } } .logo-mark { height:32px; width:auto; flex:none; } .logo-mark .lm-body { fill:currentColor; } .logo-mark .lm-tip { fill:var(--brand-red); } .logo-word { display:block; height:12px; aspect-ratio:832 / 78; background:currentColor; -webkit-mask:url("data:image/png;base64,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") center / contain no-repeat; mask:url("data:image/png;base64,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") center / contain no-repeat; } @media (max-width:380px) { .logo-word { height:10px; } } /* ---------- the Menu pill — the only nav control, at every width ---------- */ /* the pill is always the inverse of the bar's ink, so it reads on any section */ .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; background:var(--nav-ink, #fff); color:var(--nav-veil-solid, #000); font-family:var(--font-body); font-weight:var(--fw-medium); font-size:0.9375rem; letter-spacing:var(--ls-tight); padding:11px 26px; border-radius:99px; position:relative; z-index:82; transition:background .3s ease, color .3s ease, transform .4s var(--ease); } .nav-toggle:hover { background:var(--brand-red); color:#fff; transform:translateY(-1px); } .nav-toggle .lbl-close { display:none; } body.menu-open .nav-toggle .lbl-open { display:none; } body.menu-open .nav-toggle .lbl-close { display:inline; } /* ---------- full-screen menu ---------- */ /* Locking scroll removes the scrollbar and widens the viewport, which shunts the fixed nav sideways. --sbw (measured in dw.js) holds that width back. */ body.menu-open { overflow:hidden; padding-right:var(--sbw, 0px); } body.menu-open .nav { padding-right:calc(var(--pad-x) + var(--sbw, 0px)); } /* the open nav is a full red field — the bar itself goes transparent over it */ /* switch instantly — fading a backdrop-filter out while a full-screen panel moves behind it forces a re-blur every frame and flickers */ body.menu-open .nav { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transition:none; } /* the overlay is one fixed black field regardless of the section behind it, so the bar's per-section ink is overridden for as long as it's open */ body.menu-open .nav { color:#fff; } body.menu-open .nav-toggle { background:#fff; color:var(--brand-black); } body.menu-open .nav-toggle:hover { background:var(--brand-red); color:#fff; } .nav-links { position:fixed; inset:0; z-index:75; background:var(--brand-black); display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; align-items:start; gap:clamp(28px,7vw,140px); padding:clamp(96px,14vh,150px) var(--pad-x) clamp(48px,8vh,90px); overflow-y:auto; /* slide on transform, not clip-path — clip-path repaints the whole panel every frame, which is what made the expansion stutter */ transform:translateY(-100%); will-change:transform; visibility:hidden; /* keeps the links out of the tab order when shut */ transition:transform .55s var(--ease), visibility .55s; } body.menu-open .nav-links { transform:none; visibility:visible; padding-right:calc(var(--pad-x) + var(--sbw, 0px)); } /* primary column — oversized stacked links, no rules between them */ .menu-main { display:flex; flex-direction:column; align-items:flex-start; } .menu-main a { display:block; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(2rem,4.6vw,3.25rem); line-height:1.1; letter-spacing:var(--ls-display); color:#fff; padding:2px 0; } /* secondary column — small grouped lists */ .menu-side { display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); min-width:180px; } .menu-group h3 { font-family:var(--font-body); font-weight:var(--fw-medium); font-size:0.875rem; letter-spacing:var(--ls-tight); color:rgba(255,255,255,0.6); margin-bottom:14px; } .menu-group a { display:block; font-size:1.0625rem; color:#fff; padding:5px 0; } /* shared reveal + hover (last, so it owns the transition on both columns) */ .nav-links a { opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s ease; } .nav-links a:hover { color:var(--brand-red); } body.menu-open .nav-links a { opacity:1; transform:none; } body.menu-open .menu-main a:nth-child(1) { transition-delay:.12s } body.menu-open .menu-main a:nth-child(2) { transition-delay:.18s } body.menu-open .menu-main a:nth-child(3) { transition-delay:.24s } body.menu-open .menu-main a:nth-child(4) { transition-delay:.30s } body.menu-open .menu-main a:nth-child(5) { transition-delay:.36s } body.menu-open .menu-side .menu-group:nth-child(1) a { transition-delay:.30s } body.menu-open .menu-side .menu-group:nth-child(2) a { transition-delay:.38s } body.menu-open .menu-side .menu-group:nth-child(3) a { transition-delay:.44s } @media (max-width:820px) { .nav-links { grid-template-columns:1fr; align-content:start; gap:34px; } .menu-side { flex-direction:row; flex-wrap:wrap; gap:26px 48px; } } /* ============================================================ HERO ============================================================ */ .hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 48px; overflow:hidden; text-align:center; } .hero .wrap { position:relative; z-index:1; } /* ---------- the show: the homepage hero ---------- Two parts, kept apart: the work as a full-width band straight under the bar, then the words on the black field beneath it. The work is shown as it is — no shade, nothing on top. Slides are stacked; the incoming one wipes in from the right over the outgoing one, and drifts in from a slight zoom while it holds. */ .show { position:relative; min-height:auto; justify-content:flex-start; text-align:left; padding:72px 0 clamp(56px,8vh,96px); background:#000; color:#fff; } .show-copy { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:end; column-gap:var(--split-gap); padding-top:clamp(32px,5vh,56px); } .show-copy .hero-eyebrow { grid-column:1 / -1; justify-self:start; } .show .hero-eyebrow { border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.82); margin-bottom:24px; } .hero.show h1 { margin-inline:0; color:#fff; } .show-intro { align-self:end; padding-bottom:6px; } .hero.show .hero-sub { margin:0; color:rgba(255,255,255,.72); max-width:46ch; } .hero.show .hero-sub strong { color:#fff; } .hero.show .hero-actions { justify-content:flex-start; margin-top:24px; } .show .btn-ghost { border-color:rgba(255,255,255,.4); color:#fff; } .show-stage { position:relative; height:min(56.25vw, 74vh); overflow:hidden; background:#111; } .show-slides { position:absolute; inset:0; } .show-slide { position:absolute; inset:0; margin:0; overflow:hidden; visibility:hidden; } .show-slide img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); } .show-slide.is-prev { visibility:visible; z-index:1; } .show-slide.is-active { visibility:visible; z-index:2; animation:showWipe 1.3s cubic-bezier(.77,0,.18,1) both; } .show-slide.is-active img { animation:showDrift 7s linear both; } @keyframes showWipe { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0 0 0 0); } } @keyframes showDrift { from { transform:scale(1.08); } to { transform:scale(1); } } /* the first slide is already there on arrival — it drifts, it doesn't wipe */ .show.is-start .show-slide.is-active { animation:none; } @media (max-width:820px) { .show-copy { grid-template-columns:1fr; } .hero.show .hero-sub { margin-top:20px; } .show-stage { height:62vw; } } /* the bar along the foot: what is on screen, and how long it has left */ .show-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px 0; } .show-now { display:flex; align-items:baseline; gap:14px; min-width:0; color:#fff; transition:opacity .22s ease; } .show-now.is-swapping { opacity:0; } .show-count { font-size:var(--fs-small); color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; } .show-count b { color:var(--brand-red); font-weight:var(--fw-medium); } .show-title { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.0625rem; letter-spacing:var(--ls-tight); white-space:nowrap; } .show-cat { font-size:var(--fs-small); color:rgba(255,255,255,.6); white-space:nowrap; } .show-now svg { width:14px; height:14px; align-self:center; flex:none; transition:transform .4s var(--ease); } .show-now:hover svg { transform:translate(2px,-2px); } .show-now:hover .show-title { color:var(--brand-red); } .show-segs { display:flex; gap:6px; flex:none; } .show-seg { position:relative; width:clamp(28px,4vw,56px); height:24px; padding:0; } .show-seg::before, .show-fill { content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; } .show-seg::before { background:rgba(255,255,255,.28); transition:background .3s ease; } .show-seg:hover::before { background:rgba(255,255,255,.6); } .show-fill { background:var(--brand-red); transform:scaleX(0); transform-origin:0 50%; } .show-seg.is-done .show-fill { transform:scaleX(1); background:rgba(255,255,255,.7); } .show-seg.is-on .show-fill { animation:showFill 6s linear forwards; } .show.is-paused .show-seg.is-on .show-fill, .show.is-paused .show-slide.is-active img { animation-play-state:paused; } @keyframes showFill { from { transform:scaleX(0); } to { transform:scaleX(1); } } /* phones: the same show, pared right back — a taller frame, one quiet line under it (count, name, five small ticks), then the headline, a line of copy and one button. The label and the second button go; the work above already does what "See the work" would. */ @media (max-width:720px) { .show { padding-bottom:clamp(44px,8vh,64px); } .show-stage { height:auto; aspect-ratio:4 / 3; } .show-bar { gap:16px; padding-top:12px; } .show-now { gap:10px; min-width:0; } .show-count { white-space:nowrap; flex:none; } .show-cat { display:none; } .show-title { font-size:0.9375rem; overflow:hidden; text-overflow:ellipsis; } /* out of sight but still running: the active tick's fill is the show's clock, and display:none would stop it */ .show-segs { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); visibility:hidden; pointer-events:none; } .show-copy { padding-top:28px; } .show .hero-eyebrow { display:none; } .hero.show .hero-sub { font-size:1rem; line-height:1.55; margin-top:14px; } .hero.show .hero-actions { margin-top:22px; } .show .btn-ghost { display:none; } .show .btn-primary { width:100%; justify-content:center; } } @media (prefers-reduced-motion: reduce) { .show-slide.is-active, .show-slide.is-active img, .show-seg.is-on .show-fill { animation:none; } .show-seg.is-on .show-fill { transform:scaleX(1); } } .hero-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border:1px solid var(--c-line); margin-bottom:32px; } .hero-dot { width:6px; height:6px; border-radius:50%; background:var(--c-accent); flex:none; } .hero h1 { max-width:20ch; margin-inline:auto; } .hero h1 .line { display:block; } .hero-sub { margin:clamp(26px,3vw,36px) auto 0; max-width:var(--maxw-text); } .hero-sub strong { color:var(--c-text); font-weight:var(--fw-medium); } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:clamp(28px,3.4vw,40px); } .btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:var(--fw-medium); font-size:0.9375rem; letter-spacing:var(--ls-tight); padding:16px 30px; border-radius:0; transition:background .3s ease, color .3s ease, border-color .3s ease; } .btn svg { width:15px; height:15px; transition:transform .4s var(--ease); } .btn:hover svg { transform:translateX(3px); } .btn-primary { background:var(--c-invert); color:var(--c-on-dark); } .btn-primary:hover { background:var(--c-accent); } .btn-ghost { border:1px solid var(--c-line-strong); color:var(--c-text); } .btn-ghost:hover { background:var(--c-accent); color:var(--c-on-dark); border-color:var(--c-accent); } @keyframes sweep { 50% { transform:translateX(0); } 100% { transform:translateX(100%); } } /* reveals */ /* The mask that the rising words slide up through. Tight display tracking lets a word's last glyph overhang its own box, and descenders sit low, so the mask is padded on the right and below (and the padding cancelled with negative margins, so spacing and line height do not change). Without it the "s" of "Designs" and the tails of g / y were being shaved off. */ .wm { display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 0.12em 0.16em 0.04em; margin:0 -0.12em -0.16em -0.04em; } .wm > span { display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:var(--d,0s); } .ready .wm > span { transform:none; } .fade-up { opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); } .ready .fade-up { opacity:1; transform:none; } /* ============================================================ INTRO / STUDIO ============================================================ */ .intro, .detail-intro { background:var(--c-bg); position:relative; z-index:1; } .intro-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--split-gap); align-items:start; } .intro-eyebrow { position:sticky; top:110px; } .intro-lede { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(1.375rem,2.2vw,1.875rem); line-height:1.2; letter-spacing:var(--ls-display); max-width:var(--maxw-text); } .intro-lede .dim { color:var(--c-dim); } .intro-body { margin-top:clamp(24px,3vw,34px); color:var(--c-muted); max-width:var(--maxw-text); } .intro-body + .intro-body { margin-top:16px; } /* big Opus-style figures */ .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--c-line); } .stat { padding:clamp(24px,3vw,36px) 0 0; } .stat b { display:block; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-stat); letter-spacing:var(--ls-mega); line-height:0.9; color:var(--c-accent); } .stat span { display:block; margin-top:14px; font-size:var(--fs-small); color:var(--c-muted); max-width:22ch; } @media (max-width:820px) { .intro-grid { grid-template-columns:1fr; gap:20px; } .intro-eyebrow { position:static; } .stats { grid-template-columns:1fr; gap:0; } .stat + .stat { border-top:1px solid var(--c-line); margin-top:24px; } } /* ============================================================ SERVICES — numbered rows ============================================================ */ .svc-sec { background:var(--c-bg); position:relative; z-index:1; } /* the hero and the intro share the black field; a hairline keeps them apart */ .show + .intro .wrap { border-top:1px solid var(--c-line); padding-top:clamp(56px,8vh,96px); } .show + .intro { padding-top:0; } .svc-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,4.6vw,60px); } .svc-head .t-eyebrow { display:block; margin-bottom:18px; } .svc-head p { max-width:36ch; } /* cards: two tall frames of real work to a row, held in toward the centre with a wide gutter between them; under each, the name in capitals and one plain line on what it is */ .svc-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1180px; margin-inline:auto; column-gap:clamp(20px,4vw,64px); row-gap:clamp(48px,6vw,88px); } .svc-card { display:block; } /* a 4:5 frame: shorter than the 9:16 reels, which fill it from the centre */ .svc-media { aspect-ratio:4 / 5; overflow:hidden; background:var(--c-card); } .svc-media video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); } .svc-card:hover .svc-media video { transform:scale(1.03); } .svc-title { margin-top:20px; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:clamp(1.125rem,1.6vw,1.375rem); line-height:1.15; letter-spacing:0.01em; text-transform:uppercase; color:var(--c-text); transition:color .3s ease; } .svc-card:hover .svc-title { color:var(--c-accent); } .svc-text { margin-top:10px; font-size:0.9375rem; line-height:1.55; color:var(--c-muted); } @media (max-width:900px) { .svc-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:560px) { .svc-cards { grid-template-columns:1fr; } } /* ============================================================ PROCESS — numbered steps ============================================================ */ .proc { background:var(--c-bg); position:relative; z-index:1; } .proc-head .t-eyebrow { display:block; margin-bottom:18px; } .proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:clamp(40px,5vw,64px); } .proc-step { border-top:1px solid var(--c-line-strong); padding-top:22px; } .proc-step .n { font-size:var(--fs-small); color:var(--c-accent); display:block; margin-bottom:clamp(16px,2vw,24px); font-variant-numeric:tabular-nums; } .proc-step h3 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h3); letter-spacing:var(--ls-display); margin-bottom:10px; } .proc-step p { color:var(--c-muted); font-size:var(--fs-small); max-width:32ch; } @media (max-width:900px) { .proc-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px) { .proc-grid { grid-template-columns:1fr; } } /* ============================================================ CLIENTS — a quiet wall of marks ============================================================ */ .clients-head { margin-bottom:clamp(36px,4.6vw,60px); } .clients-head .t-eyebrow { display:block; margin-bottom:18px; } /* Two strips that run on their own, in opposite directions. Each track holds its logos twice and slides by exactly half its width, so the loop is seamless. Held still on hover, and for anyone who asks for less motion. */ .marquees { display:grid; gap:clamp(4px,1vw,12px); } .marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display:flex; width:max-content; list-style:none; padding:0; animation:marquee 48s linear infinite; } .marquee-track.is-reverse { animation-direction:reverse; } .marquee:hover .marquee-track { animation-play-state:paused; } .marquee-track li { flex:none; display:grid; place-items:center; width:clamp(160px,17vw,240px); height:clamp(88px,9vw,120px); padding:0 clamp(20px,2.4vw,36px); } .marquee-track img { width:auto; height:auto; max-width:100%; max-height:56px; opacity:.72; transition:opacity .3s ease; } .marquee-track li:hover img { opacity:1; } .t-black .marquee-track img { filter:invert(1); } /* the marks are black ink */ @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } @media (max-width:520px) { .marquee-track img { max-height:44px; } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; } .marquee { overflow-x:auto; } } /* ============================================================ AI FILMS — the way through to the AI film studio ============================================================ */ .ai-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--split-gap); align-items:end; } .ai-grid .t-eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; } .ai-side .t-lead { max-width:44ch; } .ai-side .btn { margin-top:24px; } @media (max-width:820px) { .ai-grid { grid-template-columns:1fr; row-gap:24px; } } /* ============================================================ WHY US ============================================================ */ .why { background:var(--c-bg); position:relative; z-index:1; } .why .t-eyebrow { display:block; margin-bottom:18px; } .why-title { max-width:16ch; margin-bottom:clamp(36px,4.6vw,60px); } /* all six on one line, flush — contents stack so a narrow column still reads */ .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,48px) var(--gap); } .why-grid li { border-top:1px solid var(--c-line-strong); padding-top:20px; } .why-grid h3 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-h3); letter-spacing:var(--ls-tight); line-height:1.25; margin-bottom:8px; } .why-grid p { color:var(--c-muted); font-size:var(--fs-small); line-height:1.6; max-width:34ch; } @media (max-width:820px) { .why-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px) { .why-grid { grid-template-columns:1fr; } } /* ============================================================ CONTACT — inverted block ============================================================ */ .cta { background:var(--c-bg); position:relative; z-index:1; padding-block:clamp(48px,7vh,96px); } .cta .wrap { position:relative; background:var(--c-bg); color:var(--c-text); border-radius:0; padding:clamp(48px,8vw,120px) clamp(24px,5vw,80px); text-align:center; overflow:hidden; } .cta .wrap > * { position:relative; z-index:1; } .cta .t-eyebrow { display:block; margin-bottom:22px; color:var(--c-muted); } .cta h2 { max-width:18ch; margin-inline:auto; font-family:var(--font-display); } .cta p { max-width:52ch; margin:22px auto 0; color:var(--c-muted); } .cta-mail { display:inline-block; margin-top:clamp(28px,3.6vw,44px); font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(1.125rem,2vw,1.5rem); letter-spacing:var(--ls-display); color:var(--c-text); border-bottom:1px solid var(--c-line-strong); padding-bottom:8px; transition:border-color .35s ease, color .3s ease; } .cta-mail:hover { border-bottom-color:var(--c-accent); color:var(--c-accent); } .cta-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin-top:clamp(26px,3.4vw,40px); color:var(--c-muted); } .cta-meta a { color:var(--c-text); transition:color .3s ease; } .cta-meta a:hover { color:var(--c-accent); } /* ---------- contact form (inside the inverted .cta block) ---------- */ .cta.has-form .wrap { text-align:left; } .contact-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(36px,6vw,100px); align-items:start; } .contact-grid h2 { margin-inline:0; max-width:14ch; } .contact-grid p { margin:22px 0 0; max-width:44ch; } .cta.has-form .cta-meta { flex-direction:column; align-items:flex-start; gap:6px; } .form { display:grid; gap:var(--gap); } .form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); } .field { display:flex; flex-direction:column; gap:8px; } .field label { font-size:var(--fs-small); color:var(--c-muted); } .field input, .field select, .field textarea { font-family:var(--font-body); font-size:1rem; letter-spacing:var(--ls-tight); color:var(--c-text); background:transparent; border:0; border-bottom:1px solid var(--c-line-strong); border-radius:0; padding:12px 0; width:100%; transition:border-color .3s ease; } .field textarea { resize:vertical; min-height:96px; } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color:var(--c-accent); } .field input::placeholder, .field textarea::placeholder { color:var(--c-dim); } .field select { appearance:none; -webkit-appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--c-muted) 50%), linear-gradient(135deg,var(--c-muted) 50%,transparent 50%); background-position:calc(100% - 12px) 22px, calc(100% - 7px) 22px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:28px; } .field select option { background:var(--c-bg); color:var(--c-text); } .field input:user-invalid, .field textarea:user-invalid { border-bottom-color:var(--c-accent); } .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot */ .form-send { justify-self:start; display:inline-flex; align-items:center; gap:10px; background:var(--c-invert); color:var(--c-on-dark); font-family:var(--font-body); font-weight:var(--fw-medium); font-size:0.9375rem; padding:16px 32px; border:0; border-radius:0; cursor:pointer; transition:background .3s ease, color .3s ease; } .form-send:hover { background:var(--c-fill-h); color:var(--c-fill-h-ink); } .form-send[disabled] { opacity:0.55; cursor:not-allowed; } .form-send svg { width:15px; height:15px; } .form-status { font-size:var(--fs-small); color:var(--c-muted); min-height:1.4em; } .form-status.err { color:var(--c-err); } .form-status.ok { color:var(--c-text); } @media (max-width:860px) { .contact-grid { grid-template-columns:1fr; gap:40px; } .form-row { grid-template-columns:1fr; } } /* ============================================================ PROJECTS ============================================================ */ .projects { background:var(--c-bg); position:relative; z-index:1; } .proj-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,4.6vw,60px); } .proj-head .t-eyebrow { display:block; margin-bottom:18px; } .proj-head p { max-width:38ch; } .proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); } .proj-grid.three { grid-template-columns:repeat(3,1fr); } .proj-card { display:flex; flex-direction:column; background:var(--c-surface); border-radius:0; overflow:hidden; transition:background .4s ease; } .proj-card:hover { background:var(--c-surface-2); } .proj-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--c-surface-2); } /* Card thumbnails fill their tile — mixed source ratios letterboxed against the red left ragged gaps. Galleries and case-study covers stay uncropped, so the full artwork is still seen on the detail pages. */ .proj-media img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); } .proj-card:hover .proj-media img { transform:scale(1.03); } /* website screengrabs are a whole page top to bottom: the card shows the top of it, held still, and zooms gently on hover like any other card */ .proj-media.shot img { object-position:50% 0; } /* flex:1 so the body owns whatever height the grid gives the card. Without it the slack fell after the body as bare card colour, and every card showed a different depth of empty block under its title. */ .proj-body { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex:1; padding:clamp(20px,2.2vw,28px); } .proj-cat { font-size:var(--fs-small); color:var(--c-dim); display:block; margin-bottom:8px; } /* two lines are reserved whether the title needs them or not, so a name that wraps does not make its card taller than the one beside it */ .proj-title { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(1.0625rem,1.6vw,1.375rem); letter-spacing:var(--ls-display); line-height:1.2; min-height:2.4em; } .proj-arrow { width:34px; height:34px; flex:none; border:1px solid var(--c-line-strong); border-radius:0; display:grid; place-items:center; color:var(--c-text); transition:background .35s ease, color .35s ease, border-color .35s ease; } .proj-card:hover .proj-arrow { background:var(--c-invert); color:var(--c-on-dark); border-color:var(--c-invert); } .proj-arrow svg { width:13px; height:13px; } .proj-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding:18px clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px); } .proj-tags li { border:1px solid var(--c-line); border-radius:0; padding:6px 12px; font-size:0.8125rem; color:var(--c-muted); } .proj-foot { display:flex; justify-content:center; margin-top:clamp(32px,4vw,52px); } @media (max-width:900px) { .proj-grid.three { grid-template-columns:repeat(2,1fr); } } @media (max-width:680px) { .proj-grid, .proj-grid.three { grid-template-columns:1fr; } } /* ---------- work grid (homepage + projects page) ---------- An editorial rhythm rather than a uniform grid: a larger card and a narrower one side by side, then one across the full width, and repeat. Under each image sit the name, one line on what it was, and the disciplines as small outlined tags. */ .work-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:clamp(48px,6vw,96px); align-items:start; } .work-card { display:block; grid-column:1 / -1; } .work-card:nth-child(3n+1) { grid-column:1 / span 6; } .work-card:nth-child(3n+2) { grid-column:8 / span 5; } .work-media { position:relative; overflow:hidden; aspect-ratio:3 / 2; background:var(--c-card); } .work-card:nth-child(3n) .work-media { aspect-ratio:16 / 9; } .work-media img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); } .work-card:hover .work-media img { transform:scale(1.02); } /* full-page website screengrabs: show the top of the page, held still */ .work-media.shot img { object-position:50% 0; } .work-title { margin-top:16px; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.0625rem; line-height:1.3; letter-spacing:var(--ls-tight); color:var(--c-text); transition:color .3s ease; } .work-card:hover .work-title { color:var(--c-accent); } .work-sub { margin-top:4px; font-size:var(--fs-small); line-height:1.5; color:var(--c-muted); max-width:60ch; } .work-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .work-tags li { border:1px solid var(--c-line-strong); border-radius:99px; padding:3px 11px; font-size:0.75rem; line-height:1.4; color:var(--c-muted); } @media (max-width:760px) { .work-card:nth-child(n) { grid-column:1 / -1; } .work-card:nth-child(n) .work-media { aspect-ratio:3 / 2; } } /* ---------- case study ---------- One continuous block: the key image edge to edge under the bar, then the name, then two columns — what the project was and what we did on the left, the plain facts on the right — and the rest of the work below. */ .cs-hero { position:relative; padding:72px 0 clamp(64px,9vh,112px); } .cs-top { position:relative; overflow:hidden; background:var(--c-card); } .cs-top img { width:100%; height:auto; display:block; } .cs-hero .wrap { position:relative; z-index:1; padding-top:clamp(36px,5vh,64px); } .cs-cat { display:block; margin-bottom:14px; } .cs-hero h1 { max-width:22ch; } .cs-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:clamp(40px,8vw,120px); align-items:start; margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--c-line); } .cs-main { max-width:var(--maxw-text); } .cs-main .lede { margin:0; color:var(--c-text-2); } .cs-text { margin-top:16px; color:var(--c-muted); } .cs-block { margin-top:clamp(32px,4vw,48px); } .cs-label { font-family:var(--font-body); font-weight:var(--fw-medium); font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); color:var(--c-dim); margin-bottom:12px; } .cs-block p { color:var(--c-muted); line-height:1.7; } .cs-block p + p { margin-top:14px; } /* the facts: a short list, label over value, hairline between */ .cs-facts > div { padding-block:14px; border-bottom:1px solid var(--c-line); } .cs-facts > div:first-child { padding-top:0; } .cs-facts dt { font-size:var(--fs-small); color:var(--c-dim); margin-bottom:4px; } .cs-facts dd { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1rem; letter-spacing:var(--ls-tight); color:var(--c-text); } .cs-deliverables { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; } .cs-deliverables li { border:1px solid var(--c-line-strong); border-radius:99px; padding:3px 11px; font-size:0.75rem; line-height:1.4; color:var(--c-muted); } @media (max-width:820px) { .cs-layout { grid-template-columns:1fr; gap:36px; } .cs-facts { display:grid; grid-template-columns:repeat(2,1fr); column-gap:var(--gap); } .cs-facts > div:first-child { padding-top:14px; } } .cs-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); align-items:start; /* ragged ratios shouldn't stretch */ margin-top:clamp(56px,7vw,96px); } .cs-gallery.single { grid-template-columns:1fr; } /* some projects have one extra shot */ .cs-gallery figure { border-radius:0; overflow:hidden; background:var(--c-surface); } .cs-gallery img { width:100%; height:auto; display:block; } @media (max-width:680px) { .cs-gallery { grid-template-columns:1fr; } } /* ============================================================ SERVICE DETAIL PAGES ============================================================ */ .page-hero { position:relative; overflow:hidden; padding:calc(72px + clamp(56px,9vh,104px)) 0 clamp(48px,7vh,84px); } .page-hero .hero-glow { --gx:70%; --gy:12%; width:min(74vw,800px); } .page-hero .wrap { position:relative; z-index:1; } .crumb { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--c-dim); font-size:var(--fs-small); margin-bottom:clamp(24px,3.4vw,36px); } .crumb a { transition:color .3s ease; } .crumb a:hover { color:var(--c-text); } .crumb .sep { color:var(--c-line-strong); } .page-hero .idx { display:block; margin-bottom:18px; } .page-hero h1 { max-width:14ch; } .page-hero .lede { margin-top:clamp(22px,2.8vw,32px); max-width:var(--maxw-text); } .page-hero .hero-actions { margin-top:clamp(26px,3.4vw,40px); justify-content:flex-start; } .inc { background:var(--c-bg); position:relative; z-index:1; } .inc .t-eyebrow { display:block; margin-bottom:18px; } .inc-head p { max-width:42ch; margin-top:16px; } .inc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(36px,4.6vw,60px); } .inc-item { background:var(--c-surface); padding:clamp(24px,3vw,34px); transition:background .4s ease; } .inc-item:hover { background:var(--c-surface-2); } .inc-item .n { font-size:var(--fs-small); color:var(--c-dim); display:block; margin-bottom:24px; font-variant-numeric:tabular-nums; } .inc-item h3 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.0625rem; letter-spacing:var(--ls-tight); margin-bottom:8px; } .inc-item p { color:var(--c-muted); font-size:var(--fs-small); } @media (max-width:900px) { .inc-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { .inc-grid { grid-template-columns:1fr; } } .fit { background:var(--c-bg); position:relative; z-index:1; } .fit .t-eyebrow { display:block; margin-bottom:18px; } .fit-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-top:clamp(36px,4.6vw,60px); } .fit-col { background:var(--c-surface); padding:clamp(26px,3vw,40px); } .fit-col h3 { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.125rem; letter-spacing:var(--ls-tight); margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--c-line); } .fit-col li { display:flex; gap:12px; padding:11px 0; color:var(--c-muted); font-size:var(--fs-small); } .fit-col li svg { width:15px; height:15px; flex:none; margin-top:4px; } .fit-yes li svg { color:var(--c-text); } .fit-no li svg { color:var(--c-dim); } @media (max-width:720px) { .fit-cols { grid-template-columns:1fr; } } .pager { background:var(--c-bg); border-top:1px solid var(--c-line); position:relative; z-index:1; } .pager-inner { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); } /* previous / next: a small card each side — a thumbnail of the project and its name beside it, mirrored on the right */ .pager-link { display:flex; align-items:center; gap:clamp(14px,2vw,24px); padding:clamp(28px,3.6vw,48px) 0; } .pager-link.next { flex-direction:row-reverse; text-align:right; } .pager-thumb { flex:none; width:clamp(96px,14vw,180px); aspect-ratio:4 / 3; overflow:hidden; background:var(--c-card); } .pager-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .pager-link:hover .pager-thumb img { transform:scale(1.05); } .pager-text { min-width:0; } .pager-link .lbl { font-size:var(--fs-small); color:var(--c-dim); display:block; margin-bottom:6px; } .pager-link .ttl { display:block; font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(1rem,1.6vw,1.375rem); line-height:1.2; letter-spacing:var(--ls-tight); transition:color .3s ease; } .pager-link:hover .ttl { color:var(--c-accent); } @media (max-width:620px) { .pager-inner { grid-template-columns:1fr; gap:0; } .pager-link.next { flex-direction:row; text-align:left; border-top:1px solid var(--c-line); } } /* content sits over the sticky hero; the pinned stages get z-index only — position:relative would unpin them */ .section > .wrap { position:relative; z-index:1; } /* ============================================================ FOOTER ============================================================ */ .site-footer { position:relative; z-index:50; background:var(--c-bg); color:var(--c-text); border-top:1px solid var(--c-line); padding:clamp(48px,6vh,80px) var(--pad-x) 32px; } .foot-inner { max-width:var(--maxw); margin-inline:auto; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; } .foot-brand { max-width:330px; } .foot-logo .logo-mark { height:40px; } .foot-logo .logo-word { height:14px; } .foot-brand p { color:var(--c-muted); margin-top:12px; font-size:var(--fs-small); } .foot-col h4 { font-size:var(--fs-small); color:var(--c-dim); margin-bottom:16px; font-weight:var(--fw-medium); } .foot-col a { display:flex; align-items:center; gap:9px; font-size:var(--fs-small); margin-bottom:12px; color:var(--c-text-2); transition:color .3s ease; } .foot-col a:hover { color:var(--c-accent); } .foot-col a svg { width:15px; height:15px; flex:none; margin-top:2px; } .foot-col a { align-items:flex-start; line-height:1.45; } .foot-bottom { max-width:var(--maxw); margin:48px auto 0; padding-top:24px; border-top:1px solid var(--c-line); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--c-dim); font-size:var(--fs-small); } /* ============================================================ MOTION LAYER (driven by dw-motion.js — all opt-in via .motion) Only transform/opacity animate, so none of this triggers layout. ============================================================ */ /* --- scroll progress --- */ .scroll-prog { position:fixed; inset:0 0 auto 0; height:2px; z-index:90; background:var(--c-accent); transform:scaleX(0); transform-origin:0 50%; will-change:transform; pointer-events:none; } /* --- masked word reveals --- */ .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 0.12em 0.16em 0.04em; margin:0 -0.12em -0.16em -0.04em; } /* same mask as .wm */ .wi { display:inline-block; transform:translateY(110%); transition:transform .95s cubic-bezier(.16,1,.3,1); } .split-rev.in .wi { transform:none; } /* --- image wipe-in --- The clip sits on the , not on .img-rev. Clipping the observed element to zero height zeroes its intersection area, so the observer never fires and the image stays hidden permanently. */ .motion .img-rev img { clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.16,1,.3,1); transition-delay:var(--d, 0s); } .motion .img-rev.in img { clip-path:inset(0 0 0 0); } /* --- parallax --- The image is scaled past its frame so there's material to travel through; without the overscale a drift would expose the tile edge. */ .motion .has-par { transform:translate3d(0,var(--par,0px),0) scale(1.14); will-change:transform; } .motion .proj-card:hover .proj-media img.has-par { transform:translate3d(0,var(--par,0px),0) scale(1.18); } /* --- page transition --- */ .motion .page-in main, .motion .page-in .site-footer { animation:pageIn .7s cubic-bezier(.16,1,.3,1) both; } @keyframes pageIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .motion body.page-out, body.page-out { opacity:0; transform:translateY(-10px); transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); } /* ============================================================ THEME ADJUSTMENTS Everything above reads role tokens, so it already re-colours per section. What is left here are the cases a token alone cannot settle: a solid block whose hover would land on the same colour it started from, and the hairlines that are redundant now that neighbouring sections differ by background. ============================================================ */ /* Solid blocks flip to the theme's counter-colour on hover, so the change reads whichever field the section is on. */ .btn-primary:hover, .svc-more:hover { background:var(--c-fill-h); color:var(--c-fill-h-ink); } .nav-cta:hover { background:var(--c-fill-h); color:var(--c-fill-h-ink) !important; } /* Cards are a filled surface, not an outline. Each theme publishes --c-card as a tone that sits clear of its own field, so nothing needs a hairline to be found — on the red sections that surface is black, because a second red would be a shade of the first. */ .proj-card, .inc-item, .fit-col { border:0; background:var(--c-card); } .proj-card:hover, .inc-item:hover { background:var(--c-card); } .stat:hover { background:transparent; } /* Marks sitting ON a card can't use --c-invert: on a red section that resolves to black, and the card is black. --c-card-mark is the tone that reads on the card whatever the field. */ .proj-card:hover .proj-arrow { background:var(--c-card-mark); color:#fff; border-color:var(--c-card-mark); } /* the media well matches the card it sits in rather than the page behind it */ .proj-media { background:var(--c-card); } /* separators are redundant — the change of background is the separator */ .section + .section { border-top:0; } .pager, .site-footer { border-top:0; } .cta .wrap { border:0; } .proj-media, .cs-gallery figure { border:0; } .proj-card .proj-media { border:0; } /* project imagery carries no scrim, and the tonal page washes are gone */ .proj-media::after { display:none; } .hero-glow { display:none; } /* the contact panel is the section field itself, outlined rather than filled */ .cta .wrap { background:transparent; border:1px solid var(--c-line); } .cta .wrap::before { display:none; } .cta-mail:hover { border-bottom-color:var(--c-accent); color:var(--c-accent); } .cta-meta a:hover { color:var(--c-accent); } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color:var(--c-accent); } .field input:user-invalid, .field textarea:user-invalid { border-bottom-color:var(--c-err); } /* the progress bar is fixed above every section, so it tracks the bar's ink rather than any one theme (dw.js keeps --nav-ink current on the root) */ .scroll-prog { background:var(--brand-red); } /* sits on the white bar, so one fixed accent */ /* ============================================================ SCROLL REVEAL + MOTION PREFERENCES ============================================================ */ .rev { opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0s); } .rev.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .rev, .fade-up { opacity:1 !important; transform:none !important; } .wm > span { transform:none !important; } .hero-glow { transition:none; } * { transition-duration:.01ms !important; } }