/* Debu Media theme. Design: concept v3 (2026-09-25), from the prototype in 02 Design/prototype. Near black and warm white that fade into each other as you scroll, one grotesk and one italic serif (self-hosted, fonts.css), 18px reading text and a single 12-column grid. v2 (studiors.be fallbacks) is archived in 02 Design/archive/v2-mono/. */ /* Registered so the page colours can fade when a light section arrives. */ @property --bg { syntax: ""; inherits: true; initial-value: #0e0e0d; } @property --bg-deep { syntax: ""; inherits: true; initial-value: #090908; } @property --bg-raise { syntax: ""; inherits: true; initial-value: #161614; } @property --ink { syntax: ""; inherits: true; initial-value: #ece9e2; } @property --ink-dim { syntax: ""; inherits: true; initial-value: #9a978f; } @property --line { syntax: ""; inherits: true; initial-value: rgba(236, 233, 226, 0.14); } :root { --bg: #0e0e0d; --bg-deep: #090908; --bg-raise: #161614; --ink: #ece9e2; --ink-dim: #9a978f; --line: rgba(236, 233, 226, 0.14); /* Fixed values for pieces that never change with the theme. */ --dark: #0e0e0d; --dark-deep: #090908; --light: #ece9e2; --grey: #8d8a83; /* Vermilion, from the Folded logo (Office HQ/4 Storage/Resources/Branding/Debu Media Logo 2026). Only the calls to action use it (not the header). Text on it is ink: 4.8:1, where warm white would be 3.2:1. */ --accent: #ee4323; --on-accent: #141210; --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --w-display: 600; --w-head: 600; --w-mid: 500; --display-scale: 0.95; /* wider sans faces shrink the biggest type to keep its line breaks */ --fs-label: 0.8125rem; --fs-small: 1rem; --fs-body: 1.125rem; --fs-lead: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem); --fs-h3: clamp(1.5rem, 1.1rem + 1.25vw, 2.4rem); --fs-h2: clamp(2.4rem, 1.3rem + 3.9vw, 5.25rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --pad: clamp(1.25rem, 4vw, 4rem); --content-max: 128rem; --gutter: max(var(--pad), calc((100vw - var(--content-max)) / 2)); --gap: clamp(1rem, 1.8vw, 2rem); --sy: clamp(7.5rem, 18vh, 14rem); --radius-card: clamp(18px, 2vw, 28px); color-scheme: dark; transition: --bg 0.9s var(--ease-io), --bg-deep 0.9s var(--ease-io), --bg-raise 0.9s var(--ease-io), --ink 0.9s var(--ease-io), --ink-dim 0.9s var(--ease-io), --line 0.9s var(--ease-io); } /* Light chapter: set on while a light section fills the middle of the screen. */ :root.is-light { --bg: #ece9e2; --bg-deep: #e4e0d7; --bg-raise: #f6f4ef; --ink: #1f1e1b; --ink-dim: #67635c; --line: rgba(31, 30, 27, 0.14); } /* ---------- Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--ink); color: var(--bg); } img, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 400; padding: 0.6rem 1rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: var(--fs-small); transform: translateY(-200%); } .skip-link:focus { transform: none; } /* The film grain. Its box is exactly the screen and clips the texture, which is larger so it can shift: anything fixed that reaches past the edge of a phone's screen lets the phone widen and zoom out the page, which then feeds on itself while scrolling (found in the scroll stress test, 2026-09-27). */ .grain { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; opacity: 0.05; } .grain::before { content: ""; position: absolute; inset: -10%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { .grain::before { animation: grain-shift 0.9s steps(4) infinite; } } @keyframes grain-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 3%); } 50% { transform: translate(3%, -2%); } 75% { transform: translate(-3%, -3%); } 100% { transform: translate(2%, 2%); } } /* ---------- Grid and section heads ---------- */ .section { position: relative; padding: var(--sy) var(--gutter); } .section--line { border-top: 1px solid var(--line); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } /* Section labels: a quiet upright line in the rail, on the title's first baseline. */ .sec-label { font-size: var(--fs-small); font-weight: var(--w-mid); line-height: 1.3; color: var(--ink-dim); } .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; column-gap: var(--gap); row-gap: clamp(1.2rem, 3vh, 1.8rem); margin-bottom: clamp(3.5rem, 10vh, 7rem); } .sec-head .sec-label { grid-column: 1 / span 3; } .sec-head__title { grid-column: 4 / -1; max-width: 17ch; font-size: var(--fs-h2); font-weight: var(--w-head); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .sec-head__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-dim); } .sec-head__lead { grid-column: 4 / span 6; max-width: 48ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .label { font-size: var(--fs-small); font-weight: var(--w-mid); line-height: 1.3; color: var(--ink-dim); } /* ---------- Buttons and links ---------- */ .pill { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3rem; padding: 0.8rem 1.5rem; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 99px; background: none; font-family: var(--font-sans); font-size: 0.875rem; font-weight: var(--w-mid); letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill:hover, .pill:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); } .pill--solid { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .pill--solid:hover, .pill--solid:focus-visible { border-color: var(--accent); background: transparent; color: var(--ink); } /* Calls to action catch the eye: every few seconds a thin line of light runs once round the button's edge. Links only; form buttons, the header menu and the side hosting plans stay still, so there is one moving button at a time. */ @property --beam { syntax: ""; inherits: false; initial-value: 0deg; } a.pill--solid { position: relative; } a.pill--solid::after { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--beam), transparent 0 62%, rgba(255, 238, 222, 0.3) 76%, #fff6ec 89%, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; animation: pill-beam 5s linear infinite; } .mnav .pill::after, .plan:not(.plan--featured) .pill::after { content: none; } @keyframes pill-beam { 0% { --beam: 0deg; opacity: 0; } 5% { opacity: 1; } 34% { opacity: 1; } 40% { --beam: 360deg; opacity: 0; } 100% { --beam: 360deg; opacity: 0; } } /* Text that rolls up to a copy of itself on hover. */ .roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; } .roll__in { display: block; transition: transform 0.55s var(--ease-out); } .roll__in::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; } a:hover > .roll > .roll__in, a:focus-visible > .roll > .roll__in, button:hover > .roll > .roll__in, button:focus-visible > .roll > .roll__in { transform: translateY(-100%); } .ulink { display: inline-flex; align-items: center; gap: 0.45em; padding-bottom: 0.2em; border-bottom: 1.5px solid currentColor; font-weight: var(--w-mid); font-size: var(--fs-body); line-height: 1.2; transition: color 0.35s var(--ease-out); } .ulink:hover, .ulink:focus-visible { color: var(--ink-dim); } .round { display: inline-grid; flex: none; place-items: center; width: 2.75rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; font-size: 1rem; line-height: 1; } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; overflow: hidden; background: var(--dark-deep); color: var(--light); } html.is-preloading .preloader { display: flex; } html.is-preloading body { overflow: hidden; } .preloader__logo { position: relative; z-index: 2; width: clamp(150px, 20vw, 280px); height: auto; overflow: visible; } .preloader__logo path { fill: var(--light); stroke: var(--light); stroke-width: 1.1; } .preloader__marquee { position: absolute; left: 0; right: 0; bottom: clamp(5rem, 14vh, 9rem); overflow: hidden; white-space: nowrap; opacity: 0.3; } .preloader__track { display: inline-flex; will-change: transform; } .preloader__track span { padding-right: 0.3em; font-weight: 600; font-size: clamp(0.8rem, 1.2vw, 1rem); letter-spacing: 0.2em; text-transform: uppercase; } .preloader__counter { position: absolute; right: var(--gutter); bottom: var(--pad); font-weight: var(--w-display); font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .preloader__counter em { margin-left: 0.06em; font-style: normal; font-weight: 300; font-size: 0.55em; color: var(--grey); } .preloader__curtain { position: absolute; inset: 0; z-index: 3; background: var(--dark); transform: scaleY(0); transform-origin: bottom; } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem var(--gutter); color: var(--light); mix-blend-mode: difference; } /* A frosted bar behind the header while the pointer is on it (or a key has focused a link in it). It is a separate layer because the header inverts its colours against the page, and a blur inside it would be inverted too. It matches the header's height (5.2rem) and ends in a short fade, so the page below stays sharp. */ .nav-glass { position: fixed; top: 0; left: 0; right: 0; z-index: 99; height: 5.2rem; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); -webkit-mask-image: linear-gradient(#000 calc(100% - 0.4rem), transparent); mask-image: linear-gradient(#000 calc(100% - 0.4rem), transparent); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-out); } /* Not while the phone menu is open: the menu has its own dark panel under the header. */ @media (hover: hover) { html:not(.menu-open) .nav:hover + .nav-glass { opacity: 1; } } html:not(.menu-open) .nav:has(:focus-visible) + .nav-glass { opacity: 1; } .nav__brand { display: flex; flex: none; align-items: center; padding: 0.4rem 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .brand { display: block; height: auto; overflow: visible; fill: currentColor; } .nav__brand .brand { width: clamp(6.4rem, 8vw, 7.6rem); } .nav__links { display: flex; gap: 2.2rem; } .nav__links a, .nav__login { position: relative; font-size: 0.875rem; font-weight: var(--w-mid); letter-spacing: 0.05em; text-transform: uppercase; } .nav__links a::after, .nav__login::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav__actions { display: flex; align-items: center; gap: 1.6rem; } .nav .pill { border-color: rgba(236, 233, 226, 0.4); color: var(--light); } .nav .pill:hover, .nav .pill:focus-visible { border-color: var(--light); background: var(--light); color: var(--dark); } .nav__burger { display: none; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 2.9rem; height: 2.9rem; padding: 0; border: 1px solid rgba(236, 233, 226, 0.4); border-radius: 50%; background: none; cursor: pointer; } .nav__burger span { display: block; width: 1.1rem; height: 1.5px; background: var(--light); transition: transform 0.4s var(--ease-out); } .nav__burger.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); } html.menu-open { overflow: hidden; } .mnav { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem var(--gutter) max(2.4rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--dark-deep); color: var(--light); opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s; } .mnav.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease-out); } .mnav__links a { display: flex; align-items: baseline; gap: 1.1rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(236, 233, 226, 0.14); font-weight: var(--w-display); font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1.08; letter-spacing: -0.03em; text-transform: uppercase; opacity: 0; transform: translateY(1.6rem); transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out); } .mnav.is-open .mnav__links a { opacity: 1; transform: none; transition-delay: calc(0.1s + var(--i, 0) * 0.07s); } .mnav__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2.2rem; font-size: var(--fs-small); color: var(--grey); opacity: 0; transform: translateY(1rem); transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out); } .mnav.is-open .mnav__foot { opacity: 1; transform: none; transition-delay: 0.34s; } .mnav .pill { border-color: var(--light); background: var(--light); color: var(--dark); } .mnav__foot a:not(.pill) { color: var(--light); border-bottom: 1px solid var(--light); } /* ---------- Home hero ---------- */ .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; } /* A Paris street lamp at the right edge (initLamp in site.js). The iron stands behind the headline; the light layers lie over it and blend, so the words near the lantern warm up: a haze on the dark, a warm tint on the letters, and a glow round the glass. */ .hero__lamp { display: contents; } .hero__lamp-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .hero__lamp-light, .hero__lamp-tint, .hero__lamp-glow { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; } .hero__lamp-light { background: radial-gradient(closest-side, rgba(255, 196, 130, 0.13), rgba(255, 196, 130, 0.045) 45%, rgba(255, 196, 130, 0) 100%); mix-blend-mode: screen; } .hero__lamp-tint { background: radial-gradient(closest-side, rgba(255, 214, 168, 1), rgba(255, 236, 214, 0.5) 50%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: multiply; } .hero__lamp-glow { background: radial-gradient(closest-side, rgba(255, 232, 196, 0.75), rgba(255, 200, 140, 0.22) 38%, rgba(255, 190, 120, 0) 100%); mix-blend-mode: screen; } .hero__lamp-hit { position: absolute; left: 0; top: 0; z-index: 4; display: none; border-radius: 40%; -webkit-tap-highlight-color: transparent; } .hero.has-lamp.lamp-swings .hero__lamp-hit { display: block; } .hero__inner { position: relative; z-index: 2; display: grid; flex: 1 1 auto; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: end; align-items: end; column-gap: var(--gap); min-height: 0; padding: 5.5rem var(--gutter) clamp(2.4rem, 6.5vh, 4.5rem); pointer-events: none; } .hero__inner a, .hero__inner p { pointer-events: auto; } .hero__title { position: relative; grid-column: 1 / -1; margin-bottom: clamp(1.8rem, 5.5vh, 4.2rem); font-weight: var(--w-display); line-height: 0.86; } .hero__line { display: block; overflow: hidden; } .hero__line--grotesk { font-size: calc(clamp(2.6rem, min(8.4vw, 15.5svh), 12rem) * var(--display-scale)); letter-spacing: -0.035em; text-transform: uppercase; } .hero__line--serif { margin-left: clamp(1.5rem, 12vw, 12rem); padding-bottom: 0.1em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, min(7.6vw, 14svh), 10.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink-dim); } /* Selection reticle on one headline word; site.js measures and moves it. */ .reticle { --frame: 1; --dot: clamp(5px, 0.45vw, 8px); position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--ink); opacity: 0; pointer-events: none; } .reticle.is-on { opacity: 1; } .reticle::before { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; opacity: calc(var(--frame) * 0.3); } .reticle i { position: absolute; width: var(--dot); height: var(--dot); background: currentColor; } .reticle i:nth-child(1) { left: 0; top: 0; transform: translate(-50%, -50%); } .reticle i:nth-child(2) { right: 0; top: 0; transform: translate(50%, -50%); } .reticle i:nth-child(3) { right: 0; bottom: 0; transform: translate(50%, 50%); } .reticle i:nth-child(4) { left: 0; bottom: 0; transform: translate(-50%, 50%); } .hero__desc { grid-column: 1 / span 5; max-width: 42ch; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-dim); } .hero__cta { display: flex; grid-column: 9 / -1; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem 1.6rem; } /* Client logos under the hero, in the one-colour masks of the pile further down (.client__logo) and weighted the same way (--lh; the two boldest marks a little smaller), in the dim text colour. One set of twelve drifts left, repeated by initHeroLogos; both ends fade out. Without motion the row stands still, starting on the text's left edge. */ .hero__logos { --h: clamp(3.2rem, 7svh, 4.6rem); position: relative; z-index: 2; display: flex; flex: none; align-items: center; height: clamp(5.5rem, 12svh, 8.5rem); border-top: 1px solid var(--line); pointer-events: none; } /* The view fills the band, so a logo landing from above is never cut off at its top. */ .hero__logos-view { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); } .hero__logos-track { display: flex; width: max-content; padding-left: var(--gutter); color: var(--ink-dim); will-change: transform; } .hero__logos-set { display: flex; flex: none; align-items: center; } .hero__logo { display: block; flex: none; height: calc(var(--h) * var(--lh, 0.4)); aspect-ratio: var(--ar, 3); margin-right: clamp(3rem, 5.5vw, 6rem); background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ---------- Inner page hero ---------- */ .page-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 92vh; min-height: 92dvh; padding: 7rem var(--gutter) clamp(2.5rem, 6vh, 4rem); } .page-hero__eyebrow { margin-bottom: clamp(2rem, 6vh, 4rem); } .page-hero__title { font-weight: var(--w-display); line-height: 0.88; } .page-hero__title .l1 { display: block; overflow: hidden; font-size: calc(clamp(3rem, min(10vw, 20dvh), 13.5rem) * var(--display-scale)); letter-spacing: -0.035em; text-transform: uppercase; } .page-hero__title .l1--xl { font-size: calc(clamp(4rem, min(15vw, 27dvh), 18rem) * var(--display-scale)); } .page-hero__title .l1--md { font-size: calc(clamp(2.6rem, min(7.4vw, 15dvh), 10rem) * var(--display-scale)); } .page-hero__title .l2 { display: block; overflow: hidden; margin-left: clamp(1.5rem, 14vw, 14rem); padding-bottom: 0.08em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, min(7.6vw, 15dvh), 10.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink-dim); } .page-hero__title .l2--md { margin-left: clamp(1.5rem, 8vw, 9rem); font-size: clamp(2.2rem, min(6vw, 12dvh), 8.2rem); } .page-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--gap); row-gap: 1.5rem; margin-top: clamp(2.5rem, 7vh, 5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); } .page-hero__foot > :first-child { grid-column: 1 / span 5; } .page-hero__foot > :last-child { grid-column: 7 / -1; } .page-hero__foot--single > :first-child { grid-column: 1 / -1; } .page-hero__lead { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; } .page-hero__art { position: absolute; top: clamp(4.5rem, 9vh, 6.5rem); right: var(--gutter); z-index: -1; width: clamp(10rem, 18vw, 18rem); pointer-events: none; } .page-hero__art img { width: 100%; filter: grayscale(1) contrast(1.05); opacity: 0.85; } /* Hosting: the rule above the foot is the pavement, and a cellar hangs under it (cellar.js). The copy takes the left; the canvas reaches up over the rule by --above, so the entrance and the bug on the pavement show. Without WebGL the cellar stays hidden and the copy sits on the right, where the lead usually is. */ .page-hero--cellar .page-hero__foot > .page-hero__copy { grid-column: 7 / -1; } .page-hero--cellar .proof { margin-top: 2.4rem; } .cellar { display: none; } .page-hero--cellar.has-cellar .page-hero__foot > .page-hero__copy { grid-column: 1 / span 5; } .page-hero--cellar.has-cellar .cellar { --above: 6.5rem; position: relative; display: block; grid-column: 6 / -1; align-self: stretch; } /* The cellar is at least a third as high as it is wide. */ .cellar::before { content: ""; display: block; padding-top: 33%; } .cellar__canvas { position: absolute; top: calc(-1.6rem - var(--above)); left: 0; display: block; width: 100%; height: calc(100% + 1.6rem + var(--above)); } .proof { display: flex; align-items: center; gap: 1rem; } .proof__faces { display: flex; flex: none; } .proof__faces img { width: 2.8rem; height: 2.8rem; margin-left: -0.6rem; border: 2px solid var(--bg); border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .proof__faces img:first-child { margin-left: 0; } .proof p { font-size: var(--fs-small); color: var(--ink-dim); } .proof strong { color: var(--ink); font-weight: var(--w-head); } /* ---------- Numbered rows (problems, FAQ) ---------- */ .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; column-gap: var(--gap); row-gap: 0.8rem; padding: clamp(1.8rem, 4vh, 2.6rem) 0; border-top: 1px solid var(--line); } /* The bottom line belongs to the list: it is the ground the rows land on. */ .rows__list { position: relative; border-bottom: 1px solid var(--line); } .row__num { grid-column: 1 / span 3; font-size: var(--fs-small); font-weight: var(--w-mid); line-height: 1; color: var(--ink-dim); font-variant-numeric: tabular-nums; transition: color 0.25s var(--ease-out); } .row__name { grid-column: 4 / span 4; font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; } .row__name--sm { grid-column: 4 / span 5; font-size: clamp(1.35rem, 1rem + 1vw, 2rem); } .row__text { grid-column: 9 / -1; max-width: 44ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-dim); text-wrap: pretty; } .row__text p + p { margin-top: 0.8rem; } @media (hover: hover) { .row:hover .row__num { color: var(--ink); } } /* ---------- FAQ accordion ---------- */ .faq { border-bottom: 1px solid var(--line); } .faq__item { border-top: 1px solid var(--line); } .faq__q { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--gap); padding: clamp(1.4rem, 3.2vh, 2rem) 0; list-style: none; cursor: pointer; } .faq__q::-webkit-details-marker { display: none; } .faq__text { grid-column: 4 / span 8; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.9rem); font-weight: var(--w-head); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; transition: transform 0.5s var(--ease-out); } .faq__icon { position: relative; grid-column: 12; justify-self: end; width: 2.75rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.5s var(--ease-out); } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); } .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.5s var(--ease-out); } .faq__item[open] .faq__icon { border-color: var(--ink); background: var(--ink); color: var(--bg); } .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } @media (hover: hover) { .faq__q:hover .faq__text { transform: translateX(0.6rem); } .faq__q:hover .faq__icon { border-color: var(--ink); } } .faq__a { overflow: hidden; } .faq__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: clamp(1.6rem, 3.6vh, 2.4rem); } .faq__body p { grid-column: 4 / span 6; max-width: 60ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-dim); } .faq__body p + p { margin-top: 0.8rem; } /* ---------- Statement read word by word ---------- */ .statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .statement__rail { grid-column: 1 / span 3; display: grid; align-content: start; gap: clamp(1.4rem, 3vh, 2rem); } .stat { max-width: 16rem; padding-top: 1rem; border-top: 1px solid var(--line); } .stat strong { display: block; font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 400; line-height: 1; letter-spacing: -0.05em; } .stat > span { display: block; max-width: 22ch; margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-dim); } .statement__text { grid-column: 4 / -1; max-width: 22ch; font-size: clamp(2rem, 1.2rem + 3vw, 4.1rem); font-weight: var(--w-mid); line-height: 1.12; letter-spacing: -0.03em; } .statement__text > * { display: inline; font: inherit; letter-spacing: inherit; } .statement__text .w { display: inline-block; opacity: 0.16; } /* ---------- How I help: the high street (assets/js/street.js) ---------- */ .street__canvas { display: none; } .street.is-live { padding: 0; } .street.is-live .street__stage { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; } .street.is-live .street__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .street.is-live .street__copy { position: relative; z-index: 1; height: 100%; align-content: center; padding: 0 var(--gutter); pointer-events: none; } .street.is-live .statement__text { grid-row: 1; grid-column: 1 / span 5; max-width: 15ch; font-size: clamp(1.9rem, 0.9rem + 2.2vw, 3.3rem); } /* Beside the street the three figures share one row under the statement. */ .street.is-live .statement__rail { grid-row: 2; grid-column: 1 / span 5; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); margin-top: clamp(2rem, 6vh, 3.5rem); } .street.is-live .stat strong { font-size: clamp(2.2rem, 3.4vw, 3.6rem); } @media (max-width: 900px) { .street.is-live .street__copy { align-content: start; padding-top: clamp(5.5rem, 13vh, 8rem); } .street.is-live .statement__text { grid-column: 1 / -1; max-width: 17ch; font-size: clamp(1.6rem, 6.6vw, 2.3rem); } .street.is-live .statement__rail { grid-column: 1 / -1; margin-top: 1.4rem; } } /* ---------- Service list that reacts to the pointer ---------- */ .svc { margin-top: clamp(4.5rem, 12vh, 8rem); border-bottom: 1px solid var(--line); } .svc--flush { margin-top: 0; } .svc__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); } .svc__head .sec-label { grid-column: 1 / span 3; } .svc__item { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--gap); row-gap: 0.6rem; padding: clamp(1.4rem, 3.2vh, 2.2rem) 0; border-top: 1px solid var(--line); outline: none; transition: opacity 0.4s var(--ease-out), color 0.45s var(--ease-out); } .svc__fill { position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease-out); } .svc__icon { grid-column: 1 / span 3; width: clamp(2.6rem, 3.4vw, 3.4rem); color: var(--ink); transition: color 0.45s var(--ease-out), transform 0.6s var(--ease-out); } .svc__icon svg { width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .svc__icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 0; } .svc__name { grid-column: 4 / span 5; font-size: clamp(1.7rem, 1.1rem + 2vw, 3.3rem); font-weight: var(--w-head); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; transition: transform 0.6s var(--ease-out); } .svc__text { grid-column: 9 / -1; max-width: 36ch; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-dim); transition: color 0.45s var(--ease-out); } .svc__item.is-active { color: var(--bg); } .svc__item.is-active .svc__fill { transform: scaleY(1); } .svc__item.is-active .svc__name { transform: translateX(clamp(0.5rem, 1.6vw, 1.75rem)); } .svc__item.is-active .svc__icon { color: var(--bg); transform: rotate(-6deg) scale(1.08); } .svc__item.is-active .svc__icon svg > * { animation: svc-draw 1.1s var(--ease-out) both; } .svc__item.is-active .svc__icon svg > :nth-child(2) { animation-delay: 0.08s; } .svc__item.is-active .svc__icon svg > :nth-child(3) { animation-delay: 0.16s; } .svc__item.is-active .svc__icon svg > :nth-child(4) { animation-delay: 0.24s; } .svc__item.is-active .svc__text { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); } @keyframes svc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (hover: hover) and (pointer: fine) { .svc__list:hover .svc__item:not(.is-active) { opacity: 0.4; } } /* ---------- Testimonials: one quote at a time ---------- */ .quotes__intro { padding-bottom: 0; } .quotes__intro .sec-head { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); } .quotes__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--gap); padding: 0 var(--gutter) var(--sy); } .quotes__rail { grid-column: 1 / span 3; align-self: center; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; } .quotes__ctrl { display: none; gap: 1.4rem; } .quotes__bar { height: 2px; max-width: 14rem; background: var(--line); } .quotes__bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; } /* Reviewer names double as tabs: the current one is drawn in ink with a longer rule. */ .quotes__names { display: grid; justify-items: start; gap: 0.1rem; } .quotes__names button { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.4rem 0; border: 0; background: none; font-size: var(--fs-body); font-weight: var(--w-mid); line-height: 1.3; text-align: left; color: var(--ink-dim); cursor: pointer; transition: color 0.35s var(--ease-out); } .quotes__names button::before { content: ""; flex: none; width: 1.6rem; height: 1.5px; background: currentColor; transform: scaleX(0.3); transform-origin: left; transition: transform 0.5s var(--ease-out); } .quotes__names button:hover, .quotes__names button:focus-visible, .quotes__names button[aria-current="true"] { color: var(--ink); } .quotes__names button[aria-current="true"]::before { transform: scaleX(1); } .quotes__list { grid-column: 4 / span 8; display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); } /* Each review sits on a card; in the pinned stage the cards stack like a deck. */ .quote { display: flex; flex-direction: column; gap: clamp(1.4rem, 3.5vh, 2.4rem); padding: clamp(1.75rem, 3.6vw, 3.75rem); border: 1px solid var(--line); border-radius: clamp(20px, 2.4vw, 32px); background: var(--bg-raise); box-shadow: 0 2.5rem 5rem -3rem rgba(31, 30, 27, 0.35); } .quote__mark { display: block; height: 0.42em; font-family: var(--font-serif); font-size: clamp(4rem, 6vw, 6rem); line-height: 0.9; color: var(--ink-dim); } .quote__text { display: flex; flex: 1; flex-direction: column; justify-content: center; max-width: 30ch; font-family: var(--font-serif); font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3.1rem); line-height: 1.14; letter-spacing: -0.01em; text-wrap: pretty; } .quote--m .quote__text { max-width: 38ch; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.18; } .quote--l .quote__text { max-width: 50ch; font-size: clamp(1.3rem, 0.95rem + 1vw, 1.95rem); line-height: 1.26; } .quote__text p + p { margin-top: 0.6em; } .quote__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; } .quote__initial { display: grid; flex: none; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); font-weight: var(--w-head); font-size: 1.05rem; color: var(--bg-raise); } .quote__who strong { font-size: var(--fs-body); font-weight: var(--w-head); } .quote__who span:not(.quote__initial) { font-size: var(--fs-small); color: var(--ink-dim); } /* Pinned stage, switched on by the script. */ .quotes.is-live .quotes__stage { min-height: 100vh; min-height: 100svh; padding-top: clamp(5.5rem, 12vh, 7.5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); } .quotes.is-live .quotes__ctrl { display: grid; } .quotes.is-live .quotes__list { gap: 0; } .quotes.is-live .quote { grid-area: 1 / 1; will-change: transform; } /* Cards wait below the stage until their turn. */ .quotes.is-live .quotes__stage { overflow: hidden; } /* "Read all testimonials" under the deck's names. Without the pinned deck (reduced motion, short screens) it follows the last card. */ .quotes__more { align-self: flex-start; } .quotes:not(.is-live) .quotes__stage { row-gap: clamp(1.5rem, 4vh, 2.5rem); } .quotes:not(.is-live) .quotes__rail { grid-row: 2; grid-column: 4 / span 8; } /* ---------- Testimonials page: every review on one wall (site.js, initWall) ---------- */ .wall__cards { columns: 2; column-gap: clamp(1.25rem, 2.4vw, 2.5rem); } .wall .quote { break-inside: avoid; gap: clamp(1.1rem, 2.6vh, 1.8rem); margin-bottom: clamp(1.25rem, 2.4vw, 2.5rem); padding: clamp(1.6rem, 2.8vw, 3rem); } .wall .quote__mark { font-size: clamp(3.2rem, 4.4vw, 4.6rem); } .wall .quote__text, .wall .quote--m .quote__text { max-width: none; font-size: clamp(1.35rem, 1rem + 1vw, 2rem); line-height: 1.2; } .wall .quote--l .quote__text { font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.6rem); line-height: 1.28; } /* ---------- Clients: logos that drop into a pile (site.js, initClients) ---------- */ .clients__pit { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.6rem, 1vw, 0.9rem); margin: 0; padding: 0; list-style: none; } /* One pill per client. The logo is a one-colour mask (assets/img/clients/mono) filled with the text colour, so every logo takes the page's black and white and follows the dark and light fade. */ .client { --h: calc(clamp(2.5rem, 4.4vw, 4.4rem) * var(--fit, 1)); display: flex; flex: none; align-items: center; justify-content: center; height: var(--h); padding: 0 calc(var(--h) * 0.45); border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raise); color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: border-color 0.3s var(--ease-out); } /* The mask image is set on each logo in the page, with its aspect ratio (--ar) and its height as a share of the pill (--lh): compact emblems stand taller than long wordmarks, so every logo carries about the same weight. */ .client__logo { display: block; height: calc(var(--h) * var(--lh, 0.4)); aspect-ratio: var(--ar, 3); max-width: calc(var(--h) * 2.8); background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .client__name { font-size: calc(var(--h) * 0.3); font-weight: var(--w-mid); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } /* Live: the list becomes a stage with a floor line, and each pill a body that the physics places. Pills stay hidden until they drop, and fall in front of the heading. */ .clients.is-live .clients__pit { position: relative; z-index: 3; display: block; border-bottom: 1px solid var(--line); } .clients.is-live .client { position: absolute; top: 0; left: 0; visibility: hidden; touch-action: pan-y; will-change: transform; } .clients.is-live .client.is-in { visibility: visible; } @media (hover: hover) and (pointer: fine) { .clients.is-live .client:hover, .clients.is-live .client.is-held { border-color: var(--ink); } } /* ---------- How it works: head ---------- */ .how { position: relative; background: var(--bg-deep); } .how__head { position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vh, 2.5rem); min-height: 100vh; min-height: 100svh; overflow: hidden; padding: clamp(6rem, 11vh, 8rem) var(--gutter) clamp(2rem, 4vh, 3rem); } .how__head::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--gutter); opacity: 0.55; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - 0.5px), var(--line) 25%, transparent calc(25% + 0.5px)), linear-gradient(90deg, transparent calc(75% - 0.5px), var(--line) 75%, transparent calc(75% + 0.5px)); } .how__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: var(--gap); } .how__top .sec-label { grid-column: 1 / span 3; } .how__promise { grid-column: 8 / -1; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .how__title { position: relative; align-self: center; width: 100%; font-size: calc(clamp(5rem, 20.5vw, 22rem) * var(--display-scale)); font-weight: var(--w-display); line-height: 0.74; letter-spacing: -0.06em; } .how__stack { position: relative; display: inline-block; margin-left: 0.24em; transform: rotate(-1.4deg); transform-origin: 62% 100%; } .how__title-serif { position: absolute; left: -0.4em; bottom: calc(100% - 0.2em); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.5em; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink-dim); transform-origin: 50% 100%; } .how__title-main { display: block; text-transform: uppercase; white-space: nowrap; } .how__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .how__scroll { display: flex; align-items: center; gap: 0.8rem; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); } .how__scroll .round { width: 2.4rem; color: var(--ink); } /* ---------- How it works: the build ---------- */ .build__pin { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--gap); row-gap: 3rem; padding: var(--sy) var(--gutter); border-top: 1px solid var(--line); } .build__copy { grid-column: 1 / span 4; position: relative; z-index: 2; } .build__steps { display: grid; gap: 2.5rem; } .build__label { margin-bottom: clamp(0.6rem, 2vh, 1.2rem); font-size: var(--fs-small); font-weight: var(--w-mid); line-height: 1.3; color: var(--ink-dim); } .build:not(.is-live) .build__label { display: none; } .build__num { display: flex; margin-bottom: clamp(0.8rem, 2.5vh, 1.6rem); font-size: clamp(3.4rem, 6vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -0.05em; color: var(--ink-dim); font-variant-numeric: tabular-nums; } .build__digit { display: inline-block; height: 1em; overflow: hidden; } .build__strip { display: block; } .build__strip span { display: block; height: 1em; } .build:not(.is-live) .build__num { display: none; } .build__name { margin-top: 0; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); font-weight: var(--w-head); line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; } .build__text { max-width: 30ch; margin-top: 1.2rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .build__progress { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 16rem; margin-top: clamp(2.5rem, 6vh, 4rem); } .build__progress span, .who__progress span { position: relative; height: 2px; overflow: hidden; background: var(--line); } .build__progress span::after, .who__progress span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; } .build__scene { grid-column: 5 / -1; position: relative; z-index: 1; height: clamp(22rem, min(46vw, 70svh), 44rem); perspective: 1800px; perspective-origin: 50% 35%; } .build__scene::before { content: ""; position: absolute; inset: -12% -8%; background: radial-gradient(closest-side, rgba(236, 233, 226, 0.08), transparent); pointer-events: none; } /* The light reaches past the scene; the pinned story clips it, the plain version clips it here so it never widens the page. */ .build:not(.is-live) { overflow-x: clip; } .build.is-live .build__steps { gap: 0; } .build.is-live .build__step { grid-area: 1 / 1; } .build.is-live .build__progress { display: grid; } .build.is-live .build__pin { min-height: 100vh; min-height: 100svh; padding-top: clamp(5rem, 10vh, 6.5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); overflow: hidden; } /* The street under the object (assets/js/build-street.js) fills the pinned screen behind the copy and the scene. It shows only in the pinned story; the script fades it in. */ .build__street { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .build.is-live.has-street .build__street { display: block; } /* The scene: one object that changes shape with the step. site.js sets its size, colour and corners; without the pinned story it stays a browser that shows the finished site. */ .bo-tilt, .bo-turn { position: absolute; inset: 0; transform-style: preserve-3d; } .bo { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1.53; translate: -50% -50%; transform-style: preserve-3d; border: 1px solid rgba(236, 233, 226, 0.2); border-radius: 14px; background: #1d1d1b; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(236, 233, 226, 0.08); } /* Live, the script centres it (GSAP folds a CSS translate into pixels, which would not follow the changing size). */ .build.is-live .bo { aspect-ratio: auto; translate: none; } /* 02 and 03: a browser */ .bo-bar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 0.45rem; height: 8%; padding: 0 3%; border-bottom: 1px solid rgba(236, 233, 226, 0.12); } .bo-bar i { width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: rgba(236, 233, 226, 0.22); } .bo-url { display: flex; align-items: center; gap: 0.4rem; width: 44%; height: 58%; margin-left: 4%; padding: 0 0.8rem; border-radius: 99px; background: rgba(236, 233, 226, 0.08); font-size: clamp(0.6rem, 0.8vw, 0.8rem); color: rgba(236, 233, 226, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bo-lock { flex: none; width: 0.7rem; height: auto; } .bo-page { position: absolute; inset: 8% 0 0; transform-style: preserve-3d; border-radius: 0 0 13px 13px; } .bo-grid, .bo-site { position: absolute; inset: 0; border-radius: inherit; } .bo-grid { background-color: #1b1b19; background-image: radial-gradient(rgba(236, 233, 226, 0.2) 1px, transparent 1px); background-size: 22px 22px; } .bo-site { overflow: hidden; } .bo-site img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* The wireframe's picture placeholder: a dashed box with a cross. */ .bo-frame { position: absolute; inset: 3% 2%; overflow: hidden; border: 1.5px dashed rgba(236, 233, 226, 0.34); border-radius: 8px; } .bo-frame::before, .bo-frame::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 1.5px; background: rgba(236, 233, 226, 0.2); transform: translate(-50%, -50%) rotate(31deg); } .bo-frame::after { transform: translate(-50%, -50%) rotate(-31deg); } /* Blocks placed where the real page has them. Each holds its wireframe bars and the matching slice of the real page, cut from the same screenshot by background size and position. */ .bo-pc { position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transform-style: preserve-3d; } .bo-wire, .bo-real { position: absolute; inset: 0; } .bo-real { background: url("../img/work-sha-desktop.webp") no-repeat; background-size: calc(10000% / var(--w)) calc(10000% / var(--h)); background-position: calc(var(--l) * 100% / (100 - var(--w))) calc(var(--t) * 100% / (100 - var(--h))); opacity: 0; } .bo-wire i { position: absolute; left: 0; display: block; border-radius: 99px; background: rgba(236, 233, 226, 0.5); transform-origin: left center; } .bo-pc--logo i:nth-child(1) { top: 0; width: 88%; height: 34%; } .bo-pc--logo i:nth-child(2) { bottom: 0; width: 66%; height: 40%; background: rgba(236, 233, 226, 0.7); } .bo-pc--menu i { width: 100%; height: 16%; } .bo-pc--menu i:nth-child(1) { top: 0; } .bo-pc--menu i:nth-child(2) { top: 42%; } .bo-pc--menu i:nth-child(3) { bottom: 0; } .bo-pc--index .bo-wire { border-left: 1.5px dashed rgba(236, 233, 226, 0.4); } .bo-pc--index i { left: -0.5em; top: 0; width: 0.9em; height: 2px; } .bo-pc--h1 i { height: 17%; background: rgba(236, 233, 226, 0.72); } .bo-pc--h1 i:nth-child(1) { top: 9%; width: 94.5%; } .bo-pc--h1 i:nth-child(2) { top: 42%; width: 96.8%; } .bo-pc--h1 i:nth-child(3) { top: 75%; width: 99.5%; } .bo-pc--p i { height: 15%; } .bo-pc--p i:nth-child(1) { top: 10%; width: 100%; } .bo-pc--p i:nth-child(2) { top: 43%; width: 95%; } .bo-pc--p i:nth-child(3) { top: 76%; width: 24%; } .bo-pc--hint i { inset: 0; width: 100%; height: 100%; background: rgba(236, 233, 226, 0.3); } /* A soft reflection on the front of the object. initBuild slides it across as the object turns with the scroll; the plain version leaves it out. */ .bo-glare { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.07) 42%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.07) 58%, transparent 70%) 25% 0 / 300% 100% no-repeat; mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translateZ(1px); } .build.is-live .bo-glare { opacity: 1; } /* A band of light that crosses the page as the real site appears. */ .bo-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat; mix-blend-mode: screen; pointer-events: none; } .bo-checks { position: absolute; right: 3%; top: 14%; display: grid; justify-items: end; gap: 0.5rem; } .bo-chip { display: inline-flex; align-items: center; gap: 0.5em; width: fit-content; padding: 0.55em 1em 0.55em 0.75em; border: 1px solid rgba(236, 233, 226, 0.18); border-radius: 99px; background: rgba(24, 24, 22, 0.9); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); font-size: clamp(0.72rem, 0.85vw, 0.92rem); font-weight: 500; line-height: 1.1; color: var(--light); white-space: nowrap; } .bo-chip svg, .bo-lock { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .bo-chip svg { flex: none; width: 1.15em; height: auto; } /* 01 and 04: a phone. Its screen holds a chat first and the finished site at the end; sizes inside follow the screen's width, so it reads the same on any screen. */ .bo-screen { position: absolute; inset: 2.3% 4.4%; overflow: hidden; container-type: inline-size; border-radius: var(--screen-r, 1.4rem); background: #141413; } .bo-mobile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* The chat app on a phone screen, in step 01 of "How it works" and again in the closing: who you are talking to, the thread, a message bar. The thread keeps to its row, so a long conversation scrolls away at the top and never pushes the bar off the screen. */ .chat { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .chat__head { display: grid; justify-items: center; gap: 2cqw; padding: 15cqw 0 4.5cqw; border-bottom: 1px solid rgba(236, 233, 226, 0.1); } .chat__avatar { display: grid; place-items: center; width: 18cqw; aspect-ratio: 1; border-radius: 50%; background: var(--light); } .chat__avatar img { width: 62%; height: auto; } .chat__avatar--photo { overflow: hidden; } .chat__avatar--photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .chat__name { font-size: clamp(7px, 5.4cqw, 15px); font-weight: var(--w-mid); color: var(--light); } .chat__role { margin-top: -1.2cqw; font-size: clamp(6px, 4cqw, 11px); color: rgba(236, 233, 226, 0.45); } .chat__thread { display: grid; align-content: end; gap: 3.2cqw; padding: 4cqw 5cqw 5cqw; overflow: hidden; } .chat__day { justify-self: center; margin-bottom: 1.5cqw; font-size: clamp(6px, 4cqw, 11px); color: rgba(236, 233, 226, 0.45); } .chat__msg { justify-self: start; max-width: 88%; padding: 3.8cqw 5cqw; border-radius: 7cqw 7cqw 7cqw 1.8cqw; background: var(--light); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); font-size: clamp(8px, 8.4cqw, 23px); font-weight: var(--w-mid); line-height: 1.24; letter-spacing: -0.01em; color: var(--dark); } .chat__msg--you { justify-self: end; border-radius: 7cqw 7cqw 1.8cqw 7cqw; background: #2c2c29; color: var(--light); } .chat__sk { display: grid; gap: 2.8cqw; width: 52cqw; padding: 1.4cqw 0; } .chat__sk i { height: 3.2cqw; border-radius: 99px; background: rgba(236, 233, 226, 0.42); transform-origin: left center; } .chat__sk i:last-child { width: 62%; } .chat__msg--dots { padding: 4.4cqw 5cqw; } .chat__dots { display: flex; gap: 1.8cqw; } .chat__dots i { width: 3cqw; aspect-ratio: 1; border-radius: 50%; background: var(--dark); opacity: 0.3; animation: chat-dot 1.2s ease-in-out infinite; } .chat__dots i:nth-child(2) { animation-delay: 0.15s; } .chat__dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 0.9; transform: translateY(-0.9cqw); } } .chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 5cqw 9cqw; padding: 1.6cqw 1.6cqw 1.6cqw 5.4cqw; border: 1px solid rgba(236, 233, 226, 0.14); border-radius: 99px; font-size: clamp(7px, 5cqw, 14px); color: rgba(236, 233, 226, 0.4); } .chat__input i { display: grid; place-items: center; width: 10cqw; aspect-ratio: 1; border-radius: 50%; background: var(--light); } .chat__input svg { width: 58%; fill: none; stroke: var(--dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* In the closing, the message bar is the quote button: the site's solid pill with a send arrow. */ .chat__send { margin: 0 5cqw 8cqw; padding: 0.35rem 0.35rem 0.35rem 1.2rem; } .chat__send i { display: grid; place-items: center; flex: none; width: 2.4rem; aspect-ratio: 1; margin-left: auto; border-radius: 50%; background: var(--bg); color: var(--ink); transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); } .chat__send:hover i, .chat__send:focus-visible i { background: var(--ink); color: var(--bg); } .chat__send svg { width: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* The island at the top of the screen widens to say the site is live. */ .bo-island { position: absolute; left: 50%; top: 1.7%; display: grid; place-items: center; width: 32%; height: 4.6%; translate: -50% 0; border-radius: 99px; background: #050505; } .bo-island b { display: inline-flex; align-items: center; gap: 0.45em; font-size: clamp(7px, 4.4cqw, 13px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); } .bo-island b::before { content: ""; width: 0.5em; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: avail-pulse 1.6s ease-in-out infinite; } .bo-notes { position: absolute; left: 6%; right: 6%; top: 9.5%; display: grid; gap: 0.4rem; } .bo-notes .bo-chip { width: 100%; padding: 0.6em 0.8em; border-radius: 0.9em; font-size: clamp(7px, 5.6cqw, 15px); } /* Without the pinned story, the scene shows the finished site in the browser. */ .build:not(.is-live) .bo-frame, .build:not(.is-live) .bo-pc, .build:not(.is-live) .bo-checks, .build:not(.is-live) .bo-screen { display: none; } /* ---------- Who it is for: the high street at eye level (assets/js/who.js) ---------- */ /* Without the pinned story the copy reads as plain text. */ .who__copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .who__title, .who__story { grid-column: 1 / span 8; } .who__title { max-width: 17ch; font-size: var(--fs-h2); font-weight: var(--w-head); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .who__story { display: grid; gap: 1.2rem; margin-top: clamp(1.6rem, 3.5vh, 2.4rem); } .who__lead, .who__turn, .who__big { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; } .who__cta { margin-top: 1.4rem; } .who__canvas, .who__progress { display: none; } /* Reduced motion: a still picture of the lit street above the copy (who.js adds has-scene). */ .who.has-scene:not(.is-live) .who__canvas { display: block; width: 100%; aspect-ratio: 2 / 1; margin-bottom: clamp(2rem, 6vh, 4rem); } /* The pinned story: nine slides of one size, one at a time, beside the street. */ .who.is-live { padding: 0; } .who.is-live .who__stage { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; } .who.is-live .who__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* A shade behind the copy, so the lit street never competes with the words. */ .who.is-live .who__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 33%, color-mix(in srgb, var(--bg) 0%, transparent) 60%); pointer-events: none; } .who.is-live .who__copy { position: relative; z-index: 2; height: 100%; align-content: start; padding: clamp(7rem, 21vh, 12rem) var(--gutter) 0; pointer-events: none; } .who.is-live .who__cta { pointer-events: auto; } .who.is-live .who__title { grid-column: 1 / span 5; max-width: none; font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.35rem); font-weight: var(--w-mid); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-dim); } .who.is-live .who__story { grid-column: 1 / span 5; gap: 0; margin-top: clamp(1rem, 3vh, 1.8rem); } /* The paragraph wrappers step aside, so every slide sits in the same place. */ .who.is-live .who__lead, .who.is-live .who__turn { display: contents; } .who.is-live .who__slide { grid-area: 1 / 1; display: block; max-width: 19ch; font-size: clamp(1.9rem, min(0.9rem + 2.3vw, 5.4vh), 3.2rem); font-weight: var(--w-mid); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } .who.is-live .who__big { max-width: none; font: inherit; letter-spacing: inherit; } .who.is-live .who__cta { margin-top: clamp(1.4rem, 3.5vh, 2.2rem); } .who.is-live .who__progress { position: absolute; left: 0; bottom: clamp(2rem, 7vh, 4rem); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; width: min(20rem, 70vw); margin-left: var(--gutter); } /* ---------- Closing and contact ---------- */ .closing__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--gap); row-gap: 3rem; } .closing__grid--chat { align-items: center; } .closing__main { grid-column: 1 / span 7; } .closing__title { font-weight: 400; } .closing__hook { display: block; margin-bottom: 1rem; padding-bottom: 0.1em; font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height: 1.08; color: var(--ink-dim); } /* A block as wide as its words, not an inline-block: an inline-block sits on the heading's baseline, and that moves while the words are split for the type-in, so the heading would change height when they join up again. */ .closing__big { display: block; width: fit-content; max-width: 100%; padding-bottom: 0.08em; border-bottom: 3px solid var(--ink); font-size: clamp(2.4rem, 1.2rem + 4.8vw, 6.4rem); font-weight: var(--w-display); line-height: 1; letter-spacing: -0.045em; } .closing__big--long { display: block; border-bottom: 0; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 5rem); letter-spacing: -0.04em; } .closing__sub { max-width: 40ch; margin-top: clamp(1.8rem, 4.5vh, 2.8rem); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: clamp(1.8rem, 4vh, 2.6rem); } .closing__figure { grid-column: 9 / -1; justify-self: end; width: min(100%, 24rem); } .closing__figure img { width: 100%; filter: grayscale(1) contrast(1.05); transition: filter 0.5s var(--ease-out); } @media (hover: hover) { .closing__figure:hover img { filter: grayscale(0) contrast(1); } } .closing__figure--art img { filter: grayscale(1); } /* Hosting: a still from the cellar in the hero (cellar.js), kept in its warm light. */ .closing__figure--still img, .closing__figure--still:hover img { border-radius: var(--radius-card); filter: none; } .closing__figure figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: var(--w-head); font-size: var(--fs-body); } .closing__figure figcaption span { font-weight: 400; color: var(--ink-dim); } /* Home: the phone from "How it works" comes back and the chat carries on. site.js drops it in from above; without motion it simply stands there with the whole conversation. The light behind it is wider than the phone, so the section clips it at the sides (only the sides: the phone falls in from above). */ .closing--chat { overflow-x: clip; } .closing__device { position: relative; grid-column: 9 / -1; justify-self: end; width: min(100%, 19.5rem, calc(76svh * 0.49)); perspective: 1400px; } .closing__tilt { transform-style: preserve-3d; } .closing__glow { position: absolute; inset: -12% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(236, 233, 226, 0.09), transparent); pointer-events: none; } .phone { position: relative; aspect-ratio: 0.49; border: 1px solid rgba(236, 233, 226, 0.24); border-radius: 16% / 7.84%; background: #121211; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(236, 233, 226, 0.08); } /* The screen is always dark, whatever the page colours, so the pill inside keeps its look. */ .phone__screen { --ink: var(--light); --bg: #141413; position: absolute; inset: 2.3% 4.4%; overflow: hidden; container-type: inline-size; border-radius: 13.2% / 6.2%; background: #141413; } .phone__island { position: absolute; left: 50%; top: 1.7%; width: 32%; height: 4.6%; translate: -50% 0; border-radius: 99px; background: #050505; } /* The closing chat has a row of questions between the thread and the send bar. Its thread scrolls: the messages sit in a stack at least as tall as the thread, so a long conversation grows downwards and every message can be scrolled back to. Once it has scrolled, the top fades out, so a message half out of view does not end in a hard cut. */ .closing .chat { grid-template-rows: auto minmax(0, 1fr) auto auto; } .closing .chat__thread { display: block; padding: 0; overflow-y: auto; scrollbar-width: none; } .closing .chat__thread::-webkit-scrollbar { display: none; } .closing .chat__thread.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 9cqw); mask-image: linear-gradient(transparent, #000 9cqw); } .closing .chat__thread:focus-visible { outline: 2px solid rgba(236, 233, 226, 0.5); outline-offset: -2px; } /* With a mouse wheel, the chat does not hand leftover scrolling to the page by itself (site.js passes the wheel on once the chat is at an end). On touch screens it does, so a swipe that reaches the end of the chat carries on down the page. */ @media (hover: hover) and (pointer: fine) { .closing .chat__thread { overscroll-behavior-y: contain; } } .chat__stack { display: grid; align-content: end; gap: 3.2cqw; min-height: 100%; padding: 4cqw 5cqw 5cqw; } /* The closing's messages are longer, so they run a little smaller. */ .closing .chat__msg { font-size: clamp(8px, 6.8cqw, 19px); } /* The message that goes to Contact takes the colour of the button that sent it; the questions you ask stay dark grey. */ .closing .chat__msg--quote { background: var(--accent); color: var(--on-accent); } /* The typing dots and the message that goes to Contact appear only while the chat plays. */ .closing .chat__msg--dots, .closing .chat__msg--quote { display: none; } /* Questions the visitor can ask, as reply buttons on the visitor's side of the chat. */ .chat__replies { display: flex; flex-direction: column; align-items: flex-end; gap: 2cqw; padding: 1cqw 5cqw 4cqw; overflow: hidden; } .chat__hint { margin-bottom: 0.4cqw; font-size: clamp(6px, 4cqw, 11px); color: rgba(236, 233, 226, 0.45); } .chat__reply { display: inline-flex; align-items: center; gap: 2.6cqw; padding: 1.4cqw 1.4cqw 1.4cqw 4.4cqw; border: 1px solid rgba(236, 233, 226, 0.34); border-radius: 99px; background: transparent; font: inherit; font-size: clamp(7px, 5.4cqw, 15px); font-weight: var(--w-mid); line-height: 1.2; color: var(--light); text-align: left; text-decoration: none; cursor: pointer; transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .chat__reply i { display: grid; place-items: center; flex: none; width: 7cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(236, 233, 226, 0.14); transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .chat__reply svg { width: 56%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .chat__reply:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; } @media (hover: hover) { .chat__reply:hover { border-color: var(--light); background: var(--light); color: var(--dark); } .chat__reply:hover i { background: var(--dark); color: var(--light); } } /* "All good, let's talk" is a call to action, so it takes the accent like the send bar below it, and turns to an accent outline on hover, as the solid buttons do. */ .chat__reply--go { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .chat__reply--go i { background: var(--bg); color: var(--ink); } @media (hover: hover) { .chat__reply--go:hover { border-color: var(--accent); background: transparent; color: var(--light); } .chat__reply--go:hover i { background: var(--ink); color: var(--bg); } } .avail { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 99px; font-size: var(--fs-label); font-weight: var(--w-mid); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .avail__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); } @media (prefers-reduced-motion: no-preference) { .avail__dot { animation: avail-pulse 2.4s ease-in-out infinite; } } @keyframes avail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .contact { padding: clamp(7rem, 14vh, 10rem) var(--gutter) var(--sy); } .contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--gap); row-gap: 3rem; } .contact__intro { grid-column: 1 / span 6; } .contact__intro .page-hero__title { margin-bottom: clamp(2rem, 5vh, 3.5rem); } .contact__sub { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-dim); } .contact .cform { grid-column: 8 / -1; } .contact__media { margin-top: clamp(4rem, 10vh, 7rem); } /* The photo waits at 1.3x until it scrolls in (initClips); clip it so it never widens the page. */ [data-clip] { overflow: hidden; } .contact__media img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; filter: grayscale(1) contrast(1.05); } /* Multi-step form */ .cform { position: relative; display: grid; gap: 1.6rem; padding: clamp(1.6rem, 3.2vw, 2.8rem); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-raise); } .cform__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .cform__count { font-weight: var(--w-display); font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .cform__count em { margin-left: 0.3rem; font-weight: 400; font-size: 1rem; color: var(--ink-dim); } .cform__steplabel { font-size: var(--fs-small); font-weight: var(--w-mid); color: var(--ink-dim); } .cform__steps { position: relative; } .cform__step { display: none; gap: 1.6rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; } .cform__step.is-active, .no-js .cform__step { display: grid; } .cform__field { display: grid; gap: 0.5rem; } .cform__field label, .cform__grouplabel { font-size: var(--fs-label); font-weight: var(--w-mid); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .cform__field input, .cform__field textarea { width: 100%; padding: 0.7rem 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 0; background: none; font-size: var(--fs-body); color: var(--ink); resize: none; transition: border-color 0.35s var(--ease-out); } .cform__field input:focus-visible, .cform__field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); } .cform__field input::placeholder, .cform__field textarea::placeholder { color: var(--ink-dim); opacity: 0.75; } .cform__field [aria-invalid="true"] { border-bottom-color: #e0a39a; } .cform__group { display: grid; gap: 0.8rem; } .cform__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; } .cform__choice { position: relative; } .cform__choice input { position: absolute; opacity: 0; pointer-events: none; } .cform__choice span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.7rem 1.3rem; border: 1px solid var(--line); border-radius: 99px; font-size: var(--fs-small); font-weight: var(--w-mid); color: var(--ink-dim); cursor: pointer; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .cform__choice span:hover { border-color: var(--ink-dim); color: var(--ink); } .cform__choice input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); } .cform__choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; } .cform__consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-dim); cursor: pointer; } .cform__consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: #ece9e2; } .cform__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; } .cform__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cform__back { padding: 0.8rem 0; border: 0; background: none; font-size: 0.875rem; font-weight: var(--w-mid); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.35em; cursor: pointer; transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out); } .cform__back:hover, .cform__back:focus-visible { color: var(--ink); text-decoration-color: var(--ink); } .cform__back[hidden] { display: block; visibility: hidden; } .cform__nav .pill { margin-left: auto; } .cform__progress { height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); } .cform__progress span { display: block; width: 33.34%; height: 100%; background: var(--ink); transition: width 0.6s var(--ease-out); } .cform__note { min-height: 1.5em; font-size: var(--fs-small); color: var(--ink-dim); } .cform__note.is-error { color: #e0a39a; } /* Domain search */ .domain-search { display: flex; align-items: center; gap: 0.6rem; width: min(100%, 48rem); padding: 0.45rem 0.45rem 0.45rem 1.6rem; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 99px; background: var(--bg-raise); transition: border-color 0.3s var(--ease-out); } .domain-search:focus-within { border-color: var(--ink); } .domain-search input { flex: 1; min-width: 0; padding: 0.8rem 0; border: 0; background: none; font-size: var(--fs-lead); outline: none; } .domain-search input::placeholder { color: var(--ink-dim); } .domain-note { min-height: 1.5em; margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-dim); } .domain-note.is-error { color: #e0a39a; } /* ---------- Pricing ---------- */ .pricing__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; column-gap: var(--gap); row-gap: 1.5rem; margin-bottom: clamp(3rem, 7vh, 4.5rem); } .pricing__head .sec-label { grid-column: 1 / span 3; } .pricing__intro { grid-column: 4 / span 6; } .pricing__intro .sec-head__title { max-width: 14ch; } .pricing__intro .sec-head__lead { margin-top: 1.4rem; } .billing { grid-column: 10 / -1; align-self: end; justify-self: end; display: inline-flex; gap: 0.35rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 99px; } .billing button { min-height: 2.8rem; padding: 0.6rem 1.25rem; border: 0; border-radius: 99px; background: none; font-size: 0.875rem; font-weight: var(--w-mid); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--ink-dim); cursor: pointer; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .billing button[aria-checked="true"] { background: var(--ink); color: var(--bg); } .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--gap); } .plan { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.6rem, 2.6vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-raise); } .plan__name { max-width: 14ch; font-size: clamp(1.35rem, 1rem + 0.9vw, 1.8rem); font-weight: var(--w-head); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; } .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .plan__amount { font-size: clamp(3rem, 5vw, 5rem); font-weight: var(--w-display); line-height: 0.9; letter-spacing: -0.05em; } .plan__per { font-size: var(--fs-small); color: var(--ink-dim); } .plan__desc { font-size: var(--fs-body); color: var(--ink-dim); } .plan .pill { justify-content: center; } .plan__list { display: grid; border-top: 1px solid var(--line); } .plan__list li { position: relative; padding: 0.75rem 0 0.75rem 1.7rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; } .plan__list li::before { content: "+"; position: absolute; top: 0.68rem; left: 0; font-weight: 600; } .plan__list li.is-off { color: var(--ink-dim); } .plan__list li.is-off::before { content: "\00d7"; } .plan__tag { position: absolute; top: 1.2rem; right: 1.2rem; padding: 0.4rem 0.85rem; border-radius: 99px; background: var(--dark); color: var(--light); font-size: 0.75rem; font-weight: var(--w-mid); letter-spacing: 0.1em; text-transform: uppercase; } .plan--featured { --line: rgba(9, 9, 8, 0.16); --ink-dim: #5c5953; border-color: var(--light); background: var(--light); color: var(--dark); } .plan--featured .pill--solid:hover, .plan--featured .pill--solid:focus-visible { color: var(--dark); } [data-billing-view="yearly"] [data-monthly], [data-billing-view="monthly"] [data-yearly] { display: none; } /* ---------- Footer ---------- */ .footer { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vh, 8rem) var(--gutter) 0; background: var(--bg-deep); } .footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: var(--gap); row-gap: 2.5rem; padding-bottom: clamp(3rem, 8vh, 6rem); border-bottom: 1px solid var(--line); } .footer__brand { grid-column: 1 / span 4; display: grid; justify-items: start; gap: 1.2rem; } .footer__brand p { max-width: 36ch; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-dim); } .footer__col { display: grid; align-content: start; gap: 0.7rem; } .footer__col:nth-child(2) { grid-column: 6 / span 2; } .footer__col:nth-child(3) { grid-column: 8 / span 2; } .footer__badge { grid-column: 11 / span 2; justify-self: end; } .footer__col-title { margin-bottom: 0.4rem; font-size: var(--fs-label); font-weight: var(--w-mid); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .footer__col a { width: fit-content; font-size: var(--fs-body); transition: color 0.3s var(--ease-out); } .footer__col a:hover, .footer__col a:focus-visible { color: var(--ink-dim); } .footer__badge img { width: 5.6rem; filter: grayscale(1); opacity: 0.85; transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } .footer__badge a:hover img, .footer__badge a:focus-visible img { filter: none; opacity: 1; } .footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; padding-top: 1.6rem; font-size: var(--fs-small); color: var(--ink-dim); } .footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; } .footer__legal a { transition: color 0.3s var(--ease-out); } .footer__legal a:hover, .footer__legal a:focus-visible { color: var(--ink); } .footer__wordmark { margin-top: clamp(2.5rem, 7vh, 5rem); padding-bottom: clamp(0.8rem, 1.6vw, 1.6rem); user-select: none; } /* The footer carries the Folded logo in full: vermilion over hot pink. */ .footer__giant { --fold-top: #ee4323; --fold-bot: #ff4f8b; width: 100%; } /* ---------- Custom cursor ---------- */ html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor [role="radio"], html.has-cursor canvas, html.has-cursor .svc__item { cursor: none; } html.has-cursor input[type="text"], html.has-cursor input[type="email"], html.has-cursor input[type="search"], html.has-cursor textarea { cursor: text; } .cursor, .cursor-ring, .cursor-badge { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; will-change: transform; transition: opacity 0.3s var(--ease-out); } html.is-cursor-on .cursor, html.is-cursor-on .cursor-ring, html.is-cursor-on .cursor-badge { opacity: 1; } .cursor { z-index: 300; mix-blend-mode: difference; } .cursor-ring { z-index: 299; mix-blend-mode: difference; } .cursor-badge { z-index: 301; } .cursor__dot { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--light); } .cursor-ring__in { position: absolute; top: -20px; left: -20px; display: block; width: 40px; height: 40px; border: 1px solid rgba(236, 233, 226, 0.5); border-radius: 50%; transition: transform 0.28s var(--ease-out), background-color 0.28s var(--ease-out); } .cursor-badge__in { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem 0.6rem 1rem; border: 1px solid rgba(236, 233, 226, 0.26); border-radius: 99px; background: rgba(14, 14, 13, 0.94); box-shadow: 0 0.65rem 2rem rgba(0, 0, 0, 0.2); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--light); transform: translate(16px, 16px) scale(0); transform-origin: left top; transition: transform 0.28s var(--ease-out); } .cursor-badge__icon { display: inline-grid; place-items: center; min-width: 1.1rem; font-size: 0.85rem; letter-spacing: 0; } html.is-cursor-hover .cursor-ring__in { transform: scale(1.55); background: rgba(236, 233, 226, 0.08); } html.is-cursor-press .cursor-ring__in { transform: scale(0.75); background: rgba(236, 233, 226, 0.18); } html.is-cursor-badge .cursor-ring__in { transform: scale(0.48); } html.is-cursor-badge .cursor-badge__in { transform: translate(16px, 16px) scale(1); } html.is-cursor-left .cursor-badge__in { transform: translate(calc(-100% - 16px), 16px) scale(0); transform-origin: right top; } html.is-cursor-badge.is-cursor-left .cursor-badge__in { transform: translate(calc(-100% - 16px), 16px) scale(1); } html.is-cursor-text .cursor, html.is-cursor-text .cursor-ring, html.is-cursor-text .cursor-badge { opacity: 0; } /* ---------- Page transition ---------- */ html.is-arriving::after { content: ""; position: fixed; inset: 0; z-index: 240; background: var(--dark-deep); } html.is-leaving body { pointer-events: none; } .pt { position: fixed; inset: 0; z-index: 245; overflow: hidden; pointer-events: none; } /* ---------- Motion helpers ---------- */ /* The padding leaves room for descenders inside the clip; the negative margin takes it back, so the headline is the same height split and unsplit and nothing below it jumps when it reverts. */ [data-split] .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; } /* Set while the script animates an element whose own CSS transitions would fight it. */ .no-tr, .no-tr * { transition: none !important; } html.js-motion [data-split]:not(.is-split) { visibility: hidden; } html.js-motion [data-reveal] { opacity: 0; } html.motion-off [data-split] { visibility: visible; } html.motion-off [data-reveal] { opacity: 1; } /* Without the scroll script, light sections keep a light background of their own. */ html:not(.theme-live) [data-theme="light"] { --bg: #ece9e2; --bg-deep: #e4e0d7; --bg-raise: #f6f4ef; --ink: #1f1e1b; --ink-dim: #67635c; --line: rgba(31, 30, 27, 0.14); background: var(--bg); color: var(--ink); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .row__name, .row__text, .svc__name, .svc__text { grid-column: 4 / -1; } .faq__body p { grid-column: 4 / span 8; } .plans { grid-template-columns: 1fr; max-width: 40rem; } .footer__brand { grid-column: 1 / -1; } .footer__col:nth-child(2) { grid-column: 1 / span 4; } .footer__col:nth-child(3) { grid-column: 5 / span 4; } .footer__badge { grid-column: 9 / span 4; } } @media (max-width: 900px) { :root { --fs-body: 1.0625rem; } .nav__links, .nav__login { display: none; } .nav__burger { display: inline-flex; } .nav__actions { gap: 0.8rem; } .hero__inner { row-gap: 1.4rem; padding-top: 6rem; } .hero__title { margin-bottom: 0.4rem; } .hero__line--serif { margin-left: 1.2rem; } .hero__desc, .hero__cta { grid-column: 1 / -1; } .hero__cta { justify-content: flex-start; } .hero__logos { --h: clamp(2.7rem, 6svh, 3.3rem); height: clamp(4.5rem, 10svh, 6rem); } .hero__logo { margin-right: clamp(2.2rem, 9vw, 3rem); } .sec-head .sec-label, .svc__head .sec-label, .sec-head__title, .sec-head__lead, .statement__rail, .statement__text, .who__title, .who__story, .quotes__rail, .quotes__list, .how__top .sec-label, .how__promise, .build__copy, .build__scene, .closing__main, .closing__figure, .contact__intro, .contact .cform, .pricing__head .sec-label, .pricing__intro, .billing, .page-hero__foot > :first-child, .page-hero__foot > :last-child { grid-column: 1 / -1; } .billing { justify-self: start; } .statement { row-gap: 1.8rem; } .row__num, .svc__icon { grid-column: 1 / span 2; } .row__name, .row__text, .svc__name, .svc__text { grid-column: 3 / -1; } .svc__icon { width: 2.4rem; } .faq__text { grid-column: 1 / span 10; } .faq__body p { grid-column: 1 / span 11; } .quotes__stage { row-gap: 2rem; } .quotes__rail { align-items: flex-start; gap: 1.4rem; } .quotes.is-live .quotes__rail { order: 2; } .quotes__names { display: none; } .quotes__ctrl { align-self: stretch; } .quotes:not(.is-live) .quotes__rail { grid-column: 1 / span 11; } .wall__cards { columns: 1; } .who.is-live .who__stage::after { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 40%, color-mix(in srgb, var(--bg) 0%, transparent) 62%); } .who.is-live .who__copy { padding-top: clamp(5.5rem, 12vh, 7rem); } .who.is-live .who__title, .who.is-live .who__story { grid-column: 1 / -1; } .who.is-live .who__slide { max-width: 21ch; font-size: clamp(1.45rem, 5.9vw, 2.2rem); } .how__top { row-gap: 1.5rem; } /* The scene takes the height the copy leaves, so the phone's chat stays readable. */ .build__scene { height: clamp(17rem, calc(100svh - 26rem), 32rem); } .build.is-live .build__pin { align-content: center; row-gap: 1.25rem; } .build.is-live .build__copy { order: 2; } .build__num { margin-bottom: 0.4rem; font-size: 2.4rem; } .build__name { margin-top: 0; font-size: clamp(1.7rem, 7vw, 2.6rem); } .build__text { max-width: 40ch; margin-top: 0.7rem; font-size: var(--fs-body); } .build__progress { margin-top: 1.4rem; } .closing__figure { justify-self: start; width: min(100%, 20rem); } .closing__device { grid-column: 1 / -1; justify-self: center; width: min(100%, 19rem, calc(74svh * 0.49)); } .page-hero__art { top: 5.5rem; width: 9rem; opacity: 0.7; } /* Phones: the cellar comes first, straight under the pavement, and the copy follows. */ .page-hero--cellar .page-hero__foot > .page-hero__copy, .page-hero--cellar.has-cellar .page-hero__foot > .page-hero__copy, .page-hero--cellar.has-cellar .cellar { grid-column: 1 / -1; } .page-hero--cellar.has-cellar .cellar { --above: 4.5rem; order: -1; margin-bottom: 0.8rem; } .cellar::before { padding-top: 27%; } } /* Short phones: long reviews set a little smaller so the card, the progress bar and the button fit on the screen together. */ @media (max-width: 900px) and (max-height: 760px) { .quotes.is-live .quote--l .quote__text { font-size: 1.15rem; line-height: 1.25; } .quotes.is-live .quote__mark { font-size: 3.2rem; } } @media (max-width: 560px) { .nav__cta { display: none; } .hero__line--grotesk { font-size: calc(clamp(2.3rem, 11.8vw, 3.6rem) * var(--display-scale)); } .hero__line--serif { margin-left: 0.6rem; font-size: clamp(2rem, 10vw, 3.2rem); } .row__num, .row__name, .row__text, .svc__icon, .svc__name, .svc__text { grid-column: 1 / -1; } .svc__item { row-gap: 0.9rem; } .faq__icon { width: 2.4rem; } .faq__body p { grid-column: 1 / -1; } .footer__col:nth-child(2) { grid-column: 1 / span 6; } .footer__col:nth-child(3) { grid-column: 7 / span 6; } .footer__badge { grid-column: 1 / -1; justify-self: start; } .domain-search { flex-direction: column; align-items: stretch; padding: 0.9rem; border-radius: var(--radius-card); } .domain-search input { padding: 0.5rem 0.4rem; } .bo-bar i { width: 0.35rem; } .bo-url { padding: 0 0.5rem; font-size: 0.55rem; } .bo-checks { gap: 0.3rem; } .bo-chip { font-size: 0.6rem; } .bo-notes { gap: 0.25rem; } } @media (max-height: 700px) and (min-width: 901px) { .build__scene { height: min(60svh, 34rem); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor canvas, html.has-cursor .svc__item { cursor: auto; } .preloader { display: none !important; } .statement__text .w { opacity: 1 !important; } .svc__item.is-active .svc__icon svg > * { animation: none; } .chat__dots i { animation: none; } a.pill--solid::after { content: none; } .bo-island b::before { animation: none; } }