@charset "utf-8"; /* ===================================================================== BSK MEDIA --------------------------------------------------------------------- 1 tokens + theming 2 base 3 chrome: intro, header, menu, theme toggle 4 hero 5 what we do 6 our specialties 7 work 8 film 9 contact + about 10 lightbox 11 reduced motion 12 responsive <- mobile is the priority Two themes off one token set. Light is the default (bone paper, which is what night photography wants behind it); dark is a second design, not an inversion. The toggle writes data-theme onto and remembers it. Slots marked [data-ai-slot] are built to take generated art later. They hold something real now so nothing reads as unfinished. ===================================================================== */ /* ------------------------------------------------- 1 tokens + theming */ :root { color-scheme: light; --bg: #f4f2ed; --bg-2: #eae7e0; --bg-3: #e2ded5; --hair: #d3cec4; --ink: #14161a; --ink-2: #55595f; /* 6.3:1 on --bg */ --ink-3: #63686f; /* 4.6:1 on --bg — the lightest tone still safe for 12px */ /* a deliberately inverted band, used by Film */ --band-bg: #0e0f11; --band-ink: #f7f6f3; --band-ink-2: rgba(247, 246, 243, 0.7); --band-hair: rgba(247, 246, 243, 0.16); --menu-bg: #14161a; --menu-ink: #f7f6f3; --err: #a3341c; /* 5.6:1 on --bg */ --font: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Type: a major third (1.25) held at both ends of the clamp, so the hierarchy keeps the same proportions at 320px and at 1600px. The old scale had a 1.11 step between body and lede, which is under the threshold where a size difference reads as a different level at all. */ --t--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.84rem); /* 12.5 -> 13.5 labels */ --t-0: clamp(1rem, 0.97rem + 0.16vw, 1.06rem); /* 16 -> 17 body */ --t-1: clamp(1.25rem, 1.19rem + 0.3vw, 1.4rem); /* 20 -> 22.5 lede */ --t-2: clamp(1.5rem, 1.31rem + 0.95vw, 2.1rem); /* 24 -> 34 titles */ --t-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.2rem); /* 31 -> 51 heads */ --t-4: clamp(2.55rem, 1.6rem + 4.7vw, 5.2rem); /* 41 -> 83 display*/ --t-5: clamp(2.4rem, 0.4rem + 16vw, 20rem); /* hero wordmark */ /* Line height is a function of size, not one number for everything. Long prose wants air; display type wants none. */ --lh-prose: 1.65; --lh-lede: 1.5; --lh-title: 1.2; --lh-head: 1.1; --lh-display: 1.02; /* Optical tracking: negative only where the size earns it. Tight tracking on 12px text closes counters and hurts legibility. */ --ls-label: 0.18em; --ls-body: 0; --ls-title: -0.015em; --ls-head: -0.028em; --ls-display: -0.04em; /* Space on a ~1.6 ratio, so section rhythm is a scale rather than a guess */ --s-1: 0.5rem; --s-2: 0.8rem; --s-3: 1.3rem; --s-4: 2.1rem; --s-5: 3.4rem; --s-6: 5.5rem; /* one rhythm for every section boundary */ --sec-y: clamp(3.5rem, 9vh, 7rem); --sec-y-lg: clamp(5rem, 13vh, 10rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-ui: 340ms; --gut: clamp(1.15rem, 5vw, 5.5rem); --measure: 32rem; --z-head: 60; --z-menu: 80; --z-lb: 100; --z-intro: 120; } /* the dark palette, written once and pointed at twice */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0e10; --bg-2: #15171a; --bg-3: #1c1f23; --hair: #2b2f34; --ink: #f2f1ee; --ink-2: #a9adb3; /* 8.0:1 on --bg */ --ink-3: #878b91; /* 5.4:1 on --bg */ --band-bg: #15171a; /* in dark the band lifts instead of dropping */ --band-ink: #f2f1ee; --band-ink-2: rgba(242, 241, 238, 0.68); --band-hair: rgba(242, 241, 238, 0.14); --menu-bg: #15171a; --menu-ink: #f2f1ee; --err: #ff8a70; /* 7.4:1 on --bg */ } /* honour the OS until someone touches the toggle */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d0e10; --bg-2: #15171a; --bg-3: #1c1f23; --hair: #2b2f34; --ink: #f2f1ee; --ink-2: #a9adb3; --ink-3: #878b91; --band-bg: #15171a; --band-ink: #f2f1ee; --band-ink-2: rgba(242,241,238,0.68); --band-hair: rgba(242,241,238,0.14); --menu-bg: #15171a; --menu-ink: #f2f1ee; --err: #ff8a70; } } /* ------------------------------------------------------------ 2 base */ *, *::before, *::after { box-sizing: border-box; } /* is an inline wrapper by default; every layout rule on this site targets the img inside it, so the wrapper has to disappear from layout. */ picture { display: contents; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-0); /* 400, not 300. Outfit's Light is a display weight — at 16px on bone it reads washed out and is the single clearest "template" tell. */ font-weight: 400; line-height: var(--lh-prose); letter-spacing: var(--ls-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color 420ms var(--ease), color 420ms var(--ease); } body.is-locked { overflow: hidden; } img, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* headings carry their own metrics per level rather than one blanket rule */ h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: var(--lh-title); letter-spacing: var(--ls-title); text-wrap: balance; } p { text-wrap: pretty; } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } ::selection { background: var(--ink); color: var(--bg); } .skip { position: absolute; left: var(--s-2); top: -5rem; z-index: 200; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; min-height: 44px; padding: 0.7rem 1.1rem; font-size: var(--t--1); letter-spacing: 0.14em; text-transform: uppercase; transition: top var(--t-ui) var(--ease); } .skip:focus { top: var(--s-2); } .wrap { padding-inline: var(--gut); } .inner { max-width: 96rem; margin-inline: auto; } section[id] { scroll-margin-top: clamp(4.5rem, 9vh, 6.5rem); } .label { font-size: var(--t--1); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; line-height: 1.4; color: var(--ink-2); } .body { max-width: var(--measure); color: var(--ink-2); } .lede { font-size: var(--t-1); line-height: var(--lh-lede); letter-spacing: -0.01em; max-width: 40ch; color: var(--ink-2); font-weight: 300; } .sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-2); margin-bottom: var(--s-5); border-bottom: 1px solid var(--hair); } .sec-head h2 { font-size: var(--t-2); font-weight: 400; letter-spacing: var(--ls-title); } /* entrance primitives */ .rv { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); } .rv.in { opacity: 1; transform: none; } .rvl { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; } .rvl > span { display: block; transform: translateY(105%); transition: transform 820ms var(--ease); transition-delay: var(--d, 0ms); } .rvl.in > span { transform: none; } .rvline { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); transition-delay: var(--d, 0ms); } .rvline.in { transform: scaleX(1); } .rvmask { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease); transition-delay: var(--d, 0ms); } .rvmask.in { clip-path: inset(0 0 0 0); } /* -------------------------------------------------- 3 intro + chrome */ .intro { position: fixed; inset: 0; z-index: var(--z-intro); background: var(--bg); display: grid; place-items: center; transition: transform 1000ms var(--ease), opacity 700ms 260ms linear; } .intro.is-gone { transform: translateY(-101%); opacity: 0; pointer-events: none; } .intro[hidden] { display: none; } .intro__mark { display: flex; align-items: baseline; font-size: clamp(2rem, 9vw, 7rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; } .intro__l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } .intro__l > span { display: block; transform: translateY(105%); transition: transform 820ms var(--ease); transition-delay: var(--d, 0ms); } .intro.is-on .intro__l > span { transform: none; } .intro__l--thin > span { font-weight: 200; color: var(--ink-2); } .intro__bar { width: min(46vw, 22rem); height: 1px; background: var(--hair); margin-top: var(--s-3); transform: scaleX(0); transform-origin: left; transition: transform 900ms 520ms var(--ease); } .intro.is-on .intro__bar { transform: scaleX(1); } .intro__foot { position: absolute; left: 0; right: 0; bottom: var(--s-4); text-align: center; opacity: 0; transition: opacity 600ms 760ms linear; } .intro.is-on .intro__foot { opacity: 1; } /* Over the hero the bar is transparent and blends, which is the look. Past the hero it needs a ground: difference-blended type sitting on top of body copy reads as a collision, not as chrome. */ .head { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-head); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: clamp(0.65rem, 2vw, 1.5rem) var(--gut); mix-blend-mode: difference; color: #fff; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); } .head.is-stuck { mix-blend-mode: normal; color: var(--ink); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); } /* no color-mix support: fall back to the solid ground rather than to nothing */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .head.is-stuck { background: var(--bg); } } .head__menu { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t--1); letter-spacing: 0.14em; text-transform: uppercase; min-height: 44px; min-width: 44px; } .head__burger { display: block; width: 20px; height: 9px; position: relative; } .head__burger i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease); } .head__burger i:first-child { top: 0; } .head__burger i:last-child { bottom: 0; } .head__menu:hover .head__burger i:first-child { transform: translateY(1px); } .head__menu:hover .head__burger i:last-child { transform: translateY(-1px); } .head__right { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.4rem); } /* it is a link, so it carries a real target height rather than its cap height */ .head__mark { display: flex; align-items: center; min-height: 44px; font-size: clamp(0.9rem, 1.4vw, 1.1rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; opacity: var(--dock, 0); transform: translateY(calc((1 - var(--dock, 0)) * 6px)); } .head__mark b { font-weight: 400; } /* theme toggle — one glyph rotates out as the other rotates in */ .theme { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; } .theme svg { position: absolute; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: transform 420ms var(--ease), opacity 260ms linear; } .theme .i-sun { opacity: 0; transform: rotate(-70deg) scale(0.6); } .theme .i-moon { opacity: 1; transform: none; } :root[data-theme="dark"] .theme .i-sun { opacity: 1; transform: none; } :root[data-theme="dark"] .theme .i-moon { opacity: 0; transform: rotate(70deg) scale(0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .i-sun { opacity: 1; transform: none; } :root:not([data-theme="light"]) .theme .i-moon { opacity: 0; transform: rotate(70deg) scale(0.6); } } /* A panel the size of its contents, dropped under the bar — not a full-screen takeover. The scrim behind it is a separate layer so the panel can be small while a tap anywhere outside still closes it. */ .menu__scrim { position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: rgba(8, 9, 11, 0.42); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease); } .menu__scrim.is-open { opacity: 1; pointer-events: auto; } .menu__scrim[hidden] { display: none; } .menu { position: fixed; z-index: var(--z-menu); top: calc(var(--head-h, 4.2rem) - 0.4rem); left: var(--gut); width: min(20rem, calc(100vw - var(--gut) * 2)); max-height: min(30rem, calc(100svh - var(--head-h, 4.2rem) - 2rem)); overflow-y: auto; background: var(--menu-bg); color: var(--menu-ink); padding: var(--s-3) var(--s-4) var(--s-4); border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34); transform-origin: top left; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity 260ms var(--ease), transform 320ms var(--ease); } .menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .menu[hidden] { display: none; } .menu__list { list-style: none; margin: 0; padding: 0; } .menu__list li { overflow: hidden; } .menu__list a { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; font-size: var(--t-1); line-height: 1.2; font-weight: 400; letter-spacing: var(--ls-title); opacity: 0.82; transform: translateY(8px); transition: transform 420ms var(--ease), opacity var(--t-ui) linear; transition-delay: var(--d, 0ms); } .menu.is-open .menu__list a { transform: none; } .menu__list a[aria-current="page"] { opacity: 1; font-weight: 500; } .menu__list a:hover { opacity: 1; } .menu__list .n { font-size: var(--t--1); font-weight: 500; letter-spacing: 0.12em; opacity: 0.5; font-variant-numeric: tabular-nums; } .menu__foot { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--band-hair); display: grid; gap: 0.15rem; color: var(--band-ink-2); } /* the bar's own button closes it, so the panel needs no close control of its own — this stays for keyboard users and is the first stop in the focus trap */ .menu__close { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .menu__close:focus-visible { position: static; width: auto; height: auto; margin: 0; clip-path: none; min-height: 44px; font-size: var(--t--1); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s-2); } /* ----------------------------------------------------------- 4 hero */ .hero { position: relative; height: 100svh; overflow: hidden; background: #0b0c0e; } .hero__media { position: absolute; inset: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--p, 0) * 0.08)); } .hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); } .hero.is-playing .hero__media video { opacity: 1; } .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0.46), rgba(8,9,11,0.1) 42%, rgba(8,9,11,0.66)); } .hero__mark { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; display: flex; justify-content: center; align-items: baseline; color: #f7f6f3; font-size: var(--t-5); font-weight: 200; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; transform: translateY(-50%) scale(calc(1 - var(--p, 0) * 0.34)); opacity: calc(1 - var(--p, 0) * 1.5); will-change: transform; } .hero__mark b { font-weight: 300; } .hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 4vh, 2.5rem); z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-1); padding-inline: var(--gut); color: rgba(247,246,243,0.84); opacity: calc(1 - var(--p, 0) * 2); } .hero__cue { display: flex; align-items: center; gap: 0.5rem; } .hero__cue span { display: block; width: 1px; height: 1.8rem; background: linear-gradient(rgba(247,246,243,0.85), transparent); } /* ------------------------------------------------------ 5 what we do */ .doing { padding-block: var(--sec-y-lg) var(--sec-y); } .say { font-size: var(--t-4); font-weight: 300; line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0; } .say__row { display: flex; align-items: center; gap: clamp(0.6rem, 2.2vw, 2rem); } .say__row--end { justify-content: flex-end; } /* Photographs set into the line. The plate keeps the frame's own 3:2, so the picture is never squeezed into a shape it was not composed for. */ .say__plate { flex: none; position: relative; overflow: hidden; width: clamp(8rem, 26vw, 22rem); aspect-ratio: 3 / 2; background: var(--bg-2); } .say__plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05) translateY(calc((var(--p, 0.5) - 0.5) * -3%)); } .say__plate--tall { aspect-ratio: 3 / 4; width: clamp(6rem, 17vw, 14rem); } /* -------------------------------------------------- 6 our specialties */ .spec { padding-block: var(--sec-y); } .spec__h { font-size: var(--t-4); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--ls-display); margin-bottom: var(--sec-y); } .spec__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(3, 1fr); } .spec__item { position: relative; padding-top: var(--s-2); } .spec__rule { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--hair); } .spec__n { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink-3); } .spec__t { font-size: var(--t-2); font-weight: 500; line-height: var(--lh-title); letter-spacing: var(--ls-title); margin-top: 0.45rem; } .spec__d { margin-top: 0.6rem; color: var(--ink-2); max-width: 36ch; } .spec__t a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hair); transition: border-color var(--t-ui) var(--ease); } .spec__t a:hover { border-color: var(--ink); } /* a real target, not a 14px-tall line of text */ .spec__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.35rem; color: var(--ink); font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--ink); } /* a frame that uncovers on hover or keyboard focus */ .spec__peek { margin-top: var(--s-2); overflow: hidden; background: var(--bg-2); aspect-ratio: 3 / 2; clip-path: inset(0 0 100% 0); transition: clip-path 620ms var(--ease); } .spec__peek img { width: 100%; height: 100%; object-fit: cover; } .spec__item:hover .spec__peek, .spec__item:focus-within .spec__peek { clip-path: inset(0 0 0 0); } /* ------------------------------------------------------- 6b the wall */ /* Brody's own pick. On a wide screen one frame is twice the size of the rest and sits dead centre — the grid is built so the four cells it takes are exactly the four in the middle. Below 62rem there is no centre worth holding, so it goes full width and leads the wall instead. */ .coll { padding-block: var(--sec-y); } .coll__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.35rem, 0.9vw, 0.8rem); } .coll__cell { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-2); overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; } .coll__cell img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.04 + var(--z, 0))) translateY(calc((var(--p, 0.5) - 0.5) * -3.5%)); transition: transform 1100ms var(--ease); } /* hover feeds the same transform through a custom property, so it composes with the scroll parallax instead of overwriting it */ .coll__cell:hover, .coll__cell:focus-visible { --z: 0.05; } .coll__cell::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) var(--ease); } .coll__cell:hover::after, .coll__cell:focus-visible::after { opacity: 0.07; } /* the one frame that is allowed to be big */ .coll__cell--hero { aspect-ratio: auto; grid-column: 2 / span 2; grid-row: 3 / span 2; } .coll__cell--hero img { transform: scale(calc(1.02 + var(--z, 0))) translateY(calc((var(--p, 0.5) - 0.5) * -2%)); } .coll__foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; margin-top: var(--s-4); } /* A "from" price on each specialty, and on the web design page. Buyers who cannot gauge cost do not enquire, they leave; the number is the point, so it gets the weight and the qualifier stays quiet beside it. */ .spec__price, .page-head__price { margin-top: var(--s-2); font-size: var(--t-0); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; } .spec__price b, .page-head__price b { font-size: var(--t-1); font-weight: 400; color: var(--ink); letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums; } .spec__price span, .page-head__price span { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); } .page-head__price { margin-top: var(--s-4); max-width: 46ch; } .page-head__price span { text-transform: none; letter-spacing: 0; font-weight: 300; font-size: var(--t-0); } /* ----------------------------------------------------------- 7 work */ /* Contact sheets, not a carousel. Every frame in a shoot is on the page at once, because you cannot judge a photographer one picture at a time. */ .work { padding-block: var(--sec-y); } .work__note { max-width: 46ch; margin-bottom: var(--s-5); color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lede); font-weight: 300; } /* the sheets are long, so an index stays pinned under the bar */ .setnav { position: sticky; top: calc(var(--head-h, 4.5rem) - 1px); z-index: 40; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); margin-bottom: var(--s-3); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .setnav { background: var(--bg); } } .setnav__list { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .setnav__list::-webkit-scrollbar { display: none; } .setnav__list a { display: flex; align-items: center; min-height: 44px; padding-right: 1.35rem; white-space: nowrap; scroll-snap-align: start; font-size: var(--t-0); color: var(--ink-3); transition: color var(--t-ui) var(--ease); } .setnav__list a:hover { color: var(--ink); } .setnav__list a[aria-current="true"] { color: var(--ink); font-weight: 500; } /* No content-visibility here. It skips layout for the off-screen sheets, but it also makes the browser guess their height, so a jump to #set-watches lands ~180px off before the real content resolves. The frames are fixed-ratio boxes and the images are lazy, so laying all 195 out costs almost nothing; a link that scrolls to the wrong place costs plenty. */ .case { padding-block: var(--s-6); border-top: 1px solid var(--hair); } /* [id] only to out-specify the global `section[id]` scroll offset above: these sections sit under two sticky bars, not one, so they need the taller clear. */ .case[id] { scroll-margin-top: calc(var(--head-h, 4.5rem) + 3.75rem); } .case:first-child { border-top: 0; padding-top: var(--s-3); } .case__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); } .case__t { font-size: var(--t-2); font-weight: 400; line-height: var(--lh-title); letter-spacing: var(--ls-title); } .case__meta { color: var(--ink-3); } .case__blurb { max-width: 58ch; margin-top: var(--s-2); margin-bottom: var(--s-3); color: var(--ink-2); } .case__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.25rem, 0.6vw, 0.5rem); } .case__cell { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-2); overflow: hidden; aspect-ratio: 3 / 2; cursor: pointer; } .case__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); } .case__cell:hover img, .case__cell:focus-visible img { transform: scale(1.07); } .case__cell::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) var(--ease); } .case__cell:hover::after, .case__cell:focus-visible::after { opacity: 0.08; } /* a run of frames that pans sideways as the page scrolls */ .strip { overflow: hidden; padding-block: var(--s-5); } .strip__track { display: flex; gap: clamp(0.5rem, 1.2vw, 1rem); width: max-content; transform: translate3d(calc(var(--p, 0.5) * -14%), 0, 0); } .strip__cell { flex: none; width: clamp(11rem, 26vw, 22rem); aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); } .strip__cell img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ 7b faq */ /*
so it works with a keyboard and without JavaScript, and so the answers are real text on the page — the FAQPage schema requires that. */ .faq { padding-block: var(--sec-y); } .faq__list { border-top: 1px solid var(--hair); } .faq__item { border-bottom: 1px solid var(--hair); } .faq__q { display: flex; align-items: flex-start; gap: var(--s-3); justify-content: space-between; padding-block: var(--s-4); min-height: 44px; font-size: var(--t-1); font-weight: 400; line-height: var(--lh-title); letter-spacing: var(--ls-title); cursor: pointer; list-style: none; transition: color var(--t-ui) var(--ease); } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--ink-2); } /* a plus that becomes a minus, drawn rather than shipped as an icon */ .faq__q::after { content: ''; flex: none; position: relative; top: 0.45em; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 100% no-repeat; transition: transform 420ms var(--ease); } /* the vertical stroke retracts and the whole mark spins a half turn, so the plus resolves to a minus rather than to a rotated bar */ .faq__item[open] .faq__q::after { transform: rotate(180deg); background-size: 100% 1px, 0 100%; } .faq__a { padding-bottom: var(--s-4); } .faq__a p { margin: 0; max-width: 62ch; color: var(--ink-2); } @media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__a { animation: faqIn 460ms var(--ease); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } } } /* ----------------------------------------------------------- 8 film */ .film { background: var(--band-bg); color: var(--band-ink); padding-block: var(--sec-y-lg); transition: background-color 420ms var(--ease), color 420ms var(--ease); } .film .sec-head { border-color: var(--band-hair); } .film .label { color: var(--band-ink-2); } .reels { display: grid; gap: clamp(0.8rem, 2vw, 1.75rem); grid-template-columns: repeat(2, 1fr); } .reel { position: relative; } .reel__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .reel__frame img, .reel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel__frame video { opacity: 0; transition: opacity 500ms var(--ease); } .reel.is-live video { opacity: 1; } .reel__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #f7f6f3; } .reel__play span { width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 1px solid rgba(247,246,243,0.5); display: grid; place-items: center; background: rgba(10,11,13,0.3); backdrop-filter: blur(6px); transition: background-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); } .reel__play:hover span { background: rgba(247,246,243,0.18); transform: scale(1.06); } .reel.is-live .reel__play { opacity: 0; pointer-events: none; } .reel__cap { display: flex; justify-content: space-between; gap: var(--s-1); padding-top: 0.7rem; } /* Sound. Video autoplays muted because every browser requires it; this button is the user gesture that is allowed to turn audio on. The state is carried by aria-pressed as well as the icon, so it is not colour-only. */ .reel__sound { position: absolute; z-index: 3; right: clamp(0.6rem, 2vw, 1rem); bottom: clamp(0.6rem, 2vw, 1rem); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #f7f6f3; background: rgba(10, 11, 13, 0.55); border: 1px solid rgba(247, 246, 243, 0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); } .reel__sound:hover { background: rgba(10, 11, 13, 0.8); transform: scale(1.06); } .reel__sound svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .reel__sound .spk { fill: currentColor; stroke-width: 1; } .reel__sound .wave { opacity: 0; transition: opacity 200ms var(--ease); } .reel__sound .cross { opacity: 1; transition: opacity 200ms var(--ease); } .reel__sound.is-on .wave { opacity: 1; } .reel__sound.is-on .cross { opacity: 0; } /* the hero carries its own, sitting beside the scroll cue */ .hero__right { display: flex; align-items: center; gap: var(--s-3); } .hero__sound { position: static; } /* ------------------------------------------------- 9 contact + about */ .contact { padding-block: var(--sec-y-lg) var(--s-5); } .contact__say { font-size: var(--t-3); font-weight: 300; line-height: var(--lh-head); letter-spacing: var(--ls-head); max-width: 16ch; } .contact__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); font-size: var(--t-2); font-weight: 400; letter-spacing: var(--ls-title); border-bottom: 1px solid var(--hair); padding-bottom: 4px; transition: border-color var(--t-ui) var(--ease); } .contact__mail:hover { border-color: var(--ink); } .contact__grid { margin-top: var(--sec-y); display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--hair); color: var(--ink-2); } .foot a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hair); } .page-head { padding-block: calc(var(--sec-y-lg) + 3rem) var(--s-5); } .page-head h1 { font-size: var(--t-4); font-weight: 300; line-height: var(--lh-display); letter-spacing: var(--ls-display); } .about__lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; } .about__portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); } .about__portrait img { width: 100%; height: 100%; object-fit: cover; } .about__body { padding-block: var(--sec-y); } .about__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 4rem); } .about__cols p { color: var(--ink-2); max-width: 40ch; } .about__cols p + p { margin-top: var(--s-2); } .approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: var(--sec-y); } .approach__item { padding-top: var(--s-2); border-top: 1px solid var(--hair); } .approach__n { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); font-variant-numeric: tabular-nums; color: var(--ink-3); } .approach__t { font-size: var(--t-1); font-weight: 500; line-height: var(--lh-title); letter-spacing: var(--ls-title); margin-top: 0.4rem; } .approach__d { color: var(--ink-2); margin-top: 0.35rem; } /* AI placeholder — a generated plate drops in here */ .slot { position: relative; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; } .slot img { width: 100%; height: 100%; object-fit: cover; } .slot__note { position: absolute; inset: auto var(--s-2) var(--s-2) var(--s-2); z-index: 2; color: rgba(247,246,243,0.72); font-size: var(--t--1); letter-spacing: 0.14em; text-transform: uppercase; } /* ------------------------------------------------- 9b web design page */ /* This page sells the build service, so it has to demonstrate it. Every device below is CSS-driven off a custom property; the JS only publishes numbers. Nothing animates that is not transform, opacity or clip-path. */ .svc-layout { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } /* Grid children default to min-width:auto, so a horizontal scroller inside one cannot shrink below its content and blows the page out sideways. */ .svc-layout > * { min-width: 0; } /* ---- the page's own menu ---- */ .subnav { position: sticky; top: calc(var(--head-h, 4.5rem) + var(--s-4)); } .subnav__t { margin-bottom: var(--s-3); } .subnav__list { list-style: none; margin: 0; padding: 0; position: relative; min-width: 0; border-left: 1px solid var(--hair); } /* a single marker that slides to whichever item you are reading */ .subnav__marker { position: absolute; left: -1px; width: 1px; background: var(--ink); top: 0; height: var(--mk-h, 0px); transform: translateY(var(--mk-y, 0px)); transition: transform 520ms var(--ease), height 520ms var(--ease); } .subnav__list a { display: flex; align-items: baseline; gap: 0.75rem; min-height: 44px; padding: 0.55rem 0 0.55rem var(--s-3); color: var(--ink-3); transition: color var(--t-ui) var(--ease), padding-left var(--t-ui) var(--ease); } .subnav__n { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); font-variant-numeric: tabular-nums; } .subnav__label { font-size: var(--t-0); } .subnav__list a:hover { color: var(--ink); } .subnav__list a[aria-current="true"] { color: var(--ink); padding-left: calc(var(--s-3) + 0.35rem); } .subnav__list a[aria-current="true"] .subnav__label { font-weight: 500; } /* ---- the stages ---- */ .loop { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sec-y) clamp(2rem, 5vw, 5rem); } .loop__item { position: relative; padding-top: var(--s-3); } /* the rule draws itself rather than simply appearing */ .loop__item::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--hair); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); transition-delay: var(--d, 0ms); } .loop__item.in::before { transform: scaleX(1); } /* the stage number sits large and quiet behind its own heading */ .loop__n { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--ink-3); opacity: 0.42; font-variant-numeric: tabular-nums; display: block; overflow: hidden; } .loop__n > span { display: block; transform: translateY(105%); transition: transform 900ms var(--ease); transition-delay: var(--d, 0ms); } .loop__item.in .loop__n > span { transform: none; } .loop__t { font-size: var(--t-2); font-weight: 400; line-height: var(--lh-title); letter-spacing: var(--ls-title); margin-top: var(--s-2); max-width: 20ch; } .loop__d { margin-top: 0.6rem; color: var(--ink-2); max-width: 42ch; } /* ---- service groups ---- */ .grp { padding-block: var(--sec-y) 0; } .grp:first-child { padding-top: 0; } .grp__head { padding-bottom: var(--s-3); margin-bottom: var(--s-5); border-bottom: 1px solid var(--hair); } .grp__n { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); color: var(--ink-3); font-variant-numeric: tabular-nums; } .grp__t { font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); letter-spacing: var(--ls-head); margin-top: 0.4rem; } .grp__d { margin-top: var(--s-2); color: var(--ink-2); max-width: 48ch; } /* a soft light that follows the pointer across the list. Pure decoration, so it is desktop-and-mouse only and disappears under reduced motion. */ .svc-list { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) clamp(2rem, 4vw, 4rem); } .svc-list::before { content: ''; position: absolute; inset: -1rem; pointer-events: none; z-index: 0; border-radius: 1rem; background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ink) 6%, transparent), transparent 72%); opacity: 0; transition: opacity 500ms var(--ease); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .svc-list:hover::before { opacity: 1; } } .svc-item { position: relative; z-index: 1; padding-top: var(--s-2); } .svc-item::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--hair); } /* and a second rule, in ink, that draws across on hover */ .svc-item::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 620ms var(--ease); } .svc-item:hover::after, .svc-item:focus-within::after { transform: scaleX(1); } .svc-item__t { font-size: var(--t-1); font-weight: 500; line-height: var(--lh-title); letter-spacing: var(--ls-title); transition: transform var(--t-ui) var(--ease); } .svc-item:hover .svc-item__t { transform: translateX(4px); } .svc-item__d { margin-top: 0.45rem; color: var(--ink-2); max-width: 38ch; } /* ---- the mockup plate: visual relief in a page that is otherwise all type ---- */ .mock { padding-block: var(--sec-y); } .mock__frame { position: relative; overflow: hidden; border: 1px solid var(--hair); border-radius: 10px; background: var(--bg-2); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 60px rgba(0,0,0,0.07); } :root[data-theme="dark"] .mock__frame { box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.55); } .mock__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hair); } .mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hair); } .mock__url { margin-left: 0.6rem; font-size: var(--t--1); color: var(--ink-3); letter-spacing: 0.04em; } .mock__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); } .mock__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: translateY(calc((var(--p, 0.5) - 0.5) * -6%)) scale(1.06); } .mock__cap { margin-top: var(--s-3); color: var(--ink-2); max-width: 44ch; } /* ---- the combined offer ---- */ .combo { background: var(--band-bg); color: var(--band-ink); padding-block: var(--sec-y-lg); margin-top: var(--sec-y); transition: background-color 420ms var(--ease), color 420ms var(--ease); } .combo__t { font-size: var(--t-3); font-weight: 300; line-height: var(--lh-head); letter-spacing: var(--ls-head); max-width: 20ch; } .combo__d { margin-top: var(--s-3); color: var(--band-ink-2); max-width: 46ch; } .combo .label { color: var(--band-ink-2); } /* ------------------------------------------------------- 9c enquiry form */ /* A real form, because a mailto: link asks the visitor to go and do work in another application and most of them will not. Progressive: it POSTs to a form service, and if none is configured it falls back to a prefilled mail client rather than silently losing the enquiry. */ .form { display: grid; gap: var(--s-3); max-width: 40rem; margin-top: var(--s-4); } .form__row { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); } .field { display: grid; gap: 0.4rem; } .field > label { font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-2); } .field > label .req { color: var(--ink-3); } .field input, .field textarea, .field select { font: inherit; font-size: var(--t-0); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; /* iOS rounds inputs by default */ padding: 0.75rem 0 0.7rem; min-height: 48px; /* under 16px iOS zooms on focus; --t-0 is 16 */ width: 100%; transition: border-color var(--t-ui) var(--ease); -webkit-appearance: none; appearance: none; } .field textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-prose); } .field select { cursor: pointer; padding-right: 1.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 5px 5px, 5px 5px; background-position: right 8px center, right 3px center; background-repeat: no-repeat; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .field ::placeholder { color: var(--ink-3); opacity: 1; } /* errors are announced and shown against the field, not only at the top */ .field__err { font-size: var(--t--1); color: var(--err); min-height: 1.1em; } .field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-bottom-color: var(--err); } .form__note { font-size: var(--t--1); color: var(--ink-3); max-width: 44ch; } .form__note a { box-shadow: inset 0 -1px 0 currentColor; } /* The contact-grid link is the only content of its paragraph, so it is a standalone target rather than a link inside a sentence, and it gets a real 44px hit area. (WCAG 2.2 2.5.8 exempts links inline in prose; this is not one of those.) */ .ulink { display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 -1px 0 var(--hair); transition: box-shadow var(--t-ui) var(--ease); } .ulink:hover { box-shadow: inset 0 -1px 0 var(--ink); } /* standalone links in the panel footer, so they get a real target */ .menu__foot a { display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 -1px 0 currentColor; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px; padding: 0 1.6rem; background: var(--ink); color: var(--bg); font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer; border-radius: 999px; transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn[disabled] { opacity: 0.55; cursor: progress; transform: none; } .btn__spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; display: none; animation: spin 700ms linear infinite; } .btn.is-busy .btn__spin { display: block; } @keyframes spin { to { transform: rotate(360deg); } } /* the summary that appears after a failed or successful submit */ .form__status { font-size: var(--t-0); } .form__status:empty { display: none; } .form__status.is-bad { color: var(--err); } .form__status.is-good { color: var(--ink); } .form__status a { border-bottom: 1px solid currentColor; } /* honeypot: visible to bots, gone for everyone else */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------- 10 lightbox */ .lb { position: fixed; inset: 0; z-index: var(--z-lb); background: rgba(10,11,13,0.96); display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem); } .lb[hidden] { display: none; } .lb__fig { margin: 0; display: grid; gap: 0.6rem; max-width: min(95vw, 84rem); } .lb__fig img { max-height: 76svh; width: auto; margin-inline: auto; object-fit: contain; } .lb__cap { text-align: center; color: rgba(247,246,243,0.68); font-size: var(--t--1); letter-spacing: 0.06em; } .lb button { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(247,246,243,0.3); color: #f7f6f3; display: grid; place-items: center; transition: background-color var(--t-ui) var(--ease); } .lb button:hover { background: rgba(247,246,243,0.14); } #lbClose { top: clamp(0.75rem, 3vw, 2rem); right: clamp(0.75rem, 3vw, 2rem); } #lbPrev { left: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } #lbNext { right: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } .lb svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; } /* ------------------------------------------------------------ 10b 404 */ .lost { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); } .lost a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t--1); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--hair); transition: box-shadow var(--t-ui) var(--ease); } .lost a:hover { box-shadow: inset 0 -1px 0 var(--ink); } /* -------------------------------------------------------- 10c print */ /* Someone will print a services page or email it to a partner. */ @media print { :root { --bg: #fff; --ink: #000; --ink-2: #333; --ink-3: #555; --hair: #bbb; } body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; } .head, .menu, .theme, .skip, .intro, .subnav, .setnav, .strip, .lb, .hero__cue, .reel__play, .reel__sound, .form, .lost { display: none !important; } .hero { height: auto; min-height: 0; } .hero__mark { position: static; transform: none; color: #000; font-size: 28pt; } .hero__media, .mock__frame { display: none; } .svc-layout { grid-template-columns: 1fr; } .grp__head { position: static; } a { color: #000; text-decoration: underline; } /* a printed page cannot be clicked, so put the destination in the margin */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .rv, .rvl > span, .rvmask, .loop__item::before, .loop__n > span { opacity: 1 !important; transform: none !important; clip-path: none !important; } section { break-inside: avoid-page; } .case { break-inside: auto; } /* a 46-frame sheet cannot fit on one page */ h1, h2, h3 { break-after: avoid-page; } } /* ------------------------------------------------- 11 reduced motion */ @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .rv { opacity: 1 !important; transform: none !important; transition: none !important; } .rvl > span, .intro__l > span, .menu__list a { transform: none !important; } .rvline { transform: scaleX(1) !important; } .rvmask, .spec__peek { clip-path: none !important; } .intro__bar { transform: scaleX(1) !important; } .hero__mark { transform: translateY(-50%) !important; opacity: 1 !important; } .hero__media img, .hero__media video, .say__plate img, .strip__track, .coll__cell img, .case__cell img { transform: none !important; } .hero__foot { opacity: 1 !important; } .head__mark { opacity: 1 !important; transform: none !important; } .loop__item::before { transform: scaleX(1) !important; } .loop__n > span { transform: none !important; } .svc-item::after, .svc-list::before { display: none !important; } .svc-item:hover .svc-item__t { transform: none !important; } .subnav__marker { transition: none !important; } .mock__shot img { transform: none !important; } .grp__head { position: static !important; } video { display: none !important; } .reel__play, .reel__sound { display: none; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ----------------------------------------------------- 12 responsive */ /* Mobile is the priority. The rules above are written width-neutral; these blocks make the small screen deliberate rather than merely reflowed. */ @media (min-width: 62.01rem) { /* each group header holds under the site bar while its own services scroll past, so you always know which group you are inside */ .grp__head { position: sticky; top: calc(var(--head-h, 4.5rem) - 1px); z-index: 20; background: var(--bg); padding-top: var(--s-3); } } @media (max-width: 62rem) { .spec__grid { grid-template-columns: repeat(2, 1fr); } /* three across, and the hero leads instead of sitting in a middle that no longer exists */ .coll__grid { grid-template-columns: repeat(3, 1fr); } .coll__cell--hero { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } .case__grid { grid-template-columns: repeat(4, 1fr); } /* the rail becomes a sticky scroller and the marker becomes an underline */ .svc-layout { grid-template-columns: 1fr; gap: var(--s-3); } .subnav { position: sticky; top: 0; z-index: 50; min-width: 0; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); padding-block: 0.2rem; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .subnav { background: var(--bg); } } .subnav__t { display: none; } .subnav__list { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; border-left: 0; } .subnav__list::-webkit-scrollbar { display: none; } .subnav__list a { white-space: nowrap; padding: 0.5rem 1rem 0.5rem 0; scroll-snap-align: start; } .subnav__list a[aria-current="true"] { padding-left: 0; } .subnav__marker { left: 0; top: auto; bottom: 0; width: var(--mk-w, 0px); height: 2px; transform: translateX(var(--mk-x, 0px)); transition: transform 520ms var(--ease), width 520ms var(--ease); } .about__lead, .about__cols { grid-template-columns: 1fr; } .approach { grid-template-columns: 1fr; gap: var(--s-2); } } @media (max-width: 44rem) { .spec__grid { grid-template-columns: 1fr; gap: var(--s-3); } .coll__grid { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; } .coll__cell--hero { aspect-ratio: 3 / 2; } .form__row { grid-template-columns: 1fr; } .svc-list, .loop { grid-template-columns: 1fr; gap: var(--s-5); } .svc-item__d, .loop__d, .loop__t { max-width: none; } .svc-list::before { display: none; } /* pointer light has no meaning on touch */ .mock__cap { max-width: none; } .spec__item { padding-top: 0.85rem; } .spec__peek { display: none; } /* a hover affordance has no place on touch */ .spec__d { max-width: none; } .case__grid { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; } .reels { grid-template-columns: 1fr; } /* the sentence keeps its plates, stacked under each line instead of beside */ .say { font-size: clamp(2.1rem, 11vw, 3.4rem); } .say__row { flex-wrap: wrap; gap: 0.8rem; } .say__row--end { justify-content: flex-start; } .say__plate { width: min(74vw, 22rem); aspect-ratio: 3 / 2; } .say__plate--tall { width: min(54vw, 15rem); aspect-ratio: 3 / 4; } .menu { left: var(--gut); right: var(--gut); width: auto; } .strip__cell { width: 68vw; } .contact__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-4); } .lb button { width: 2.6rem; height: 2.6rem; } #lbPrev { left: 0.5rem; } #lbNext { right: 0.5rem; } } @media (max-width: 26rem) { .contact__grid { grid-template-columns: 1fr; } .head__menu .head__word { display: none; } /* icon only; keeps the bar light */ }