/* ========================================================================== Typographic scrollytelling — the shared system. One driver, three effects, all addressed by data- attributes, so a page declares its choreography in markup and never in script: data-scrub="carousel" masked lines stepping through an aperture data-scrub="drift" a pair pulled apart, with a tear line between data-scrub="ink" body copy inked in word by word data-type a line that types itself once, on load data-reveal enters on intersection Class names are beat types, not page content, so About and Companies can speak the same vocabulary the Thesis does. Every colour is a site token, so all of it works on the black ground and on the cream one. ========================================================================== */ /* ============================================================ The Thesis. Ported from the design study, to its own spec: typewriter open, masked carousel claim, word-by-word ink, drifting decouplings with a tear line, inverted finale. Colour is bound to the site tokens, so the whole thing works on the black ground and the cream one. ============================================================ */ :root { --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* mirrors .bar in site.css: its padding plus the wordmark's line box */ --bar-h: calc(2 * clamp(1.1rem, 2.4vw, 1.7rem) + 0.9rem); } /* body ground/paper already set in site.css — nothing global here, so this sheet is inert on a page that links it without using the classes. */ .tp { flex: 1 1 auto; width: 100%; } .tp-mono { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey-2); } /* the site header, unchanged from the homepage. The scroll progress is a hairline on its lower edge, so the bar itself reads identically at rest. */ .tp-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: 0 50%; } /* Start-states live HERE, not in the driver. Set from JS at the end of they land a frame after first paint, so the page flashes its finished state and then hides itself to animate. In CSS behind .motion — which the document head sets before anything paints — the first frame is already the start of the animation. */ .motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.22,.61,.24,1), transform .9s cubic-bezier(.22,.61,.24,1); } /* the driver stamps data-split once it has broken the copy into words, and each word then carries its own opacity — until then the block stands in */ .motion [data-ink]:not([data-split]) { opacity: .12; } .tp-sec { position: relative; } .tp-stick { position: sticky; top: 0; height: 100svh; display: flex; padding: 0 8vw; } /* --- 00 the quotation, typed ------------------------------- */ .tp-quote-sec { height: 100svh; margin-top: calc(-1 * var(--bar-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 0 7vw; text-align: center; } .tp-quote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(46px, 6.8vw, 108px); line-height: 1.06; letter-spacing: -.015em; color: var(--paper); } .tp-caret { display: none; } .motion .tp-caret { display: inline-block; width: 3px; height: .82em; background: var(--paper); margin-left: .1em; transform: translateY(.1em); animation: cm-caret 1.1s steps(1) infinite; } @keyframes cm-caret { 0%,49%{opacity:1} 50%,100%{opacity:0} } .tp-attr { letter-spacing: .26em; } .motion .tp-attr { opacity: 0; transition: opacity 1.1s ease .25s; } /* --- 01 the claim: masked carousel -------------------------- */ /* Scrub distance scales with the pin count, so a five-pin carousel gets the same dwell per pin as a three-pin one. At --pins:3 this is 320svh — the value it replaces — so the Thesis is unchanged. */ .tp-carousel-sec { height: calc(var(--pins, 3) * 105svh + 5svh); } .tp-carousel-sec .tp-stick { flex-direction: column; justify-content: center; } .tp-lead { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7vw, 116px); line-height: 1.02; letter-spacing: -.025em; color: var(--paper); } .tp-cwrap { position: relative; margin-top: .06em; /* sized in the same em as the lines it masks: without the font-size here 1.14em resolves against the inherited 17.6px and clips the type */ font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7vw, 116px); line-height: 1.02; letter-spacing: -.025em; } /* two lines tall: the longest fragment needs a second row, and a fixed window keeps every fragment sliding through the same aperture */ /* starting height only — sizeCarousel() measures and overrides on load */ .motion .tp-cwrap { height: 2.45em; overflow: hidden; } .tp-cline { will-change: transform; font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7vw, 116px); line-height: 1.02; letter-spacing: -.025em; color: var(--paper); text-wrap: balance; transition: transform .6s cubic-bezier(.22,.61,.24,1), opacity .4s ease; } .motion .tp-cline { position: absolute; left: 0; top: 0; right: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; } /* A pin may carry a term and its meaning. The definition resets the display face and tracking it would otherwise inherit from the masked line. */ .tp-pterm { display: block; } .tp-pdef { display: block; margin-top: .42em; font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.5; letter-spacing: -.006em; color: var(--grey-1); max-width: 34ch; text-wrap: pretty; } /* the line's whole content is ONE flex item, so inline spans inside it stay inline */ .tp-ctext { display: block; } /* --- ink sections ------------------------------------------- */ .tp-ink-sec { height: 330svh; } .tp-ink-sec .tp-stick { align-items: center; } .tp-ink { margin: 0; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.58; color: var(--grey-1); max-width: 46ch; text-wrap: pretty; } /* the conclusion sits in the same sans as the argument — upright, just brighter */ .tp-ink .tp-ink-close { color: var(--paper); } /* the un-required virtue, greyed out of the sentence that prices it */ .tp-dim { color: var(--grey-2); } .tp-intro { padding: 12vh 8vw 10vh; } .tp-intro-line { margin: 0; border-top: 1px solid var(--line); padding-top: 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -.016em; color: var(--paper); } /* --- decouplings: drift + tear ------------------------------ */ .tp-pair-sec { height: 170svh; } .tp-pair-sec .tp-stick { align-items: center; justify-content: center; overflow: hidden; padding: 0 4vw; } .tp-pairwrap { position: relative; display: flex; align-items: baseline; white-space: nowrap; } .tp-dterm { font-family: var(--serif); font-size: clamp(38px, 5.2vw, 86px); letter-spacing: -.02em; color: var(--paper); will-change: transform; } .tp-dconn { position: relative; display: inline-block; font-size: clamp(15px, 1.5vw, 23px); color: var(--grey-2); padding: 0 .6em; } .tp-tear { position: absolute; left: -4%; right: -4%; top: 52%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 50% 50%; } /* --- a holding: mark over role, one per beat ------------------ */ .tp-hold-sec { height: 125svh; } .tp-hold-sec .tp-stick { align-items: center; } .tp-hold { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3.2vw, 40px); color: inherit; transition: opacity .5s ease; } .tp-hold-mark img { display: block; width: auto; height: clamp(46px, 7.5vw, 104px); max-width: 82vw; /* the marks are black artwork; the ground decides which way they read */ filter: brightness(0) invert(1); } [data-theme="light"] .tp-hold-mark img { filter: none; } .tp-hold-role { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.2vw, 82px); line-height: 1.06; letter-spacing: -.022em; color: var(--paper); } .tp-hold:hover { opacity: .68; } .tp-hold:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 18px; } /* --- reversal ------------------------------------------------ */ .tp-statement-sec { height: 260svh; } .tp-statement-sec .tp-stick { align-items: center; } .tp-statement { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.8vw, 96px); line-height: 1.04; letter-spacing: -.022em; max-width: 17ch; text-wrap: pretty; color: var(--paper); } /* --- what it holds ------------------------------------------- */ .tp-list { padding: 22vh 8vw 20vh; display: flex; flex-direction: column; gap: 72px; max-width: 1060px; } .tp-list > p { margin: 0; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.6; color: var(--grey-1); max-width: 54ch; text-wrap: pretty; } .tp-listitem { border-top: 1px solid var(--line); padding: 40px 0; } .tp-listitem:last-child { border-bottom: 1px solid var(--line); } .tp-listitem p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.28; letter-spacing: -.01em; text-wrap: pretty; color: var(--paper); } /* --- the test: inverts against whichever ground is active ---- */ .tp-invert-sec { height: 340svh; background: var(--paper); color: var(--ground); } .tp-invert-sec .tp-stick { align-items: center; } .tp-invert { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 74px); line-height: 1.12; letter-spacing: -.018em; max-width: 26ch; text-wrap: pretty; color: currentColor; } .tp-invert .dim { opacity: .55; } .tp-invert .ital { font-style: italic; } /* Reduced motion: every override matched to .motion specificity, or the JS-applied layout wins and the carousel lines stack on one another. */ @media (prefers-reduced-motion: reduce) { .tp-caret, .motion .tp-caret { display: none; } .motion .tp-attr { opacity: 1 !important; transition: none; } .tp-carousel-sec, .tp-ink-sec, .tp-pair-sec, .tp-statement-sec, .tp-invert-sec { height: auto; } .tp-stick { position: static; height: auto; min-height: 100svh; } .tp-cwrap, .motion .tp-cwrap { height: auto; overflow: visible; } .tp-cline, .motion .tp-cline { position: static; transform: none !important; opacity: 1 !important; transition: none; } .motion .tp-cline + .tp-cline { margin-top: .06em; } .tp-prog { display: none; } [data-w] { opacity: 1 !important; } /* the driver skips its reveal observer under reduced motion, so nothing would ever un-hide these; they must never start hidden in the first place */ .motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .motion [data-ink]:not([data-split]) { opacity: 1 !important; } } /* Touch-scrolled widths — phones AND tablets — get the compressed pacing. Type is handled separately below, because at 768-1024px the desktop clamps already land correctly and only the scroll distance is wrong. */ @media (max-width: 1024px) { .tp-carousel-sec { height: calc(var(--pins, 3) * 68svh + 6svh); } .tp-ink-sec { height: 210svh; } .tp-pair-sec { height: 115svh; } .tp-statement-sec { height: 165svh; } .tp-invert-sec { height: 210svh; } .tp-intro { padding: 8vh 6vw 7vh; } } @media (max-width: 760px) { .tp-stick { padding: 0 6vw; } .tp-pairwrap { flex-direction: column; align-items: flex-start; white-space: normal; } .tp-list { padding: 14vh 6vw 12vh; gap: 48px; } /* ---- presence --------------------------------------------------------- Each beat is one line of type on an otherwise empty stage. At the desktop floors that line filled ~12% of a phone screen and read as thin, so the statements come up and the long claim comes down a touch to break into cleaner lines rather than wide ragged ones. */ .tp-statement { font-size: clamp(52px, 13vw, 72px); } .tp-dterm { font-size: clamp(44px, 11.5vw, 64px); } .tp-lead, .tp-cline, .tp-ctext { font-size: clamp(46px, 12vw, 62px); } .tp-ink { font-size: clamp(23px, 5.6vw, 30px); line-height: 1.5; } .tp-quote { font-size: clamp(42px, 10.5vw, 60px); } .tp-intro-line { font-size: clamp(1.9rem, 8vw, 2.6rem); } .tp-pdef { font-size: clamp(15px, 4vw, 19px); max-width: 26ch; } .tp-hold-role { font-size: clamp(30px, 8.4vw, 46px); } .tp-hold-mark img { height: clamp(38px, 11vw, 60px); } } /* the Philidor attribution renders at 10px on a phone — too small to read */ @media (hover: none) and (pointer: coarse) { .tp-attr { font-size: 11.5px; letter-spacing: .2em; } }