/* ============================================================================ Text Behind Subject — landing page Standalone from css/styles.css (the editor). Nothing here is shared, so changing one cannot break the other. ========================================================================== */ :root { --ink: #050505; --ink-2: #0a0a0b; --ink-3: #111113; --accent: #CFFF49; --accent-dim: #b9e83a; /* Lime is light, so anything sitting ON it takes the page black. White on lime is ~1.3:1 and effectively invisible. */ --accent-ink: #050505; --paper: #ffffff; --paper-2: #f2f0ec; --on-dark: #f4f3f1; --on-dark-2: rgba(244, 243, 241, .62); --on-dark-3: rgba(244, 243, 241, .38); --line: rgba(255, 255, 255, .13); --line-2: rgba(255, 255, 255, .22); --line-dark: rgba(5, 5, 5, .12); --display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --ui: 'Manrope', system-ui, -apple-system, sans-serif; --gutter: clamp(16px, 2.6vw, 40px); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.32, .5, 1); /* Section rhythm. The reference sets sections very far apart. */ --band: clamp(88px, 11vw, 168px); } *, *::before, *::after { box-sizing: border-box } * { margin: 0; padding: 0 } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* The gallery bleeds past the right edge on purpose. `clip` contains it without creating a scroll container, which `hidden` on would. */ overflow-x: clip; } body { background: var(--ink); color: var(--on-dark); font-family: var(--ui); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { display: block; max-width: 100% } img { height: auto } /* is an inline wrapper with no box of its own, so an `img` inside it asking for height:100% resolves against nothing and the figure ends up taller than its photo. Giving the wrapper the parent's box fixes every figure here at once. */ picture { display: block; width: 100%; height: 100% } a { color: inherit; text-decoration: none } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer } input { font: inherit; color: inherit } ul { list-style: none } .sprite { position: absolute; width: 0; height: 0; overflow: hidden } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================ shared primitives ========================== */ /* Big uppercase display headings — the page's main voice. */ .h-display { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 5.2vw, 4.55rem); line-height: .94; letter-spacing: -.033em; text-transform: uppercase; display: flex; flex-direction: column; gap: .05em; } .h-display__ind { display: flex; align-items: center; gap: .28em; padding-left: .06em; } .h-arrow { display: grid; place-items: center; width: .86em; height: .86em; color: var(--accent); flex: none; } .h-arrow svg { width: 100%; height: 100% } /* Pills ------------------------------------------------------------------ */ .pill { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px 0 24px; border-radius: 999px; font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: transform .35s var(--spring), background-color .25s var(--ease), color .25s var(--ease); } .pill:hover { transform: translateY(-2px) } .pill:active { transform: translateY(0) } .pill--sm { height: 44px; font-size: 14px; padding: 0 6px 0 20px; gap: 10px } .pill--dark { background: rgba(14, 14, 15, .82); color: var(--on-dark); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .pill--dark:hover { background: rgba(24, 24, 26, .92) } .pill--light { background: var(--paper); color: #111; padding: 0 26px; } .pill--light:hover { background: #ebe9e5 } /* Circle icon buttons ---------------------------------------------------- */ .circ { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; transition: transform .35s var(--spring), background-color .25s var(--ease); } .circ svg { width: 19px; height: 19px } .circ--light { background: var(--paper); color: #111 } .circ--accent { background: var(--accent); color: var(--accent-ink) } .circ--outline { border: 1px solid var(--accent); color: var(--accent) } .circ--outline:hover { background: var(--accent); color: var(--accent-ink) } .circ--hair { border: 1px solid var(--line-2); color: var(--on-dark-2) } .circ--hair:hover { border-color: var(--on-dark); color: var(--on-dark) } a.circ:hover, button.circ:hover { transform: translateY(-2px) } /* Chips ------------------------------------------------------------------ */ .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #111; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .chip--line { background: transparent; border: 1px solid var(--line-dark); color: #111; height: 30px; padding: 0 14px; } .chip--tl { position: absolute; top: 14px; left: 14px } .chip--bl { position: absolute; bottom: 14px; left: 14px } /* Small caps meta row --------------------------------------------------- */ .meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--gutter) 40px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); } .dim { color: var(--on-dark-2) } /* ================================= NAV ================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; /* Above the menu panel (200) — the burger IS the close control and it lives up here, so a lower z-index would make the X unclickable. */ z-index: 210; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px var(--gutter); transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(5, 5, 5, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); } .nav__left { display: flex; align-items: center; gap: 22px; } /* Logo tile + menu button as one white pill. */ .nav__cluster { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--paper); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5); flex: none; } .nav__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #111; flex: none; transition: transform .35s var(--spring); } .nav__logo:hover { transform: scale(1.05) } .nav__logo svg { width: 20px; height: 20px; fill: var(--accent); } /* Two bars, not three: the three-bar X needs the middle one to fade while the outer two converge, and that fade shows as a grey smear mid-morph. Centring is done with margins so `transform` stays free for the rotation. */ .burger { position: relative; display: grid; place-items: center; width: 44px; height: 40px; background: none; border: 0; padding: 0; cursor: pointer; color: #111; flex: none; border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease); } .burger:hover { background: rgba(0, 0, 0, .07) } .burger i { position: absolute; left: 50%; top: 50%; margin: -.9px 0 0 -11px; width: 22px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .burger i:first-child { transform: translateY(-4px) } .burger i:last-child { transform: translateY(4px) } /* Both bars share one centre, so ±45° lands a symmetrical X with no nudging. */ html.is-menu-open .burger i:first-child { transform: rotate(45deg) } html.is-menu-open .burger i:last-child { transform: rotate(-45deg) } .nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); } .nav__links a { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--on-dark); transition: color .2s var(--ease); } .nav__links a:hover { color: var(--accent) } /* Left-aligned inside its own block, centred as a block in the bar. */ .nav__clock { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; font-variant-numeric: tabular-nums; justify-self: center; } .nav__day, .nav__date { color: var(--on-dark) } .nav__right { display: flex; align-items: center; justify-content: flex-end; } /* Two labels and a dark disc, sharing one white pill. */ .nav__cta { display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 6px; border-radius: 999px; background: var(--paper); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5); } .nav__cta-link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #111; white-space: nowrap; transition: background .2s var(--ease); } .nav__cta-link:hover { background: rgba(0, 0, 0, .07) } .nav__cta-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #111; color: #fff; flex: none; transition: transform .35s var(--spring), background .2s var(--ease); } .nav__cta-go:hover { transform: translateX(2px); background: #000; } .nav__cta-go svg { width: 19px; height: 19px } /* While the panel is up only the burger cluster stays — the rest of the bar would otherwise float over the menu and duplicate its own links. */ html.is-menu-open .nav__cta, html.is-menu-open .nav__clock, html.is-menu-open .nav__links { opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } html.is-menu-open .nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* ================================= MENU ================================= */ /* Opaque, deliberately. A backdrop-filter across the whole viewport re-samples everything behind it every frame and tanks the entrance animation on mid-range phones. */ .menu { position: fixed; left: 0; right: 0; top: 0; /* Not inset:0 — 100dvh follows the mobile URL bar; a bottom-anchored inset does not, and the footer ends up under the chrome. */ height: 100dvh; z-index: 200; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(96px, 22vw, 148px) var(--gutter) max(clamp(28px, 7vw, 52px), env(safe-area-inset-bottom)); background: var(--ink); color: var(--on-dark); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-12px); /* visibility is what keeps a closed panel out of the tab order — opacity:0 alone does not. Delaying it until the fade ends is the whole trick. */ transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; } .menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .menu__nav { display: flex; flex-direction: column; } .menu__nav a { display: flex; align-items: baseline; gap: clamp(14px, 4vw, 26px); padding: clamp(14px, 3.4vw, 22px) 0; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 300; font-size: clamp(1.65rem, 8.4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--on-dark); opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), color .2s var(--ease); } .menu__nav a:last-child { border-bottom: 1px solid var(--line) } /* Phones do not hover, and a hover style that sticks after a tap looks broken. */ .menu__nav a:active { color: var(--accent) } .menu.is-open .menu__nav a { opacity: 1; transform: none; transition-delay: calc(.10s + var(--i) * .06s); } /* Entry only. A staggered exit makes closing feel slow. */ .menu:not(.is-open) .menu__nav a { transition-delay: 0s } .menu__idx { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--accent); flex: none; } .menu__foot { display: flex; flex-direction: column; gap: 22px; } .menu__note { font-size: 15px; line-height: 1.55; color: var(--on-dark-2); max-width: 42ch; } .menu__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .menu__social { display: flex; gap: 10px } .menu__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--on-dark); transition: background .2s var(--ease), color .2s var(--ease); } .menu__social a:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .menu__social svg { width: 19px; height: 19px } @media (prefers-reduced-motion: reduce) { .menu, .menu__nav a, .burger i { transition-duration: .01ms !important; transition-delay: 0s !important; } } /* ================================= HERO ================================= */ .hero { position: relative; /* svh, not vh: on mobile `vh` is measured against the *largest* viewport, so with the address bar showing the hero runs past the fold and the cards fall off the bottom edge. Plain vh first as the fallback. */ min-height: 100vh; min-height: 100svh; display: flex; isolation: isolate; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2 } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42% } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .34) 30%, rgba(5, 5, 5, .30) 52%, rgba(5, 5, 5, .72) 86%, var(--ink) 100%), linear-gradient(to right, rgba(5, 5, 5, .62) 0%, rgba(5, 5, 5, .10) 62%, rgba(5, 5, 5, .34) 100%); } /* Vertical rhythm is measured off the reference, as fractions of hero height: ~22% above the headline, ~12% between headline and the kicker/button row, ~5% between that row and the cards. vh tracks those fractions because the hero is sized in vh. Gaps live on the children, not as one flex `gap`, because the two are deliberately unequal. */ .hero__inner { position: relative; flex: 1; display: flex; flex-direction: column; padding: clamp(76px, 14vh, 180px) var(--gutter) clamp(18px, 2.4vh, 32px); } /* headline ------------------------------------------------------------- */ .hero__head { position: relative; margin-bottom: clamp(32px, 8vh, 100px); } .hero__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 10.8vw, 20rem); line-height: .9; letter-spacing: -.038em; text-transform: uppercase; display: flex; flex-direction: column; color: #fff; } .hero__line1 { display: block } /* Line two is indented, which leaves the left gutter empty beside it — that gap is where the proof block sits. */ .hero__line2 { position: relative; display: flex; align-items: center; gap: .16em; padding-left: clamp(24px, 21.5vw, 640px); } .hero__glyph { width: .58em; height: .58em; fill: var(--accent); flex: none; transform: translateY(.02em); } .hero__badge { position: absolute; left: 0; bottom: .16em; display: flex; align-items: center; gap: 11px; /* Fixed rather than max-content: the text has to wrap inside the indent instead of running under the headline. */ width: clamp(190px, 19vw, 286px); /* The badge lives inside an h1, so every inherited display value has to be unwound or it renders at headline size. */ font-family: var(--ui); text-transform: none; letter-spacing: normal; line-height: 1.3; } .hero__badge-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; } .hero__badge-icon svg { width: 19px; height: 19px; } .hero__badge-text { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--on-dark-2); } .hero__badge-text strong { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); } /* mid row: kicker left, buttons right ---------------------------------- */ .hero__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 5vh, 60px); } .hero__kicker { font-size: clamp(12px, 1.05vw, 14px); font-weight: 600; line-height: 1.5; letter-spacing: .055em; text-transform: uppercase; color: rgba(255, 255, 255, .86); max-width: 22ch; } .hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: clamp(0px, 4vw, 72px); } /* bottom row: note card + image strip ---------------------------------- */ .hero__foot { display: grid; grid-template-columns: minmax(268px, clamp(280px, 25.5vw, 460px)) 1fr; gap: clamp(14px, 1.6vw, 26px); align-items: end; /* Absorbs whatever height is left so the cards land on the hero's bottom edge rather than floating with a black band beneath them. */ margin-top: auto; } /* Liquid glass. No border — real glass catches light along its edge, and a 1px stroke reads as a UI panel. The specular sliver is the top 2% of ::after. */ .hero__note { position: relative; display: flex; gap: 0; border-radius: var(--r-md); background: var(--ink); overflow: hidden; isolation: isolate; min-height: clamp(150px, 21vh, 262px); } .hero__note-glass { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* A plain `filter`, not `backdrop-filter`: this rasterises once instead of recomputing on every frame the card moves through the viewport. */ filter: url(#liquidGlass); } .hero__note-glass img { position: absolute; max-width: none; object-fit: cover; /* Must match .hero__bg img exactly, or the copy frames the photo differently from the real one behind it. */ object-position: 50% 42%; /* js/landing.js sets width/height/left/top to mirror the hero photo. */ } /* Tint and specular sit ABOVE the refraction. The tint has to reach full strength before the first line of text or the label loses contrast against the bright parts of the photo. */ .hero__note::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 2%, rgba(9, 9, 11, .48) 7%, rgba(9, 9, 11, .46) 58%, rgba(6, 6, 8, .58) 100%); } /* Lift the content above the refraction. This only sets z-index — an earlier version also set `position: relative` here, and because `.hero__note>*:not(…)` outranks a single class it silently overrode the corner button's own `position: absolute` and parked it at the card's left edge. */ .hero__note>*:not(.hero__note-glass) { z-index: 2; } .hero__note-icon, .hero__note-body { position: relative; } .hero__note-go { z-index: 3; } /* Translucent material over a sharp backdrop reads as broken, so the fallback is fully opaque rather than partly transparent. */ @supports not (filter: url(#liquidGlass)) { .hero__note-glass { display: none } .hero__note { background: rgba(10, 10, 11, .92) } } .hero__note-icon { display: grid; place-items: center; width: 96px; flex: none; background: #0b0b0c; border-right: 1px solid var(--line); } .hero__note-icon svg { width: 30px; height: 30px; fill: var(--paper) } .hero__note-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px 18px; } .hero__note-text { font-size: 14.5px; line-height: 1.45; color: var(--on-dark); max-width: 30ch; } .hero__note-nav { display: flex; gap: 8px } .hero__note-nav .circ { width: 30px; height: 30px } .hero__note-nav .circ svg { width: 15px; height: 15px } .hero__note-go { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: #111; transition: transform .35s var(--spring); } .hero__note-go svg { width: 15px; height: 15px } .hero__note-go:hover { transform: translate(2px, -2px) } /* the strip runs off the right edge on purpose */ .hero__strip { display: flex; gap: clamp(10px, 1.1vw, 16px); overflow-x: auto; scrollbar-width: none; padding-right: var(--gutter); margin-right: calc(var(--gutter) * -1); scroll-snap-type: x proximity; } .hero__strip::-webkit-scrollbar { display: none } .strip-card { position: relative; flex: none; width: clamp(150px, 13.2vw, 196px); height: clamp(150px, 21vh, 262px); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); scroll-snap-align: start; transition: transform .4s var(--spring); } .strip-card:hover { transform: translateY(-4px) } .strip-card img { width: 100%; height: 100%; object-fit: cover } .strip-card--dark { background: rgba(10, 10, 11, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: space-between; padding: 14px; } .strip-card__mark { width: 22px; height: 22px; fill: var(--paper) } .strip-card--dark p { font-size: 13px; line-height: 1.4; color: var(--on-dark-2); } .strip-card__tag { position: absolute; left: 10px; bottom: 10px; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #111; font-size: 12px; font-weight: 600; } /* ================================ TRUST ================================= */ .trust { padding: var(--band) 0 0 } .trust__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding: 0 var(--gutter); } .trust__lede { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -.012em; max-width: 46ch; justify-self: end; } /* Staggered gallery ----------------------------------------------------- */ .gallery { display: grid; grid-template-columns: minmax(170px, 1fr) 1.55fr 1.3fr 1.55fr; gap: clamp(14px, 1.5vw, 24px); align-items: start; padding: clamp(48px, 6vw, 96px) 0 0 var(--gutter); /* the last column bleeds off the right edge, as in the reference */ margin-right: clamp(-140px, -8vw, -40px); } .gallery__col { display: flex; flex-direction: column; gap: 16px } .gallery__col--a { padding-top: 0; gap: 20px } .gallery__col--b { padding-top: clamp(20px, 3vw, 48px) } .gallery__col--c { padding-top: clamp(60px, 9vw, 150px) } .gallery__col--d { padding-top: clamp(10px, 1.6vw, 28px) } .gallery__col--a .pill { align-self: flex-start; margin-top: auto } .gallery__aside { font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.5vw, 21px); line-height: 1.14; letter-spacing: -.02em; text-transform: uppercase; color: var(--on-dark-3); max-width: 15ch; } .shot { position: relative; border-radius: var(--r-md); overflow: hidden; isolation: isolate; } .shot img { width: 100%; height: 100%; object-fit: cover } .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 5, 5, .42) 0%, rgba(5, 5, 5, 0) 38%, rgba(5, 5, 5, 0) 52%, rgba(5, 5, 5, .72) 100%); pointer-events: none; } .shot--sm { aspect-ratio: 5/4 } .shot--mid { aspect-ratio: 3/4 } .shot--tall { aspect-ratio: 4/5 } .shot>.chip, .shot__title, .shot__foot, .shot__note { z-index: 2 } .shot__title { position: absolute; left: 16px; right: 16px; bottom: 52px; font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.15; letter-spacing: -.02em; color: #fff; } .shot__title--top { top: 16px; bottom: auto; right: 44px } .shot__foot { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .72); } .shot__note { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(10, 10, 11, .8); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; line-height: 1.35; color: var(--on-dark-2); } .shot__label { font-family: var(--display); font-weight: 500; font-size: clamp(13px, 1.2vw, 17px); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; max-width: 14ch; } .gallery__col--b>.circ, .gallery__col--d>.circ { margin-top: -4px } /* ================================ MEDIA ================================= */ .media { padding: var(--band) var(--gutter) 0 } .media__top { display: flex; justify-content: flex-end; margin-bottom: clamp(24px, 3vw, 48px) } .media__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; /* Translucent with a white icon, as in the reference — a solid white disc reads as a UI button rather than an overlay cue. */ background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; transition: transform .35s var(--spring), background .25s var(--ease); } .media__play:hover { background: rgba(255, 255, 255, .3) } .media__play:hover { transform: translate(-50%, -50%) scale(1.08) } .media__play svg { width: 20px; height: 20px } .media__card-mark { width: 44px; height: 44px; fill: #111 } .media__stamp { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); } .logo-row li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--on-dark-2); } .logo-row svg { width: 14px; height: 14px; fill: currentColor; flex: none } /* Columns are uneven and bottom-aligned: the left card is taller and starts higher, but both cards end on the same line because each column ends with a logo row and the grid aligns to the end. */ .media__grid { display: grid; grid-template-columns: 0.72fr 1fr; gap: clamp(40px, 7vw, 130px); align-items: end; } .media__col { display: flex; flex-direction: column; gap: clamp(34px, 5.5vw, 86px); min-width: 0; } .media__block { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 44px); } /* Card beside a meta column that stretches to the card's height, so its two children sit hard against the top and bottom edges. */ .media__lead { display: grid; grid-template-columns: minmax(0, clamp(150px, 18vw, 252px)) 1fr; gap: clamp(16px, 2.4vw, 44px); align-items: stretch; } .media__meta { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; } .media__visual { position: relative; aspect-ratio: 0.88; border-radius: var(--r-md); overflow: hidden; isolation: isolate; align-self: end; } .media__visual img { width: 100%; height: 100%; object-fit: cover } /* Caption with a rule running to the card edge, behind the play button. */ .media__cue { position: absolute; left: clamp(12px, 1.2vw, 20px); right: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; gap: 10px; pointer-events: none; } .media__cue-text { font-size: clamp(12px, 1vw, 14px); color: rgba(255, 255, 255, .92); white-space: nowrap; } .media__cue-line { flex: 1; height: 1px; background: rgba(255, 255, 255, .45); } .media__title { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.2vw, 33px); line-height: 1.12; letter-spacing: -.03em; } .media__card { display: grid; place-items: center; aspect-ratio: 1.47; border-radius: var(--r-md); background: var(--paper); align-self: end; } .media__body { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--on-dark-2); } .logo-row { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 30px); } /* ============================== CAPABILITY ============================== */ .capability { padding: var(--band) 0 0 } .capability__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding: 0 var(--gutter); } .capability__aside { justify-self: end; max-width: 46ch; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .capability__aside p { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--on-dark-2); } .cards { display: grid; align-items: start; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); padding: clamp(40px, 5vw, 80px) var(--gutter) 0; } /* Cards ------------------------------------------------------------------ Proportions read off the reference: card ~0.73 w/h, oversized headline that deliberately clips at the right edge, and the sub-count + arrow sitting on the page BELOW the card rather than inside it. */ .card-col { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 34px); /* A grid item's automatic minimum is its min-content width, and the nowrap headline makes that enormous — which stretched this column past its 1fr share and left every card a different width (and so a different aspect-derived height). */ min-width: 0; } .card { position: relative; display: flex; flex-direction: column; aspect-ratio: 0.73; padding: clamp(14px, 1.5vw, 22px); border-radius: clamp(18px, 1.7vw, 26px); background: var(--paper); color: #111; overflow: hidden; transition: transform .45s var(--spring); } .card:hover { transform: translateY(-6px) } .card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Two auto margins split the free space: the headline lands around the middle and the body sits on the bottom edge. */ .card__title { margin-top: auto; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 66px); line-height: 1; letter-spacing: -.035em; /* nowrap is the point — the reference lets the word run off the card. */ white-space: nowrap; } .card__title--sm { margin-top: clamp(14px, 1.4vw, 22px); font-size: clamp(19px, 1.75vw, 27px); line-height: 1.12; white-space: normal; max-width: 15ch; } /* Feature 03 runs dark, as in the reference — the image carries the card, so a white panel behind it would fight the photo. */ .card--dark { background: var(--ink-2); color: var(--on-dark); border: 1px solid var(--line); } .card--dark .chip--line { border-color: var(--line-2); color: var(--on-dark); } .card--dark .card__body { color: var(--on-dark-2) } .card__body { margin-top: auto; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; color: rgba(17, 17, 17, .66); } .card__figure { margin-top: auto; border-radius: clamp(10px, 1vw, 14px); overflow: hidden; aspect-ratio: 16/11; } .card__figure img { width: 100%; height: 100%; object-fit: cover } .card-col__foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 24px); } .card-col__sub { font-size: clamp(12px, 1vw, 14px); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); } /* ================================ DECIDE ================================ */ .decide { position: relative; padding: var(--band) var(--gutter) clamp(60px, 7vw, 110px); isolation: isolate; } .decide__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden } .decide__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40% } .decide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--ink) 0%, rgba(5, 5, 5, .34) 24%, rgba(5, 5, 5, .34) 72%, var(--ink) 100%); } .panel { background: var(--paper); color: #111; border-radius: var(--r-xl); padding: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: clamp(18px, 2vw, 30px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65); } .panel__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); } .panel__col h3 { font-family: var(--display); font-weight: 600; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -.02em; margin-bottom: 6px; } .panel__col p { font-size: 14px; line-height: 1.5; color: rgba(17, 17, 17, .6); max-width: 34ch; margin-bottom: 16px; } .panel__col em { font-style: italic; color: #111 } .panel__col figure { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16/9; } .panel__col figure img { width: 100%; height: 100%; object-fit: cover } .panel__wide { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 64/17; } .panel__wide img { width: 100%; height: 100%; object-fit: cover } .panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .panel__foot p { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } /* ================================== CTA ================================= */ .cta { position: relative; padding: clamp(70px, 9vw, 140px) var(--gutter) clamp(60px, 7vw, 110px); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "intro intro" "stamp main"; gap: clamp(28px, 5vw, 80px) clamp(20px, 3vw, 48px); align-items: end; } .cta__intro { grid-area: intro; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.35; letter-spacing: -.02em; color: var(--on-dark-2); } .cta__intro strong { color: var(--on-dark); font-weight: 700 } .cta__stamp { grid-area: stamp; position: relative; display: grid; place-items: center; width: clamp(132px, 12vw, 172px); aspect-ratio: 1; align-self: end; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line); } .cta__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: stamp-spin 30s linear infinite; } .cta__stamp text { fill: var(--on-dark-2); font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .1em; } /* Three offset rings in the middle, as in the reference badge. */ .cta__stamp-rings { position: relative; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); } .cta__stamp-rings::before, .cta__stamp-rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); } .cta__stamp-rings::before { transform: translateY(-22%) scaleY(.82) } .cta__stamp-rings::after { transform: translateY(22%) scaleY(.82) } @keyframes stamp-spin { to { transform: rotate(360deg) } } .cta__main { grid-area: main; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(16px, 2vw, 28px); text-align: right; } .cta__title { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 9vw, 8.2rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; display: flex; flex-direction: column; align-items: flex-end; } .cta__title-dim { color: var(--on-dark-3) } .cta__title-lit { color: #fff } .cta__link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .cta__link>span:first-child, .cta__link { text-underline-offset: 5px } .cta__link:hover { color: var(--accent) } .cta__link .circ { transition: transform .35s var(--spring) } .cta__link:hover .circ { transform: translate(2px, -2px) } /* ================================ FOOTER ================================ */ .foot { position: relative; isolation: isolate; border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 40px); overflow: hidden; } /* Video background. The scrim is doing the real work — the footer is dense with small text, and 15px muted grey over moving video is unreadable without it. */ .foot__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .foot__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--ink) 0%, rgba(5, 5, 5, .82) 22%, rgba(5, 5, 5, .86) 100%); } /* A moving background is the clearest case for honouring this. */ @media (prefers-reduced-motion: reduce) { .foot__bg { display: none } } .meta-row--foot { padding-bottom: clamp(30px, 4vw, 56px) } .foot__grid { position: relative; display: grid; /* Two columns since the globe went: brand left, socials right. */ grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: start; padding: 0 var(--gutter); min-height: clamp(200px, 20vw, 270px); } .foot__logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -.035em; margin-bottom: 14px; } .foot__logo svg { width: 26px; height: 26px; fill: var(--accent); flex: none } .foot__brand p { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); max-width: 28ch; } .foot__brand strong { color: var(--on-dark); font-weight: 600 } .foot__social { justify-self: end; text-align: left } .foot__social-head { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 18px; } .foot__social ul { display: flex; gap: 10px } .foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line); color: var(--on-dark); transition: background-color .25s var(--ease), transform .35s var(--spring); } .foot__social a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px) } .foot__social svg { width: 17px; height: 17px } .foot__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: end; padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(24px, 3vw, 36px); } .foot__copy { font-size: 13px; color: var(--on-dark-3) } /* Quiet but findable: a step up from the line it sits in. */ .foot__copy a { color: var(--on-dark-2); transition: color .2s var(--ease); } .foot__copy a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; } .foot__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 260px; } .foot__nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--on-dark-2); transition: border-color .2s var(--ease), color .2s var(--ease); } .foot__nav a:hover { color: var(--on-dark); border-color: var(--on-dark-2) } .foot__news { justify-self: end; width: min(320px, 100%) } .foot__news-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-dark-2); margin-bottom: 10px; } .foot__news-head svg { width: 16px; height: 16px; flex: none } .foot__news-field { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); } .foot__news-field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 14.5px; color: var(--on-dark); } .foot__news-field input::placeholder { color: var(--on-dark-3) } .foot__news-field button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; transition: transform .35s var(--spring); } .foot__news-field button:hover { transform: translateX(2px) } .foot__news-field button svg { width: 17px; height: 17px } .foot__news-fine { font-size: 12.5px; color: var(--on-dark-3); margin-top: 9px; } .foot__news-fine.is-ok { color: var(--accent) } /* ============================== scroll reveal ============================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none } @media (prefers-reduced-motion:reduce) { .reveal { opacity: 1; transform: none } } /* ================================ RESPONSIVE ============================ */ @media (max-width:1180px) { /* The indent shrinks faster than the badge does, so below this width the badge stops sharing the line and sits under the headline instead. */ .hero__line2 { position: static } .hero__badge { left: 0; top: 100%; bottom: auto; margin-top: 18px; /* Free of the indent now, so it can be wide enough to read on two lines. */ width: min(330px, 62vw); } .hero__head { margin-bottom: 56px } .gallery { grid-template-columns: 1.4fr 1.2fr 1.4fr; margin-right: clamp(-90px, -6vw, -30px); } .gallery__col--a { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; margin-right: var(--gutter); } .gallery__col--a .shot--sm { width: 200px; flex: none } .gallery__col--a .pill { margin-top: 0; margin-left: auto } .gallery__aside { max-width: 22ch; flex: 1 } .cards { grid-template-columns: repeat(2, 1fr) } /* Two-up, each card is roughly twice as wide as in the 4-up layout, and the portrait ratio would make it ~650px tall. Square keeps it in proportion. */ .card { aspect-ratio: 1 } /* The two logo rows wrap to different heights at this width, which pulls the bottom-aligned columns out of register. One column avoids the problem. */ .media__grid { grid-template-columns: 1fr; gap: clamp(48px, 7vw, 80px); } /* The column is full width now, so the card keeps its text alongside rather than dropping below it and leaving an empty gutter. */ .media__lead { grid-template-columns: minmax(0, 40%) 1fr; gap: clamp(16px, 3vw, 30px); } } @media (max-width:900px) { html { scroll-padding-top: 80px } .nav { /* Two columns, not three: .nav__clock is display:none here, so it leaves the grid entirely and the CTA lands in column 2 — stranding an unused track plus a 16px gap to its right and pushing it off the gutter. */ grid-template-columns: auto 1fr; padding: 12px var(--gutter) } /* The full-screen panel replaces the inline links below this width. */ .nav__links { display: none } .nav__clock { display: none } /* Still a full small-viewport on mobile, so the card row lands on the bottom edge instead of floating with black beneath it. */ .hero { min-height: 100svh } .hero__inner { /* The bar is ~75px tall here; 88px left only 13px of air under it. The card row is pinned by margin-top:auto, so this eats slack rather than pushing the cards off the bottom. */ padding-top: clamp(118px, 30vw, 164px); text-align: center; align-items: center; } .hero__head { display: flex; flex-direction: column; align-items: center; gap: 18px } .hero__title { font-size: clamp(2.2rem, 11.2vw, 4.4rem); align-items: center; text-align: center; } .hero__line2 { padding-left: 0; justify-content: center; flex-wrap: wrap; row-gap: 0; } /* Dropping the indent removes the gutter the badge sat in, so it resolves against .hero__head instead and rides above the headline. */ .hero__line2 { position: static } .hero__badge { left: 50%; top: 0; bottom: auto; margin-top: 0; transform: translateX(-50%); align-items: center; text-align: left; /* Hug the content. A fixed width here centres the *box* while the icon and text sit at its left edge, which reads as off-centre. max-width still caps the line length so long copy wraps. */ width: max-content; max-width: min(340px, 88vw); } .hero__head { margin-bottom: 0 } .hero__title { padding-top: 62px } .hero__kicker { max-width: 28ch; margin-inline: auto } .hero__mid { flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; } .hero__actions { justify-content: center; padding-right: 0 } .hero__foot { grid-template-columns: 1fr; gap: 14px; text-align: left; width: 100% } .hero__strip { margin-right: calc(var(--gutter) * -1) } .strip-card--dark p { text-align: left } .trust__head, .capability__head { grid-template-columns: 1fr; gap: 20px } .trust__lede, .capability__aside { justify-self: start } .gallery { grid-template-columns: 1fr 1fr; margin-right: 0; padding-right: var(--gutter); } .gallery__col--a { flex-direction: column; align-items: flex-start; margin-right: 0 } .gallery__col--a .shot--sm { width: 100% } .gallery__col--a .pill { margin-left: 0 } .gallery__col--b, .gallery__col--c, .gallery__col--d { padding-top: 0 } .media__top { justify-content: flex-start } .media__col { gap: 34px } .panel__cols { grid-template-columns: 1fr; gap: 26px } .panel__wide { aspect-ratio: 16/9 } .panel__foot { flex-direction: row; align-items: center } .cta { grid-template-columns: 1fr; grid-template-areas: "intro" "main" "stamp"; gap: 34px; text-align: left; } .cta__main { align-items: flex-start; text-align: left } .cta__title { align-items: flex-start; font-size: clamp(2.6rem, 13vw, 5rem) } .cta__stamp { justify-self: start } .foot__grid { grid-template-columns: 1fr; gap: 36px } .foot__social { justify-self: start } .foot__bottom { grid-template-columns: 1fr; gap: 30px; align-items: start; } .foot__nav { justify-content: flex-start; max-width: none } .foot__news { justify-self: start } /* Copyright drops below the nav and newsletter on a phone. */ .foot__copy { order: 3 } } @media (max-width:600px) { .cards { grid-template-columns: 1fr } /* One-up at full width, the 0.73 ratio makes a ~490px card with a lot of dead white in it. Let content set the height instead, with a floor. */ .card { aspect-ratio: auto; min-height: 290px; } .card__title { font-size: clamp(28px, 8.6vw, 40px) } /* With the ratio relaxed the auto margin collapses to nothing, so the image ends up against the heading. Give it a floor. */ .card__title--sm { margin-bottom: 16px } .card-col { gap: 16px } .card-col__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } /* Two pills plus three labels will not fit; the editor link is the one that has to survive. */ .nav__cta-link:first-child { display: none } /* Tighter pills so the two hero CTAs stay on one row at 390px now that the body type is larger. */ .pill { height: 48px; font-size: 14px; padding: 0 7px 0 18px; gap: 10px; } .pill--light { padding: 0 18px } .pill .circ { width: 34px; height: 34px } /* Wide enough that the supporting line does not break mid-phrase. */ .hero__badge { max-width: 90vw } .gallery { grid-template-columns: 1fr } .hero__note-icon { width: 74px } .pill { height: 48px; padding-left: 20px } .pill--light { padding: 0 22px } } /* Narrow phones (360px and under). Without this the two hero CTAs wrap onto two rows and push the card strip past the bottom of the small viewport. */ @media (max-width:400px) { .pill { height: 46px; font-size: 13.5px; padding: 0 6px 0 16px; gap: 8px; } .pill--light { padding: 0 16px } .pill .circ { width: 32px; height: 32px } .hero__actions { gap: 8px } .hero__kicker { font-size: 12px } /* Very narrow phones have no headroom to spare; claw some back from the bar clearance rather than from the type. */ .hero__inner { padding-top: 104px } } /* Phones — the media card finally stacks above its text and fills the column, instead of sitting at 70vw with dead space beside it. */ @media (max-width:560px) { .media__lead { grid-template-columns: 1fr; gap: 18px; } .media__visual, .media__card { /* Full width on a phone, but capped — at 560 an uncapped portrait card comes out 600px tall, which is most of the screen. */ width: min(100%, 440px); align-self: start; } .media__col { gap: 30px } }