/* GENERATED FILE — DO NOT EDIT. Built by _dev/build-css.sh from ds/tokens/*.css + css/site.css. Edit those and re-run the script. Anything written here is lost. */ /* ---- ds/tokens/fonts.css ---- */ /* TT Hoves Pro — brand typeface. Only Regular (400) and Medium (500) were supplied. Heavier weights (DemiBold/Bold) are NOT available: set display type in Medium at large sizes rather than faux-bolding. SECOND LOCAL CHANGE TO THIS FILE (see README "Re-syncing the design system"): the src urls point at WOFF2 subsets rather than the raw .ttf desktop cuts. The .ttf files were 240 KB each and carried 938 characters — Cyrillic, Greek, small caps — for a page that uses 78. The subsets are ~17 KB each and are built from the same licensed files by _dev/build-fonts.sh. Vertical metrics and advance widths are byte-identical to the originals, so nothing reflows. WOFF2 has been supported by every shipping browser since 2016. There is no .ttf fallback on purpose: adding one costs a wasted request on the handful of browsers that would need it and buys nothing on the ones that do not. */ @font-face{font-family:"TT Hoves Pro";src:url("../assets/fonts/tt-hoves-pro-regular-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"TT Hoves Pro";src:url("../assets/fonts/tt-hoves-pro-medium-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} /* ---- ds/tokens/colors.css ---- */ /* EBR colour system — drawn from the logo files: purple #6B00F6, spark yellow #FBDE37, ink #1C1C1C. */ :root{ /* Brand */ --ebr-purple:#6B00F6; --ebr-purple-press:#5400C4; --ebr-purple-soft:#8F44F9; --ebr-purple-wash:#F1E8FE; --ebr-yellow:#FBDE37; --ebr-yellow-press:#E4C50F; --ebr-yellow-wash:#FEF8DC; /* Ink / neutral ramp */ --ink-1000:#000000; --ink-900:#1C1C1C; --ink-700:#3D3D3D; --ink-500:#6E6E6E; --ink-400:#949494; --ink-300:#C4C4C4; --ink-200:#E2E2E0; --ink-100:#EFEEEB; --paper:#F7F6F3; --white:#FFFFFF; /* Semantic surfaces */ --surface-page:var(--paper); --surface-card:var(--white); --surface-inverse:var(--ink-900); --surface-brand:var(--ebr-purple); --surface-accent:var(--ebr-yellow); --surface-muted:var(--ink-100); /* Semantic text */ --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --text-on-dark:var(--white); --text-on-dark-muted:rgba(255,255,255,.62); --text-brand:var(--ebr-purple); --text-link:var(--ebr-purple); --text-link-hover:var(--ink-900); /* Lines */ --line-hairline:var(--ink-200); --line-strong:var(--ink-900); --line-on-dark:rgba(255,255,255,.18); /* Status — derived, used sparingly in product UI */ --status-positive:#0F8A5F; --status-warning:var(--ebr-yellow-press); --status-critical:#D02B20; --focus-ring:var(--ebr-purple); } /* ---- ds/tokens/typography.css ---- */ /* Two type sizes, no middle: display for statements, small for everything else. */ :root{ --font-display:"TT Hoves Pro",-apple-system,"Helvetica Neue",Arial,sans-serif; --font-body:"TT Hoves Pro",-apple-system,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"SFMono-Regular",Menlo,"Courier New",monospace; --weight-regular:400; --weight-medium:500; /* Display — statements. Clamp for fluid pages. */ --size-display-xl:clamp(56px,8.4vw,132px); --size-display-l:clamp(40px,5.4vw,84px); --size-display-m:clamp(30px,3.4vw,52px); --size-title:28px; /* Small — everything else */ --size-body-l:19px; --size-body:16px; --size-small:14px; --size-label:11px; --leading-display:0.94; --leading-title:1.12; --leading-body:1.5; --leading-tight:1.25; --tracking-display:-0.035em; --tracking-title:-0.02em; --tracking-body:-0.005em; --tracking-label:0.16em; /* Semantic roles */ --type-display:var(--weight-medium) var(--size-display-xl)/var(--leading-display) var(--font-display); --type-heading:var(--weight-medium) var(--size-display-m)/var(--leading-title) var(--font-display); --type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body); --type-lead:var(--weight-regular) var(--size-body-l)/1.45 var(--font-body); --type-small:var(--weight-regular) var(--size-small)/1.45 var(--font-body); --type-label:var(--weight-medium) var(--size-label)/1 var(--font-mono); } /* ---- ds/tokens/spacing.css ---- */ /* 4px base. Section rhythm is deliberately large — whitespace is the brand. */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:140px; --gutter:24px; --page-margin:clamp(20px,5vw,72px); --section-y:clamp(72px,10vw,160px); /* @kind spacing */ --max-width:1440px; --measure:62ch; --grid-columns:12; /* @kind other */ } /* ---- ds/tokens/radius-borders.css ---- */ /* Geometry follows the logo: squared letterforms, tight radii. Pills only on buttons/tags. */ :root{ --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-media:18px; --radius-pill:999px; --border-hairline:1px solid var(--line-hairline); --border-strong:1px solid var(--line-strong); --border-on-dark:1px solid var(--line-on-dark); --rule-width:1px; } /* ---- ds/tokens/elevation.css ---- */ /* Near-flat system. Depth comes from hairlines and colour fields, not shadow. Shadows exist only for things that float above the page (menus, slide-over panels). */ :root{ --shadow-none:none; --shadow-raised:0 1px 2px rgba(28,28,28,.06); --shadow-overlay:0 24px 60px -20px rgba(28,28,28,.28); --shadow-panel:-24px 0 80px -30px rgba(28,28,28,.35); --scrim-dark:rgba(28,28,28,.55); /* @kind color */ --blur-glass:blur(14px) saturate(1.1); /* @kind other */ --glass-fill:rgba(247,246,243,.72); /* @kind color */ } /* ---- ds/tokens/motion.css ---- */ /* Motion replaces decoration. Long, eased, no bounce, no spring. */ :root{ --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */ --ease-linear:linear; /* @kind other */ --dur-instant:120ms; /* @kind other */ --dur-fast:220ms; /* @kind other */ --dur-base:420ms; /* @kind other */ --dur-slow:720ms; /* @kind other */ --dur-reveal:1100ms; /* @kind other */ --transition-hover:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out); /* @kind other */ --transition-transform:transform var(--dur-base) var(--ease-out); /* @kind other */ --stagger-step:80ms; /* @kind other */ } /* ---- ds/tokens/base.css ---- */ /* Minimal global base — consumers get sane defaults without a reset framework. */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{margin:0;color:var(--text-strong);font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);line-height:var(--leading-display)} h1{font-size:var(--size-display-xl)} h2{font-size:var(--size-display-l)} h3{font-size:var(--size-display-m);letter-spacing:var(--tracking-title);line-height:var(--leading-title)} h4{font-size:var(--size-title);letter-spacing:var(--tracking-title);line-height:var(--leading-title)} p{margin:0 0 1em;text-wrap:pretty} a{color:var(--text-link);text-decoration:none;text-underline-offset:4px;transition:var(--transition-hover)} a:hover{color:var(--text-link-hover);text-decoration:underline} ::selection{background:var(--ebr-yellow);color:var(--ink-900)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} .ebr-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ---- css/site.css ---- */ /* ========================================================================== EBR Agency — homepage Built on the EBR design system tokens (../ds/styles.css). House rules this file obeys, from the design system readme: - Two type sizes, no middle: display, and small. Plus the 11px caps label. - Flat colour fields only. No gradients, no shadows on cards or buttons. - Depth comes from hairlines and colour fields. - One easing curve, --ease-out, for everything. - Hover states shift colour, never shadow. Press is scale(.975). - Purple does one thing per screen. Yellow only on dark or purple. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page shell -------------------------------------------------------------------------- */ /* One deliberate token override. `tokens/typography.css` resolves --type-label through --font-mono, but the design system readme is explicit — "TT Hoves Pro … No second family", with the 11px caps label "treated as a third, functional size" of that same family — and the homepage wireframe sets every label in TT Hoves too. Two sources against one, so the label runs in the brand face. Delete this block to get the mono labels back. */ :root { --type-label: var(--weight-medium) var(--size-label)/1 var(--font-body); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The sticky header is 72px and anchor targets would otherwise land underneath it. Nothing to do with any library — a pre-existing gap, kept because it is one line and removing it puts the bug back. */ :target { scroll-margin-top: 92px; } /* §28 Darker body copy (26 Oct 2026). Paragraph text only; labels, numbers, headings and text on dark grounds keep their tokens. Was --text-muted #6E6E6E and --text-body #3D3D3D; headings stay #1C1C1C. */ :root { --text-copy: #4A4A4A; --text-copy-strong: #2B2B2B; } /* §28c Body copy one pixel larger (26 Oct 2026): 16→17, 14→15, 19→20, on paragraph text only. Headings, labels, buttons and form fields keep theirs. */ :root { --type-copy: var(--weight-regular) calc(var(--size-body) + 1px)/var(--leading-body) var(--font-body); --type-copy-small: var(--weight-regular) calc(var(--size-small) + 1px)/1.45 var(--font-body); --type-copy-lead: var(--weight-regular) calc(var(--size-body-l) + 1px)/1.45 var(--font-body); } body { font: var(--type-copy); color: var(--text-copy-strong); background: var(--surface-page); overflow-x: hidden; } .e-shell { max-width: var(--max-width); margin: 0 auto; padding-inline: var(--page-margin); } /* Icons: monochrome, currentColor, never in a coloured circle except the accordion toggle and the work-card arrow. */ svg { display: block; flex-shrink: 0; } .e-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-900); color: var(--white); padding: 12px 20px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .e-skip:focus { left: 0; color: var(--white); text-decoration: none; } /* Full-bleed ground, contained content. Each section owns its ground colour. */ .e-section { position: relative; padding-block: var(--section-y); } .e-section--tight { padding-block: clamp(48px, 6vw, 88px); } .e-ground-paper { background: var(--paper); } .e-ground-white { background: var(--white); } .e-ground-ink { background: var(--ink-900); color: var(--text-on-dark); } /* ⚠ THE MUTED TEXT COLOUR IS REDEFINED ON THIS GROUND, and it has to be. `--text-on-dark-muted` is 62% white. Over `--ink-900` that composites to 12.9:1; over `--ebr-purple` it is 3.29:1 — under the floor, because the purple is nowhere near as dark as it looks beside paper. 82% clears it at 5.0:1 and still reads as secondary. Redefining the TOKEN rather than patching each rule is the point: every existing `.e-ground-brand .e-lead`, `.e-stat__label`, `[data-todo]` and anything added later picks the accessible value up without being touched. It was first fixed locally on the work banner's boxes and immediately missed by the next purple band, which is how it earned promoting. */ .e-ground-brand { background: var(--ebr-purple); color: var(--text-on-dark); --text-on-dark-muted: rgba(255,255,255,.82); } /* The hairline that separates grounds of the same value. */ .e-ground-white + .e-ground-white, .e-ground-paper + .e-ground-paper { border-top: var(--border-hairline); } .e-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); margin-bottom: var(--space-8); } /* Display statements ------------------------------------------------------ */ .e-display { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: var(--leading-display); color: var(--text-strong); text-wrap: pretty; } .e-display--xl { font-size: var(--size-display-xl); } .e-display--l { font-size: var(--size-display-l); } .e-display--m { font-size: var(--size-display-m); line-height: 1.04; } .e-ground-ink .e-display, .e-ground-brand .e-display { color: var(--white); } .e-lead { margin: 0; font: var(--type-copy-lead); color: var(--text-copy); max-width: 46ch; } .e-ground-ink .e-lead, .e-ground-brand .e-lead { color: var(--text-on-dark-muted); } .e-measure { max-width: var(--measure); } /* -------------------------------------------------------------------------- 2. SectionLabel — tiny caps label. Opens every section. -------------------------------------------------------------------------- */ .e-label { display: flex; align-items: center; gap: 12px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .e-label__index { color: var(--ebr-purple); } .e-ground-ink .e-label, .e-ground-brand .e-label { color: var(--text-on-dark-muted); } .e-ground-ink .e-label__index, .e-ground-brand .e-label__index { color: var(--ebr-yellow); } /* -------------------------------------------------------------------------- 3. Button -------------------------------------------------------------------------- */ .e-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 11px; padding: 13px 22px; text-transform: uppercase; letter-spacing: var(--tracking-label); border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; white-space: nowrap; transition: var(--transition-hover), transform var(--dur-instant) var(--ease-out); } .e-btn:hover { text-decoration: none; } .e-btn:active { transform: scale(.975); } .e-btn--sm { font-size: 10px; padding: 9px 16px; } .e-btn--lg { font-size: 12px; padding: 17px 30px; } .e-btn--primary { background: var(--ebr-purple); color: var(--white); border-color: var(--ebr-purple); } .e-btn--primary:hover { background: var(--ebr-purple-press); border-color: var(--ebr-purple-press); color: var(--white); } .e-btn--accent { background: var(--ebr-yellow); color: var(--ink-900); border-color: var(--ebr-yellow); } .e-btn--accent:hover { background: var(--ebr-yellow-press); border-color: var(--ebr-yellow-press); color: var(--ink-900); } .e-btn--dark { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); } .e-btn--dark:hover { background: var(--ebr-purple); border-color: var(--ebr-purple); color: var(--white); } .e-btn--outline { background: transparent; color: var(--ink-900); border-color: var(--ink-900); } .e-btn--outline:hover { background: var(--ink-900); color: var(--white); } .e-btn--ghost { background: transparent; color: var(--ink-900); border-color: transparent; padding: 13px 6px; } .e-btn--ghost:hover { color: var(--ebr-purple); } /* On a dark or purple ground the outline/ghost buttons invert. */ .e-btn--on-dark.e-btn--outline { color: var(--white); border-color: rgba(255,255,255,.35); } .e-btn--on-dark.e-btn--ghost { color: var(--white); border-color: transparent; } .e-btn--on-dark.e-btn--outline:hover, .e-btn--on-dark.e-btn--ghost:hover { background: var(--white); color: var(--ink-900); border-color: var(--white); } .e-btn--block { width: 100%; } /* -------------------------------------------------------------------------- 4. ArrowLink — the arrow nudges 2px up-right on hover. -------------------------------------------------------------------------- */ .e-arrow { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--size-body); font-family: var(--font-body); color: var(--text-strong); border-bottom: 1px solid var(--line-hairline); padding-bottom: 4px; transition: var(--transition-hover); } .e-arrow:hover { color: var(--ebr-purple); border-bottom-color: var(--ebr-purple); text-decoration: none; } .e-arrow svg { transition: var(--transition-transform); } .e-arrow:hover svg { transform: translate(2px, -2px); } .e-arrow--on-dark { color: var(--white); border-bottom-color: var(--line-on-dark); } .e-arrow--on-dark:hover { color: var(--white); border-bottom-color: var(--ebr-yellow); } /* -------------------------------------------------------------------------- 5. Tag -------------------------------------------------------------------------- */ .e-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-hairline); border-radius: var(--radius-pill); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); background: transparent; transition: var(--transition-hover); } .e-tag--brand { background: var(--ebr-purple-wash); color: var(--ebr-purple); border-color: transparent; } .e-tag--accent { background: var(--ebr-yellow); color: var(--ink-900); border-color: var(--ebr-yellow); } /* -------------------------------------------------------------------------- 6. Header — the only fixed element on the page. -------------------------------------------------------------------------- */ .e-header { position: sticky; top: 0; z-index: 40; background: var(--glass-fill); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .e-header.is-scrolled { border-bottom-color: var(--line-hairline); } /* Homepage: from the third section down (site.js §2 sets `is-white` off `data-header-white`) the bar keeps the same frosted glass as every other page. It was solid white until 20 Oct 2026; Adrian asked for the glass back so the homepage matches the rest of the site. The class still marks the point where the light-on-dark header hands over, so it stays. */ .e-header.is-white { background: var(--glass-fill); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); } .e-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 16px var(--page-margin); max-width: var(--max-width); margin: 0 auto; } .e-header__logo { display: flex; } .e-header__logo img { height: 26px; width: auto; display: block; } .e-nav { display: flex; align-items: center; gap: var(--space-6); } .e-nav__link { position: relative; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; padding-bottom: 3px; color: var(--text-muted); border-bottom: 1px solid transparent; transition: var(--transition-hover); } .e-nav__link:hover { color: var(--ink-900); text-decoration: none; } .e-nav__link.is-active { color: var(--ink-900); border-bottom-color: var(--ebr-purple); } .e-header__actions { display: flex; align-items: center; gap: 14px; } /* Scroll progress — a 2px purple rule under the header. */ .e-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--ebr-purple); pointer-events: none; } /* Hamburger, mobile only. */ .e-burger { display: none; flex-direction: column; gap: 4px; padding: 6px; background: none; border: none; cursor: pointer; } .e-burger span { display: block; width: 20px; height: 1.5px; background: var(--ink-900); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .e-burger.is-open span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); } .e-burger.is-open span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); } .e-mobilenav { position: fixed; inset: 0; z-index: 39; background: var(--paper); padding: 96px var(--page-margin) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); } .e-mobilenav.is-open { opacity: 1; pointer-events: auto; } .e-mobilenav a { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 34px; letter-spacing: var(--tracking-display); color: var(--ink-900); text-decoration: none; padding-bottom: var(--space-4); border-bottom: var(--border-hairline); } .e-mobilenav a:hover { color: var(--ebr-purple); text-decoration: none; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .e-hero { padding-block: clamp(72px, 9vw, 140px) clamp(64px, 8vw, 110px); } /* Centred composition. Every child still owns its own measure — centring the block is not the same as letting the lines run the full width. */ .e-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; } .e-hero__inner > * { margin-inline: auto; } .e-hero .e-label { justify-content: center; } .e-hero__title { max-width: 20ch; } .e-hero__lead { max-width: 42ch; } .e-hero__actions { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: var(--space-3); } /* --- Intro curtain -------------------------------------------------------- After fiasco.design. Their first-load curtain is `c-Preloader`, not the `c-PageTransition` panel that handles internal navigation — two different components with different motion, and the preloader is the one worth copying, because it is the one with the curve. Read out of their bundle rather than guessed at: - fixed, full viewport, flex-centred on the mark, overflow hidden, z-index above everything, brand colour ground; - the panel never moves. It is wiped away by an SVG `clipPath` in objectBoundingBox units whose bottom edge sweeps up the screen; - the mark drifts up a little, then leaves with the panel. Structure and motion are theirs. The ground is EBR violet, and the words are the ones the footer closes on, so the page opens and ends on the same phrase. Sentence case, because the design system has no title case in it. -------------------------------------------------------------------------- */ .e-intro { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; overflow: hidden; background: var(--ebr-purple); /* The whole exit lives in here. Script morphs the path; the panel itself keeps a transform of none from first frame to last. */ -webkit-clip-path: url(#e-intro-clip); clip-path: url(#e-intro-clip); } /* Only ever shown when script is running to take it away again. */ .js .e-intro { display: flex; } /* Parked, not removed. The curtain used to be taken out of the document when it finished, which was right when it only ever ran once — §11 of the script now drives the same element in the other direction on the way out of a page, and it cannot drive an element that is no longer there. Parked is `display:none`: no space, no clicks, nothing to see. */ .js .e-intro.is-parked { display: none; } /* Out of flow, so it cannot disturb the centring of the mark. Kept at zero size rather than display:none — a hidden subtree stops some browsers resolving the clip reference. */ .e-intro__clip { position: absolute; width: 0; height: 0; } /* Fallback for anything that will not resolve an SVG clip path on an HTML box: drop the clip and slide the panel off the top instead. Never reached in a current browser, and there purely so the page cannot be sealed shut behind a curtain that has no way to leave. */ .e-intro.is-fallback { -webkit-clip-path: none; clip-path: none; } .e-intro.is-fallback.is-done { transform: translateY(-105%); transition: transform 800ms cubic-bezier(.83, 0, .17, 1); } /* Script drives this: down 0 at rest, then up the screen in two moves. */ .e-intro__mark { margin: 0; text-align: center; will-change: transform; } .e-intro__line { display: block; /* Same clip-box correction as the hero: at this leading the descenders fall outside the line box and a bare overflow:hidden shears them off. */ padding-bottom: .2em; margin-bottom: -.2em; } .e-intro__word { display: block; /* Set as the strapline is set in the logo files: uppercase, Medium, widely tracked. The brand guide calls this the Label role and says it "mirrors the logo strapline exactly" — so the curtain carries the lockup's own wording in the lockup's own treatment, rather than a display headline. */ font-family: var(--font-display); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: .12em; /* One line, always. Sized off the viewport rather than the display scale, because tracked uppercase runs far wider than the same string set tight. */ font-size: clamp(20px, 5.2vw, 64px); white-space: nowrap; line-height: 1.02; color: var(--white); } /* No entrance flourish, deliberately. Fiasco's mark is simply there on the first painted frame and holds still until the curtain starts to go; the only motion it ever has is the drift and the exit, both driven in script. */ /* On violet the accent is yellow — the same rule the logo follows. The left margin is negative because tracked type leaves a letter-space hanging off the final D, which would otherwise push the spark adrift. */ .e-intro .e-spark { width: .62em; height: .62em; transform: none; margin-left: -.02em; } /* No scrolling underneath while the curtain is up. */ html.is-intro, html.is-intro body { overflow: hidden; } /* Reduced motion gets the page, immediately. */ @media (prefers-reduced-motion: reduce) { .js .e-intro { display: none; } html.is-intro, html.is-intro body { overflow: auto; } } /* --- Custom cursor -------------------------------------------------------- A dot that tracks exactly and a ring that lags behind it. Both are painted white and the wrapper blends with `difference`, so the cursor inverts against whatever is under it — it reads dark on paper and light on the ink and violet bands without a single colour rule per section. Only ever built for a fine pointer with hover, and never under reduced motion. Touch devices and anyone who asks for less movement keep the system cursor, untouched. -------------------------------------------------------------------------- */ .e-cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } .e-cursor.is-live { opacity: 1; } .e-cursor__dot, .e-cursor__ring { position: absolute; top: 0; left: 0; border-radius: var(--radius-pill); transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%); } .e-cursor__dot { width: 6px; height: 6px; background: #fff; transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .e-cursor__ring { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .7); display: flex; align-items: center; justify-content: center; transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .e-cursor__label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: #fff; opacity: 0; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-out); } /* Anything clickable: the ring closes in on the dot. */ .e-cursor.is-link .e-cursor__ring { width: 22px; height: 22px; border-color: #fff; } .e-cursor.is-link .e-cursor__dot { width: 3px; height: 3px; } /* Media that opens something: the ring becomes a disc carrying a word. The disc stays white and the label goes pure black, because black is the identity under a difference blend — it leaves the backdrop untouched. So the word knocks out of the disc in whatever colour the section behind it is. */ .e-cursor.is-media .e-cursor__ring { width: 88px; height: 88px; background: #fff; border-color: transparent; } .e-cursor.is-media .e-cursor__label { opacity: 1; color: #000; } .e-cursor.is-media .e-cursor__dot { opacity: 0; } /* Over a text field the system cursor is more useful than ours. */ .e-cursor.is-text { opacity: 0; } /* Hide the native cursor only where ours has actually taken over. */ html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .e-work, html.has-cursor .e-reel__stage { cursor: none; } html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; } /* --- Cursor-reactive headline --------------------------------------------- After unseen.co, which renders its type to a WebGL2 texture and warps it in a fragment shader. This gets the same behaviour out of an SVG displacement filter on live DOM text — so the headline stays real, selectable, indexable text rather than a picture of text. The split uses violet and spark yellow rather than the usual red/cyan, so it reads as ink misregistration in EBR's own two colours. The filter is only attached while a pointer is near, because running text through a filter rasterises it and costs a little crispness. Nobody on a touch screen, and nobody who never reaches for the headline, ever pays that. -------------------------------------------------------------------------- */ .e-hero__title { --warp-split: 0px; text-shadow: calc(var(--warp-split) * -1) 0 0 rgba(107, 0, 246, .5), var(--warp-split) 0 0 rgba(251, 222, 55, .5); } .e-hero__title.is-warping { filter: url(#e-warp); } @media (prefers-reduced-motion: reduce) { .e-hero__title { text-shadow: none; } .e-hero__title.is-warping { filter: none; } } /* Testimonial video card sitting under the fold edge. */ .e-vidcard { text-align: left; display: flex; gap: 20px; align-items: center; padding-top: var(--space-6); text-decoration: none; color: inherit; width: fit-content; } .e-vidcard:hover { text-decoration: none; color: inherit; } .e-vidcard__thumb { position: relative; flex: 0 0 200px; height: 124px; border-radius: var(--radius-media); background: var(--ink-900); display: flex; align-items: center; justify-content: center; overflow: hidden; } .e-vidcard__play { width: 44px; height: 44px; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: var(--white); transition: background-color var(--dur-fast) var(--ease-out); } .e-vidcard:hover .e-vidcard__play { background: var(--ebr-purple); } .e-vidcard__stamp { position: absolute; bottom: 10px; left: 14px; font: var(--weight-medium) 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--text-on-dark-muted); } .e-vidcard__copy { display: flex; flex-direction: column; gap: 8px; } .e-vidcard__quote { font: var(--type-lead); color: var(--text-copy); max-width: 30ch; } .e-vidcard__meta { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-400); } /* -------------------------------------------------------------------------- 8. Showreel — full-bleed ink band. -------------------------------------------------------------------------- */ /* One height, two users: the dark stage and the player that replaces it. They must match exactly or the band jumps on click, so it is a variable rather than the same clamp() written twice. */ .e-reel { /* A full screen, and nothing more clever than that — the section stays in normal flow, scrolls with the page, and keeps the bridge joining it to the banner above. Nothing here is sticky or fixed. `100svh`, not `100vh`, for the reason already recorded at §31: `vh` on a phone measures the viewport with the address bar retracted, so the band runs taller than the screen and pushes its own foot copy out of sight. That is the overflow, not a symptom of it. */ --reel-h: 100svh; position: relative; background: var(--ink-900); color: var(--text-on-dark); } /* THE JOIN between the banner and the showreel. * * The banner ends on the Moon's surface, which is bright, and the showreel now * opens on the nebula still, whose top edge is rgb(5,1,11) — measured, not * guessed. Butted together that is a hard horizontal line across the page. * * So this straddles the boundary rather than sitting on one side of it: it * reaches up into the banner's last stretch and down into the showreel's * first, and is fully opaque exactly where the two meet. Both the banner's * final pixel and the showreel's first are therefore painted the same colour, * and the seam has nowhere to show. A gradient on one side alone cannot do * that — it just moves the step somewhere else. * * z-index 1 is deliberate and sits between two existing layers: above the * banner's film (0) and the showreel's poster, below the banner's own text and * buttons (2) and the showreel's controls (2). Dimming either of those would * trade one problem for another. */ .e-reel__bridge { --bridge-h: clamp(140px, 22vh, 260px); position: absolute; left: 0; right: 0; top: calc(var(--bridge-h) * -1); height: calc(var(--bridge-h) * 2); z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 1, 11, 0) 0%, rgb(5, 1, 11) 50%, rgba(5, 1, 11, 0) 100%); transition: opacity var(--dur-base) var(--ease-out); } /* Once the film is running its own frames reach the top of the band, and the lower half of this would sit over them as a dark wash. The join no longer needs hiding at that point — the reader is watching, not scrolling past. */ .e-reel.is-playing .e-reel__bridge { opacity: 0; } @media (prefers-reduced-motion: reduce) { .e-reel__bridge { transition: none; } } /* The crop window. The video is sized to COVER this box and anything past the edges is cut, which is why the overflow lives here and not on the stage. */ .e-reel__frame { position: relative; height: var(--reel-h); overflow: hidden; background: var(--ink-900); } .e-reel__stage { position: absolute; inset: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; cursor: pointer; border: none; width: 100%; /* Transparent, not ink: the poster sits behind it inside the frame. */ background: transparent; color: inherit; padding: 0; } /* `[hidden]` is a UA rule at (0,1,0) and `.e-reel__stage` matches it, so the author `display: flex` above wins and the attribute does nothing. Script sets `hidden` to retire the poster once the film starts; without this line the poster stays on top of the playing video and the section looks dead. */ .e-reel__stage[hidden] { display: none; } /* The only "texture" allowed: a flat hairline field, not a gradient wash. */ .e-reel__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 96px 100%; opacity: .9; } .e-reel__play { position: relative; width: 84px; height: 84px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition-hover); } .e-reel__stage:hover .e-reel__play { background: var(--ebr-purple); border-color: var(--ebr-purple); } .e-reel__stamp { position: relative; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-dark-muted); } /* The poster. Dark by choice — nebula-field, the same still the services banner uses — because the play ring and the stamp are white, and the hairline field they used to sit on is gone once a picture is underneath. */ .e-reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* A scrim over the poster, not over the whole frame — it must disappear with the poster when the video starts, or the film plays behind a permanent veil. The nebula's centre is bright magenta exactly where the ring sits, so without this the white-on-white is unreadable at the one point that matters. */ .e-reel__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,10,22,.45), rgba(14,10,22,.68)); z-index: 0; } .e-reel__play, .e-reel__stamp { z-index: 1; } /* THE VIDEO, COVERING THE BAND. `aspect-ratio` with both minimums and no fixed width or height is what makes this cover rather than stretch: the box grows until it is at least as large as the frame on BOTH axes while holding 16:9, and the frame crops the rest. Setting width:100% instead would stretch the iframe and hand the letterboxing back to Vimeo, which is the thing this is meant to stop. */ .e-reel__player { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16 / 9; min-width: 100%; min-height: 100%; width: auto; height: auto; border: 0; background: var(--ink-900); z-index: 0; } /* A FULL SCREEN IS TALLER THAN WIDESCREEN, AND THE FILM HAS TO GIVE. * * Covering works while the band is wide. Once it is a whole portrait screen it * stops working: measured at 100svh, a 16:9 film covering a 390x844 phone shows * 26% of its own width — a vertical strip through the middle, with anything * framed or captioned sliced off both edges. On an iPad held upright it is 42%. * * So past roughly square, the film is fitted rather than cropped: whole frame, * centred, the band's ink above and below it. The section still fills the * screen, which is what was asked for — it is the film that stops being * stretched to meet it. * * THE POSTER IS DELIBERATELY NOT INCLUDED. The nebula is abstract texture, so * a vertical slice of it still reads as a nebula and fills the screen properly. * Fitting that too would put a letterboxed still on a dark ground before * anyone has even pressed play, which is a worse first impression than a crop * nobody can detect. * * 1/1 is the switch, not 16/9: at 16/9 an ordinary desktop window would flip * to fitted while still showing about three quarters of the frame, which is a * crop worth keeping. Below square the loss is over half and it is not. */ @media (max-aspect-ratio: 1 / 1) { .e-reel__player { min-width: 0; min-height: 0; width: 100%; height: auto; max-width: 100%; max-height: 100%; } } /* Our own controls, because Vimeo's live at the bottom of a frame whose bottom is cropped off. Vimeo's chrome is turned off inline (`controls=0`) rather than left to be clipped — a half-visible scrub bar reads as a broken embed. The full set is one button away, in the lightbox. */ .e-reel__controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: var(--space-4); justify-content: flex-end; /* Legibility over whatever frame the film happens to be on. */ background: linear-gradient(to top, rgba(14,10,22,.72), transparent); } .e-reel__controls[hidden] { display: none; } .e-reel__ctl { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.3); background: rgba(14,10,22,.55); backdrop-filter: blur(6px); color: var(--white); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: var(--transition-hover); } .e-reel__ctl:hover { background: var(--ebr-purple); border-color: var(--ebr-purple); } .e-reel__ctl:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } @media (max-width: 560px) { .e-reel__ctl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .e-reel__ctl { padding: 10px; } } /* The foot's "Watch the full reel" is a button now, because it opens the overlay rather than going anywhere. It has to keep looking like the arrow links beside it, so the button chrome is stripped back off. */ .e-arrow--btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .e-reel__player:focus-visible { outline: 2px solid var(--ebr-purple); outline-offset: -2px; } /* -------------------------------------------------------------------------- The showreel lightbox. Sits at 70/71, above the contact scrim and panel (60/61) and below the intro curtain (999) — the same scale documented at §26b. It carries its own scrim rather than reusing `#scrim`, which the contact panel owns and toggles. Here the video is NOT cropped: the band crops because it is a band, but a reader who asked for full size wants the whole frame and Vimeo's real controls. So this one is sized to 16:9 and fitted inside the viewport. -------------------------------------------------------------------------- */ .e-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-5); } .e-lightbox[hidden] { display: none; } .e-lightbox__scrim { position: absolute; inset: 0; background: rgba(10, 8, 16, .92); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .e-lightbox.is-open .e-lightbox__scrim { opacity: 1; } /* The wrapper has to be exactly as wide as the video, not as wide as it is allowed to be — the close button hangs off its top-right corner, and on a short viewport the 16:9 frame is narrower than the 1200px cap, which left the button floating in open space well clear of the picture. So the height allowance is converted back into a width here and capped against it. */ .e-lightbox__inner { position: relative; z-index: 71; width: min(1200px, 100%); max-width: calc((100vh - var(--space-7) * 2) * 16 / 9); opacity: 0; transform: scale(.98); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .e-lightbox.is-open .e-lightbox__inner { opacity: 1; transform: none; } /* 16:9, and never taller than the viewport allows once the close button and the padding have taken their share. */ .e-lightbox__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--radius-media); overflow: hidden; } .e-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .e-lightbox__close { position: absolute; top: calc(var(--space-5) * -1 - 8px); right: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--white); cursor: pointer; transition: var(--transition-hover); } .e-lightbox__close:hover { background: var(--ebr-purple); border-color: var(--ebr-purple); } .e-lightbox__close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .e-lightbox__scrim, .e-lightbox__inner { transition: none; } } /* ON the picture, not under it. * * This used to be a block in normal flow below the frame, which gave the * section height the frame did not fill — a flat `--ink-900` band under the * nebula with the line sitting in it. Two pictures separated by a strip of * grey, which is the thing the bridge above was added to stop happening at the * other edge. * * So it is lifted out of flow and laid over the foot of the band. The section * is now exactly the height of the frame and the line has no ground of its * own. Centred because the "Watch the full reel" link that used to sit * opposite it has gone, and a lone line at one end of a space-between row * reads as something missing beside it. * * Legibility comes from the stage's own scrim, which covers the poster while * the poster is what is showing. The two retire together: by the time the film * is running and the scrim has gone, this has faded out as well. */ .e-reel__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); padding-bottom: clamp(20px, 4vw, 44px); /* The copy is read, the picture behind it is not clickable anyway — but the play button underneath IS, and it fills the whole stage. Letting clicks through keeps the entire band a single target. */ pointer-events: none; } .e-reel__foot p { margin: 0; font: var(--type-copy-lead); color: var(--text-on-dark-muted); max-width: 52ch; } /* Out of the way once the film is running. It keeps its box rather than being removed from flow: collapsing it would pull the whole page up by the height of two lines at the exact moment someone has settled in to watch. */ .e-reel.is-playing .e-reel__foot { opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } @media (prefers-reduced-motion: reduce) { .e-reel.is-playing .e-reel__foot { transition: none; } } /* -------------------------------------------------------------------------- 9. WorkRow — full-width rows, each led by a view window. -------------------------------------------------------------------------- */ .e-workgrid { display: flex; flex-direction: column; } /* One project, one full-width row: window · facts · name. Rows are separated by a hairline and nothing else — no card, no border, no shadow. */ .e-work { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--line-hairline); text-decoration: none; color: inherit; } .e-workgrid > .e-work:last-child { border-bottom: 1px solid var(--line-hairline); } .e-work:hover { text-decoration: none; color: inherit; } /* The view window. Filled at rest, so the work reads before any interaction and on touch as well as desktop — hover only adds to what is already visible. */ .e-work__win { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-media); overflow: hidden; display: flex; align-items: center; justify-content: center; } .e-work__win--ink { background: var(--ink-900); color: var(--white); } .e-work__win--brand { background: var(--ebr-purple); color: var(--white); } .e-work__win--accent { background: var(--ebr-yellow); color: var(--ink-900); } .e-work__win--muted { background: var(--ink-100); color: var(--ink-900); } /* Until the stills exist the client name at heading size is the artwork. */ .e-work__name { font: var(--type-heading); letter-spacing: var(--tracking-title); transition: transform var(--dur-slow) var(--ease-out); } .e-work:hover .e-work__name { transform: scale(1.03); } .e-work__win img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .e-work:hover .e-work__win img { transform: scale(1.03); } /* A loop video in the window (homepage rows; build.mjs loopOf, js/work-loops.js). It covers the box the way a still would and takes the same hover. The client name it replaces stays in the markup, because the D1 CMS field lives on it, but it is not drawn: the row already names the client on the right. */ .e-work__vid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .e-work:hover .e-work__vid { transform: scale(1.03); } .e-work__win.has-media .e-work__name { display: none; } /* Middle column — outcome at the top, services pinned to the bottom so they sit on the same line across every row regardless of outcome length. */ .e-work__mid { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } .e-work__outcome { font: var(--type-copy-lead); color: var(--text-strong); max-width: 30ch; } .e-work__services { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } .e-work__services span { font: var(--type-small); color: var(--text-muted); } .e-work__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-5); text-align: right; } .e-work__client { font: var(--type-heading); color: var(--text-strong); letter-spacing: var(--tracking-title); white-space: nowrap; } .e-work__year { font: var(--type-small); color: var(--text-muted); vertical-align: super; letter-spacing: 0; } .e-work__go { width: 40px; height: 40px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; flex: none; background: var(--ink-100); color: var(--ink-900); transition: var(--transition-hover); } .e-work:hover .e-work__go { background: var(--ebr-purple); color: var(--white); } .e-work__go svg { transition: var(--transition-transform); } .e-work:hover .e-work__go svg { transform: translate(2px, -2px); } /* 23 Oct 2026, Adrian: the outcome line, then the project name, then the year, stacked in one left-aligned column beside the window; services stay pinned to the bottom with the arrow at the right. The markup is unchanged (the D1 CMS keys sit on .e-work__mid and .e-work__client), so the two wrappers step aside with display: contents and their children take named grid areas. */ .e-work { grid-template-columns: minmax(0, 46%) minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: "win outcome outcome" "win client client" "win . ." "win services go"; column-gap: var(--space-6); row-gap: var(--space-4); } .e-work__win { grid-area: win; } .e-work__mid, .e-work__right { display: contents; } .e-work__outcome { grid-area: outcome; } .e-work__client { grid-area: client; white-space: normal; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .e-work__year { vertical-align: baseline; display: block; } .e-work__services { grid-area: services; margin-top: 0; align-self: end; } .e-work__go { grid-area: go; align-self: end; justify-self: end; } .e-note { font: var(--type-small); color: var(--text-muted); padding-top: var(--space-6); } /* -------------------------------------------------------------------------- 10. Stats on a hairline -------------------------------------------------------------------------- */ .e-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-hairline); } .e-stats--three { grid-template-columns: repeat(3, 1fr); } /* Cells are flex columns so the qualifier can sit on the floor of the tallest cell. Without it, a label that wraps to two lines drops its own qualifier below its neighbour's and the hairlines stop lining up across the row. */ .e-stats > * { padding: var(--space-5) var(--space-5); border-right: var(--border-hairline); display: flex; flex-direction: column; } .e-stat__label { margin-bottom: auto; } .e-stats > *:last-child { border-right: none; } .e-stat__value { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--size-display-m); line-height: 1; letter-spacing: var(--tracking-display); color: var(--text-strong); font-variant-numeric: tabular-nums; } .e-stat__label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding-top: var(--space-3); } /* The qualifier says what the number is measured over. Sentence case, so it does not stack a second run of caps under the label, and separated by space alone. It carried a hairline of its own until 14 Aug 2026. Four short rules at four different lengths across the row read as a stutter rather than a structure — the "hairline on everything" tell. Space does the same job silently. */ .e-stat__qual { font: var(--type-small); color: var(--text-muted); margin-top: var(--space-4); } /* No rule above the row. The vertical dividers already say "four things", and on a full-bleed ground the section edge is separation enough. */ .e-stats--plain { border-top: none; } /* The first cell sits flush with the shell edge so the row lines up with the section label above it, rather than starting one pad in. */ .e-stats > :first-child { padding-left: 0; } .e-ground-ink .e-stat__value { color: var(--white); } .e-ground-ink .e-stat__label { color: var(--text-on-dark-muted); } .e-ground-ink .e-stat__qual { color: var(--text-on-dark-muted); } .e-ground-ink .e-stats, .e-ground-ink .e-stats > * { border-color: var(--line-on-dark); } /* Proof hands off to a booking. One line, one button, on a rule under the row. */ .e-handoff { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-hairline); } .e-handoff p { font: var(--type-copy-lead); color: var(--text-strong); margin: 0; } .e-ground-ink .e-handoff { border-color: var(--line-on-dark); } .e-ground-ink .e-handoff p { color: var(--text-on-dark); } /* -------------------------------------------------------------------------- 11. Client strip -------------------------------------------------------------------------- */ /* Auto-fit rather than a fixed 6-up: the strip carries the seven real client names and must not leave orphan cells. Swap the names for logo s when real marks arrive — the cell geometry is already right. */ /* Six across, no cells and no borders. The strip used to box every client in a ruled cell — fourteen rules for seven names, sitting directly under the proof band. Spacing separates them now; a mark needs air around it, not a frame. */ .e-clients { display: grid; grid-template-columns: repeat(5, 1fr); /* Row gap tightened twice on Adrian's call: --space-7 (48px) to --space-6 (32px), then to --space-5 (24px). ⚠ 24px, NOT 26px. The second request was another 20%, which is 25.6px, and there is no token there. A one-off literal in a single component is how a spacing scale stops being a scale — and 2px is invisible where being on the ladder is not. --space-5 is a 25% cut rather than 20%. The column gap deliberately stays at 32px, wider than the row gap, so the eye tracks across a row before dropping to the next one. */ gap: var(--space-5) var(--space-6); } .e-client { /* The row box. It has to clear the tallest --mh in the set or that mark spills out of its cell and into the gap. The whole set was then scaled to 80%, so the tallest mark — Rare Heritage, square, plus its 20% — lands at 66px. Raise this whenever a mark is scaled past it: the overflow is silent, because nothing clips. */ height: 66px; display: flex; align-items: center; justify-content: center; } /* Capped on both axes, not sized on height. These marks range from 1.08:1 to 6.88:1 — a wordmark nearly seven times wider than it is tall would swamp a square emblem beside it if height alone were matched. Each one fits inside the same box instead, so the wall reads as one set. */ .e-client__mark { /* ⚠ EACH MARK CARRIES ITS OWN CAP, SET INLINE AS --mh AND COMPUTED FROM ITS REAL ASPECT RATIO SO EVERY LOGO OCCUPIES ROUGHLY THE SAME AREA. A single shared cap cannot work across a set running 1.00:1 to 5.62:1 — the squares stop on height, the wordmarks stop on width, and the squares end up at half the visual weight. max-height rather than height, so a narrow viewport can shrink a mark on width without distorting it. */ max-height: var(--mh, 44px); /* Now only a guard against a mark overflowing a narrow cell — the area formula does the sizing, not this. */ max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; /* ⚠ RAISED FROM .55 ON 29 AUG 2026. The dimming was set when every mark was a mid-grey SVG of matched density. The supplied AVIF set is not matched — the lightest marks in it (Neon Attack, Last Voyage) were disappearing into the paper at .55. This helps, but the real fix is density in the files: a mark this light needs a darker version, not a louder wall. */ opacity: .62; filter: grayscale(1); transition: var(--transition-hover); } .e-client:hover .e-client__mark { opacity: 1; } /* Note for whoever tries this next: Trikaya was supplied as a knockout — a solid black panel with the letterforms cut out of it as transparent holes — so it lands as a dark slab among ten grey marks. `invert()` does not fix it. Inverting turns the panel white and leaves the holes transparent, so the whole logo disappears. It needs a positive version of the file. */ /* The three extra rows. Same animation as the FAQ accordion — no new pattern. */ .e-clients__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); } .e-clients__more > div { overflow: hidden; } .e-clients__more.is-open { grid-template-rows: 1fr; } .e-clients--rest { padding-top: var(--space-6); } .e-clients__expand { display: flex; justify-content: center; padding-top: var(--space-6); } .e-clients__expand .e-btn { gap: 10px; } .e-ground-ink .e-client { color: var(--text-on-dark-muted); } .e-ground-ink .e-client:hover { color: var(--white); } /* -------------------------------------------------------------------------- 12. ServiceRow — oversized numerals as the scroll rhythm. -------------------------------------------------------------------------- */ /* Rules sit only between rows — four for five rows — so the list is divided without being fenced. The rule above the first row and below the last are gone; the section's own edges already do that work. */ .e-services { display: flex; flex-direction: column; } .e-service { display: grid; /* ⚠ THE THIRD COLUMN IS RESERVED ON EVERY ROW, INCLUDING THE FIVE WITH NO ICON. Giving it only to the row that has one would make that row's middle column narrower than the other five, and the qualifier text would step in and out along the list. An empty 104px cell costs nothing and means the next icon drops straight in. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 152px; gap: var(--space-5) var(--space-7); align-items: center; padding: var(--space-7) 0; } /* The 3D icon slot. Sized in CSS rather than by the canvas, so the row height is decided before any script runs and nothing shifts when it mounts — this site measures its own layout shift. */ .e-service__icon { width: 152px; /* ⚠ HEIGHT ONLY ON THE ROWS THAT HAVE AN ICON. The column is reserved on all six so the middle column keeps one width down the list, but giving the empty cells a height too would push those rows 48px taller to hold nothing. */ justify-self: end; opacity: 0; transform: translateY(8px); transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); pointer-events: none; } [data-service-icon] .e-service__icon { height: 152px; } .e-service:hover .e-service__icon, .e-service:focus-within .e-service__icon { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .e-service__icon { transition: opacity .001s; transform: none; } } .e-service + .e-service { border-top: var(--border-hairline); } /* The service name, kept small but present — someone scanning for "SEO" has to be able to find the word. */ .e-service__tag { display: block; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding-bottom: var(--space-3); } /* The outcome is the headline. This copy already existed on the page, set at body size under the service name; it was the best writing in the section and it was buried. */ .e-service__title { margin: 0; font: var(--weight-medium) 30px/1.12 var(--font-display); letter-spacing: var(--tracking-title); color: var(--text-strong); max-width: 22ch; } /* The qualifier — one line, so a reader can place themselves in it at a glance. This is the part that earns the enquiry; a service name cannot do it at any size of type. */ .e-service__qual { margin: 0; font: var(--type-lead); color: var(--text-copy); max-width: 34ch; } /* Capabilities block */ .e-caps { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-hairline); } .e-caps__grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Column gap steps down from --space-7 with the fourth column added. Four columns at 48px left each one too narrow to hold "Social media management" on a single line, and a discipline that wraps reads as two disciplines. */ gap: var(--space-6); padding-top: var(--space-5); } .e-caps__head { margin: 0 0 var(--space-4); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-strong); } /* The head is a button at every width so the mobile accordion has something to bind to. Above the mobile breakpoint it is stripped back to plain text and disabled by JS, so it neither looks nor behaves like a control. */ .e-caps__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: none; padding: 0; margin: 0; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: default; } .e-caps__icon { display: none; flex-shrink: 0; color: var(--text-muted); } /* Open by default, so the block is complete with JS off and on every screen wider than the accordion breakpoint. Only mobile collapses it. */ /* Same three-part structure as the FAQ: the panel is the grid, the div inside it is what clips. The padding has to live on the list, not on the clipped div — padding on the element being collapsed survives a 0fr track and leaves the panel 24px tall when shut. */ .e-caps__panel { display: grid; grid-template-rows: 1fr; } .e-caps__panel > div { overflow: hidden; } .e-caps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font: var(--type-copy-small); color: var(--text-copy); } /* -------------------------------------------------------------------------- 13. QuoteCard -------------------------------------------------------------------------- */ .e-quote { position: relative; margin: 0; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-7); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); min-height: 260px; } .e-quote__figure { position: absolute; top: var(--space-5); right: var(--space-6); font: var(--weight-medium) 56px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--ebr-purple); } .e-quote blockquote { margin: 0; max-width: 34ch; font: var(--weight-regular) 22px/1.35 var(--font-display); letter-spacing: var(--tracking-title); color: var(--text-strong); } .e-quote figcaption { font: var(--type-small); color: var(--text-muted); } .e-quote figcaption strong { font-weight: var(--weight-regular); color: var(--text-strong); } /* -------------------------------------------------------------------------- 13b. Testimonial rail — one row, scrolled sideways. Reference is Cursor's quote grid, held in a single row instead of six-up. Panels are a tint on the white ground, not cards: no border and no radius. The work grid gave up its card chrome and the logo wall gave up its boxed cells for the same reason — a rule drawn around a quote divides nothing, and the change of ground already does the separating. -------------------------------------------------------------------------- */ .e-tst__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-7); } .e-tst__intro { display: flex; flex-direction: column; gap: var(--space-4); } .e-tst__title { max-width: 20ch; } .e-tst__nav { display: flex; gap: var(--space-3); flex-shrink: 0; } .e-tst__arrow { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-pill); border: var(--border-hairline); background: none; color: var(--ink-900); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-hover); } .e-tst__arrow:hover:not(:disabled) { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); } /* Disabled rather than wrapping. A rail that silently loops makes it impossible to tell how much of it there is. */ .e-tst__arrow:disabled { opacity: .28; cursor: default; } .e-tst__arrow--prev svg { transform: scaleX(-1); } /* Native overflow plus snap. Touch, trackpad and shift-scroll all work with no script at all — JS only drives the arrow states and the fill below. */ .e-tst__rail { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-6); scrollbar-width: none; -ms-overflow-style: none; } .e-tst__rail::-webkit-scrollbar { display: none; } .e-tst { /* 340 + 24 gap against a ~1280 shell leaves three whole panels and most of a fourth. The cut panel is the affordance: a row ending flush reads as finished, a row ending mid-panel reads as scrollable. */ flex: 0 0 340px; scroll-snap-align: start; margin: 0; background: var(--paper); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-height: 270px; } /* The client's mark, not a headshot — ten of them already ship in assets/clients/, and no portraits do. A face proves a person; a mark proves a company. Drop an in place of this empty span. */ .e-tst__mark { display: block; height: 26px; width: 84px; background: var(--ink-100); } img.e-tst__mark { width: auto; max-width: 120px; max-height: 26px; object-fit: contain; object-position: left center; background: none; opacity: .55; filter: grayscale(1); } .e-tst__quote { margin: 0; flex: 1; font: var(--weight-regular) 17px/1.45 var(--font-display); letter-spacing: var(--tracking-body); color: var(--text-strong); } /* Placeholder styling, and it is meant to look like one. Delete the modifier with the placeholder text. */ .e-tst__quote--todo { color: var(--text-muted); font-style: italic; } .e-tst__who { display: flex; flex-direction: column; gap: 2px; font: var(--type-small); color: var(--text-muted); } .e-tst__who strong { font-weight: var(--weight-regular); color: var(--text-strong); } .e-tst__prog { height: 2px; background: var(--line-hairline); position: relative; } .e-tst__fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ink-900); transition: width var(--dur-base) var(--ease-out); } /* -------------------------------------------------------------------------- 14. Studio -------------------------------------------------------------------------- */ /* Centred, not top-aligned: the portrait is a good 200px taller than the copy beside it, and hanging the text from the top left a pool of dead space under "Meet the studio". Centred, the overhang splits evenly above and below and reads as composition rather than a column that ran out. */ .e-studio { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: center; } .e-studio__col { display: flex; flex-direction: column; gap: var(--space-5); } .e-studio__pull { margin: 0; font: var(--type-lead); color: var(--text-strong); max-width: 48ch; } .e-studio__by { display: flex; align-items: center; } .e-studio__byline { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Was a fixed 520px grey box with a label in it. Now it holds a real portrait, so the frame takes its shape from the picture: 4:5 is a hair wider than the source's own 0.733, which means a few pixels off the bottom and nothing off the face. Height follows the column width, so the two columns stay level from tablet up without a magic number. */ .e-studio__photo { aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius-media); background: var(--ink-100); overflow: hidden; } .e-studio__photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* High, because his face sits in the upper third of the frame. */ object-position: 50% 30%; } .e-team { display: grid; grid-template-columns: repeat(4, 1fr); /* eight people, two clean rows */ gap: var(--space-6) var(--space-5); border-top: var(--border-hairline); padding-top: var(--space-6); margin-top: var(--space-8); } .e-team__member { display: flex; flex-direction: column; gap: 12px; margin: 0; } /* The portrait and its hover take share one box. The still is an in the markup; the clip is a