/* ════════════════════════════════════════════════════════════════════ Agevity Group Palette two themes off one set of tokens — light (white ground, white blocks held by hairlines) is the default, dark is the inversion. The warmth that used to be in the ground now lives only in the accent and in a whisper of a corner wash. Type Syne (wordmark + display, brand) · Newsreader (editorial) Theme [data-theme] on , stamped by the inline script in index.html before first paint. No attribute = light, so the page is still correct if that script never runs. ══════════════════════════════════════════════════════════════════ */ :root{ /* ── type roles ──────────────────────────────────────────────────── */ --display: 'Syne', ui-sans-serif, system-ui, sans-serif; --body: 'Newsreader', ui-serif, Georgia, serif; /* ── type scale ──────────────────────────────────────────────────── One fluid ramp, so nothing is sized by hand twice. Tracking tightens as the steps grow: what reads as generous at 12px reads as loose at 150px, and Syne's counters close up fast at display sizes. */ --fs-micro: clamp(10.5px, .18vw + 10px, 12px); --fs-small: clamp(12.5px, .28vw + 11.5px, 14.5px); --fs-body: clamp(16px, .52vw + 14px, 19px); --fs-lede: clamp(18.5px, 1.1vw + 14px, 25px); --fs-h3: clamp(21px, 1.5vw + 15px, 32px); --fs-h2: clamp(33px, 4.6vw + 6px, 74px); --fs-h1: clamp(50px, 10.8vw, 156px); --fs-num: clamp(56px, 8.4vw, 124px); --tr-micro: .22em; --tr-tight: -.022em; --tr-display: -.045em; /* rhythm */ --gut: clamp(20px, 4.6vw, 72px); --band: clamp(104px, 15.5vh, 212px); --max: 1320px; --head: 74px; /* masthead height, used by sticky offsets */ --r: 18px; /* the block radius */ --r-lg: clamp(22px, 2.6vw, 36px); /* the closing panel */ --ease: cubic-bezier(.22,.61,.24,1); --ease-o: cubic-bezier(.16,1,.3,1); } /* ── light: the default ─────────────────────────────────────────────── White, not near-white: the ground is the paper and everything else is drawn on it. Because the blocks are the same white as the page, they are held by a hairline and a very soft shadow rather than by contrast of fill — which is what keeps the page from reading as a grid of grey boxes once the beige is gone. */ :root{ color-scheme: light; --bg: #FFFFFF; /* the paper */ --bg-soft: #F7F5F3; /* the one step off it, for wells and rails */ --surface: #FFFFFF; /* the blocks */ /* a warm-neutral near-black rather than a brown one: on white, brown text at 16px reads as faded */ --fg: #17130F; --fg-dim: #5B534C; --fg-faint: #797066; /* the single accent — the brand's warm rose, taken down to a terracotta that can carry 11px type on white without going grey */ --accent: #A64B2B; --on-accent: #FFF6F0; --accent-a0: rgba(166,75,43,.05); --accent-a1: rgba(166,75,43,.12); --accent-a2: rgba(166,75,43,.30); --accent-a3: rgba(166,75,43,.44); --line: rgba(23,19,15,.13); --line-soft: rgba(23,19,15,.075); /* inverted pills (CTA, skip link) */ --invert: #17130F; --on-invert: #FBF8F5; --scrim: rgba(255,255,255,.80); /* stuck masthead */ --scrim-menu:rgba(255,255,255,.97); /* mobile menu */ --shadow-block: 0 1px 1px rgba(24,18,12,.03), 0 18px 40px -28px rgba(24,18,12,.22); --shadow-lift: 0 1px 2px rgba(24,18,12,.05), 0 30px 60px -30px rgba(24,18,12,.30); --shadow-cta: 0 14px 34px -14px rgba(24,18,12,.45); /* the still background wash — the last of the warmth, and a cool haze opposite it so the white has a direction */ --wash: radial-gradient(76% 58% at 90% -8%, rgba(166,75,43,.075), transparent 62%), radial-gradient(58% 46% at -6% 98%, rgba(88,84,104,.055), transparent 60%); --grain-op: .022; --grain-blend: multiply; /* portraits: shown in their own colour (client's wish 25. 8. 2026 — no sepia / duotone), only the fade into the card at the bottom stays */ --portrait-filter: none; --portrait-filter-hover: none; --portrait-tint: 0; --portrait-tint-h:0; --portrait-fade: linear-gradient(180deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.72) 100%); /* Frosted blocks. The scroll-driven form runs behind the whole page, so the blocks it passes under have to hold their own contrast: a wash of the ground plus a blur, rather than an opaque fill that would hide the form entirely or a transparent one that would let it through. */ --card: rgba(255,255,255,.72); --card-line: rgba(23,19,15,.10); --card-blur: saturate(1.35) blur(16px); --sheet: rgba(255,255,255,.90); --scrim-sheet: rgba(23,19,15,.34); --input: rgba(23,19,15,.028); /* the closing panel — the one dark block on a white page */ --panel: #16120F; --panel-fg: #F2EDE6; --panel-dim: #A39A90; --panel-line: rgba(242,237,230,.16); --panel-accent: #F0A582; } /* ── dark ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"]{ color-scheme: dark; --bg: #0C0A09; --bg-soft: #131110; --surface: #131110; --fg: #EDE8DF; --fg-dim: #978E84; --fg-faint: #5C544E; --accent: #F2A98A; --on-accent: #0C0A09; --accent-a0: rgba(242,169,138,.06); --accent-a1: rgba(242,169,138,.15); --accent-a2: rgba(242,169,138,.28); --accent-a3: rgba(242,169,138,.40); --line: rgba(237,232,223,.12); --line-soft: rgba(237,232,223,.07); --invert: #EDE8DF; --on-invert: #0C0A09; --scrim: rgba(12,10,9,.85); --scrim-menu:rgba(12,10,9,.95); --shadow-block: none; --shadow-lift: none; --shadow-cta: 0 14px 40px rgba(12,10,9,.6); --wash: radial-gradient(66% 50% at 88% 6%, rgba(242,169,138,.20), transparent 64%), radial-gradient(54% 42% at 2% 94%, rgba(196,103,79,.10), transparent 60%); --grain-op: .035; --grain-blend: overlay; --portrait-filter: none; --portrait-filter-hover: none; --portrait-tint: 0; --portrait-tint-h:0; --portrait-fade: linear-gradient(180deg, rgba(12,10,9,0) 40%, rgba(12,10,9,.9) 100%); --card: rgba(24,21,19,.58); --card-line: rgba(237,232,223,.11); --card-blur: saturate(1.1) blur(18px); --sheet: rgba(26,23,21,.90); --scrim-sheet: rgba(6,5,4,.62); --input: rgba(237,232,223,.045); /* on the dark theme the panel is a shade *up* from the page, so it is still a block and not a hole */ --panel: #1A1715; --panel-fg: #EDE8DF; --panel-dim: #978E84; --panel-line: rgba(237,232,223,.14); --panel-accent: #F2A98A; } /* ── reset ─────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body,h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; padding:0; } ul,ol{ list-style:none; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } body{ background:var(--bg); color:var(--fg); font-family:var(--body); font-weight:300; font-size:var(--fs-body); line-height:1.62; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background-color .45s var(--ease), color .45s var(--ease); } /* paragraphs get the ragged edge evened out; headings get balanced lines */ p{ text-wrap:pretty; } ::selection{ background:var(--accent); color:var(--on-accent); } :focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; } /* Jump targets take focus so the view and the caret move together, but a ring drawn around a whole section is noise — the landing is announced. */ main:focus,.section:focus,.hero:focus{ outline:none; } html.menu-open, html.sheet-open{ overflow:hidden; } .skip{ position:fixed; top:12px; left:12px; z-index:99; padding:10px 16px; background:var(--invert); color:var(--on-invert); font-family:var(--display); font-size:13px; font-weight:600; transform:translateY(-160%); } .skip:focus{ transform:none; } /* ── background ────────────────────────────────────────────────────── */ /* A still wash, not an animation: two soft corners of warm light so the ground is not a flat fill. Fixed, so it does not travel with the copy. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--wash); transition:background .45s var(--ease); } .grain{ position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } main,.masthead,.footer,.float-cta,.menu{ position:relative; z-index:2; } /* ── the field ─────────────────────────────────────────────────────── * * js/field.js appends a fixed, full-viewport and * drives the shape on it from the scroll position. It sits above the * still wash and below the content: the page's own white blocks cover * parts of the form, which is the intent — it is the ground the cards * are on, not a picture standing next to them. */ .field{ position:fixed; inset:0; display:block; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; animation:fieldIn 2.2s var(--ease-o) .3s forwards; } @keyframes fieldIn{ to{ opacity:1; } } /* ── wordmark (Syne — the brand lockup, kept) ─────────────────────── */ .wordmark{ display:inline-grid; grid-template-columns:auto auto; align-items:baseline; gap:.5em; font-family:var(--display); line-height:1; } .wordmark__name{ font-weight:800; font-size:clamp(15px,1.1vw,18px); letter-spacing:.24em; } .wordmark__sub{ font-weight:400; font-size:.62em; letter-spacing:.16em; color:var(--fg-dim); } /* ── masthead ──────────────────────────────────────────────────────── */ .masthead{ position:fixed; top:0; left:0; right:0; z-index:40; transition:background .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; } .masthead__bar{ display:flex; align-items:center; gap:32px; /* same column as .section / .hero: the logo and the CTA line up with the content edges instead of hugging the viewport */ max-width:var(--max); margin-inline:auto; padding:22px var(--gut); transition:padding .5s var(--ease); } .masthead.is-stuck{ background:var(--scrim); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--line-soft); } .masthead.is-stuck .masthead__bar{ padding-top:14px; padding-bottom:14px; } .masthead__end{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); margin-left:auto; } .nav{ margin-left:auto; /* Five items, not three. In the band just above the burger breakpoint the bar has only a few pixels to spare, and as a shrinkable flex item the nav was the thing that gave: "Why now" broke onto a second line and pushed the whole masthead taller. It is the wrong item to shrink — the labels are fixed copy, so it holds its size and the row stays one line. */ flex:0 0 auto; display:flex; gap:clamp(18px,2.2vw,36px); font-family:var(--display); font-size:13px; font-weight:500; letter-spacing:.06em; } .nav a{ position:relative; color:var(--fg-dim); padding-block:4px; white-space:nowrap; /* "Why now" is one item, not two lines */ transition:color .35s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .nav a:hover{ color:var(--fg); } .nav a:hover::after{ transform:scaleX(1); transform-origin:left; } /* the section you are reading */ .nav a.is-current{ color:var(--accent); } .nav a.is-current::after{ transform:scaleX(1); transform-origin:left; background:var(--accent); opacity:.45; } .nav-cta{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border:1px solid var(--line); border-radius:999px; font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.03em; white-space:nowrap; transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .nav-cta svg{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .4s var(--ease); } .nav-cta:hover{ background:var(--invert); border-color:var(--invert); color:var(--on-invert); } .nav-cta:hover svg{ transform:translate(2px,-2px); } /* ── language toggle ───────────────────────────────────────────────── */ .lang{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.1em; } .lang__btn{ color:var(--fg-faint); padding:4px 2px; transition:color .3s var(--ease); } .lang__btn:hover{ color:var(--fg); } .lang__btn.is-on{ color:var(--accent); } .lang__sep{ width:1px; height:11px; background:var(--line); } /* ── theme toggle ──────────────────────────────────────────────────── */ /* Two states, both drawn: the knob says which one is on, and the icons stay visible so the other one is a target rather than a guess. */ .theme{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center; width:52px; height:26px; border:1px solid var(--line); border-radius:999px; transition:border-color .35s var(--ease), background .35s var(--ease); } .theme:hover{ border-color:var(--accent-a2); } .theme__knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--accent-a1); transition:transform .44s var(--ease-o), background .35s var(--ease); } :root[data-theme="dark"] .theme__knob{ transform:translateX(24px); } .theme svg{ position:relative; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--fg-faint); transition:color .35s var(--ease); } :root:not([data-theme="dark"]) .theme .theme__i--sun{ color:var(--accent); } :root[data-theme="dark"] .theme .theme__i--moon{ color:var(--accent); } /* ── burger ────────────────────────────────────────────────────────── */ .burger{ display:none; width:42px; height:42px; margin-right:-9px; place-items:center; } .burger__box{ position:relative; display:block; width:22px; height:12px; } .burger__box i{ position:absolute; left:0; right:0; height:1px; background:var(--fg); border-radius:2px; transition:transform .42s var(--ease-o), width .42s var(--ease-o); } .burger__box i:nth-child(1){ top:0; } .burger__box i:nth-child(2){ bottom:0; width:65%; } .burger:hover .burger__box i:nth-child(2){ width:100%; } /* half the gap, so the two lines meet exactly on the centre when they cross */ [aria-expanded="true"] .burger__box i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } [aria-expanded="true"] .burger__box i:nth-child(2){ width:100%; transform:translateY(-5.5px) rotate(-45deg); } /* ── scroll progress ───────────────────────────────────────────────── */ .progress{ height:1px; width:100%; background:var(--line-soft); opacity:0; transition:opacity .5s var(--ease); } .masthead.is-stuck .progress{ opacity:1; } .progress i{ display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--accent-a3), var(--accent)); transform:scaleX(0); transform-origin:left; } /* ── mobile menu ───────────────────────────────────────────────────── */ .menu{ position:fixed; inset:0; z-index:35; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--head) + 28px) var(--gut) 36px; background:var(--scrim-menu); backdrop-filter:blur(22px) saturate(1.15); opacity:0; clip-path:inset(0 0 100% 0); transition:opacity .5s var(--ease), clip-path .62s var(--ease-o); } .menu.is-open{ opacity:1; clip-path:inset(0 0 0 0); } .menu[hidden]{ display:none; } .menu__nav{ display:grid; } .menu__nav a{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:18px; padding-block:clamp(14px,2.4vh,22px); border-top:1px solid var(--line-soft); /* each line waits its turn, so the panel unpacks instead of appearing */ opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .6s var(--ease-o); transition-delay:calc(var(--i) * .055s + .12s); } .menu__nav a:last-child{ border-bottom:1px solid var(--line-soft); } .menu.is-open .menu__nav a{ opacity:1; transform:none; } .menu__n{ font-family:var(--display); font-size:var(--fs-micro); font-weight:600; letter-spacing:.18em; color:var(--accent); } .menu__t{ font-family:var(--display); font-weight:600; font-size:clamp(30px,8.6vw,52px); letter-spacing:var(--tr-tight); line-height:1; transition:color .3s var(--ease), transform .5s var(--ease-o); } .menu__nav a:hover .menu__t, .menu__nav a:focus-visible .menu__t{ color:var(--accent); transform:translateX(8px); } .menu__foot{ display:grid; gap:20px; margin-top:clamp(28px,5vh,52px); opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .6s var(--ease-o); transition-delay:calc(var(--i) * .055s + .12s); } .menu.is-open .menu__foot{ opacity:1; transform:none; } .menu__foot-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; } .menu__controls{ display:flex; align-items:center; gap:16px; } .menu__cta{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 24px; background:var(--invert); color:var(--on-invert); border-radius:999px; font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:.02em; } .menu__cta svg{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.8; } .menu__mail{ font-size:var(--fs-small); color:var(--fg-dim); transition:color .3s var(--ease); } .menu__mail:hover{ color:var(--accent); } /* ── shared section frame ──────────────────────────────────────────── */ .section{ max-width:var(--max); margin-inline:auto; padding:var(--band) var(--gut); } .eyebrow{ font-family:var(--display); font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,3.4vw,48px); } .eyebrow::after{ content:""; height:1px; flex:1; max-width:min(200px,22vw); background:linear-gradient(90deg, var(--accent), transparent); opacity:.5; } .statement{ font-family:var(--display); font-weight:600; font-size:var(--fs-h2); line-height:1.02; letter-spacing:var(--tr-tight); text-wrap:balance; max-width:19ch; } .statement em{ font-family:var(--body); font-style:italic; font-weight:300; letter-spacing:-.01em; color:var(--accent); } .section__head{ margin-bottom:clamp(56px,7vw,110px); } .section__note{ margin-top:26px; max-width:56ch; color:var(--fg-dim); } /* ── hero ──────────────────────────────────────────────────────────── */ .hero{ position:relative; min-height:100svh; max-width:var(--max); margin-inline:auto; padding:clamp(104px,15vh,150px) var(--gut) clamp(40px,6vh,68px); display:flex; flex-direction:column; justify-content:flex-end; } .hero__region{ font-family:var(--display); font-size:var(--fs-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:clamp(20px,3vh,34px); } .hero__region span{ color:var(--fg-faint); } .hero__headline{ font-family:var(--display); font-weight:700; font-size:var(--fs-h1); line-height:.88; letter-spacing:var(--tr-display); margin-bottom:clamp(26px,3.4vh,42px); } /* The mask has to clear Czech diacritics — a caron on Č at display size sits well above the cap line, and overflow:hidden would shave it off. */ .hero__headline .line{ display:block; overflow:hidden; padding:.08em 0 .04em; } .hero__headline em{ font-family:var(--body); font-style:italic; font-weight:200; letter-spacing:-.02em; color:var(--accent); } .hero__lede{ max-width:44ch; color:var(--fg-dim); font-size:var(--fs-lede); line-height:1.5; margin-bottom:clamp(34px,5vh,58px); } .hero__scroll{ display:inline-flex; align-items:center; gap:14px; align-self:flex-start; font-family:var(--display); font-size:var(--fs-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); transition:color .4s var(--ease); } .hero__scroll:hover{ color:var(--fg); } .hero__scrollrail{ position:relative; display:block; width:1px; height:44px; background:var(--line); overflow:hidden; } .hero__scrollrail i{ position:absolute; inset-inline:0; top:0; height:40%; background:var(--accent); animation:railfall 2.4s var(--ease) infinite; } @keyframes railfall{ 0% { transform:translateY(-100%); } 55% { transform:translateY(250%); } 100% { transform:translateY(250%); } } /* ── mission ───────────────────────────────────────────────────────── */ /* This is the one block of running copy on the page that sits on the right, which is exactly where the form is — so it gets the same frosted treatment as the cards rather than taking the wireframe through the middle of every line. */ .mission__body{ margin-top:clamp(44px,5.5vw,76px); margin-left:auto; max-width:calc(62ch + 2 * clamp(22px,2.6vw,40px)); display:grid; gap:1.25em; padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,40px); background:var(--card); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); border:1px solid var(--card-line); border-radius:var(--r); box-shadow:var(--shadow-block); isolation:isolate; } .mission__body p{ color:var(--fg-dim); } .mission__body p:first-child{ color:var(--fg); font-size:1.14em; } /* ── ecosystem ─────────────────────────────────────────────────────── */ .pillars{ display:grid; } .pillar{ display:grid; grid-template-columns:minmax(240px,32%) 1fr; gap:clamp(28px,5vw,80px); padding-block:clamp(44px,5.5vw,74px); border-top:1px solid var(--line-soft); transition:border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); } .pillar:last-child{ border-bottom:1px solid var(--line-soft); } .pillar.is-active{ border-top-color:var(--line); } .pillar__aside{ position:sticky; top:calc(var(--head) + 30px); align-self:start; display:grid; gap:14px; justify-items:start; } .pillar__num{ font-family:var(--display); font-weight:800; font-size:clamp(46px,5.6vw,88px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--fg-faint); transition:-webkit-text-stroke-color .6s var(--ease), color .6s var(--ease); } .pillar.is-active .pillar__num{ -webkit-text-stroke-color:var(--accent); color:var(--accent-a1); } .pillar__name{ font-family:var(--display); font-weight:600; font-size:var(--fs-h3); letter-spacing:var(--tr-tight); line-height:1.05; } .tag{ font-family:var(--display); font-size:var(--fs-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); padding:6px 13px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; } .tag--live{ color:var(--accent); border-color:var(--accent-a2); } .pillar__lead{ font-size:1.1em; max-width:60ch; margin-bottom:clamp(26px,3vw,40px); } .pillar__list{ display:grid; gap:0; max-width:62ch; } .pillar__list li{ display:grid; grid-template-columns:auto minmax(112px,auto) 1fr; align-items:start; gap:clamp(12px,1.6vw,26px); padding-block:15px; border-top:1px solid var(--line-soft); color:var(--fg-dim); font-size:.95em; line-height:1.5; } .pillar__list li span{ font-family:var(--display); font-size:var(--fs-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); padding-top:.36em; } .pillar__list li em{ font-style:normal; } /* Material Symbols, hairline weight to sit with the rest of the page */ .ico{ font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:21px; line-height:1; display:inline-block; width:1em; /* reserve the box so nothing shifts on load */ letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; word-wrap:normal; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; color:var(--accent); opacity:.75; margin-top:.18em; /* Until the icon font is really here the ligature has not formed, and the raw glyph name ("calendar_month") would sit in the layout as words. */ visibility:hidden; transition:opacity .5s var(--ease); } .icons-ready .ico{ visibility:visible; } .pillar.is-active .ico{ opacity:1; } /* ── evidence ──────────────────────────────────────────────────────── */ .figures{ display:grid; } .figure{ display:grid; grid-template-columns:minmax(200px,28%) 1fr; gap:clamp(24px,5vw,80px); align-items:start; padding-block:clamp(34px,4.2vw,58px); border-top:1px solid var(--line-soft); } .figure:last-child{ border-bottom:1px solid var(--line-soft); } .figure__n{ font-family:var(--display); font-weight:700; font-size:var(--fs-num); line-height:.82; letter-spacing:-.055em; } .figure__n b{ font-weight:inherit; /* inline-block so the reserved width holds, tabular so a counting number cannot jitter the layout as it climbs through its digits */ display:inline-block; font-variant-numeric:tabular-nums; } .figure__n span{ font-size:.42em; vertical-align:.62em; margin-left:.06em; color:var(--accent); letter-spacing:0; } .figure__claim{ font-size:clamp(19px,1.6vw + 10px,30px); line-height:1.32; max-width:26ch; text-wrap:balance; } .figure__src{ margin-top:16px; font-family:var(--display); font-size:var(--fs-micro); font-weight:500; letter-spacing:.06em; line-height:1.55; color:var(--fg-faint); max-width:52ch; } .principles{ margin-top:clamp(84px,10vw,150px); } .principles__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(28px,3.4vw,52px); } .principle h3{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.2vw + 8px,22px); letter-spacing:-.01em; line-height:1.18; margin-bottom:12px; padding-top:18px; border-top:1px solid var(--line); } .principle p{ color:var(--fg-dim); font-size:.95em; } /* ── founders ──────────────────────────────────────────────────────── */ .people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(36px,5vw,84px); } .person__portrait{ position:relative; isolation:isolate; /* keeps the duotone blend inside the frame */ aspect-ratio:4/5; overflow:hidden; background:var(--bg-soft); margin-bottom:26px; } .person__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:var(--portrait-filter); /* overscaled on purpose: the parallax in site.js slides it inside the frame. Anchored to the TOP edge so neither the scale nor the slide ever crops the head — all the spare height sits below the frame. */ transform-origin:top center; transform:scale(1.14); transition:filter .8s var(--ease); will-change:transform; } /* duotone — pulls both portraits into the page's one warm light */ .person__portrait::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--accent); mix-blend-mode:color; opacity:var(--portrait-tint); transition:opacity .8s var(--ease); } .person__portrait::after{ content:""; position:absolute; inset:0; z-index:2; background:var(--portrait-fade); transition:opacity .8s var(--ease); } .person:hover .person__portrait img{ filter:var(--portrait-filter-hover); } .person:hover .person__portrait::before{ opacity:var(--portrait-tint-h); } .person:hover .person__portrait::after{ opacity:.55; } .person__name{ font-family:var(--display); font-weight:600; font-size:var(--fs-h3); letter-spacing:var(--tr-tight); } .person__role{ margin-top:6px; font-family:var(--display); font-size:var(--fs-micro); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .person__bio{ margin-top:18px; color:var(--fg-dim); font-size:.97em; max-width:46ch; } /* ── contact: the closing panel ─────────────────────────────────────── * * The page ends by stopping being a page: the last section is a single * dark block with the field glowing inside it. It is the only place the * white ground is interrupted, which is what makes it read as an ending * rather than as one more section. * * The width is min(max, 100% - gutter) rather than the section's * max-width, so the block always keeps air on both sides instead of * running into the edge of a narrow window. */ .contact{ position:relative; isolation:isolate; overflow:hidden; max-width:min(var(--max), calc(100% - clamp(20px,5vw,64px))); margin:0 auto clamp(48px,7vh,110px); padding:clamp(76px,9vw,150px) clamp(26px,6vw,100px) clamp(64px,8vw,124px); border-radius:var(--r-lg); background:var(--panel); color:var(--panel-fg); text-align:center; } .contact .eyebrow{ justify-content:center; color:var(--panel-accent); } .contact .eyebrow::after{ display:none; } .contact__title{ font-family:var(--display); font-weight:700; font-size:clamp(44px,9.2vw,138px); line-height:.9; letter-spacing:var(--tr-display); } .contact__title em{ font-family:var(--body); font-style:italic; font-weight:200; letter-spacing:-.02em; color:var(--panel-accent); } .contact__lede{ margin:clamp(24px,3vw,38px) auto 0; max-width:46ch; color:var(--panel-dim); font-size:var(--fs-lede); } .contacts{ margin-top:clamp(48px,6vw,86px); text-align:left; max-width:920px; margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(24px,3vw,48px); } .contacts li{ border-top:1px solid var(--panel-line); padding-top:20px; } .contacts__who{ font-family:var(--display); font-size:var(--fs-micro); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--panel-dim); margin-bottom:10px; } .contacts__mail{ display:inline-block; font-size:clamp(18px,1.5vw + 10px,27px); line-height:1.2; background-image:linear-gradient(var(--panel-accent),var(--panel-accent)); background-repeat:no-repeat; background-position:0 100%; background-size:0 1px; transition:background-size .5s var(--ease), color .4s var(--ease); word-break:break-word; } .contacts__mail:hover{ color:var(--panel-accent); background-size:100% 1px; } /* ── footer ────────────────────────────────────────────────────────── */ .footer{ max-width:var(--max); margin-inline:auto; padding:40px var(--gut) 48px; border-top:1px solid var(--line-soft); display:grid; gap:clamp(26px,3.6vw,42px); font-family:var(--display); font-size:var(--fs-small); font-weight:500; letter-spacing:.1em; color:var(--fg-faint); } .footer__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px clamp(20px,4vw,54px); } .footer__nav{ display:flex; flex-wrap:wrap; gap:12px clamp(18px,2.6vw,38px); } .footer__nav a{ color:var(--fg-dim); transition:color .35s var(--ease); } .footer__nav a:hover{ color:var(--accent); } .footer__meta{ display:flex; flex-wrap:wrap; gap:10px clamp(20px,4vw,54px); padding-top:clamp(20px,2.6vw,30px); border-top:1px solid var(--line-soft); } .footer__meta p:last-child{ margin-left:auto; } /* ── the contact sheet ─────────────────────────────────────────────── * * The modal behind every "Get in touch". Built on the same frosted block * as the cards, so it belongs to the page rather than arriving from * somewhere else, and it is the one place on the site where the form * elements appear — hence the inputs living here and not in a section of * their own. */ .sheet{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:clamp(12px,3vh,40px) clamp(12px,3vw,40px); opacity:0; transition:opacity .4s var(--ease); } .sheet[hidden]{ display:none; } .sheet.is-open{ opacity:1; } .sheet__scrim{ position:absolute; inset:0; background:var(--scrim-sheet); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } /* The panel does not scroll — its content does. An absolutely positioned close button inside a scrolling box scrolls away with everything else, and on a short window that is the one control that has to stay put. */ .sheet__panel{ position:relative; width:min(660px,100%); max-height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--card-line); border-radius:var(--r-lg); background:var(--sheet); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); box-shadow:var(--shadow-lift); transform:translateY(14px) scale(.985); transition:transform .5s var(--ease-o); } .sheet.is-open .sheet__panel{ transform:none; } .sheet__x{ position:absolute; top:14px; right:14px; z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:999px; color:var(--fg-dim); transition:color .3s var(--ease), background .3s var(--ease); } .sheet__x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; } .sheet__x:hover{ color:var(--fg); background:var(--accent-a1); } .sheet__title{ font-family:var(--display); font-weight:700; font-size:var(--fs-h3); line-height:1.04; letter-spacing:var(--tr-tight); } .sheet__lede{ margin-top:14px; max-width:46ch; color:var(--fg-dim); } .sheet__ask, .sheet__done{ overflow-y:auto; overscroll-behavior:contain; padding:clamp(30px,4.4vw,62px) clamp(22px,4vw,60px) clamp(26px,3.4vw,46px); } .sheet__form{ margin-top:clamp(26px,3vw,38px); display:grid; gap:18px; } /* Off-screen, not display:none — a bot that skips hidden inputs would walk straight past it, and that is the one visitor it is here for. */ .sheet__hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* sheet__row, not .field — .field is the effect's canvas, and that one is position:fixed. Two different things under one class name is how a form ends up stacked on top of itself. */ .sheet__row{ display:grid; gap:7px; } .sheet__row label{ font-family:var(--display); font-size:var(--fs-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); } .sheet__row input, .sheet__row textarea{ width:100%; padding:13px 15px; font:inherit; font-size:var(--fs-small); color:var(--fg); background:var(--input); border:1px solid var(--line); border-radius:12px; transition:border-color .3s var(--ease), background .3s var(--ease); } .sheet__row textarea{ resize:vertical; min-height:120px; line-height:1.55; } .sheet__row input:hover, .sheet__row textarea:hover{ border-color:var(--accent-a2); } .sheet__row input:focus-visible, .sheet__row textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* The error message holds its row from the start, so a field that fails validation does not shove the rest of the form down the screen. */ .sheet__err{ min-height:1.2em; font-size:var(--fs-micro); color:var(--accent); opacity:0; transition:opacity .3s var(--ease); } .sheet__row.is-bad .sheet__err{ opacity:1; } .sheet__row.is-bad input, .sheet__row.is-bad textarea{ border-color:var(--accent-a3); } .sheet__send{ justify-self:start; display:inline-flex; align-items:center; gap:10px; margin-top:4px; padding:14px 26px; background:var(--invert); color:var(--on-invert); border-radius:999px; font-family:var(--display); font-size:14px; font-weight:700; transition:background .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease); } .sheet__send svg{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.8; } .sheet__send:hover{ background:var(--accent); color:var(--on-accent); } .sheet__send[disabled]{ opacity:.55; cursor:default; } .sheet__send[disabled]:hover{ background:var(--invert); color:var(--on-invert); } .sheet__fail{ display:none; font-size:var(--fs-small); color:var(--accent); } .sheet__form.is-failed .sheet__fail{ display:block; } .sheet__note{ font-size:var(--fs-micro); color:var(--fg-faint); } .sheet__done{ display:grid; gap:14px; justify-items:start; align-content:start; } .sheet__done[hidden]{ display:none; } .sheet__done h2{ font-family:var(--display); font-weight:700; font-size:var(--fs-h3); letter-spacing:var(--tr-tight); } .sheet__done p{ color:var(--fg-dim); max-width:42ch; } .sheet__ok{ margin-top:8px; padding:12px 24px; background:var(--invert); color:var(--on-invert); border-radius:999px; font-family:var(--display); font-size:14px; font-weight:700; transition:background .35s var(--ease), color .35s var(--ease); } .sheet__ok:hover{ background:var(--accent); color:var(--on-accent); } /* ── floating CTA ──────────────────────────────────────────────────── */ .float-cta{ position:fixed; right:var(--gut); bottom:28px; z-index:30; display:inline-flex; align-items:center; gap:10px; padding:13px 22px; background:var(--invert); color:var(--on-invert); border-radius:999px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.02em; box-shadow:var(--shadow-cta); opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); } .float-cta.is-visible{ opacity:1; transform:none; pointer-events:auto; } .float-cta svg{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.8; } .float-cta:hover{ background:var(--accent); color:var(--on-accent); } .menu-open .float-cta{ opacity:0; pointer-events:none; } /* ════════════════════════════════════════════════════════════════════ Frosted blocks, both themes. This used to be light-only: the dark theme held the same content together with hairlines, which is what that palette wanted. It stopped being an option once the scroll-driven form moved behind the whole page — text sitting straight on top of a turning wireframe is not readable in either palette. So every theme gets blocks now, and the blocks are glass: enough of the ground to carry the copy, blurred enough that the form reads as depth behind them rather than as noise inside them. Written as var(--card) rather than per-theme rules so there is one set of selectors and the palette is the only thing that changes. ══════════════════════════════════════════════════════════════════ */ .pillars{ gap:14px; } .figures{ gap:14px; } .pillar, .figure, .principle, .person{ background:var(--card); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); border:1px solid var(--card-line); border-radius:var(--r); box-shadow:var(--shadow-block); } /* A blurred backdrop needs its own compositing layer, and a layer that is also a scroll-driven parent gets repainted for nothing — isolate them. */ .pillar,.figure,.principle,.person{ isolation:isolate; } .pillar{ padding:clamp(28px,3.2vw,50px) clamp(22px,2.6vw,42px); } .pillar.is-active{ border-color:var(--accent-a2); box-shadow:var(--shadow-lift); } /* the card carries the padding, so the sticky column starts inside it */ .pillar__aside{ top:calc(var(--head) + 22px); } .figure{ padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,42px); } .principle{ padding:clamp(22px,2.2vw,32px); } /* inside a block the rule above the heading is one line too many */ .principle h3{ border-top:0; padding-top:0; } .principles__grid{ gap:14px; } .person{ overflow:hidden; /* clips the portrait to the block */ padding-bottom:clamp(24px,2.6vw,34px); } .person__portrait{ margin-bottom:24px; } .person__name, .person__role, .person__bio{ padding-inline:clamp(20px,2.2vw,32px); } .people{ gap:clamp(20px,2.4vw,32px); } /* A hairline does not acknowledge the pointer — so the card answers by lifting instead. */ .principle, .person{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .principle:hover, .person:hover{ transform:translateY(-3px); border-color:var(--line); box-shadow:var(--shadow-lift); } /* ── motion ────────────────────────────────────────────────────────── */ .line__i{ display:inline-block; transform:translateY(105%); animation:lineUp 1.05s var(--ease) forwards; animation-delay:var(--d,0s); } @keyframes lineUp{ to{ transform:none; } } .line-in{ opacity:0; animation:fadeUp .95s var(--ease) forwards; animation-delay:var(--d,0s); } @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } .reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); } .reveal.is-in{ opacity:1; transform:none; } /* headline words, each behind its own mask */ .w{ display:inline-block; overflow:hidden; vertical-align:top; } .w__i{ display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease-o); transition-delay:calc(var(--wi) * .038s); } .reveal.is-in .w__i{ transform:none; } /* If even site.js failed, nothing will ever add .is-in — so the reveals and the word masks have to release on their own. Dropping this rule is what turned the page into a stack of empty blocks once before; it is the only thing standing between a script failure and no content at all. */ .is-inert .reveal{ opacity:1; transform:none; transition:none; } .is-inert .w__i{ transform:none; transition:none; } /* ── responsive ────────────────────────────────────────────────────── */ @media (max-width:900px){ .pillar,.figure{ grid-template-columns:1fr; } .pillar__aside{ position:static; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; width:100%; } .pillar__num{ font-size:40px; } .mission__body{ margin-left:0; max-width:none; } .figure__n{ font-size:clamp(52px,15vw,86px); } } /* ── the small-screen layout ───────────────────────────────────────── */ @media (max-width:860px){ .nav{ display:none; } .burger{ display:grid; } .nav-cta{ display:none; } /* the menu carries the CTA instead */ :root{ --band:clamp(72px,11vh,120px); --head:66px; } /* the hero gets its own rhythm rather than a squashed desktop one */ .hero{ justify-content:flex-end; padding-bottom:clamp(48px,8vh,72px); } .hero__headline{ font-size:clamp(46px,14.5vw,90px); line-height:.92; } .hero__lede{ max-width:34ch; } .statement{ max-width:16ch; } .section__head{ margin-bottom:clamp(40px,8vw,64px); } .pillars{ gap:16px; } .pillar{ gap:20px; padding:24px 20px 26px; } .figure{ padding:24px 20px 26px; } .pillar__aside{ gap:14px; } .pillar__num{ font-size:34px; } .pillar__list li{ padding-block:13px; } .figure{ gap:14px; padding-block:clamp(28px,7vw,40px); } .figure__n{ font-size:clamp(64px,19vw,104px); } .figure__claim{ font-size:clamp(19px,5vw,26px); max-width:22ch; } .principles__grid{ grid-template-columns:1fr 1fr; gap:12px; } .people{ gap:18px; } .person__portrait{ aspect-ratio:3/4; } .contact__title{ font-size:clamp(44px,13.5vw,84px); } .float-cta{ right:16px; bottom:16px; padding:12px 18px; } } @media (max-width:560px){ .pillar__aside{ grid-template-columns:auto 1fr; row-gap:12px; } .pillar__name{ min-width:0; } .pillar__aside .tag{ grid-column:1 / -1; justify-self:start; } /* icon and label share a row, the sentence drops beneath both */ .pillar__list li{ grid-template-columns:auto 1fr; gap:6px 11px; } .pillar__list li span{ padding-top:0; align-self:center; } .pillar__list li em{ grid-column:1 / -1; } .ico{ margin-top:0; font-size:19px; } .principles__grid{ grid-template-columns:1fr; } .footer__meta{ flex-direction:column; } .footer__meta p:last-child{ margin-left:0; } } @media (max-width:380px){ .wordmark__name{ font-size:14px; letter-spacing:.18em; } .masthead__bar{ gap:10px; } .masthead__end{ gap:8px; } .theme{ width:46px; height:24px; } .theme__knob{ width:18px; height:18px; } :root[data-theme="dark"] .theme__knob{ transform:translateX(22px); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .line__i,.w__i{ transform:none; } .line-in,.reveal{ opacity:1; transform:none; } .menu{ clip-path:none; } }