/* ============================================================ About — motion-led, no imagery. The page has no photography and isn't getting any, so the visual interest has to come from typography and how it arrives. Two mechanics only: a masked word reveal on the hero, and a scroll- linked fill on the mission statement (grey -> ink, key phrases -> accent). Everything else is a plain staggered fade so the two signature moments stay signature. Every resting state below is scoped to .js-anim, which a blocking inline script in sets. If scripting is off or about.js 404s, none of the hidden states apply and the page renders as plain text rather than a blank screen. Load order: style.css -> logo.css -> site-chrome.css -> site-overlays.css -> about.css ============================================================ */ :root { --accent: #086a6b; --accent-dark: #065758; --line: #e3e7e8; --paper: #f6f5f2; /* Resting state for scroll-filled text. Light enough to read as "not yet arrived", dark enough to stay legible before you scroll. */ --unlit: #c7cccc; } .about-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; } /* ---------- MASKED WORD REVEAL ---------- Each word gets an overflow-hidden sleeve and slides up out of it. about.js does the splitting; if JS never runs the text is simply already visible, which is the correct failure mode for a headline. */ .mask-reveal .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; } .mask-reveal .word { display: inline-block; } .js-anim .mask-reveal .word { transform: translateY(105%); transition: transform .85s cubic-bezier(.2, .8, .25, 1); } .mask-reveal.is-in .word { transform: translateY(0); } /* ---------- GENERIC REVEAL ---------- */ .js-anim .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1); } .js-anim .rv.is-in { opacity: 1; transform: none; } /* ---------- HERO ---------- */ .ab-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding: 132px 0 96px; } .ab-hero-inner { max-width: 860px; } .ab-hero .display { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.1; letter-spacing: -.042em; margin: 20px 0 28px; } .ab-hero .lead { max-width: 560px; } /* ---------- MISSION (scroll fill) ---------- Sized so the statement takes roughly one screen of scrolling to fill. Shorter and the effect is over before you notice it. */ .ab-mission { padding: 128px 0 120px; } /* Left-aligned to the same edge as every other section. Centring the block put it ~110px inside the hero's margin, which reads as a mistake rather than as a deliberate change of rhythm. */ .ab-mission-inner { max-width: 900px; } .fill-text { font-size: clamp(1.75rem, 3.6vw, 2.85rem); font-weight: 700; line-height: 1.32; letter-spacing: -.032em; margin: 26px 0 0; } .js-anim .fill-text .hw { color: var(--unlit); transition: color .5s ease; } .fill-text .hw.lit { color: var(--ink); } /* Key phrases land on the brand green instead of ink, so the fill doubles as emphasis rather than just being an entrance. */ .fill-text .hw.key.lit { color: var(--accent); } .ab-mission-note { max-width: 620px; margin: 44px 0 0; font-size: 1.02rem; line-height: 1.78; color: var(--mid); padding-left: 22px; border-left: 2px solid var(--line); } /* ---------- PRINCIPLES ---------- */ .ab-principles { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 112px 0; } .ab-principles .h2 { max-width: 460px; letter-spacing: -.032em; margin: 14px 0 56px; } .pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; } .pr-item { position: relative; padding-top: 22px; } /* The rule draws itself in on reveal — the only motion in this block, which keeps six items from turning into six competing animations. */ .pr-item::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 34px; background: var(--accent); transition: width .8s cubic-bezier(.22, 1, .36, 1) .12s; } .js-anim .pr-item::before { width: 0; } .js-anim .pr-item.is-in::before { width: 34px; } .pr-num { font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); } .pr-title { font-size: 1.06rem; font-weight: 700; letter-spacing: -.018em; color: var(--ink); margin: 10px 0 10px; } .pr-item .body { color: var(--mid); } /* ---------- TEAM ---------- */ .ab-team { padding: 112px 0; } .ab-team .h2 { max-width: 480px; letter-spacing: -.032em; margin: 14px 0 16px; } .ab-team .lead { max-width: 62ch; margin-bottom: 52px; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* No hover. These cards aren't links and nothing happens when you click them, so a lift-and-glow was promising an interaction that doesn't exist. */ .team-card { border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px 30px; background: #fff; } .team-card .pr-title { margin-top: 0; } .team-card .body { color: var(--mid); } /* ---------- CTA ---------- */ .about-page .cta-band { background: linear-gradient(150deg, #0d3b3a 0%, #08201f 100%); color: #fff; text-align: center; padding: 104px 0; } .about-page .cta-band .h2 { color: #fff; max-width: 460px; margin: 0 auto 16px; letter-spacing: -.032em; } .about-page .cta-band .cta-sub { color: rgba(255, 255, 255, .55); font-size: 1.05rem; max-width: 62ch; margin: 0 auto 34px; line-height: 1.7; } .about-page .cta-band .btn-white { background: #fff; color: #08201f; border-color: #fff; } /* ---------- ACCESSIBILITY / RESPONSIVE ---------- */ /* Scoped with .js-anim so these beat the resting states on specificity — a media query adds none, so a bare `.rv` would lose to `.js-anim .rv`. */ @media (prefers-reduced-motion: reduce) { .js-anim .mask-reveal .word { transform: none; transition: none; } .js-anim .rv { opacity: 1; transform: none; transition: none; } .js-anim .pr-item::before { width: 34px; transition: none; } .js-anim .fill-text .hw { color: var(--ink); transition: none; } .js-anim .fill-text .hw.key { color: var(--accent); } } @media (max-width: 900px) { .about-wrap { padding: 0 24px; } .ab-hero { padding: 104px 0 68px; } .ab-mission { padding: 84px 0 78px; } .ab-principles, .ab-team { padding: 78px 0; } .pr-grid { grid-template-columns: 1fr 1fr; gap: 38px 32px; } .team-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .pr-grid { grid-template-columns: 1fr; } .ab-mission-note { margin-top: 34px; } }