/* ═══════════════════════════════════════════════════════════════ ZYSEC.AI — site.css Built on the ZySec AI Design Standard v1.0 (brand-kit/design.md). Monochrome. Emphasis is a lighter tone, never a hue. The mark's blue exists for the logo only. Objects hold; light moves — the 3D chapters are the one sanctioned exception, by request. ═══════════════════════════════════════════════════════════════ */ :root { /* ── design tokens (brand-tokens.json) ── */ --zs-void: #050506; --zs-base: #0c0c10; --zs-graphite: #17171c; --zs-ash: #8d8b89; --zs-ink: #f5f4f2; --zs-000: #050506; --zs-100: #0c0c10; --zs-200: #121216; --zs-300: #1b1b21; --zs-400: #2a2a31; --zs-500: #41403f; --zs-600: #5a5958; --zs-700: #8d8b89; --zs-800: #c9c7c4; --zs-900: #f5f4f2; --zs-mark-blue: #3a6dff; /* logo fill only — never UI, never type */ --zs-hairline: rgba(255, 255, 255, 0.08); --zs-hairline-lit: rgba(255, 255, 255, 0.14); --zs-seam: rgba(255, 255, 255, 0.07); --zs-field-diagonal: linear-gradient(135deg, #1b1b21, #050506); --zs-field-lit: radial-gradient(120% 100% at 80% 0%, #2a2a31, #07070a 60%); --zs-field-silver: linear-gradient(180deg, #f5f4f2, #c9c7c4); --zs-field-panel: linear-gradient(165deg, #15151a, #0b0b0e); --zs-font-display: "Epilogue", system-ui, sans-serif; --zs-font-body: "Plus Jakarta Sans", system-ui, sans-serif; /* ── type scale (design.md §3) — fluid within each role's range ── */ --t-display: clamp(4rem, 6.4vw, 6.5rem); /* 64–104px, 600+200 lockup */ --t-cover: clamp(2rem, 3.6vw, 3.25rem); /* section covers: the lockup, below display */ --t-heading: clamp(1.5rem, 2.1vw, 2.125rem); /* 24–34px, 600 */ --t-sub: clamp(1.0625rem, 1.4vw, 1.3125rem); /* 17–21px, 500 */ --t-body: clamp(1rem, 1.2vw, 1.0625rem); /* 16–17px */ --t-body-s: 0.875rem; /* 14px */ --t-label: 0.6875rem; /* 11px, uppercase */ --measure: 62ch; --zs-radius-section: 24px; --zs-radius-panel: 18px; --zs-radius-control: 14px; --zs-space-1: 4px; --zs-space-2: 8px; --zs-space-3: 12px; --zs-space-4: 20px; --zs-space-5: 28px; --zs-space-6: 40px; --zs-space-7: 72px; --zs-ease: cubic-bezier(0.22, 1, 0.36, 1); --zs-dur-state: 200ms; --zs-dur-enter: 320ms; --zs-dur-sweep: 600ms; /* ── register defaults (= base) ── */ --bg: var(--zs-base); --ink: var(--zs-ink); --ink-2: var(--zs-ash); --line: var(--zs-hairline); --line-lit: var(--zs-hairline-lit); --sel: rgba(245, 244, 242, 0.18); --btn-solid-bg: linear-gradient(180deg, #f7f6f4, #d2d0cd); --btn-solid-ink: #0c0c10; --slab-top-on: var(--zs-800); --slab-side-on: var(--zs-500); --slab-side-r-on: var(--zs-600); --slab-top-was: var(--zs-300); --slab-stroke-was: var(--zs-500); --lift-lit: 0.1; /* opacity of the lit-corner layer (body::before) */ --lift-diag: 0; /* opacity of the diagonal graphite layer (body::after) */ --gutter: clamp(20px, 5vw, 72px); --gap: 28px; --max: 1440px; --z-ground: 0; --z-mark: 1; --z-page: 2; --z-drawer: 20; --z-top: 30; /* header above the drawer so the menu button can close it */ } /* ═══════════════════════════════════════════════════════════════ REGISTERS — a graded monochrome Each
(and the footer) carries data-register; site.js copies the register of the section under the 42% line onto , and the body ground crossfades over --zs-dur-sweep. Sections never paint their own ground — the WebGL mark sits between body and page. Tonal plan (top → bottom), all values from the kit's scale: hero base #0c0c10 lit corner (field-lit on base) thesis void #050506 diagonal graphite field break graphite #17171c diagonal graphite, one step lit platform ink #f5f4f2 the kit's light surface, lit corner portfolio slate #121216 --zs-200, half-lit corner research graphite #17171c diagonal graphite, one step lit proof paper #ecebe8 off-white, one step below ink (900 ⊕ 800 at 4:1), lit corner briefing void #050506 statement field on the deepest ground footer void #050506 Depth comes from two fixed white-alpha layers under the mark (body::before = radial lit corner, body::after = 135° diagonal), whose opacity is set per register so a lit corner on base lands on --zs-300 (#1b1b21) and the diagonal on void runs 300 → 000, i.e. the kit's --zs-field-lit / --zs-field-diagonal re-anchored to the current ground. No hue anywhere. "dark" and "light" remain as aliases of base and ink. ═══════════════════════════════════════════════════════════════ */ /* base — the stage. hero. */ html[data-register="base"], html[data-register="dark"] { --bg: #0c0c10; --lift-lit: 0.1; --lift-diag: 0; } /* void — the deepest ground. thesis, briefing, footer. */ html[data-register="void"] { --bg: #050506; --zs-base: #050506; --lift-lit: 0; --lift-diag: 1; --zs-field-panel: linear-gradient(165deg, #121216, #07070a); } /* graphite — one step up, the exploded view sits on a lit slab. */ html[data-register="graphite"] { --bg: #17171c; --zs-base: #17171c; --lift-lit: 0; --lift-diag: 0.4; --zs-200: #2a2a31; --zs-300: #2a2a31; --zs-field-panel: linear-gradient(165deg, #1b1b21, #121216); --zs-field-lit: radial-gradient(120% 100% at 80% 0%, #41403f, #17171c 60%); } /* slate — --zs-200, the portfolio chapters. */ html[data-register="slate"] { --bg: #121216; --zs-base: #121216; --lift-lit: 0.06; --lift-diag: 0; --zs-200: #1b1b21; --zs-field-panel: linear-gradient(165deg, #1b1b21, #0c0c10); } /* ink — the kit's light surface. platform. */ html[data-register="ink"], html[data-register="light"] { --bg: #f5f4f2; --ink: #0c0c10; --ink-2: #5a5958; --line: rgba(12, 12, 16, 0.1); --line-lit: rgba(12, 12, 16, 0.2); --sel: rgba(12, 12, 16, 0.14); --lift-lit: 1; --lift-diag: 0; /* role tokens re-pointed for a light ground */ --zs-ink: #0c0c10; --zs-base: #f5f4f2; --zs-ash: #5a5958; --zs-800: #2a2a31; --zs-600: #6b6a68; --zs-500: #a5a3a0; --zs-300: #e6e4e1; --zs-200: #eeedea; --zs-seam: rgba(12, 12, 16, 0.08); --zs-field-panel: linear-gradient(165deg, #ffffff, #edece9); --zs-field-lit: radial-gradient(120% 100% at 80% 0%, #ffffff, #e8e6e3 60%); --btn-solid-bg: linear-gradient(180deg, #1b1b21, #0c0c10); --btn-solid-ink: #f5f4f2; --slab-top-on: #2a2a31; --slab-side-on: #0c0c10; --slab-side-r-on: #41403f; --slab-top-was: #dcdad6; --slab-stroke-was: #a5a3a0; } /* paper — off-white, one step below ink. proof. */ html[data-register="paper"] { --bg: #ecebe8; --ink: #0c0c10; --ink-2: #5a5958; --line: rgba(12, 12, 16, 0.12); --line-lit: rgba(12, 12, 16, 0.22); --sel: rgba(12, 12, 16, 0.14); --lift-lit: 1; --lift-diag: 0; --zs-ink: #0c0c10; --zs-base: #ecebe8; --zs-ash: #5a5958; --zs-800: #2a2a31; --zs-600: #62615f; --zs-500: #9d9b98; --zs-300: #dcdad6; --zs-200: #e3e1de; --zs-seam: rgba(12, 12, 16, 0.08); --zs-field-panel: linear-gradient(165deg, #fbfaf9, #f0efec); --zs-field-lit: radial-gradient(120% 100% at 80% 0%, #fbfaf9, #dcdad6 60%); --btn-solid-bg: linear-gradient(180deg, #1b1b21, #0c0c10); --btn-solid-ink: #f5f4f2; --slab-top-on: #2a2a31; --slab-side-on: #0c0c10; --slab-side-r-on: #41403f; --slab-top-was: #d4d2ce; --slab-stroke-was: #9d9b98; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.lenis { scroll-behavior: auto; } body { background: var(--bg); color: var(--ink); font-family: var(--zs-font-body); font-size: 1rem; line-height: 1.8; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color var(--zs-dur-sweep) var(--zs-ease), color var(--zs-dur-sweep) var(--zs-ease); } ::selection { background: var(--sel); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } h1, h2, h3 { font-family: var(--zs-font-display); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--zs-800); outline-offset: 2px; } svg.icon { width: 24px; height: 24px; stroke: var(--zs-ash); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; flex: none; } .skip { position: absolute; left: var(--gutter); top: -60px; z-index: 100; padding: 10px 14px; background: var(--zs-ink); color: var(--zs-base); border-radius: var(--zs-radius-control); } .skip:focus { top: 12px; } .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .lead { font-size: var(--t-body); line-height: 1.8; color: var(--ink-2); max-width: var(--measure); } .label { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-ash); } /* ─────────────────────────── the mark ─────────────────────────── */ /* ground depth: the kit's lit corner and diagonal field, as white-alpha layers under the mark */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-ground); pointer-events: none; transition: opacity var(--zs-dur-sweep) var(--zs-ease); } body::before { background: radial-gradient(120% 100% at 80% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%); opacity: var(--lift-lit); } body::after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0) 65%); opacity: var(--lift-diag); } #mark { position: fixed; inset: 0; z-index: var(--z-mark); width: 100vw; height: 100vh; height: 100dvh; display: block; pointer-events: none; } body.no-webgl #mark { display: none; } main, footer { position: relative; z-index: var(--z-page); } /* ─────────────────────────── header ─────────────────────────── */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--gutter); background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background-color var(--zs-dur-sweep) var(--zs-ease); } .brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; } .brand__lockup { height: 26px; width: auto; display: block; color: var(--zs-ink); } .brand__lockup--foot { height: 32px; } .top__nav { display: flex; gap: clamp(20px, 3vw, 40px); } .top__nav a, .top__cta { font-size: 0.875rem; font-weight: 500; color: var(--zs-ash); transition: color var(--zs-dur-state) var(--zs-ease); } .top__nav a:hover { color: var(--zs-ink); } .top__cta { justify-self: end; color: var(--zs-ink); } .top__menu { display: none; justify-self: end; width: 44px; height: 44px; position: relative; } .top__menu span { position: absolute; left: 12px; right: 12px; height: 1.25px; background: currentColor; transition: transform var(--zs-dur-enter) var(--zs-ease); } .top__menu span:first-child { top: 17px; } .top__menu span:last-child { top: 26px; } .top__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); } .top__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); } .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--bg); color: var(--zs-ink); display: grid; align-content: center; padding: var(--gutter); } .drawer[hidden] { display: none; } .drawer nav { display: grid; gap: 14px; } .drawer a { font-family: var(--zs-font-display); font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 200; letter-spacing: -0.018em; line-height: 1.15; } .drawer__cta { margin-top: 22px; font-weight: 600 !important; font-size: 1.125rem !important; } /* ─────────────────────────── buttons ─────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: 13px 22px; font-size: 0.875rem; font-weight: 500; line-height: 1; border-radius: var(--zs-radius-control); transition: background-color var(--zs-dur-state) var(--zs-ease), color var(--zs-dur-state) var(--zs-ease), border-color var(--zs-dur-state) var(--zs-ease), filter var(--zs-dur-state) var(--zs-ease); } .btn--solid { background: var(--btn-solid-bg); color: var(--btn-solid-ink); } .btn--solid:hover { filter: brightness(1.06); } .btn--solid:active { filter: brightness(0.94); } .btn--line { border: 1px solid var(--line-lit); color: var(--zs-ink); } .btn--line:hover { border-color: var(--zs-600); background: var(--zs-200); } /* ─────────────────────────── reveals: type fades up in place ─────────────────────────── */ .js .rv { opacity: 0; transform: translateY(12px); transition: opacity var(--zs-dur-enter) var(--zs-ease), transform var(--zs-dur-enter) var(--zs-ease); transition-delay: var(--d, 0s); } .js .rv.in { opacity: 1; transform: none; } /* ─────────────────────────── 1 · hero ─────────────────────────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 120px 96px; } .hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .hero__copy { max-width: 640px; } .hero__title { font-size: var(--t-display); line-height: 1.1; letter-spacing: -0.028em; font-weight: 200; } .hero__title strong { font-weight: 600; } .hero__lead { margin-top: var(--zs-space-5); max-width: var(--measure); font-size: var(--t-body); line-height: 1.8; color: var(--zs-ash); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--zs-space-3); margin-top: var(--zs-space-6); } .hero__static { display: none; width: min(60%, 380px); margin-inline: auto; color: var(--zs-ink); } .hero__static svg { width: 100%; height: auto; fill: currentColor; } body.no-webgl .hero__static, html:not(.js) .hero__static { display: block; } .hero__foot { position: absolute; left: 0; right: 0; bottom: 32px; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: flex; gap: var(--zs-space-5); flex-wrap: wrap; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-600); } /* ─────────────────────────── 2 · thesis ─────────────────────────── */ .thesis { padding-block: 22vh 24vh; } .thesis__line { font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.1; letter-spacing: -0.028em; font-weight: 200; max-width: 20ch; } .thesis__line .w { display: inline-block; opacity: 0.22; transition: opacity var(--zs-dur-sweep) var(--zs-ease); } .thesis__line .w.on { opacity: 1; } .thesis__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--zs-space-7); color: var(--zs-ash); } .thesis__body p { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); max-width: var(--measure); } .thesis__body b { font-family: var(--zs-font-display); font-weight: 500; font-size: var(--t-sub); letter-spacing: -0.015em; line-height: 1.3; color: var(--zs-ink); } .thesis__body span { font-size: var(--t-body-s); line-height: 1.7; max-width: 30ch; } /* ─────────────────────────── 3 · break ─────────────────────────── */ .break { height: 260vh; position: relative; } .break__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: end; } .break__wrap { padding-bottom: clamp(32px, 6vh, 72px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--zs-space-6); align-items: end; } .break__title { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; max-width: 22ch; } .break__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .break__legend li { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); opacity: 0.25; transform: translateY(8px); transition: opacity var(--zs-dur-sweep) var(--zs-ease), transform var(--zs-dur-sweep) var(--zs-ease), border-color var(--zs-dur-sweep); } .break__legend li.on { opacity: 1; transform: none; border-top-color: var(--line-lit); } .break__legend li.on svg.icon { stroke: var(--zs-ink); } .break__legend b { font-family: var(--zs-font-display); font-weight: 500; font-size: var(--t-sub); letter-spacing: -0.015em; line-height: 1.3; } .break__legend span { font-size: var(--t-body-s); line-height: 1.7; color: var(--zs-ash); max-width: 30ch; } /* ─────────────────────────── 4 · platform ─────────────────────────── */ .platform { padding-block: clamp(96px, 14vh, 180px) clamp(96px, 12vh, 160px); } .platform__head { max-width: 760px; } .platform__name { margin-bottom: var(--zs-space-5); } .platform__name span { margin-left: 10px; color: var(--zs-600); } .platform__head h2, .portfolio__head h2, .proof__lead h2 { font-size: var(--t-cover); letter-spacing: -0.028em; line-height: 1.1; font-weight: 200; } .platform__head h2 strong, .portfolio__head h2 strong, .proof__lead h2 strong, .briefing h2 strong { font-weight: 600; } .platform__head .lead, .portfolio__head .lead { margin-top: var(--zs-space-4); } .layers { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(64px, 10vh, 120px); } .layers__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; } .layers__figure { width: min(100%, 520px); margin-inline: auto; } .slabs { width: 100%; height: auto; display: block; overflow: visible; } .slab path { fill: var(--bg); stroke: var(--line-lit); stroke-width: 1; stroke-linejoin: round; transition: fill var(--zs-dur-sweep) var(--zs-ease), stroke var(--zs-dur-sweep) var(--zs-ease); } .slab.on .slab__top { fill: var(--slab-top-on); stroke: var(--slab-top-on); } .slab.on .slab__side { fill: var(--slab-side-on); stroke: var(--zs-600); } .slab.on .slab__side--r { fill: var(--slab-side-r-on); stroke: var(--slab-side-r-on); } .slab.was .slab__top { fill: var(--slab-top-was); stroke: var(--slab-stroke-was); } .slab-labels text { font-family: var(--zs-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--zs-600); transition: fill var(--zs-dur-state); } .slab-labels text.on { fill: var(--zs-ink); } .layers__list { display: grid; } .layers__item { min-height: 66vh; display: grid; align-content: center; gap: 14px; opacity: 0.35; transition: opacity var(--zs-dur-enter) var(--zs-ease); } .layers__item.on { opacity: 1; } .layers__item h3 { display: flex; align-items: center; gap: 14px; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; } .layers__item p { max-width: var(--measure); color: var(--zs-ash); } .chain { margin-top: clamp(80px, 14vh, 160px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .chain__copy h3 { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; } .chain__copy p { margin-top: var(--zs-space-3); color: var(--zs-ash); max-width: var(--measure); } .chain__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; } .chain__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--line); } .chain__steps::after { content: ""; position: absolute; left: 0; top: 14px; height: 1px; width: 100%; background: var(--zs-800); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform var(--zs-dur-sweep) var(--zs-ease); } .chain__steps li { display: grid; gap: 8px; padding-right: 20px; padding-top: 38px; position: relative; } .chain__n { position: absolute; top: 0; left: 0; width: 29px; height: 29px; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; border: 1px solid var(--line-lit); border-radius: 50%; background: var(--bg); color: var(--zs-ash); transition: border-color var(--zs-dur-state), background-color var(--zs-dur-state), color var(--zs-dur-state); } .chain__steps li.on .chain__n { border-color: var(--zs-800); background: var(--zs-800); color: var(--zs-base); } .chain__steps li:last-child.on .chain__n { background: var(--zs-ink); border-color: var(--zs-ink); } .chain__steps b { font-family: var(--zs-font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; } .chain__steps span:not(.chain__n) { font-size: var(--t-body-s); line-height: 1.7; color: var(--zs-ash); } /* panels in a seamed grid */ .editions { margin-top: clamp(80px, 14vh, 160px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--zs-seam); border-radius: var(--zs-radius-panel); overflow: hidden; } .edition { background: var(--zs-field-panel); padding: var(--zs-space-6) var(--zs-space-5); } .edition h3 { font-size: var(--t-sub); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; } .edition__kind { margin-top: 6px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-ash); } .edition p:last-child { margin-top: var(--zs-space-4); max-width: var(--measure); color: var(--zs-ash); } /* ─────────────────────────── 5 · portfolio chapters ─────────────────────────── */ .portfolio { padding-block: clamp(96px, 14vh, 180px) 0; } .portfolio__head { max-width: 640px; } .chapters { margin-top: clamp(24px, 6vh, 64px); } .chapter { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 8vh; } .chapter__copy { width: min(100%, 520px); } .chapter__n { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-ink); } .chapter__n span { color: var(--zs-600); } .chapter__name { margin-top: var(--zs-space-4); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; } .chapter__tag { margin-top: 8px; font-family: var(--zs-font-display); font-weight: 200; font-size: clamp(1.125rem, 1.6vw, 1.5rem); letter-spacing: -0.015em; color: var(--zs-ink); } .chapter__line { margin-top: var(--zs-space-5); font-size: 1.0625rem; line-height: 1.8; color: var(--zs-ink); max-width: var(--measure); } .chapter__desc { margin-top: var(--zs-space-3); color: var(--zs-ash); max-width: var(--measure); } .chapter__list { margin-top: var(--zs-space-4); display: grid; gap: 8px; font-size: var(--t-body-s); line-height: 1.7; } .chapter__list li { padding-left: 18px; position: relative; color: var(--zs-800); } .chapter__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--zs-600); } .chapter__fallback { display: none; margin-top: var(--zs-space-5); } body.no-webgl .chapter__fallback, html:not(.js) .chapter__fallback { display: block; } /* ─────────────────────────── 6 · research ─────────────────────────── */ /* statement field (design.md §5.4): one display-scale line, the opener of Research */ .statement { padding-block: clamp(96px, 14vh, 180px) 0; } .statement .wrap { background: var(--zs-field-lit); border-radius: var(--zs-radius-section); padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 80px); } .statement__text { max-width: 22ch; margin: 0; font-family: var(--zs-font-display); font-weight: 200; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.028em; line-height: 1.1; color: var(--zs-ink); } .statement__text strong { font-weight: 600; } .research { padding-block: clamp(48px, 7vh, 88px) clamp(96px, 14vh, 180px); } .research__head { max-width: 760px; } .research__head .label { margin-bottom: var(--zs-space-5); } .research__head h2 { font-size: var(--t-cover); letter-spacing: -0.028em; line-height: 1.1; font-weight: 200; } .research__head h2 strong { font-weight: 600; } .research__head .lead { margin-top: var(--zs-space-4); } /* the lab: one stage on the left, three things on the right; the stage shows whichever is active */ .lab { margin-top: clamp(48px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .lab__stage { position: sticky; top: 96px; aspect-ratio: 4 / 3; background: var(--zs-field-panel); border: 1px solid var(--line); border-radius: var(--zs-radius-panel); overflow: hidden; } .lab__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s var(--zs-ease); } .lab__scene.is-on { opacity: 1; } .lab__list { display: grid; } /* each item is a scroll step: the stage stays pinned while the reader moves through them */ .lab__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: center; column-gap: var(--zs-space-3); width: 100%; min-height: 72vh; text-align: left; padding: var(--zs-space-5) 0; border-top: 1px solid var(--line); color: var(--zs-ash); cursor: pointer; transition: color var(--zs-dur-state), border-color var(--zs-dur-state); } .lab__item:last-child { border-bottom: 1px solid var(--line); } .lab__item.is-on { color: var(--zs-ink); border-top-color: var(--line-lit); } .lab__item:focus-visible { outline: 2px solid var(--zs-800); outline-offset: -2px; border-radius: var(--zs-radius-control); } .lab__n { grid-row: 1 / span 3; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; padding-top: 0.55em; color: var(--zs-ash); } .lab__name { font-family: var(--zs-font-display); font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; } .lab__name small { display: block; margin-top: 4px; font-family: var(--zs-font-body); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-ash); } .lab__line { margin-top: var(--zs-space-3); max-width: var(--measure); line-height: 1.8; } .lab__tags { margin-top: var(--zs-space-4); display: flex; flex-wrap: wrap; gap: 8px; } .lab__tags span { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--zs-ash); transition: border-color var(--zs-dur-state), color var(--zs-dur-state); } .lab__item.is-on .lab__tags span { border-color: var(--line-lit); color: var(--zs-800); } .research__foot { margin-top: var(--zs-space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--zs-space-3); font-size: var(--t-body-s); color: var(--zs-ash); } .research__foot img { width: 28px; height: 28px; object-fit: contain; opacity: 0.8; } /* ─────────────────────────── 7 · proof ─────────────────────────── */ .proof { padding-block: clamp(120px, 18vh, 220px) clamp(80px, 10vh, 120px); } .proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(64px, 10vh, 120px); } .proof__lead { grid-column: 1 / span 6; } .proof__lead p { margin-top: var(--zs-space-5); max-width: var(--measure); color: var(--zs-ash); } .proof__facts { grid-column: 8 / span 5; display: grid; gap: var(--zs-space-4); align-self: end; } .proof__facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .proof__facts dt { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-600); padding-top: 5px; } .proof__facts dd { font-size: 0.9375rem; line-height: 1.8; color: var(--zs-800); } .proof__postures { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--zs-seam); border-radius: var(--zs-radius-panel); overflow: hidden; } .proof__postures article { background: var(--zs-field-panel); padding: var(--zs-space-5) var(--zs-space-4) var(--zs-space-5); } .proof__postures h3 { font-size: var(--t-sub); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; } .proof__postures p { margin-top: 8px; color: var(--zs-ash); font-size: var(--t-body-s); line-height: 1.7; max-width: 32ch; } .proof__sectors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 0; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-600); } .proof__sectors li + li::before { content: "·"; margin: 0 14px; color: var(--zs-500); } /* ─────────────────────────── 7 · briefing: the return ─────────────────────────── */ .briefing { min-height: 80vh; min-height: 80svh; display: grid; align-items: start; padding-block: clamp(48px, 8vh, 80px) 80px; } .briefing__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; row-gap: var(--zs-space-6); } .briefing__copy { max-width: 560px; } .briefing__copy .label { margin-bottom: var(--zs-space-4); } .briefing h2 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); letter-spacing: -0.028em; line-height: 1.1; font-weight: 200; max-width: 14ch; } .briefing p:not(.label) { margin-top: var(--zs-space-4); max-width: var(--measure); color: var(--zs-ash); } .briefing__actions { display: flex; flex-wrap: wrap; gap: var(--zs-space-3); margin-top: var(--zs-space-6); } .briefing__note { grid-column: 1 / -1; align-self: end; color: var(--zs-600); } /* ─────────────────────────── footer ─────────────────────────── */ .foot { padding-block: var(--zs-space-6) var(--zs-space-4); border-top: 1px solid var(--line); } .foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap); } .foot__brand p { margin-top: var(--zs-space-4); max-width: 32ch; color: var(--zs-ash); font-size: var(--t-body-s); line-height: 1.7; } .foot__col { display: grid; gap: 8px; align-content: start; font-size: var(--t-body-s); } .foot__col p { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-600); margin-bottom: 6px; } .foot__col a { color: var(--zs-ash); transition: color var(--zs-dur-state); } .foot__col a:hover { color: var(--zs-ink); } .foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: var(--zs-space-6); padding-top: var(--zs-space-3); border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.7; color: var(--zs-600); } .foot__legal .sign { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; color: var(--zs-ash); } /* ─────────────────────────── responsive ─────────────────────────── */ @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; align-content: end; } .hero__copy { max-width: 560px; } .layers { grid-template-columns: 1fr; } .layers__sticky { position: relative; height: auto; padding-block: 24px; } .layers__item { min-height: 0; padding-block: 28px; opacity: 1; } .chain { grid-template-columns: 1fr; } .lab { grid-template-columns: 1fr; gap: 0; } .lab__stage { top: 72px; z-index: 2; aspect-ratio: auto; height: 42vh; } /* the pinned stage sits over the list, so each step's copy starts below it */ .lab__item { min-height: 60vh; align-content: start; padding-top: calc(42vh + var(--zs-space-5)); } .proof__lead, .proof__facts, .proof__postures { grid-column: 1 / -1; } .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { font-size: 0.9375rem; } .top { grid-template-columns: 1fr auto; padding: 14px var(--gutter); } .top__nav, .top__cta { display: none; } .top__menu { display: block; } .hero { padding-top: 46vh; padding-bottom: 80px; } /* phones: the 64px display floor overflows a 375px column; drop one step, leading stays ≥1.08 */ .hero__title { font-size: clamp(2.75rem, 12.5vw, 4rem); line-height: 1.08; } .hero__lead { margin-top: 20px; } .hero__foot { gap: 16px; } .thesis { padding-block: 14vh; } .thesis__body { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; } .thesis__body p { padding-top: 12px; } .thesis__body span { max-width: none; } .break { height: 220vh; } .break__wrap { grid-template-columns: 1fr; gap: 24px; } .break__legend { grid-template-columns: 1fr; gap: 14px; } .break__legend li { padding-top: 12px; } .break__legend span { max-width: none; } .chain__steps { grid-template-columns: 1fr; gap: 0; } .chain__steps::before, .chain__steps::after { top: 0; bottom: 0; left: 14px; width: 1px; height: 100%; right: auto; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); } .chain__steps li { padding: 0 0 26px 48px; } .lab__stage { height: 46vw; } .lab__item { grid-template-columns: 32px minmax(0, 1fr); padding-block: calc(46vw + var(--zs-space-5)) var(--zs-space-4); min-height: 56vh; } .editions { grid-template-columns: 1fr; } .chapter { min-height: 100svh; align-items: end; padding-block: 40vh 10vh; } .chapter__copy { width: 100%; } .proof__facts div { grid-template-columns: 90px minmax(0, 1fr); } .proof__postures { grid-template-columns: 1fr; } .briefing { padding-top: 46vh; padding-bottom: 56px; align-items: end; } .briefing__grid { grid-template-columns: 1fr; } .foot__grid { grid-template-columns: 1fr; } } /* ─────────────────────────── reduced motion: opacity only ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .rv { opacity: 1; transform: none; transition: none; } .thesis__line .w { opacity: 1; transition: none; } .break { height: 170vh; } .break__legend li { opacity: 1; transform: none; } .layers__item { opacity: 1; } .slab path, .btn, .top__menu span { transition: none; } .chain__steps::after { transition: none; transform: scaleX(1); } } html:not(.js) .break { height: auto; } /* ─────────────────────────── services: a parallel pair at the foot of the portfolio ─────────────────────────── */ .services { margin-top: clamp(64px, 10vh, 120px); padding-top: var(--zs-space-6); border-top: 1px solid var(--line); } .services__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--zs-space-4) clamp(24px, 4vw, 64px); align-items: baseline; } .services__grid { margin-top: var(--zs-space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--zs-seam); border-radius: var(--zs-radius-panel); overflow: hidden; } .service { background: var(--zs-field-panel); padding: var(--zs-space-6) var(--zs-space-5); } .service__mark { display: block; width: 72px; height: 72px; opacity: 0.92; } .service__name { margin-top: var(--zs-space-4); font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; } .service__tag { margin-top: 6px; font-family: var(--zs-font-display); font-weight: 500; font-size: var(--t-sub); letter-spacing: -0.015em; line-height: 1.3; } .service > p:not(.service__tag) { margin-top: var(--zs-space-3); color: var(--zs-ash); max-width: var(--measure); } .service__list { margin-top: var(--zs-space-4); display: grid; gap: 8px; font-size: var(--t-body-s); line-height: 1.7; } .service__list li { padding-left: 18px; position: relative; color: var(--zs-800); } .service__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--zs-600); } @media (max-width: 760px) { .services__head, .services__grid { grid-template-columns: 1fr; } } html:not(.js) .break__stage { position: relative; height: auto; padding-block: 20vh; } html:not(.js) .break__legend li, html:not(.js) .layers__item, html:not(.js) .thesis__line .w { opacity: 1; }