/* ============================================================================ Operater, landing Blueprint Terminal design language. Logical properties throughout so the Arabic (RTL) build needs no separate stylesheet. The page is one scroll-driven film in seven beats. Every beat is a `.scene`: a tall section with a sticky child. main.js writes a single custom property `--p` (0 to 1) onto the scene while it is on screen, and everything below derives from that one number. No scene schedules its own animation and nothing here is animated except transform and opacity. Two derived properties do most of the work: --q `--p` eased with a smoothstep, for moves that should not start and stop abruptly. Pure arithmetic, so it costs no JavaScript. --e a per-element 0 to 1 ramp, for members of a staggered group. Each member gets its index as `--i` (generated by build.py, because the CSP forbids inline styles) and its own window via --from and --span. ========================================================================= */ /* ---- reset ---- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} img,svg,video{display:block;max-inline-size:100%} button,input{font:inherit;color:inherit} /* ---- tokens ---- */ :root{ --ink:#06090C; --grid:rgba(126,176,201,.05); --rule:rgba(126,176,201,.20); --rule-2:rgba(126,176,201,.36); --edge:rgba(126,176,201,.54); --bone:#E9E7E2; /* 16.15:1 */ --ash:#8E9AA2; /* 6.93:1 */ --dim:#87949D; /* 6.42:1 */ --ph:#74818A; /* 4.99:1 */ --blue:#7EB0C9; /* 8.50:1 */ --acc:#57CBA0; /* 9.94:1 */ --acc-wash:rgba(87,203,160,.10); /* The alarm colour. It appears in beat 5 and nowhere else on the page: on the revoke stamp, and on the "paused" marker of the rows that depended on the revoked connection. Used sparingly on purpose, so that when it shows up it means one thing. 5.31:1 on bone. */ --vml:#B22D1C; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; --sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif; --pad:clamp(20px,5vw,88px); --max:1340px; --ease:cubic-bezier(.2,.7,.3,1); } html[dir="rtl"]{--sans:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif} html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--ink);color:var(--bone);font-family:var(--sans);overflow-x:hidden; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.5} :focus-visible{outline:2px solid var(--acc);outline-offset:3px} ::selection{background:var(--acc);color:var(--ink)} .skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:99; background:var(--bone);color:var(--ink);padding:12px 20px;font-family:var(--mono); font-size:12px;letter-spacing:.14em;text-transform:uppercase} .skip:focus{inset-inline-start:0} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---- ambient ---- */ .paper{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:96px 96px} /* ============================================================================ TYPE SCALE Five steps, from 200px down to 11px: a range of about 18 to 1 across the page. One family at more sizes and two more weights, rather than a second family. IBM Plex Mono set very large is the loudest thing this design language can do while still being itself. ========================================================================= */ .mono{font-family:var(--mono)} .meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--dim)} html[dir="rtl"] .meta{font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:12.5px} .meta.a{color:var(--acc)} .meta.b{color:var(--blue)} .meta.w{color:var(--bone)} /* .86 is a tighter line box than the font's own glyphs occupy. English gets away with it because "Not tools. Teammates." has nothing above the cap height and nothing below the baseline. Turkish does not: the breve on ğ sits above the caps and the cedillas on ç and ş hang below, so both ends were being cut off by the .kw mask. Arabic already had an override for the same reason; Turkish now has one too — a little smaller, a lot less cramped. */ .t-display{font-family:var(--mono);font-weight:600; font-size:clamp(50px,13.2vw,200px);line-height:.86;letter-spacing:-.06em} html[dir="rtl"] .t-display{font-family:var(--sans);font-weight:600; letter-spacing:-.02em;line-height:1.08;font-size:clamp(42px,10.5vw,150px)} /* These two must match the block seo_finalize.py appends to the built stylesheet, which carries !important and therefore wins. They are kept in step as a fallback for the case where that patch does not run — the values diverging silently is most of why this took several attempts to fix. deploy/verify/turkish_hero.py fails the build if they drift apart. "Takım arkadaşı." is fifteen characters, and 16ch keeps it on one line. */ html[lang="tr"] .t-display{font-size:clamp(2.9rem,8.6vw,8.5rem);line-height:1.14; letter-spacing:-.045em} html[lang="tr"] .title-blk h1{max-inline-size:16ch} .t-statement{font-family:var(--mono);font-weight:500; font-size:clamp(26px,4.4vw,56px);line-height:1.04;letter-spacing:-.045em} html[dir="rtl"] .t-statement{font-family:var(--sans);font-weight:600; letter-spacing:-.01em;line-height:1.26} .t-caption{font-family:var(--sans);font-weight:300; font-size:clamp(19px,2.7vw,34px);line-height:1.22;letter-spacing:-.02em; color:var(--bone)} html[dir="rtl"] .t-caption{font-weight:400;letter-spacing:0;line-height:1.42} h1{font-family:var(--mono);font-weight:600;font-size:clamp(38px,7.4vw,96px);line-height:.95; letter-spacing:-.055em} h1 .g{color:var(--acc)} h2{font-family:var(--mono);font-weight:500;font-size:clamp(24px,3.4vw,40px);line-height:1.06; letter-spacing:-.04em} html[dir="rtl"] h2{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.28} h3{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:-.015em} html[dir="rtl"] h3{font-family:var(--sans);font-weight:600;letter-spacing:0} h4{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:-.015em;color:var(--bone)} html[dir="rtl"] h4{font-family:var(--sans);font-weight:600;letter-spacing:0} .lede{font-size:clamp(15px,1.55vw,18px);font-weight:300;line-height:1.72;color:var(--ash)} .body{font-size:14px;font-weight:300;line-height:1.7;color:var(--ash)} .note{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--dim)} html[dir="rtl"] .note,html[dir="rtl"] .lede,html[dir="rtl"] .body{font-family:var(--sans)} .wrap{max-inline-size:var(--max);margin-inline:auto} section{position:relative;z-index:1;padding:clamp(72px,10vw,150px) var(--pad)} /* ---- nav ---- */ .nav{position:sticky;inset-block-start:0;z-index:50;display:flex;align-items:center;gap:20px; padding:12px var(--pad);border-block-end:1px solid var(--rule); /* .88 rather than .8. The bar is translucent over a page that is mostly ink, where --dim reads at 6.42:1 -- but the ledger beat is a bone panel, and while it scrolls underneath, 20% of it came through and the nav links fell to 3.96:1. At .88 the worst case is 5.02:1 and the bar still reads as glass over the dark scenes. */ background:rgba(6,9,12,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:inherit} .brand span{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase} .nav .sp{flex:1} .nav-links{display:flex;gap:24px} .nav-links a{font-family:var(--mono);font-size:12.5px;color:var(--dim);text-decoration:none; transition:color .25s var(--ease)} .nav-links a:hover{color:var(--bone)} .nav-links a[aria-current]{color:var(--bone)} .lang{display:flex;border:1px solid var(--rule);flex:none} .lang a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:8px 11px; color:var(--dim);text-decoration:none;transition:color .2s var(--ease)} .lang a+a{border-inline-start:1px solid var(--rule)} .lang a[aria-current]{background:var(--bone);color:var(--ink);font-weight:600} .lang a:hover:not([aria-current]){color:var(--bone)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer; font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;border:1px solid transparent;padding:15px 26px;min-height:50px; position:relative;overflow:hidden;transition:background .25s var(--ease), color .25s var(--ease),border-color .25s var(--ease)} .btn--primary{background:var(--bone);color:var(--ink);font-weight:600} .btn--primary::after{content:"";position:absolute;inset:0;transform:translateX(-130%); background:linear-gradient(90deg,transparent,rgba(6,9,12,.14),transparent)} .btn--primary:hover::after{animation:sweep .8s var(--ease)} @keyframes sweep{to{transform:translateX(130%)}} .btn--ghost{background:transparent;border-color:var(--edge);color:var(--bone)} .btn--ghost:hover{border-color:var(--acc);color:var(--acc)} .btn--sm{padding:11px 16px;min-height:42px;font-size:11px} .btn--cta{padding:19px 38px;min-height:58px} .capture{max-inline-size:540px} .trustline{display:flex;gap:8px 22px;flex-wrap:wrap;margin-block-start:14px} .trustline span{display:flex;align-items:center;gap:7px} .trustline i{color:var(--acc);font-style:normal;font-family:var(--mono)} .eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule-2); padding:7px 13px} .eyebrow i{width:5px;height:5px;background:var(--acc);animation:blip 2s ease-in-out infinite; flex:none} .eyebrow span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ash)} html[dir="rtl"] .eyebrow span{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12px} @keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}} /* ---- reveal, used by the spec sheet only ---- The hidden state is applied by main.js adding .rv-on to the root, not by default. Left the other way round, anything below the fold stays at zero opacity forever when scripts are blocked or fail, and the spec sheet is the part of the page a sceptical reader is most likely to want. */ .rv-on .rv{opacity:0;transform:translateY(24px)} .rv-on .rv.in{opacity:1;transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv-on .rv[data-d="1"].in{transition-delay:.09s} .rv-on .rv[data-d="2"].in{transition-delay:.18s} .rv-on .rv[data-d="3"].in{transition-delay:.27s} .shead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-block-end:16px; border-block-end:1px solid var(--rule);margin-block-end:clamp(26px,4vw,44px)} .shead .fill{flex:1;height:1px;background:var(--rule);min-inline-size:20px} /* ---- the strip under the nav ---- This used to be a scrolling ticker of invented agent actions. The people who fund and vouch for the company are a stronger thing to put in the same space, and a static row costs no animation frames. */ .bstrip{position:relative;z-index:2;display:flex;align-items:center; gap:clamp(14px,2.4vw,34px);flex-wrap:wrap; border-block-end:1px solid var(--rule);background:rgba(6,9,12,.72); padding:13px var(--pad);min-block-size:52px} .bstrip-in{display:flex;align-items:center;gap:clamp(13px,2.4vw,40px);flex-wrap:wrap} .bstrip-in span{font-family:var(--mono);font-size:12px;letter-spacing:.08em; color:var(--ash);display:flex;align-items:center;gap:9px} html[dir="rtl"] .bstrip-in span{font-family:var(--sans);letter-spacing:0} .bstrip-in span::before{content:"";inline-size:4px;block-size:4px;background:var(--acc); flex:none} /* ============================================================================ THE SCENE ENGINE `--p` is written by main.js. `--q` is the eased form. Both are declared here so the very first paint, before any script has run, is already valid. ========================================================================= */ .scene{position:relative;padding:0; --p:0; --q:calc(var(--p) * var(--p) * (3 - 2 * var(--p)))} .scene-pin{position:sticky;inset-block-start:0;block-size:100svh;overflow:hidden; display:grid;place-items:center} .scene-in{inline-size:100%;max-inline-size:var(--max);margin-inline:auto; padding-inline:var(--pad)} /* Heading blocks that sit over the content they introduce have to be gone by the time it arrives, so they fade out on --p. Beats 4, 5 and 6 lay their heading out in flow instead, where nothing collides, and those keep it: see .scene-head--flow below. */ .scene-head{position:absolute;inset-block-start:clamp(58px,9vh,104px); inset-inline-start:var(--pad);max-inline-size:34ch;z-index:3; opacity:calc(1 - max(0, var(--p) - .34) * 3.6); transform:translate3d(0,calc(var(--p) * -4vh),0)} .scene-head h2{margin-block-start:12px} .team-in .scene-head,.lg-in .scene-head,.rc-in .scene-head{ position:static;opacity:1;transform:none;max-inline-size:40ch} .hint{position:absolute;inset-block-end:22px;inset-inline-start:50%;translate:-50% 0; display:flex;align-items:center;gap:9px;opacity:calc(1 - var(--p) * 3);z-index:4} .hint i{inline-size:1px;block-size:26px;background:linear-gradient(var(--acc),transparent); animation:drop 1.9s var(--ease) infinite} @keyframes drop{0%{transform:translateY(-9px);opacity:0} 35%{opacity:1}100%{transform:translateY(9px);opacity:0}} .spine{position:absolute;inset-block:0;inset-inline-end:calc(var(--pad) / 2); inline-size:1px;background:var(--rule);z-index:4} .spine i{position:absolute;inset-block-start:0;inline-size:1px;background:var(--acc); block-size:calc(var(--p) * 100%)} /* A screenshot, presented as a piece of software rather than a picture. */ .dev{position:relative;border:1px solid var(--rule-2);background:var(--ink); overflow:hidden;will-change:transform} .dev img{display:block;inline-size:100%;block-size:auto} .dev-bar{display:flex;align-items:center;gap:7px;padding:9px 13px; border-block-end:1px solid var(--rule);background:rgba(8,12,16,.9)} .dev-bar i{inline-size:7px;block-size:7px;background:var(--rule-2);flex:none} .dev-bar span{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ph);margin-inline-start:6px} /* ============================================================================ BEAT 0 · TITLE CARD The statement at full size, then it shrinks and travels toward the wordmark while the second line takes its place. This move teaches the rest of the page how transitions work here: scale is the cut. ========================================================================= */ .s-title{block-size:180svh} /* The statement and the line that replaces it share one grid cell, so the second arrives where the first was rather than a screen further down. */ .title-in{display:grid;grid-template-rows:auto auto;justify-items:start; gap:clamp(20px,4vh,44px)} .title-in > *{grid-column:1} .title-blk{grid-row:1} .handoff{grid-row:1;align-self:end} .title-cta{grid-row:2} .title-blk{transform-origin:0 0; transform:scale(calc(1 - var(--q) * .84)) translate3d(0,calc(var(--q) * -14vh),0)} html[dir="rtl"] .title-blk{transform-origin:100% 0} .title-blk h1{margin-block-start:clamp(16px,3vh,30px);max-inline-size:11ch} .s-title h1{opacity:calc(1 - max(0, var(--p) - .52) * 3.4)} .s-title .eyebrow{opacity:calc(1 - max(0, var(--p) - .30) * 4)} /* The hand-off line. It arrives where the statement was, holds, then leaves. */ .handoff{max-inline-size:22ch;color:var(--acc); opacity:calc(min(max(0, var(--p) - .30) * 5, max(0, .94 - var(--p)) * 6)); transform:translate3d(0,calc((1 - var(--p)) * 2.4vh),0)} .title-cta{opacity:calc(1 - max(0, var(--p) - .16) * 4.4)} /* the kinetic deal, on first paint only, no script involved. Each word is its own overflow:hidden mask so it can slide up from beneath. The mask is the line box, which at these tight line-heights is shorter than the glyphs — accents above the cap height and cedillas below the baseline were being clipped permanently, not just during the animation. The padding gives the mask room; the negative margins take that room back out of the layout so nothing moves. The travel distance rises with it, or the top of the word would show above the mask's new lower edge on the first frame. */ .kin .kw{display:inline-block;overflow:hidden;vertical-align:bottom; padding-block-start:.14em;margin-block-start:-.14em; padding-block-end:.16em;margin-block-end:-.16em} .kin .kw b{display:inline-block;font-weight:inherit; animation:deal .82s var(--ease) both} @keyframes deal{from{transform:translateY(128%) rotate(2deg);opacity:0} to{transform:none;opacity:1}} .kin .kw:nth-child(1) b{animation-delay:.06s} .kin .kw:nth-child(2) b{animation-delay:.14s} .kin .kw:nth-child(3) b{animation-delay:.22s} .kin .kw:nth-child(4) b{animation-delay:.30s} .kin .kw:nth-child(5) b{animation-delay:.38s} .kin .g .kw:nth-child(1) b{animation-delay:.30s} .kin .g .kw:nth-child(2) b{animation-delay:.38s} .kin .g .kw:nth-child(3) b{animation-delay:.46s} /* ============================================================================ THE AGENT MAP · beat 1 Drawn by agentmap.py, not photographed. It sits where the activity screenshot used to and inherits the same rise-and-push transform, with one difference worth stating: the old comment above .s-zoom explains the PNG had to dissolve at 0.66 because a raster pushed past 2x goes soft. Vector does not, so this holds focus all the way in and the dissolve is now a choice about pacing rather than a way to hide blur. Colours map onto the existing tokens: --acc for anything the selected agent touches, --rule-2 for structure, --ph for what is not on yet. ========================================================================= */ /* A column, so that when the height cap bites it is the diagram that gives way and not the legend. The legend is what tells you a dashed box means an agent you have not switched on yet, and clipping it turns the greyed-out half of the map into something that just looks broken. */ .amap{position:relative;margin:0;display:flex;flex-direction:column; border:1px solid var(--rule-2);background:var(--ink); overflow:hidden;will-change:transform} .am-bar{display:flex;flex:none;align-items:center;gap:7px;padding:9px 13px; border-block-end:1px solid var(--rule);background:rgba(8,12,16,.9)} .am-bar i{inline-size:7px;block-size:7px;background:var(--rule-2);flex:none} .am-bar span{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim)} html[dir="rtl"] .am-bar span{font-family:var(--sans);letter-spacing:0;text-transform:none} /* preserveAspectRatio is already xMidYMid meet, so a squeezed box scales the drawing down and centres it rather than distorting it. */ .am-svg{display:block;inline-size:100%;block-size:auto;flex:1 1 auto;min-block-size:0; /* The beat scales this the whole way in. Left to hint, glyphs and 1px strokes re-snap to the pixel grid on every frame and the drawing shimmers; geometricPrecision makes both scale linearly instead. */ text-rendering:geometricPrecision;shape-rendering:geometricPrecision} /* structure */ .am-band{stroke:var(--rule);stroke-width:1;opacity:.35} .am-lay{font-family:var(--mono);fill:var(--ph);font-weight:500;text-transform:uppercase} html[dir="rtl"] .am-lay{font-family:var(--sans);text-transform:none;letter-spacing:0} /* edges */ .am-ed{stroke:var(--rule);stroke-width:1} .am-ed.lit{stroke:var(--acc);stroke-width:1.5} .am-ed.off{stroke:var(--rule);stroke-dasharray:3 4;opacity:.5} /* nodes */ .am-nd rect{fill:var(--ink);stroke:var(--rule-2);stroke-width:1; transition:stroke .32s var(--ease),fill .32s var(--ease)} .am-nd text{font-family:var(--mono);fill:var(--dim);letter-spacing:.01em; transition:fill .32s var(--ease)} html[dir="rtl"] .am-nd text{font-family:var(--sans);letter-spacing:0} .am-nd .am-sub{fill:var(--ph)} .am-nd.lit rect{stroke:var(--acc);fill:var(--acc-wash)} .am-nd.lit text{fill:var(--bone)} .am-nd.core rect{stroke:var(--edge);fill:rgba(126,176,201,.05)} .am-nd.core text{fill:var(--bone)} .am-nd.off rect{stroke:var(--rule);stroke-dasharray:3 3} .am-nd.off text{fill:var(--ph)} /* Only one agent's fan is shown at a time. All four are in the DOM so switching is a class flip rather than a redraw, and the flip is a cut: no transition here on purpose. Fading meant either two sets of job labels overlapping at different heights, or a gap with nothing lit. See swapTo(). */ .am-fan{opacity:0;pointer-events:none} /* Used for one frame when the loop is stopped mid-swap, so the fan snaps back instead of fading in over a map that is already moving. */ .amap.am-cut .am-fan,.amap.am-cut .am-nd rect,.amap.am-cut .am-nd text{transition:none} .am-fan.on{opacity:1} /* The cursor travels between agents and clicks. Decoration only: the state it selects is already announced by the nodes. */ .am-cursor{opacity:0;transition:transform .78s cubic-bezier(.45,.05,.2,1), opacity .3s var(--ease)} .am-cursor path{fill:var(--bone);stroke:var(--ink);stroke-width:1.2; stroke-linejoin:round} .am-cursor.on{opacity:1} .am-click{fill:none;stroke:var(--acc);stroke-width:2;opacity:0;transform-origin:center} .am-cursor.tap .am-click{animation:am-tap .5s var(--ease)} @keyframes am-tap{ from{opacity:.85;r:3} to{opacity:0;r:22}} /* legend */ .am-legend{display:flex;flex:none;align-items:center;gap:18px;flex-wrap:wrap; padding:12px 16px;border-block-start:1px solid var(--rule)} .am-lg{display:flex;align-items:center;gap:8px;font-family:var(--mono); font-size:10.5px;color:var(--ph);letter-spacing:.04em} html[dir="rtl"] .am-lg{font-family:var(--sans);letter-spacing:0;font-size:12px} .am-ln{inline-size:20px;block-size:0;border-block-start:1px solid var(--rule);flex:none} .am-ln.on{border-block-start:1.5px solid var(--acc)} .am-ln.off{border-block-start:1px dashed var(--rule)} /* The map takes the screenshot's place in beat 1's move. */ .s-zoom .amap{inline-size:min(1180px,92vw);max-block-size:62svh; /* The beat's headline is absolutely positioned over the top-left of the scene. The screenshot this replaced had a dark app nav up there, so the two could overlap and it still read; the map has its own column labels in that band, and two sets of small caps on top of each other read as a rendering fault rather than a layout. So the map takes its own strip, sized to clear the headline at the shortest viewport the beat still plays on. */ margin-block-start:clamp(208px,25vh,240px); transform-origin:50% 42%; transform:perspective(1800px) translate3d(0,calc((1 - var(--re)) * 22vh + var(--ze) * -7%),0) rotateX(calc((1 - var(--re)) * 14deg)) scale(calc((.84 + var(--re) * .16) * (1 + var(--ze) * 1.45))); opacity:calc(min(var(--p) * 9, 1) - max(0, var(--p) - .66) * 5)} /* The headline sets the beat up, then hands the frame to the map. By the time the camera is pushing in there is nothing left for it to say, and holding it there only puts type across a diagram that is busy getting bigger. */ .s-zoom .scene-head{opacity:calc(1 - var(--ze,0) * 5)} @media (max-width:900px){ .am-legend{display:none} .s-zoom .amap{max-block-size:none} } @media (prefers-reduced-motion:reduce){ .am-cursor{display:none} .am-fan{transition:none} } /* ============================================================================ BEAT 1 · THE LOG One scene doing two things, because two pinned scenes showing the same screenshot read as the screenshot appearing twice. That is what it was: one pin scrolling away and an identical one scrolling in. So the whole move lives on one --p. The first third is the rise, out of perspective and up into place; the rest is the push in, until a single row fills the frame. Past 0.66 the screenshot dissolves and the same row drawn in the DOM takes over, because a PNG pushed past about 2x goes soft, which reads as a fake zoom. --re and --ze are the two halves, each eased on its own so the settle at the end of the rise and the start of the push do not fight each other. ========================================================================= */ .s-zoom{block-size:300svh; --rise:clamp(0,var(--p)/.30,1); --zoom:clamp(0,(var(--p) - .30)/.70,1); --re:calc(var(--rise) * var(--rise) * (3 - 2 * var(--rise))); --ze:calc(var(--zoom) * var(--zoom) * (3 - 2 * var(--zoom)))} .s-zoom .scene-in{display:grid;place-items:center} .s-zoom .dev{inline-size:min(1180px,92vw);max-block-size:72svh; transform-origin:50% 42%; transform:perspective(1800px) translate3d(0,calc((1 - var(--re)) * 22vh + var(--ze) * -7%),0) rotateX(calc((1 - var(--re)) * 14deg)) scale(calc((.84 + var(--re) * .16) * (1 + var(--ze) * 1.45))); opacity:calc(min(var(--p) * 9, 1) - max(0, var(--p) - .66) * 5)} .s-zoom .glow{position:absolute;inset:-14% -6% auto;block-size:60%;pointer-events:none; background:radial-gradient(60% 100% at 50% 0, rgba(87,203,160,calc(var(--re) * .16)),transparent 70%)} .zoom-row{position:absolute;inset-inline:var(--pad);inset-block-start:50%; translate:0 -50%;z-index:3;display:grid; grid-template-columns:auto auto auto 1fr auto;align-items:center; gap:clamp(14px,2.4vw,34px); border-block:1px solid var(--rule-2);padding-block:clamp(16px,2.6vh,26px); background:rgba(6,9,12,.86); --e:clamp(0,(var(--p) - .66)/.14,1); opacity:var(--e); transform:scale(calc(.94 + var(--e) * .06))} .zoom-row span{font-family:var(--mono);font-size:clamp(12px,1.45vw,19px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[dir="rtl"] .zoom-row span{font-family:var(--sans)} .zr-t{color:var(--ph)} .zr-a{color:var(--bone);font-weight:500} .zr-s{color:var(--blue)} .zr-x{color:var(--ash);font-weight:300;min-inline-size:0} .zr-st{color:var(--acc);letter-spacing:.14em;text-transform:uppercase; font-size:clamp(9px,1vw,12px)!important} /* The second caption arrives with the row it describes, not before it. */ .s-zoom .zoom-copy{position:absolute;inset-block-end:6vh;inset-inline-start:var(--pad); max-inline-size:38ch;z-index:3; --e:clamp(0,(var(--p) - .68)/.14,1); opacity:var(--e); transform:translate3d(0,calc((1 - var(--e)) * 2vh),0)} /* ============================================================================ BEAT 3 · THE WORK Three artefacts an agent actually produced, travelling sideways on vertical scroll. Built in markup rather than images so they stay sharp, translate, and cost nothing to load. ========================================================================= */ .s-track{block-size:380svh} .s-track .scene-in{overflow:visible} .s-track .rail{display:flex;gap:clamp(20px,3vw,46px);align-items:center; inline-size:max-content;will-change:transform; transform:translate3d(calc(var(--p) * (var(--rail-travel,-60vw))),0,0)} html[dir="rtl"] .s-track .rail{ transform:translate3d(calc(var(--p) * (var(--rail-travel,-60vw)) * -1),0,0)} .act{flex:none;inline-size:min(74vw,860px)} .act-hd{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-block-end:16px; align-items:baseline} .act-hd .meta{grid-row:span 2} .act-hd h2{font-family:var(--mono);font-size:clamp(15px,1.9vw,20px);font-weight:500; letter-spacing:-.02em;color:var(--bone);line-height:1.25} html[dir="rtl"] .act-hd h2{font-family:var(--sans);font-weight:600;letter-spacing:0} .act-hd span:last-child{font-size:13.5px;font-weight:300;color:var(--ash);max-inline-size:62ch} .art{border:1px solid var(--rule-2);background:rgba(8,12,16,.92)} .art-bar{display:flex;align-items:center;gap:9px;padding:10px 14px; border-block-end:1px solid var(--rule)} .art-bar i{inline-size:6px;block-size:6px;background:var(--acc);flex:none} .art-bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ph)} .lead-hd,.lead-row{display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1.2fr;gap:14px; padding:11px 14px;align-items:center} .lead-hd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--ph);border-block-end:1px solid var(--rule)} .lead-row{border-block-end:1px solid var(--grid);font-size:13px;font-weight:300;color:var(--ash)} .lead-row b{color:var(--bone);font-weight:500;font-size:13.5px} .lead-row i{font-style:normal;color:var(--acc);font-family:var(--mono);font-size:11.5px} .mail-hd{display:flex;gap:14px;padding:10px 14px;border-block-end:1px solid var(--grid); align-items:baseline} .mail-hd span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--ph);flex:none;min-inline-size:52px} .mail-hd b{color:var(--bone);font-weight:400} .mail-body{padding:16px 14px;font-size:14.5px;font-weight:300;line-height:1.85;color:var(--ash)} .mf{padding:1px 5px;border-block-end:1px solid} .mf--sig{color:var(--acc);border-color:rgba(87,203,160,.5);background:var(--acc-wash)} .mf--co{color:var(--blue);border-color:rgba(126,176,201,.45)} .slack-hd{display:flex;align-items:center;gap:9px;padding:13px 14px 4px} .slack-hd .av{inline-size:22px;block-size:22px;background:var(--acc);color:var(--ink); display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;flex:none} .slack-hd b{color:var(--bone);font-size:14px;font-weight:600} .slack-hd .bot{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim); border:1px solid var(--rule);padding:1px 5px} .slack-hd .chan{font-family:var(--mono);font-size:11.5px;color:var(--blue);margin-inline-start:auto} .slack-msg{padding:6px 14px 16px 46px;font-size:14.5px;font-weight:300;line-height:1.75; color:var(--ash)} html[dir="rtl"] .slack-msg{padding:6px 46px 16px 14px} /* ============================================================================ BEAT 4 · THE TEAM, AND ONE INSTRUCTION Pull back from the Slack post to the whole team, then a single instruction moves four of them. Two stages in one pinned frame: the roster and the result share a grid row, so the second replaces the first rather than needing a second viewport of height. ========================================================================= */ .s-team{block-size:280svh} .team-bg{position:absolute;inset:0;z-index:0;display:grid;place-items:center; pointer-events:none;overflow:hidden} .team-bg .dev{inline-size:min(1180px,92vw);border-color:transparent; transform:scale(calc(1.5 - var(--q) * .5)); opacity:calc(.028 + min(var(--p) * 4, 1) * .05)} .team-bg .dev-bar{display:none} .team-in{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:clamp(14px,2.4vh,28px); align-content:center;block-size:100%; padding-block:clamp(94px,17vh,150px) clamp(26px,5vh,56px)} .team-in > *{grid-column:1} .team-in .scene-head{grid-row:1} .team-instr{grid-row:2;border:1px solid var(--edge);background:rgba(8,12,16,.9); padding:13px 16px 15px; --e:clamp(0,(var(--p) - .40)/.10,1); opacity:var(--e)} .team-instr p{position:relative;display:inline-block;margin-block-start:8px; font-size:clamp(15px,1.9vw,21px);font-weight:300;color:var(--bone);line-height:1.4} /* The instruction types itself out on scroll. A cover panel shrinking off the trailing edge, which is a transform, rather than animating the text itself. */ .team-instr p::after{content:"";position:absolute;inset:-2px -2px -2px 0; background:var(--ink);transform-origin:right; transform:scaleX(calc(1 - clamp(0,(var(--p) - .44)/.14,1)))} html[dir="rtl"] .team-instr p::after{inset:-2px 0 -2px -2px;transform-origin:left} .team-grid{grid-row:3;align-self:start;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule); border:1px solid var(--rule); opacity:calc(1 - max(0, var(--p) - .60) * 3.2); transform:translate3d(0,calc(max(0, var(--p) - .60) * -6vh),0)} .cell{background:var(--ink);padding:14px 14px 16px; --e:clamp(0,(var(--p) - .06 - var(--i,0) * .028)/.14,1); opacity:var(--e); transform:translate3d(0,calc((1 - var(--e)) * 2.4vh),0)} .cell .meta{display:flex;align-items:center;gap:7px;font-size:9.5px} .cell .meta i{inline-size:5px;block-size:5px;background:var(--ph);flex:none} .cell.live .meta i{background:var(--acc)} .cell h3{margin-block:9px 6px;color:var(--bone)} .cell .body{font-size:12.5px;line-height:1.55} .cell.live{background:linear-gradient(180deg,var(--acc-wash),transparent 60%)} .fanout{grid-row:3;align-self:start;display:flex;flex-direction:column;gap:9px; pointer-events:none} .task{display:flex;align-items:center;gap:14px;border:1px solid var(--rule); padding:13px 16px;background:rgba(8,12,16,.94); --e:clamp(0,(var(--p) - .62 - var(--i,0) * .055)/.09,1); opacity:var(--e); transform:translate3d(calc((1 - var(--e)) * 3vw),0,0)} html[dir="rtl"] .task{transform:translate3d(calc((1 - var(--e)) * -3vw),0,0)} .task .who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--acc);flex:none;min-inline-size:104px} html[dir="rtl"] .task .who{font-family:var(--sans);letter-spacing:0;text-transform:none} .task .what{flex:1;font-size:13.5px;font-weight:300;color:var(--ash)} .task .st{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--ph);flex:none} html[dir="rtl"] .task .st{font-family:var(--sans);letter-spacing:0;text-transform:none} .task .dot{inline-size:6px;block-size:6px;background:var(--acc);flex:none} /* ============================================================================ BEAT 5 · THE LEDGER The film's one inversion: bone ground, ink type. The ledger prints, then a connection is revoked in front of you and the rows that depended on it stop. This replaces what used to be three columns of text making the same claim. ========================================================================= */ .s-ledger{block-size:270svh} .lg-wash{position:absolute;inset:0;z-index:0;background:var(--bone); transform-origin:top;transform:scaleY(clamp(0,var(--p)/.06,1))} .lg-in{position:relative;z-index:2;color:var(--ink); display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vh,24px);align-content:center;block-size:100%; padding-block:clamp(90px,16vh,140px) clamp(26px,5vh,56px)} .lg-in .scene-head{position:static;max-inline-size:34ch} .lg-in .scene-head .meta{color:rgba(6,9,12,.62)} .lg-in .t-caption{color:var(--ink)} .lg-cols{display:flex;gap:clamp(16px,3vw,44px);flex-wrap:wrap; border-block-end:1px solid rgba(6,9,12,.22);padding-block-end:10px} .lg-col{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink); --e:clamp(0,(var(--p) - .10 - var(--i,0) * .04)/.10,1); opacity:var(--e)} html[dir="rtl"] .lg-col{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px} .lg-conns{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .lg-conns .meta{color:rgba(6,9,12,.62)} .conn{position:relative;font-family:var(--mono);font-size:11.5px; border:1px solid rgba(6,9,12,.28);padding:5px 10px;color:rgba(6,9,12,.78)} html[dir="rtl"] .conn{font-family:var(--sans)} .conn--rv{border-color:var(--vml);color:var(--vml)} .stamp{position:absolute;inset-block-end:calc(100% - 7px);inset-inline-end:-26px; font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--vml);border:1px solid var(--vml); padding:3px 7px;background:var(--bone);white-space:nowrap; --e:clamp(0,(var(--p) - .74)/.07,1); opacity:var(--e); transform:rotate(-7deg) scale(calc(1.6 - var(--e) * .6))} html[dir="rtl"] .stamp{font-family:var(--sans);letter-spacing:0;text-transform:none} .lg{border:1px solid rgba(6,9,12,.24)} .lg-hd,.lg-row{display:grid;grid-template-columns:auto 1.1fr 1.1fr 2.4fr; gap:clamp(10px,1.8vw,26px);padding:10px clamp(12px,1.6vw,20px);align-items:center} .lg-hd{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:rgba(6,9,12,.62);border-block-end:1px solid rgba(6,9,12,.24)} html[dir="rtl"] .lg-hd{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12px} .lg-row{border-block-end:1px solid rgba(6,9,12,.10);font-size:clamp(11.5px,1.25vw,14px); --e:clamp(0,(var(--p) - .14 - var(--i,0) * .045)/.10,1); opacity:var(--e); transform:translate3d(0,calc((1 - var(--e)) * 1.4vh),0)} .lg-row:last-child{border-block-end:0} .lg-row span{font-family:var(--mono);min-inline-size:0} html[dir="rtl"] .lg-row span{font-family:var(--sans)} .lg-row .t{color:rgba(6,9,12,.62)} .lg-row .a{color:var(--ink);font-weight:500} .lg-row .s{color:#2C6A85} .lg-row .x{color:rgba(6,9,12,.72);display:flex;align-items:center;gap:12px; overflow:hidden} .lg-row .xw{position:relative;overflow:visible;white-space:nowrap; text-overflow:ellipsis;min-inline-size:0} /* The strike is a scaled hairline, not a text-decoration switch, so drawing it costs a composite rather than a re-layout of the row. */ .lg-row .xw::after{content:"";position:absolute;inset-block-start:52%;inset-inline:0; block-size:1px;background:var(--vml);transform-origin:left;transform:scaleX(0)} html[dir="rtl"] .lg-row .xw::after{transform-origin:right} .pz{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--vml);border:1px solid var(--vml);padding:2px 6px; flex:none;opacity:0} html[dir="rtl"] .pz{font-family:var(--sans);letter-spacing:0;text-transform:none} .lg-row.dep{--f:clamp(0,(var(--p) - .78)/.07,1); opacity:calc(var(--e) * (1 - var(--f) * .62))} .lg-row.dep .xw::after{transform:scaleX(var(--f))} .lg-row.dep .pz{opacity:var(--f)} .lg-note{color:rgba(6,9,12,.62);max-inline-size:70ch; opacity:clamp(0,(var(--p) - .84)/.10,1)} /* ============================================================================ BEAT 6 · THE RECEIPT What the night produced, then what it costs. Output first: for a reader who has been sold to before, a price quoted after the evidence is a rate rather than a claim. ========================================================================= */ .s-receipt{block-size:230svh} .rc-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,3.4vw,58px);align-items:center; padding-block-start:clamp(80px,14vh,128px)} .rc-in .scene-head{position:static;grid-column:1/-1;max-inline-size:40ch} .rc-sheet .dev{border-color:rgba(233,231,226,.34); transform:translate3d(0,calc((1 - var(--q)) * 8vh),0) scale(calc(.94 + var(--q) * .06)); opacity:clamp(0,var(--p)/.2,1)} .rc-side{display:grid;gap:clamp(16px,2.6vh,30px)} .rc-metrics{display:grid;gap:12px} .rc-m,.rc-p{display:grid;gap:3px; --e:clamp(0,(var(--p) - .18 - var(--i,0) * .06)/.12,1); opacity:var(--e); transform:translate3d(calc((1 - var(--e)) * 2vw),0,0)} html[dir="rtl"] .rc-m,html[dir="rtl"] .rc-p{ transform:translate3d(calc((1 - var(--e)) * -2vw),0,0)} .rc-m b{font-family:var(--mono);font-size:clamp(28px,3.6vw,48px);font-weight:500; letter-spacing:-.05em;color:var(--bone);line-height:1} .rc-prices{display:grid;gap:10px;padding-block-start:clamp(14px,2.4vh,24px); border-block-start:1px solid var(--rule)} .rc-p{--e:clamp(0,(var(--p) - .46 - var(--i,0) * .06)/.12,1)} .rc-p b{font-family:var(--mono);font-size:clamp(19px,2.2vw,28px);font-weight:500; letter-spacing:-.04em;color:var(--acc);line-height:1} .rc-lede{max-inline-size:44ch;opacity:clamp(0,(var(--p) - .70)/.12,1)} /* ============================================================================ BEAT 7 · THE ASK The statement returns at the size it started, which closes the loop. ========================================================================= */ .s-final{block-size:170svh;border-block-start:1px solid var(--rule)} .fin-in{display:flex;flex-direction:column;align-items:center;text-align:center; gap:clamp(18px,3vh,32px);margin-inline:auto; transform:scale(calc(.76 + var(--q) * .24)); opacity:clamp(0,var(--p)/.22,1)} /* The closing statement rhymes with the title card, but it is six words to the title card's three. At the display size it would not fit the frame with its button, so it takes the step below and the scale-up carries the rhyme. The measure is set on the heading, not the column: constraining the column wraps the eyebrow and the button label to three lines each. */ .s-final h2{font-size:clamp(30px,5.6vw,84px);line-height:.94;letter-spacing:-.05em; max-inline-size:15ch} html[dir="rtl"] .s-final h2{font-size:clamp(27px,4.8vw,68px);line-height:1.14; letter-spacing:-.02em;max-inline-size:20ch} .fin-in .capture{margin-inline:auto} .fin-in .trustline{justify-content:center} .s-final .u-acc{color:var(--acc)} /* ============================================================================ THE SPEC SHEET Not a scene. The one place the page is allowed to be a document, and the heading says as much. Also where the FAQ lives, which is now most of the page's indexable prose. ========================================================================= */ .apx{border-block-start:1px solid var(--rule); padding:clamp(60px,8vw,110px) var(--pad)} .apx-h{font-family:var(--mono);font-weight:500;font-size:clamp(17px,2vw,22px); letter-spacing:-.02em;color:var(--bone);margin-block:clamp(30px,5vw,56px) 12px} html[dir="rtl"] .apx-h{font-family:var(--sans);font-weight:600;letter-spacing:0} /* Free is a plan now, not a trial, so it carries the accent edge the paid cards do not. It sits above the row rather than inside it: a fourth card would make the row a maths problem instead of a choice. */ .free{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; border:1px solid var(--rule-2);border-inline-start:2px solid var(--acc); background:var(--acc-wash); padding:22px 24px;margin-block-start:clamp(22px,3vw,34px)} .free h4{margin-block-end:7px} .free .body{max-inline-size:52ch} .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);margin-block-start:20px} .plan{background:var(--ink);padding:clamp(24px,3vw,34px)} /* Inset rather than a real border: an added edge would shift the 1px grid gap and knock the three cards out of alignment. */ .plan--feat{box-shadow:inset 0 2px 0 var(--acc)} .plan-badge{color:var(--acc)} .plan-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px; flex-wrap:wrap} .plan-price{display:flex;align-items:baseline;gap:6px;margin-block:20px 12px} .plan-price b{font-family:var(--mono);font-size:clamp(32px,4vw,46px);font-weight:500; letter-spacing:-.05em;color:var(--acc)} .plan .body{max-inline-size:40ch} .plan ul{list-style:none;margin-block-start:22px;padding-block-start:20px; border-block-start:1px solid var(--rule)} .plan li{display:flex;gap:11px;align-items:flex-start;margin-block-end:11px; font-size:13.5px;font-weight:300;color:var(--ash)} .plan li i{color:var(--acc);font-style:normal;font-family:var(--mono);flex:none;line-height:1.5} .plans-scale{margin-block-start:18px;color:var(--ash)} .plans-over{margin-block-start:8px;color:var(--ash)} .plans-note{margin-block-start:18px;color:var(--ash)} .plans-custom{margin-block-start:8px} .plans-custom a{color:var(--acc);text-decoration:none; border-block-end:1px solid rgba(87,203,160,.4)} .plans-custom a:hover{border-block-end-color:var(--acc)} .faq{margin-block-start:clamp(28px,4vw,44px);border-block-start:1px solid var(--rule)} .qa{border-block-end:1px solid var(--rule)} .qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px; padding-block:20px;cursor:pointer;list-style:none} .qa summary::-webkit-details-marker{display:none} .qa summary span{font-family:var(--mono);font-size:clamp(15px,1.7vw,17px);font-weight:500; letter-spacing:-.02em;color:var(--bone)} html[dir="rtl"] .qa summary span{font-family:var(--sans);font-weight:600;letter-spacing:0} .qa summary i{position:relative;inline-size:13px;block-size:13px;flex:none} .qa summary i::before,.qa summary i::after{content:"";position:absolute;background:var(--acc); transition:transform .25s var(--ease)} .qa summary i::before{inset-block-start:6px;inset-inline-start:0;inline-size:13px;block-size:1px} .qa summary i::after{inset-block-start:0;inset-inline-start:6px;inline-size:1px;block-size:13px} .qa[open] summary i::after{transform:rotate(90deg)} .qa[open] summary span{color:var(--acc)} .qa-a{padding-block-end:24px} .qa-a .body{max-inline-size:74ch;font-size:15px;line-height:1.78} .qa summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px} /* ---- footer ---- */ footer{border-block-start:1px solid var(--rule);padding:48px var(--pad) 40px;position:relative; z-index:1} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;max-inline-size:var(--max); margin-inline:auto} .fgrid h4,.foot-cols h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--ph);margin-block-end:14px;font-weight:500} html[dir="rtl"] .fgrid h4,html[dir="rtl"] .foot-cols h4{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px} .fgrid a,.foot-cols a{display:block;font-size:13.5px;font-weight:300;color:var(--ash);text-decoration:none; margin-block-end:9px;transition:color .2s var(--ease)} .fgrid a:hover,.foot-cols a:hover{color:var(--bone)} .fbot{max-inline-size:var(--max);margin:36px auto 0;padding-block-start:14px; border-block-start:1px solid var(--rule);display:flex;justify-content:space-between; align-items:center;gap:10px 24px;flex-wrap:wrap} .social{display:flex;align-items:center;gap:2px;margin-inline:-10px} .social .meta{margin-inline:10px 4px} /* No border box: the 44px hit area comes from padding, so the row stays light while every target is still large enough to press. */ .social a{display:grid;place-items:center;inline-size:44px;block-size:44px; color:var(--ph);transition:color .2s var(--ease)} .social a:hover,.social a:focus-visible{color:var(--acc)} .social svg{fill:currentColor} .fbot a{text-decoration:none} /* ---- legal pages ---- */ .doc{position:relative;z-index:1;max-inline-size:74ch;margin-inline:auto; padding:clamp(48px,7vw,104px) var(--pad) clamp(72px,9vw,128px)} .doc h1{font-family:var(--mono);font-weight:500;font-size:clamp(30px,4.6vw,54px); letter-spacing:-.04em;margin-block:14px 10px} .doc-date{display:block;margin-block-end:34px} .doc-intro{max-inline-size:66ch;padding-block-end:34px;border-block-end:1px solid var(--rule)} .doc-s{padding-block:34px;border-block-end:1px solid var(--rule)} .doc-s h2{font-family:var(--mono);font-weight:500;font-size:clamp(17px,2vw,21px); letter-spacing:-.02em;margin-block-end:14px} .doc-s p{font-size:15.5px;font-weight:300;line-height:1.78;color:var(--ash); max-inline-size:66ch} .doc-s p+p{margin-block-start:14px} .doc-s ul{list-style:none;margin-block-start:14px;max-inline-size:66ch} .doc-s li{position:relative;padding-inline-start:22px;margin-block-end:11px; font-size:15px;font-weight:300;line-height:1.7;color:var(--ash)} .doc-s li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:11px; inline-size:9px;block-size:1px;background:var(--acc)} .doc-s strong{color:var(--bone);font-weight:500} .doc-s a,.doc-more a{color:var(--acc);text-decoration:none; border-block-end:1px solid rgba(87,203,160,.4)} .doc-s a:hover,.doc-more a:hover{border-block-end-color:var(--acc)} .doc-note{margin-block-start:34px;padding:20px 22px;border:1px solid var(--rule-2)} .doc-note .note{color:var(--ash);line-height:1.7} .doc-more{margin-block-start:30px} .foot-grid{display:grid;grid-template-columns:1.6fr 2fr;gap:34px} .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .foot-base{margin-block-start:36px;padding-block-start:20px; border-block-start:1px solid var(--rule);display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap} .foot{border-block-start:1px solid var(--rule);padding:48px var(--pad) 40px} /* ---- utilities ---- */ .u-acc{color:var(--acc)} .u-inline{display:inline} .u-mb14{margin-block-end:14px} .u-w300{max-inline-size:300px} .u-w620{max-inline-size:620px;margin-block:14px 0} /* ============================================================================ RESPONSIVE Every beat has to work in one viewport at 360 as well as 1440, so the two places that cost height, the roster grid and the receipt's two columns, collapse rather than shrink. ========================================================================= */ @media (max-width:1080px){ .fgrid{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr} } @media (max-width:900px){ .nav-links{display:none} .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cell .body{display:none} .cell{padding:12px 12px 14px} .rc-in{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,30px)} .rc-sheet{display:none} .lg-hd,.lg-row{grid-template-columns:auto 1fr 1.4fr} .lg-hd span:nth-child(3),.lg-row .s{display:none} .zoom-row{grid-template-columns:auto auto 1fr;gap:12px} .zr-s,.zr-st{display:none} .s-track{block-size:320svh} .s-title{block-size:170svh} .s-zoom{block-size:260svh} .s-team{block-size:250svh} .s-ledger{block-size:240svh} .s-receipt{block-size:190svh} .s-final{block-size:160svh} .s-zoom .dev{max-block-size:58svh; transform:perspective(1500px) translate3d(0,calc((1 - var(--re)) * 16vh + var(--ze) * -5%),0) rotateX(calc((1 - var(--re)) * 12deg)) scale(calc((.86 + var(--re) * .14) * (1 + var(--ze) * 1.05)))} .plans{grid-template-columns:minmax(0,1fr)} .bstrip{gap:10px 18px;padding-block:11px} .bstrip-in span{font-size:11px} .act{inline-size:min(86vw,860px)} .lead-hd,.lead-row{grid-template-columns:1.2fr 1fr 1.2fr} .lead-hd span:nth-child(3),.lead-row span:nth-child(3){display:none} } @media (max-width:560px){ .fgrid{grid-template-columns:1fr} .foot-cols{grid-template-columns:1fr 1fr} .team-in{padding-block-start:clamp(84px,15vh,120px)} .lg-hd,.lg-row{grid-template-columns:auto 1fr;gap:10px} .lg-hd span:nth-child(2),.lg-row .a{display:none} .free{flex-direction:column;align-items:flex-start} .fbot{justify-content:flex-start} .bstrip .meta{inline-size:100%} .btn--cta{inline-size:100%} } /* ============================================================================ REDUCED MOTION Every scene flattens into an ordinary stacked section with all of its content present and legible. main.js still sets --p to 1 so anything reading the property sees a finished scene, and every rule that consumes it is overridden below rather than left to resolve at 1, which for the title card would mean a headline scaled almost to nothing. ========================================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .scene{block-size:auto!important} .scene-pin{position:static;block-size:auto;overflow:visible; padding-block:clamp(56px,8vw,96px)} .scene-head{position:static;opacity:1;transform:none;max-inline-size:60ch; margin-block-end:26px} .hint,.spine{display:none} .title-blk,.s-title h1,.s-title .eyebrow,.handoff,.title-cta, .s-zoom .dev,.s-track .rail,.team-bg .dev,.team-instr, .team-grid,.cell,.task,.lg-wash,.lg-col,.stamp,.lg-row,.lg-note, .rc-sheet .dev,.rc-m,.rc-p,.rc-lede,.fin-in,.zoom-row{ opacity:1!important;transform:none!important} .s-title .title-in{gap:22px} .handoff{max-inline-size:40ch} .s-zoom .glow{display:none} /* The zoom's two halves both stay: the screenshot, then the row it was zooming into, one after the other. */ .zoom-row{position:static;translate:none;margin-block-start:26px; background:transparent} .s-zoom .zoom-copy{position:static;margin-block-start:22px;max-inline-size:60ch} .s-track .rail{flex-direction:column;inline-size:100%;gap:44px} .act{inline-size:100%} .team-in{display:block;padding-block:0} .team-grid,.fanout{grid-row:auto} .team-grid{margin-block:22px} .fanout{margin-block-start:22px} .team-instr p::after{display:none} .lg-in{display:block;color:var(--ink);background:var(--bone); padding:clamp(30px,5vw,56px)} .lg-cols,.lg-conns,.lg,.lg-note{margin-block-start:20px} .lg-row.dep .xw::after{transform:scaleX(1)!important} .rc-in{padding-block-start:0} .rc-prices,.rc-metrics{margin-block-start:18px} } /* generated by build.py: stagger indices */ .stg0{--i:0}.stg1{--i:1}.stg2{--i:2}.stg3{--i:3}.stg4{--i:4}.stg5{--i:5}.stg6{--i:6}.stg7{--i:7} /* FINAL TURKISH HERO CLIPPING FIX v3 */ /* The global scene engine sets .scene-pin to overflow:hidden. The title card must allow Turkish ascenders/descenders to paint outside the normal line box. Size note: the ceiling here is set by "Takım arkadaşı.", the longest hero line at 15 characters. IBM Plex Mono is monospaced at 0.6em per character, less 0.045em of tracking, so the line measures 8.32em. Against the widest container the scene allows (--max 1340px less 2x --pad 88px = 1164px) that caps the type at roughly 140px before the line wraps to a third row. 8.5rem sits just under it at every breakpoint from 768px up. Raising this without redoing that arithmetic is how the title card ends up three lines tall. */ html[lang="tr"] .s-title .scene-pin, html[lang="tr"] .s-title .scene-in, html[lang="tr"] .s-title .title-blk, html[lang="tr"] .s-title h1, html[lang="tr"] .s-title h1 .kw, html[lang="tr"] .s-title h1 .kw b, html[lang="tr"] .s-title h1 .g { overflow: visible !important; } html[lang="tr"] .s-title .scene-pin { padding-block: 4vh !important; } html[lang="tr"] .s-title h1.t-display { font-family: var(--mono) !important; font-size: clamp(2.9rem, 8.6vw, 8.5rem) !important; line-height: 1.14 !important; letter-spacing: -0.045em !important; padding-block: 0.18em 0.24em !important; max-inline-size: 16ch !important; } html[lang="tr"] .s-title h1 .kw { display: inline-block !important; vertical-align: baseline !important; padding-block: 0.10em 0.16em !important; } html[lang="tr"] .s-title h1 .kw b { display: inline-block !important; line-height: 1.14 !important; } /* GEO topic hub: same Blueprint Terminal design system as the landing page. */ .operater-topic-hub{position:relative!important;z-index:1!important;padding:clamp(72px,8vw,116px) var(--pad,5vw) clamp(84px,9vw,128px)!important;border-top:1px solid var(--rule,rgba(126,176,201,.2))!important;background:var(--ink,#06090c)!important;overflow:hidden!important} .operater-topic-hub .topic-wrap{width:min(1180px,100%)!important;margin:0 auto!important} .operater-topic-hub .topic-kicker{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 18px!important} .operater-topic-hub .topic-kicker i{width:5px!important;height:5px!important;flex:0 0 5px!important;background:var(--acc,#9fffa8)!important;display:block!important} .operater-topic-hub .topic-kicker span{color:var(--dim,#87949d)!important;font:10px/1.2 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.16em!important;text-transform:uppercase!important} .operater-topic-hub .topic-title{margin:0!important;max-width:18ch!important;color:var(--bone,#e9e7e2)!important;font:500 clamp(38px,5.7vw,72px)/.98 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:-.055em!important} .operater-topic-hub .topic-desc{max-width:680px!important;margin:20px 0 0!important;color:var(--ash,#8e9aa2)!important;font:15px/1.65 var(--sans,"IBM Plex Sans",sans-serif)!important} .operater-topic-hub .topic-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;margin-top:48px!important;border:1px solid var(--rule,rgba(126,176,201,.2))!important;background:var(--rule,rgba(126,176,201,.2))!important} .operater-topic-hub .topic-card{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;min-height:188px!important;padding:23px!important;background:var(--ink,#06090c)!important;color:var(--bone,#e9e7e2)!important;text-decoration:none!important;box-sizing:border-box!important;transition:background .2s ease,transform .2s ease!important} .operater-topic-hub .topic-card::before{content:""!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:2px!important;background:var(--acc,#9fffa8)!important;transform:scaleY(0)!important;transform-origin:top!important;transition:transform .2s ease!important} .operater-topic-hub .topic-card:hover,.operater-topic-hub .topic-card:focus-visible{background:#0a0f13!important} .operater-topic-hub .topic-card:hover::before,.operater-topic-hub .topic-card:focus-visible::before{transform:scaleY(1)!important} .operater-topic-hub .topic-card:focus-visible{outline:1px solid rgba(159,255,168,.7)!important;outline-offset:-1px!important} .operater-topic-hub .topic-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important} .operater-topic-hub .topic-card strong{max-width:29ch!important;color:var(--bone,#e9e7e2)!important;font:500 14px/1.4 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:-.015em!important} .operater-topic-hub .topic-index{flex:none!important;color:#4d565d!important;font:10px/1 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.12em!important} .operater-topic-hub .topic-card-desc{display:block!important;margin-top:13px!important;color:var(--dim,#87949d)!important;font:12.5px/1.55 var(--sans,"IBM Plex Sans",sans-serif)!important} .operater-topic-hub .topic-card-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-top:24px!important;padding-top:11px!important;border-top:1px solid var(--rule,rgba(126,176,201,.2))!important;color:#555e64!important;font:9px/1.2 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.14em!important;text-transform:uppercase!important} .operater-topic-hub .topic-card-arrow{color:var(--acc,#9fffa8)!important;font-size:14px!important} html[dir="rtl"] .operater-topic-hub .topic-title{max-width:20ch!important;font-family:var(--sans,"IBM Plex Sans Arabic",sans-serif)!important;font-size:clamp(34px,5.5vw,66px)!important;line-height:1.15!important;letter-spacing:0!important} html[dir="rtl"] .operater-topic-hub .topic-card strong,html[dir="rtl"] .operater-topic-hub .topic-kicker span,html[dir="rtl"] .operater-topic-hub .topic-card-foot{font-family:var(--sans,"IBM Plex Sans Arabic",sans-serif)!important;letter-spacing:0!important} @media(max-width:950px){.operater-topic-hub .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:620px){.operater-topic-hub{padding-block:62px!important}.operater-topic-hub .topic-grid{grid-template-columns:1fr!important;margin-top:34px!important}.operater-topic-hub .topic-card{min-height:154px!important;padding:20px!important}}