/* ════════════════════════════════════════════════════════════════════ Agevity Group Palette two themes off one set of tokens — light (powder beige ground, white blocks) is the default, dark is the inversion 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(96px, 14vh, 190px); --max: 1320px; --head: 74px; /* masthead height, used by sticky offsets */ --r: 18px; /* the block radius */ --ease: cubic-bezier(.22,.61,.24,1); --ease-o: cubic-bezier(.16,1,.3,1); } /* ── light: the default ────────────────────────────────────────────── */ :root{ color-scheme: light; --bg: #F1E7DD; /* powder beige ground */ --bg-soft: #E9DDD0; /* the ground, one shade down */ --surface: #FFFFFF; /* the blocks */ --fg: #231C17; --fg-dim: #6C6058; --fg-faint: #7C7067; /* the single accent — the brand's warm rose, taken down to a terracotta that can carry 11px type on white without going grey */ --accent: #AC5333; --on-accent: #FFF6F0; --accent-a0: rgba(172,83,51,.06); --accent-a1: rgba(172,83,51,.14); --accent-a2: rgba(172,83,51,.32); --accent-a3: rgba(172,83,51,.45); --line: rgba(43,34,28,.14); --line-soft: rgba(43,34,28,.09); /* inverted pills (CTA, skip link) */ --invert: #231C17; --on-invert: #F7F1EA; --scrim: rgba(241,231,221,.82); /* stuck masthead */ --scrim-menu:rgba(241,231,221,.96); /* mobile menu */ --shadow-block: 0 1px 2px rgba(56,40,28,.04), 0 20px 44px -26px rgba(56,40,28,.28); --shadow-lift: 0 1px 2px rgba(56,40,28,.05), 0 26px 54px -24px rgba(56,40,28,.34); --shadow-cta: 0 14px 34px -12px rgba(56,40,28,.42); /* the still background wash — no motion, just warmth in the corners */ --wash: radial-gradient(72% 54% at 86% 4%, rgba(196,103,79,.16), transparent 64%), radial-gradient(56% 44% at 4% 92%, rgba(196,103,79,.07), transparent 62%); --grain-op: .03; --grain-blend: multiply; /* portraits: printed on a white card, so they stay light */ --portrait-filter: grayscale(.92) contrast(1.02) brightness(1.02); --portrait-filter-hover: grayscale(.15) contrast(1) brightness(1.03); --portrait-tint: .2; --portrait-tint-h:.06; --portrait-fade: linear-gradient(180deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.72) 100%); } /* ── 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: grayscale(1) contrast(1.14) brightness(.68); --portrait-filter-hover: grayscale(.2) contrast(1.04) brightness(.92); --portrait-tint: .34; --portrait-tint-h:.12; --portrait-fade: linear-gradient(180deg, rgba(12,10,9,0) 40%, rgba(12,10,9,.9) 100%); } /* ── 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{ 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; } /* ── 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; 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; 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; 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{ 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 ───────────────────────────────────────────────────────── */ .mission__body{ margin-top:clamp(44px,5.5vw,76px); margin-left:auto; max-width:62ch; display:grid; gap:1.25em; } .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 22%; filter:var(--portrait-filter); /* overscaled on purpose: the parallax in site.js slides it inside the frame, and anything less would expose an edge at the extremes */ 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 ───────────────────────────────────────────────────────── */ .contact{ padding-bottom:clamp(70px,9vh,120px); } .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(--accent); } .contact__lede{ margin-top:clamp(24px,3vw,38px); max-width:46ch; color:var(--fg-dim); font-size:var(--fs-lede); } .contacts{ margin-top:clamp(48px,6vw,86px); 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(--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(--fg-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(--accent),var(--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(--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; } /* ── 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; } /* ════════════════════════════════════════════════════════════════════ Light theme: the content sits on white blocks. Only the light theme gets cards — in the dark theme the same content is held together by hairlines, which is what that palette wants. Written as :root:not([data-theme="dark"]) rather than [data-theme="light"] so it still applies if the inline theme script never runs. ══════════════════════════════════════════════════════════════════ */ :root:not([data-theme="dark"]) .pillars{ gap:14px; } :root:not([data-theme="dark"]) .figures{ gap:14px; } :root:not([data-theme="dark"]) .pillar, :root:not([data-theme="dark"]) .figure, :root:not([data-theme="dark"]) .principle, :root:not([data-theme="dark"]) .person, :root:not([data-theme="dark"]) .contacts li{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow-block); } :root:not([data-theme="dark"]) .pillar{ padding:clamp(28px,3.2vw,50px) clamp(22px,2.6vw,42px); } :root:not([data-theme="dark"]) .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 */ :root:not([data-theme="dark"]) .pillar__aside{ top:calc(var(--head) + 22px); } :root:not([data-theme="dark"]) .figure{ padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,42px); } :root:not([data-theme="dark"]) .principle{ padding:clamp(22px,2.2vw,32px); } /* inside a white block the rule above the heading is one line too many */ :root:not([data-theme="dark"]) .principle h3{ border-top:0; padding-top:0; } :root:not([data-theme="dark"]) .principles__grid{ gap:14px; } :root:not([data-theme="dark"]) .person{ overflow:hidden; /* clips the portrait to the block */ padding-bottom:clamp(24px,2.6vw,34px); } :root:not([data-theme="dark"]) .person__portrait{ margin-bottom:24px; } :root:not([data-theme="dark"]) .person__name, :root:not([data-theme="dark"]) .person__role, :root:not([data-theme="dark"]) .person__bio{ padding-inline:clamp(20px,2.2vw,32px); } :root:not([data-theme="dark"]) .people{ gap:clamp(20px,2.4vw,32px); } :root:not([data-theme="dark"]) .contacts li{ padding:22px clamp(20px,2.2vw,30px) 26px; } /* ── 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; } .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); } /* dark: the pillars read as cards here too, but drawn in hairlines and a wash rather than as solid blocks — light already has its own cards */ .pillars{ gap:16px; } :root[data-theme="dark"] .pillar{ border:1px solid var(--line-soft); border-radius:var(--r); padding:26px 22px 28px; background:linear-gradient(rgba(237,232,223,.024), rgba(237,232,223,0) 62%); gap:20px; } :root[data-theme="dark"] .pillar.is-active{ border-color:var(--accent-a2); background:linear-gradient(var(--accent-a0), transparent 62%); } .pillar{ gap:20px; } :root:not([data-theme="dark"]) .pillar{ padding:24px 20px 26px; } :root:not([data-theme="dark"]) .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:24px 20px; } :root:not([data-theme="dark"]) .principles__grid{ gap:12px; } .people{ gap:44px; } :root:not([data-theme="dark"]) .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; } }