/* =================================================================== motion.css — presentation layer for the shared motion system. Pairs with js/motion.js. Loaded after style.css on every page. =================================================================== */ /* Colour, type and spacing tokens all live in tokens.css. This file used to declare its own --m-* ramp, which silently overrode the theme because it loads later; only the values tokens.css does not own are kept here. */ :root { --m-accent: #ef233c; } /* Lenis needs the page to scroll normally; it hijacks the wheel only. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ------------------------------------------------------------------- Reveals. Nothing is hidden until reveal.js adds .reveal-armed to , which it only does once its observer is live. If the script never runs, every element simply renders as normal. ------------------------------------------------------------------- */ .reveal-armed [data-reveal], .reveal-armed .reveal, .reveal-armed .main-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--m-ease) var(--reveal-delay, 0ms), transform .75s var(--m-ease) var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal-armed [data-reveal].is-visible, .reveal-armed .reveal.is-visible, .reveal-armed .main-reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* Line-masked headings slide up from behind their own clip edge, so the wrapper itself must stay opaque and only the inner span moves. */ .reveal-armed [data-reveal="lines"] { opacity: 1; transform: none; } .m-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; /* room for descenders inside the mask */ margin-bottom: -.06em; } .m-word__in { display: inline-block; transition: transform .85s var(--m-ease); } .reveal-armed [data-reveal="lines"] .m-word__in { transform: translateY(110%); } .reveal-armed [data-reveal="lines"].is-visible .m-word__in { transform: none; } /* ------------------------------------------------------------------- Scroll progress bar ------------------------------------------------------------------- */ .progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--m-fg); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none; } /* ------------------------------------------------------------------- Pinned flow sequence ------------------------------------------------------------------- */ .flow { position: relative; max-width: var(--m-wide-max); margin: clamp(4rem, 10vw, 7rem) auto; padding: 0 var(--m-gutter); } .flow__sticky { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 6vw, 5rem); align-items: center; min-height: 100vh; padding: 3rem 0; } .flow__stage { position: relative; display: grid; place-items: center; min-height: min(72vh, 44rem); } /* Screens stack on top of each other; JS cross-fades between them. */ .flow__screen { grid-area: 1 / 1; margin: 0; width: 100%; display: grid; place-items: center; } .flow__screen img { display: block; max-width: 100%; max-height: min(72vh, 44rem); width: auto; height: auto; border-radius: 12px; border: 1px solid var(--m-border); background: var(--m-surface); } /* Mobile screenshots get a device-shaped container instead. */ .flow--mobile .flow__screen img { max-height: min(78vh, 46rem); border-radius: 30px; border: 1px solid var(--m-border-strong); } .flow__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .flow__steps li { padding-left: 1.25rem; border-left: 2px solid var(--m-border); opacity: .32; transition: opacity .45s var(--m-ease), border-color .45s var(--m-ease); } .flow__steps li.is-active { opacity: 1; border-left-color: var(--m-fg); } .flow__steps h3 { margin: 0 0 .35rem; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; color: var(--m-fg); } .flow__steps p { margin: 0; font-size: .875rem; line-height: 1.55; font-weight: 300; color: var(--m-fg-muted); } .flow__index { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-fg-subtle); margin-bottom: .4rem; } /* Below the pin breakpoint the sequence becomes a plain stacked list. */ @media (max-width: 860px) { .flow__sticky { grid-template-columns: 1fr; min-height: auto; padding: 0; } .flow__stage { min-height: 0; display: flex; flex-direction: column; gap: 1.5rem; } .flow__screen { grid-area: auto; opacity: 1 !important; visibility: visible !important; } .flow__screen img { max-height: none; } .flow__steps { margin-top: 2rem; } .flow__steps li { opacity: 1; } } /* ------------------------------------------------------------------- Before / after compare ------------------------------------------------------------------- */ .compare { position: relative; max-width: var(--m-wide-max); margin: 0 auto; overflow: hidden; border-radius: 12px; border: 1px solid var(--m-border); cursor: ew-resize; touch-action: pan-y; line-height: 0; } .compare img { display: block; width: 100%; height: auto; } .compare__before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: clip-path; } .compare__handle { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--m-fg); pointer-events: none; } .compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--m-fg); background: rgba(10, 16, 13, .6); backdrop-filter: blur(6px); } .compare__label { position: absolute; top: 1rem; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-fg); background: rgba(10, 16, 13, .72); backdrop-filter: blur(6px); padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--m-border-strong); line-height: 1; pointer-events: none; } .compare__label--before { left: 1rem; } .compare__label--after { right: 1rem; } /* ------------------------------------------------------------------- Screen gallery — the "enough high-res screens" workhorse ------------------------------------------------------------------- */ .screens { max-width: var(--m-wide-max); margin: clamp(3rem, 7vw, 5rem) auto; padding: 0 var(--m-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .screens--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .screen figure, figure.screen { margin: 0; } .screen img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-surface); } .screen figcaption { margin-top: .75rem; font-size: .8125rem; line-height: 1.5; font-weight: 300; color: var(--m-fg-muted); } .screen__label { display: inline-block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-fg-subtle); margin-bottom: .3rem; } /* ------------------------------------------------------------------- State matrix — empty / loading / error / success, side by side ------------------------------------------------------------------- */ .states { max-width: var(--m-wide-max); margin: clamp(3rem, 7vw, 5rem) auto; padding: 0 var(--m-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: 12px; overflow: hidden; } .state { background: var(--m-surface); padding: clamp(1.25rem, 3vw, 1.75rem); } .state__tag { display: inline-block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-fg-subtle); margin-bottom: .75rem; } .state h4 { margin: 0 0 .4rem; font-size: .9375rem; font-weight: 500; color: var(--m-fg); } .state p { margin: 0; font-size: .8125rem; line-height: 1.6; font-weight: 300; color: var(--m-fg-muted); } /* ------------------------------------------------------------------- Metrics row ------------------------------------------------------------------- */ .metrics { max-width: var(--m-page-max); margin: clamp(3rem, 7vw, 5rem) auto; padding: 0 var(--m-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .metric__value { display: block; font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--m-fg); font-variant-numeric: tabular-nums; } .metric__label { display: block; margin-top: .6rem; font-size: .8125rem; font-weight: 300; color: var(--m-fg-muted); } .metric__note { display: block; margin-top: .3rem; font-size: .6875rem; color: var(--m-fg-subtle); } /* ------------------------------------------------------------------- Marquee ------------------------------------------------------------------- */ [data-marquee] { overflow: hidden; white-space: nowrap; } [data-marquee] > * { display: inline-block; white-space: nowrap; will-change: transform; } /* ------------------------------------------------------------------- Reduced motion / no-JS safety net ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .flow__screen { position: static !important; opacity: 1 !important; visibility: visible !important; } .flow__steps li { opacity: 1; } .progress-bar { display: none; } } /* =================================================================== Project blocks — the home page's main event. Each project is a pinned horizontal rail of real product screens, so the work is visible without clicking into anything. =================================================================== */ .proj { position: relative; border-top: 1px solid var(--m-border); } .proj__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.75rem, 4vw, 3rem); padding: clamp(4rem, 9vh, 7rem) 0; overflow: hidden; } .proj__meta { max-width: var(--m-wide-max); width: 100%; margin: 0 auto; padding: 0 var(--m-gutter); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: end; } .proj__kicker { display: flex; align-items: center; gap: .75rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-fg-subtle); margin-bottom: 1rem; } .proj__kicker span { white-space: nowrap; } .proj__kicker i { font-style: normal; width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; } .proj__title { margin: 0; font-size: clamp(1.75rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 300; color: var(--m-fg); text-wrap: balance; } .proj__side { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: .35rem; } .proj__outcome { margin: 0; font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; font-weight: 300; color: var(--m-fg-muted); max-width: 34ch; } .proj__stats { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); } .proj__stat { display: flex; flex-direction: column; gap: .2rem; } .proj__stat b { font-size: 1.375rem; font-weight: 400; letter-spacing: -.02em; color: var(--m-fg); font-variant-numeric: tabular-nums; line-height: 1; } .proj__stat span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--m-fg-subtle); } .proj__cta { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; font-size: .875rem; font-weight: 400; color: var(--m-fg); text-decoration: none; padding-bottom: .3rem; border-bottom: 1px solid var(--m-border-strong); transition: border-color .3s var(--m-ease), gap .3s var(--m-ease); } .proj__cta:hover { border-bottom-color: var(--m-fg); gap: .85rem; } .proj__cta svg { width: .8em; height: .8em; } /* ---- the rail itself ---- */ .proj__viewport { width: 100%; } .proj__track { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); padding: 0 var(--m-gutter); will-change: transform; } .shot { margin: 0; flex: none; /* Height-driven so mixed aspect ratios line up on a shared baseline. */ height: clamp(17rem, 46vh, 30rem); display: flex; flex-direction: column; gap: .7rem; } /* A screenshot dropped straight onto the page reads as a bright brick. The mat gives it a frame, a seam, and a little breathing room, so the rail reads as a set of artefacts rather than a contact sheet. */ .shot__mat { position: relative; height: 100%; padding: .5rem; border-radius: 14px; border: 1px solid var(--m-border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition: border-color .4s var(--m-ease), transform .5s var(--m-ease); } .shot__mat::before { /* Browser chrome: three dots on a hairline, drawn not imaged. */ content: ""; position: absolute; top: .5rem; left: .5rem; right: .5rem; height: 1.5rem; border-radius: 9px 9px 0 0; background: radial-gradient(circle at .75rem 50%, rgba(255,255,255,.22) 2.5px, transparent 3px), radial-gradient(circle at 1.45rem 50%, rgba(255,255,255,.22) 2.5px, transparent 3px), radial-gradient(circle at 2.15rem 50%, rgba(255,255,255,.22) 2.5px, transparent 3px), rgba(255,255,255,.05); pointer-events: none; z-index: 1; } .shot:hover .shot__mat { border-color: var(--m-border-strong); } .shot img { display: block; height: 100%; width: auto; max-width: none; padding-top: 1.5rem; /* clears the drawn chrome bar */ box-sizing: border-box; border-radius: 9px; background: var(--m-surface); object-fit: cover; object-position: top center; } /* A detail crop: no chrome, tighter frame, calls out one decision. */ .shot--detail .shot__mat { padding: 0; border-radius: 10px; } .shot--detail .shot__mat::before { display: none; } .shot--detail img { padding-top: 0; border-radius: 10px; } .shot figcaption { text-align: left; font-size: .75rem; line-height: 1.45; font-weight: 300; color: var(--m-fg-subtle); max-width: 34ch; } .shot figcaption b { display: block; font-weight: 400; color: var(--m-fg-muted); margin-bottom: .15rem; } /* Below the pin breakpoint: native horizontal swipe, no pinning. */ @media (max-width: 860px) { .proj__pin { min-height: auto; padding: clamp(3rem, 8vw, 4.5rem) 0; } .proj__meta { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; } .proj__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .proj__viewport::-webkit-scrollbar { display: none; } .proj__track { transform: none !important; } .shot { height: auto; width: min(82vw, 30rem); scroll-snap-align: center; } .shot__mat { height: auto; } .shot img { height: auto; width: 100%; } } /* =================================================================== Rail variant used inside case studies: same pinned horizontal mechanics as the home page, but a light heading instead of the full project meta block. =================================================================== */ .rail { position: relative; } .rail__head { max-width: var(--m-wide-max); width: 100%; margin: 0 auto; padding: 0 var(--m-gutter); } .rail__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--m-fg-subtle); margin-bottom: .9rem; } .rail__title { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; color: var(--m-fg); max-width: 24ch; text-wrap: balance; } .rail__intro { margin: 1.1rem 0 0; font-size: clamp(1rem, 1.4vw, 1.0625rem); font-weight: 300; line-height: 1.65; color: var(--m-fg-muted); max-width: 52ch; text-wrap: pretty; } /* Portrait phone captures need far more height than a desktop shot. */ .shot--phone { height: clamp(24rem, 66vh, 40rem); } .shot--phone .shot__mat { padding: 0; border: none; background: none; border-radius: 0; } .shot--phone .shot__mat::before { display: none; } .shot--phone img { padding-top: 0; /* The capture already carries the device's own 54px corners as transparency, so any radius here would clip them a second time. */ border-radius: 0; background: transparent; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)); } /* Wide documentation captures (audit pages, system specimens). */ .shot--doc { height: clamp(20rem, 58vh, 34rem); } @media (max-width: 860px) { .shot--phone { height: auto; width: min(68vw, 20rem); } .shot--doc { height: auto; width: min(88vw, 40rem); } } /* A full-page capture is far taller than the rail. Sizing it by height shrinks the UI to nothing, so these are sized by WIDTH and cropped at the bottom instead: the top of the page stays readable. */ .shot--page { height: clamp(20rem, 58vh, 34rem); width: clamp(22rem, 34vw, 32rem); } .shot--page .shot__mat { width: 100%; } .shot--page img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media (max-width: 860px) { .shot--page { height: auto; width: min(88vw, 30rem); } .shot--page img { height: auto; object-fit: contain; } }