/* ========================================================================== Case study pages Shares tokens.css with the homepage. The chrome (nav, buttons, footer) is restated here rather than imported, because the homepage keeps its styles inline; design-system.md is the contract both sides answer to. There is no per-page accent any more. Seven projects in seven different colours made seven different websites; the accent is one blue, everywhere. ========================================================================== */ /* ========================================================================== Cross-document view transitions The other half of the opt-in that index.html declares. With both pages opted in, the browser keeps the project's name alive across the navigation and tweens it from the row it was clicked in to the headline below. Unlike the homepage, the name can live in CSS here: a case study has exactly one h1, so it can never collide with a second element wearing the same name (which is the one thing that makes the browser drop a morph). ========================================================================== */ @view-transition { navigation: auto; } .study h1 { view-transition-name: case-title; } ::view-transition-group(case-title) { animation-duration: 620ms; animation-timing-function: var(--ease-out, cubic-bezier(.22,.61,.36,1)); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; } /* Arrive with #slow to inspect the curve at a fifth speed. The ARRIVING document owns the timing, so this has to live here, not on the page the click came from. The class is set by a one-line script in each page head. */ html.slow-mo::view-transition-group(*), html.slow-mo::view-transition-old(*), html.slow-mo::view-transition-new(*) { animation-duration: 3200ms !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--bg); font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-medium); line-height: var(--lh-body); color: var(--ink-muted); font-feature-settings: var(--font-features); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); } p { margin: 0; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container-inner { max-width: calc(var(--container-inner) + var(--gutter) * 2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Nav ---------- */ .nav-wrap { position: fixed; top: 20px; left: 0; right: 0; z-index: var(--z-nav); display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; } .nav { pointer-events: auto; display: flex; align-items: center; gap: 0; width: auto; max-width: 100%; padding: 10px 10px 10px 22px; background: rgba(255,255,255,0.82); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,0.9); border-radius: var(--radius-pill); box-shadow: 0 10px 30px rgba(29,45,72,0.10), 0 2px 6px rgba(29,45,72,0.06); } .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.4px; color: var(--ink); text-decoration: none; white-space: nowrap; /* Padding, not size: a 24px wordmark is the smallest tap target in the nav and in the footer, and it is the way home from both. */ padding-block: 10px; margin-block: -10px; } /* The mark and the mobile menu. Same components as index.html; kept in step with it by hand, the way every other rule in this file already is. */ /* NOT `.mark`: the hero headline already owns that class for the span that wraps "get" and carries its hand-drawn underline. Scoping a 30px circle and a white ring onto it collapsed the word into a badge with a ring around it. `.brandmark` is unambiguous. The mark is his own photograph, cropped to the head. A ring, not a border: the nav is translucent glass over a photograph, and a 1px inset border would read as a hairline box while a ring reads as a cut-out. */ .brandmark { flex: none; display: block; width: 30px; height: 30px; border-radius: var(--radius-circle); object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.92), 0 1px 4px rgba(29,45,72,0.20); transition: transform var(--dur-3) var(--ease-out); } .wordmark:hover .brandmark { transform: scale(1.06); } .nav-toggle { display: none; flex: none; place-items: center; width: 38px; height: 38px; margin-left: 6px; padding: 0; border: 0; border-radius: var(--radius-circle); background: var(--surface); cursor: pointer; transition: background var(--dur-3) var(--ease-out); } .nav-burger { display: grid; gap: 5px; } .nav-burger i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out); } .nav-toggle[aria-expanded="true"] { background: var(--ink); } .nav-toggle[aria-expanded="true"] .nav-burger i { background: #FFFFFF; } .nav-toggle[aria-expanded="true"] .nav-burger i:first-child { transform: translateY(3.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); } .nav-menu { pointer-events: auto; position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: calc(100% - var(--gutter) * 2); max-width: 520px; margin-inline: auto; padding: 8px 8px 10px; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,0.9); border-radius: 22px; box-shadow: 0 18px 44px rgba(29,45,72,0.16), 0 2px 6px rgba(29,45,72,0.06); opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top center; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); } .nav-menu.open { opacity: 1; transform: none; } .nav-menu-cta { display: none; } .nav-menu ul { list-style: none; margin: 0; padding: 0; } .nav-menu a { display: block; padding: 11px 14px; border-radius: 13px; font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-semibold); line-height: 1.2; letter-spacing: -0.3px; color: var(--ink); text-decoration: none; transition: background var(--dur-2) var(--ease-standard); } .nav-menu a:active { background: rgba(29,45,72,0.06); } .nav-menu-mail { display: block; margin: 6px 4px 0; padding-top: 11px; padding-bottom: 3px; border-top: 1px solid var(--hairline); font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: var(--weight-medium) !important; color: var(--ink-muted) !important; } @supports not (backdrop-filter: blur(1px)) { .nav-menu { background: rgba(255,255,255,0.97); } } .nav-links { display: flex; align-items: center; gap: 34px; margin: 0 44px 0 56px; } .nav-links a { position: relative; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink-muted); text-decoration: none; transition: color var(--dur-2) var(--ease-standard); } .nav-links a:hover { color: var(--ink); } .nav-cta { --dot-d: 22px; position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 38px 0 16px; border-radius: var(--radius-pill); background: var(--btn-dark-grad); box-shadow: var(--btn-dark-shadow); color: var(--ink-inverse); font-size: var(--text-caption); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; overflow: hidden; } /* ---------- Buttons (matches the homepage system) ---------- */ .btn { --dot-d: 40px; position: relative; display: inline-flex; align-items: center; height: 56px; padding: 0 62px 0 30px; border-radius: var(--radius-pill); font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--lh-body); text-decoration: none; white-space: nowrap; border: 1px solid transparent; overflow: hidden; cursor: pointer; } .btn-primary { background: var(--btn-primary-grad); border-color: var(--blue-light); color: var(--ink-inverse); box-shadow: var(--btn-primary-shadow); } .btn:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .btn-label, .nav-cta-label { display: inline-block; transition: transform var(--dur-btn) var(--ease-btn); } .btn:hover .btn-label, .nav-cta:hover .nav-cta-label { transform: translateX(var(--btn-label-shift)); } .dot { position: absolute; top: var(--btn-icon-inset); bottom: var(--btn-icon-inset); width: auto; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: var(--radius-circle); transition: transform var(--dur-btn) var(--ease-btn); } .dot svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .dot--out { right: var(--btn-icon-inset); transform: rotate(0deg); } .dot--in { left: calc(-1 * var(--dot-d)); transform: rotate(calc(var(--btn-icon-spin) * -1)); } .btn:hover .dot--out, .nav-cta:hover .dot--out { transform: translateX(calc(var(--dot-d) + var(--btn-icon-inset))) rotate(var(--btn-icon-spin)); } .btn:hover .dot--in, .nav-cta:hover .dot--in { transform: translateX(calc(var(--dot-d) + var(--btn-icon-inset))) rotate(0deg); } /* The vertical padding is the tap target, not decoration: on a phone the nav links are hidden and this back link is the main way out of an article, and at its natural 23px it was half the size a thumb needs. The negative margin keeps the text exactly where it was. */ .tlink { display: inline-flex; align-items: center; gap: 8px; padding-block: 11px; margin-block: -11px; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink); text-decoration: none; } .tlink svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-3) var(--ease-out); } .tlink:hover svg { transform: translateX(5px); } .tlink.back:hover svg { transform: translateX(-5px); } /* ---------- Reveals ---------- */ [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); } [data-reveal].in { opacity: 1; transform: none; } /* ========================================================================== Study layout ========================================================================== */ .study { padding-top: 132px; } /* Top bar: back out, and where you are in the set. Both always reachable. */ .study-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 30px; } .study-pos { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--ink-muted); font-variant-numeric: tabular-nums; } .study-pos b { color: var(--ink); } .study-eyebrow { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 2px 10px rgba(29,45,72,0.05); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--ink); } .study h1 { margin: 18px 0 0; max-width: 16ch; font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .study-sum { margin-top: 20px; max-width: 46ch; font-size: var(--text-lead); font-weight: var(--weight-medium); color: var(--ink-muted); } /* Project meta. An earlier four-cell credits strip died because its Client cell repeated the H1 and its Type cell repeated the eyebrow. This one only carries what the page hasn't said yet: the industry, the services, the year, and what shipped. Labels quiet, values firm, no boxes. */ .study-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 18px 46px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--hairline); } .study-meta div { min-width: 0; } .study-meta dt { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .study-meta dd { margin: 7px 0 0; font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); } @media (max-width: 809px) { .study-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } } /* Hero film */ .study-film { position: relative; margin-top: 48px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--panel-border); background: #0B0C0F; box-shadow: 0 40px 90px rgba(20,40,70,0.20), 0 8px 24px rgba(20,40,70,0.10); } .study-film video, .study-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Hosted film (Wistia) ---------- A case study whose film is hosted uses the SAME .study-film frame as one with a local file, so the two are indistinguishable: same radius, border and shadow. The player fills the frame rather than sizing itself, because .study-film already owns the 16/9 aspect ratio. The :not(:defined) state is the load-in poster. Wistia serves a "swatch" thumbnail per media, and blurring it gives a blur-up while the custom element upgrades, which is why these pages drop .study-ph entirely. The media-specific background-image is set per page; everything reusable is here. padding-top is zeroed because Wistia's own snippet uses it to fake an aspect ratio that this frame already provides. */ .study-film wistia-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .study-film wistia-player:not(:defined) { padding-top: 0; filter: blur(5px); background-position: center; background-size: cover; background-repeat: no-repeat; } .study-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: radial-gradient(120% 130% at 28% 18%, #2C3644 0%, #10141A 72%); text-align: center; } .study-ph span { width: 68px; height: 68px; border-radius: var(--radius-circle); display: grid; place-items: center; background: rgba(255,255,255,0.14); } .study-ph span svg { width: 22px; height: 22px; fill: #fff; margin-left: 4px; } .study-ph b { font-family: var(--font-display); font-size: 20px; color: rgba(255,255,255,0.94); } .study-ph i { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.42); } /* ---------- Public company context ---------- Sits between the film and the story: who this company is, in facts, before any of my own claims about the work. Everything in it is publicly reported. */ .company { margin-top: 64px; padding: 38px 42px; border-radius: var(--radius-2xl); background: #FFFFFF; border: 1px solid var(--hairline); } .company h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink-muted); letter-spacing: 0; } .company h2::before { content: ""; width: 8px; height: 8px; border-radius: 3px; flex: none; background: linear-gradient(150deg, var(--a), var(--b)); box-shadow: 0 3px 9px var(--g); } .company-note { margin-top: 14px; max-width: 68ch; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--ink-muted); } .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(29,45,72,0.10); } .fact h3 { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--ink-muted); letter-spacing: 0; } .fact p { margin-top: 8px; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink); } /* The stand-back line */ .study-lede { margin-top: 76px; max-width: 30ch; font-family: var(--font-display); font-size: var(--text-h2-sm); font-weight: var(--weight-semibold); line-height: 1.22; letter-spacing: -0.6px; color: var(--ink); } /* Solid accent, not a gradient fill. See the note on .hl in index.html. */ .study-lede em { font-style: normal; color: var(--blue); } /* Chapters. The headings are not labels ("The process") but statements that carry the story on their own: read only the h2s and you should still get the arc. */ .chapters { margin-top: 60px; border-top: 1px solid var(--hairline); } .chapter { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 38px 0; border-bottom: 1px solid var(--hairline); } .chapter h2 { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: -0.3px; line-height: 1.3; } .chapter h2::before { content: ""; width: 8px; height: 8px; border-radius: 3px; flex: none; margin-top: 8px; background: var(--blue); } .chapter p { max-width: 62ch; font-size: var(--text-body); color: var(--ink-muted); } /* A chapter that needs more than one paragraph wraps them in .chapter-body, so the grid still sees a single second column. */ .chapter-body { max-width: 62ch; min-width: 0; } .chapter-body p + p { margin-top: 14px; } /* ---------- The highlight layer ---------- A second reading speed. Skim only the .mk phrases and the page still tells its story; that is the test for where one belongs. One or two per chapter, never more. `strong` is for names and terms; it lifts to ink, no wash. */ .mk { color: var(--ink); font-weight: var(--weight-semibold); background: linear-gradient(180deg, transparent 60%, #DBEAFD 60%); padding: 0 2px; margin: 0 -2px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .chapter-body strong, .chapter p strong, .company-note strong, .media-sec > p strong { color: var(--ink); font-weight: var(--weight-semibold); } /* Results */ .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hairline); } .result b { display: block; font-family: var(--font-display); font-size: var(--text-stat); /* Not --lh-stat (0.72): bracketed placeholders like [$X]M clip at that. */ font-weight: var(--weight-bold); line-height: 0.98; letter-spacing: -2px; color: var(--blue); /* Figures line up in a three-column row, so they need fixed-width digits. */ font-variant-numeric: tabular-nums; } .result span { display: block; margin-top: 16px; font-size: var(--text-small); color: var(--ink-muted); } /* Deliverables */ .delivered { margin-top: 60px; } .delivered h2 { font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink-muted); } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; } .chips li { padding: 9px 16px; border-radius: var(--radius-pill); background: #FFFFFF; border: 1px solid var(--hairline); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); } /* ---------- Media sections ---------- A labelled group of films or embeds that sits between chapters. Same label grammar as .chapter h2 and .delivered h2, so the page keeps one voice. */ .media-sec { margin-top: 64px; } .media-sec > h2 { display: flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink-muted); letter-spacing: 0; } .media-sec > h2::before { content: ""; width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--blue); } .media-sec > p { margin-top: 12px; max-width: 62ch; font-size: var(--text-body); color: var(--ink-muted); } /* ---------- Film sets ---------- Several films in one grid. Each frame is the same dark placeholder the hero uses; when a real clip exists, drop a