/* Rysing — new direction. Built from the design reference, not from the earlier builds. Copy is lifted verbatim from rysing-comments.html. LICENSING: Kinfolk's web licence is NOT yet cleared — resolve before production. Aileron is public domain (Sora Sagano). Qualy, the logo face, is never loaded: the wordmark ships as artwork. */ @font-face { font-family:"Kinfolk"; src:url("../rysing-assets/Kinfolk-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Aileron"; src:url("../rysing-assets/Aileron-Light.woff2") format("woff2"); font-weight:300; font-display:swap; } @font-face { font-family:"Aileron"; src:url("../rysing-assets/Aileron-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Aileron"; src:url("../rysing-assets/Aileron-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face { font-family:"Aileron"; src:url("../rysing-assets/Aileron-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; } /* --- Tokens ------------------------------------------------- */ :root { /* The four brand colours, and all four are now the guideline's own values. `rysing brand assets/Branding-Guidelines.pdf` §3.0 Color Palette sets exactly four: #F9F9F9, #000000 (CMYK 75/68/67/90), #3524D5 and #F04222. Paper, red and blue already matched it to the byte. The page black did not — it was #141414, a near-black grey, and it is now the guideline's #000000 on the client's instruction to follow the document. THIS IS NOT A COSMETIC CHANGE. Most of the shape work on this site was graded against #141414, and several comments below still argue from it: every brand pattern asset is artwork painted on an OPAQUE #000 ground, so against a #141414 page its surround read as a drawn ring and three separate masks exist to hide that. At #000 the surround and the page are the same colour and the ring cannot occur. Those masks are now solving a problem that no longer exists — see §28 before removing one, because two of them are also doing a second job that does still matter. `--ink-deep` was "darker than the page", used for the hero's ground and the menu overlay. Nothing is darker than #000, so it is the same black now. It is kept as a token rather than deleted because it still names a distinct intent — the ground a full-bleed object sits on — and because collapsing ~20 call sites would bury the colour change in noise. */ --ink:#000000; --ink-deep:#000000; --paper:#f9f9f9; --red:#f04222; --blue:#3524d5; --muted:#9a9a9a; --line:rgba(249,249,249,.14); --gutter:clamp(22px,4vw,74px); --ease:cubic-bezier(.2,.75,.2,1); /* One grade across every photograph on the page. The supplied images come from different cameras, lights and decades of client archive, and the spread between the sharp studio frames and the soft ones is the single most expensive-looking thing we can fix without a reshoot. Pulling saturation down and contrast up narrows that spread. Replacement photography drops in under the same grade, so nothing needs retuning. Deliberately not applied to the logo marquee — those marks carry their own brightness(0) invert(1) treatment. */ --photo-grade:contrast(1.07) saturate(.62) brightness(.97); --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 269.87 273.69'%3E%3Cpath d='M262.42,136.55c-12.82-.17-25.39-1.76-37.88-4.67l-20.93-5.54-13.69-5c-13.95-5.97-25.03-14.22-33.04-27.25-5.44-8.83-9.03-18.37-11.98-28.3l-5.16-20.33c-1.87-8.29-3.28-16.58-3.96-25v-.36c-.1-1.23-.19-2.45-.27-3.68-.07-1.32-.12-2.64-.15-3.97l-.24-10.68V.33s-.01-.05-.04-.09V0s-.08.01-.15.08c-.07-.06-.13-.11-.13-.08v.23s-.06.07-.06.09v1.46s-.23,10.68-.23,10.68c-.03,1.33-.08,2.65-.15,3.97-.08,1.23-.17,2.45-.27,3.68v.36c-.68,8.41-2.09,16.7-3.96,25l-5.16,20.33c-2.96,9.93-6.55,19.47-11.98,28.3-8.02,13.02-19.09,21.27-33.04,27.25l-13.69,5-20.93,5.54c-12.49,2.91-25.07,4.5-37.88,4.67l-7.45.25c.53.22,1.11.32,1.62.33l5.98.13c12.33.26,24.47,1.65,36.53,4.4l20.86,5.41,13.65,4.84c14.67,6.08,26.28,14.51,34.61,28.21,5.62,9.24,9.23,19.23,12.23,29.61l4.5,17.88c2.54,11.12,4.08,22.23,4.52,33.63l.23,10.21v1.66c0,.06.02.19.04.28,0,.13.03.33.07.3l.09-.09.09.09s.06-.17.07-.3c.03-.09.04-.22.04-.28v-1.66l.23-10.21c.44-11.4,1.99-22.51,4.52-33.63l4.5-17.88c3-10.37,6.61-20.37,12.23-29.61,8.32-13.7,19.93-22.14,34.61-28.21l13.65-4.84,20.86-5.41c12.05-2.75,24.19-4.15,36.53-4.4l5.98-.13c.51-.01,1.09-.11,1.62-.33l-7.45-.25Z'/%3E%3C/svg%3E"); } /* `.glow-soft` IS GONE, and so is `.hero-light`'s one-sided variant of it. It faded every glow to nothing before the top and bottom of its own section, which is per-section behaviour by definition — it hid the cut instead of removing it, and §27's contract removes the cut. The homepage was its last user and came over in §36; about (§31), contact (§32), process (§34) and the service page had already stopped using it. Do not bring it back. A glow that needs masking at its own edge is a glow whose box is the wrong size: give the element a box that contains the light's falloff and remap the gradient into it (§31's transform), keeping the box inside the bottom of `body` (§33). Both rules, always. Worth keeping from the old note, because it is why several glows on this site are written the way they are: the mask erased the top and bottom 15% of whatever it was applied to, so a core placed near its box's edge — the natural way to write "light entering from the corner" — was almost entirely masked away and read as a faint smudge however high its alpha went. Three glows were authored against that distortion and got brighter, not different, when it was lifted. HANDOFF §25, §31, §36. */ * { box-sizing:border-box; } /* clip, not hidden: the drifting glows are allowed to bleed off the viewport without opening a horizontal scrollbar, and unlike `hidden` this does not turn the root into a containing block for the fixed header. Sections must not clip them locally — see .stats. */ html { background:var(--ink); scroll-behavior:smooth; overflow-x:clip; } /* ONE COMPOSITING GROUP FOR THE WHOLE PAGE. This is the backdrop architecture, and it is what stops the shapes being cut into per-section pieces. Until now every section carried its own `isolation:isolate` plus its own `background`, which made each one a private group that a shape could not exist across — so each shape had to be clipped at the section edge, and the page read as a column of separate lit boxes rather than one lit page. Clipping was not only cosmetic, though. A `screen`-blended shape crossing a section edge left its isolation group, its black surround stopped cancelling, and it painted a dark halo over whatever was below — the fault the note above `.process` describes. `overflow:clip` was what hid it. Hoisting the group here removes the cause rather than the symptom: with one group for the document, a shape can never leave it, so the halo cannot come back and the clipping it justified is no longer needed. The layering is unchanged, just moved up a level. This element's background paints first; shapes at `z-index:-1` paint on top of that fill but behind all content — exactly the arrangement `.process` proved for a single section before it was converted to this one (§34). That conversion is the proof in the other direction: `.process` hosts the only `screen`-blended shape on the site, and it screens against this fill now with no halo. A section that wants to host a shape therefore needs `position:relative` and NOTHING else: no `isolation`, no `overflow:clip`, no opaque `background`. `position:relative` alone does not create a stacking context, so the shape stays anchored to the section's geometry while compositing at page level. Anchoring to the section rather than to document coordinates is deliberate — page coordinates break the moment a paragraph gets longer. `isolation` creates a stacking context but NOT a containing block for fixed positioning (only transform/filter/will-change do that), so the fixed header is unaffected. */ body { margin:0; background:var(--ink); color:var(--paper); isolation:isolate; font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:clamp(15px,1.1vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a { color:inherit; text-decoration:none; } img,video { display:block; } :focus-visible { outline:2px solid var(--red); outline-offset:4px; } /* Film grain: every branded surface in the guide carries it. Generated rather than loaded — the supplied plate is 4.3 MB and does not tile. */ body::after { content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } .skip-link { position:fixed; z-index:120; top:12px; left:12px; padding:13px 17px; background:var(--paper); color:var(--ink); transform:translateY(-180%); transition:transform .2s var(--ease); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .skip-link:focus { transform:none; } /* --- Type --------------------------------------------------- */ /* The reference's signature: the grotesque and the didone alternate inside one sentence. Kinfolk is the default voice of a headline; .alt flips a run back to Aileron. Kinfolk is caps-only by design. */ .display { font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.96; } .display .alt { font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:600; letter-spacing:-.022em; } .label { font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; } /* Alternation is a device, not a texture. Running it through all eleven headlines is what turned the page's signature move into wallpaper — if every sentence mixes faces, the mix stops meaning anything. It now appears at the three moments the page is allowed to be loud: the hero, the manifesto, and the closing ask. Every other headline sets in one face, so when the mix arrives it reads as emphasis. The markup is untouched — the .alt spans stay exactly where they are for the loud moments and simply inherit elsewhere. */ .band-head h2 .alt, .proof-title .alt, .founder-title .alt, .system-title .alt, .spot-copy h2 .alt { font-family:inherit; font-weight:inherit; letter-spacing:inherit; } /* The about page is the exception, and §14 says why: it is one continuous argument rather than eleven unrelated sections, and its designs alternate in nearly every headline. `.band-head h2 .alt` is neutralised above for the homepage's section heads; the about team head is drawn alternating, so it takes the device back. Scoped to this one head rather than lifted from the list, or the homepage's heads would light up with it. */ .about-team .band-head h2 .alt { font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:600; letter-spacing:-.022em; } /* Didone wants less air the larger it gets; a single tracking value across a 32px section head and a 152px hero leaves the hero looking loose. */ .hero-title,.manifesto h2,.closing h2 { letter-spacing:-.012em; } /* --- Header ------------------------------------------------- */ .site-head { position:fixed; z-index:20; inset:0 0 auto; height:92px; padding:0 var(--gutter); display:flex; align-items:center; gap:clamp(20px,3vw,60px); border-bottom:1px solid var(--line); } .site-head::before { content:""; position:absolute; z-index:-1; inset:0; /* Hand-written rather than var(): these are scrims with alpha, and a token cannot carry one. Moved 13,13,13 → 0,0,0 with the page black. */ background:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.34) 70%,transparent); pointer-events:none; } .wordmark { flex:none; line-height:0; } .wordmark img { width:auto; height:27px; } .head-right { display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); margin-left:auto; } /* Burger, always present. The inline nav moved into the overlay, so the header carries three things only: mark, ask, menu. */ .menu-toggle { display:grid; place-items:center; flex:none; width:46px; height:46px; border:1px solid rgba(249,249,249,.4); border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail); } .menu-toggle:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); } .menu-toggle-lines,.menu-toggle-lines::before,.menu-toggle-lines::after { display:block; width:17px; height:1px; background:currentColor; transition:transform var(--t-detail) var(--ease-detail),background var(--t-detail) var(--ease-detail); } .menu-toggle-lines { position:relative; } .menu-toggle-lines::before,.menu-toggle-lines::after { content:""; position:absolute; left:0; } .menu-toggle-lines::before { top:-5px; } .menu-toggle-lines::after { top:5px; } .menu-toggle[aria-expanded="true"] .menu-toggle-lines { background:transparent; } .menu-toggle[aria-expanded="true"] .menu-toggle-lines::before { top:0; transform:rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-lines::after { top:0; transform:rotate(-45deg); } /* --- Menu overlay ------------------------------------------- */ .menu-overlay { position:fixed; z-index:110; inset:0; width:100vw; min-height:100svh; padding:clamp(96px,12vh,130px) var(--gutter) clamp(28px,4vh,44px); background:var(--ink-deep); color:var(--paper); display:flex; flex-direction:column; justify-content:space-between; gap:40px; transform:translateX(100%); visibility:hidden; transition:transform .62s var(--ease-weight),visibility 0s .62s; } .menu-overlay.is-open { transform:none; visibility:visible; transition-delay:0s; } .overlay-close { position:absolute; top:23px; right:var(--gutter); width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid rgba(249,249,249,.4); border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail); } .overlay-close:hover { background:var(--red); border-color:var(--red); color:var(--paper); } .overlay-close svg { width:20px; height:20px; } .overlay-nav { display:flex; flex-direction:column; align-items:flex-end; } .overlay-nav a { font-size:clamp(38px,6vw,86px); line-height:1.02; transition:color var(--t-detail) var(--ease-detail); } .overlay-nav a:hover { color:var(--red); } /* The page you are already on, marked as the design marks it. Applied by the build to whichever link points at the current file, so a new page never has to hand-edit a copy of the nav. */ .overlay-nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:.14em; text-decoration-thickness:1px; } /* The stagger index. This list must cover every link in the nav, and it did not: it stopped at 6 while the nav has 7 items, so Contact fell through to `var(--i,0)` and animated in the FIRST slot, simultaneously with Home. It still faded in — it was simply at the top of the queue instead of the end of it, which against a stagger reads as the link already being there. That is the failure mode to recognise: an uncovered item does not fail to animate, it animates too early, which looks like no animation at all. Deliberately run well past the current count. A services index is expected (`HANDOFF.md` §37), which makes 8 items, and the nav is shared chrome — adding a link should not require anyone to remember this list exists. */ .overlay-nav a:nth-child(1){--i:0}.overlay-nav a:nth-child(2){--i:1}.overlay-nav a:nth-child(3){--i:2} .overlay-nav a:nth-child(4){--i:3}.overlay-nav a:nth-child(5){--i:4}.overlay-nav a:nth-child(6){--i:5} .overlay-nav a:nth-child(7){--i:6}.overlay-nav a:nth-child(8){--i:7}.overlay-nav a:nth-child(9){--i:8} .overlay-nav a:nth-child(10){--i:9} /* The links arrive one after another rather than together — the one place a stagger is allowed to be noticeable, because the panel is otherwise empty while it travels. */ .menu-overlay.is-open .overlay-nav a { animation:overlayIn .5s var(--ease-weight) both; animation-delay:calc(.14s + var(--i,0) * .045s); } @keyframes overlayIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } .overlay-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:30px; } /* Supplied artwork, keyed to white by `tools/make-award-mono.js` — the colour originals are drawn for a white background and read as three pasted stickers on this black. Nothing here can do that keying: a CSS filter cannot knock out a background, and `invert()` turns KMU's green magenta. The marks are equalised on height, not width — the three aspect ratios run 1:1 to 3.1:1, so equal width would shrink the square Meta badge to a third of the others. */ .award-lockups { display:flex; flex-wrap:wrap; align-items:center; gap:26px; } .award-lockup { display:grid; place-items:center; } /* Optical, not equal. One height for all three put KMU at roughly twice the visual mass of its neighbours — it is a two-line wordmark that fills its own box edge to edge, where the other two are seals with their own internal margin. The seals go up, the wordmark comes down. */ .award-lockup img { display:block; height:var(--h,42px); width:auto; object-fit:contain; } .award-lockup-hipe img { --h:46px; } .award-lockup-kmu img { --h:32px; } .award-lockup-meta img { --h:44px; } .social-links { display:flex; gap:9px; } .social-links a { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition:background var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail); } .social-links a:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); } .social-links svg { width:17px; height:17px; fill:currentColor; } .btn-pill { flex:none; display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 22px; border:1px solid rgba(249,249,249,.4); border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); } .btn-pill:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); } .btn-pill .arrow { width:11px; height:11px; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; transition:transform .35s var(--ease); } .btn-pill:hover .arrow { transform:rotate(90deg) scale(1.2); } @media (max-width:1080px) { /* The header is now mark + ask + burger at every width, so there is no desktop nav to hide. Only the ask collapses on the narrowest screens, where the burger already carries it. */ .btn-pill-head { display:none; } } /* --- Hero --------------------------------------------------- */ /* No video here — it moves to the section below. The ground is black with two large out-of-focus lights bleeding in from opposing corners, which is the identity's own banner composition. */ /* §27's contract: a section hosting a shape is `position:relative` and NOTHING else. All three of the forbidden things were here, and on this section they were load bearing together — removing the isolation alone would have deleted the hero's lights outright. `isolation` made .hero its own stacking context, which is the only reason its opaque background painted UNDER the z-index:-1 lights. Without it the lights join `body`'s stacking context and paint behind every in-flow box in it, .hero's own background included — so the fill had to go in the same edit or the hero would have gone black. It cost nothing: it read `--ink-deep 0 78%, --ink 100%` and §28 resolved both tokens to #000000, so it was a flat black fill painted by a gradient. `overflow:hidden` was cutting the blue disc, which reaches ~158px below this section. That cut is the thing the client asked us to stop doing. */ .hero { position:relative; min-height:100svh; padding:clamp(140px,17vh,210px) var(--gutter) clamp(48px,6vh,80px); display:flex; flex-direction:column; justify-content:flex-end; } /* No mask. This was `.glow-soft`'s one-sided variant — it faded the whole light layer out across the hero's bottom 30%, which is per-section behaviour by definition and was erasing most of the blue. The box stays `inset:0` because it is only a positioning container: it paints nothing itself, and each disc below is a radial gradient that reaches transparent well inside its own circular box, so §29's rule is satisfied per shape rather than by this element. */ .hero-light { position:absolute; z-index:-1; inset:0; pointer-events:none; /* Horizontal only, and it is NOT the section clip §27 forbids. The two discs are anchored off both sides (`right:-14vw`, `left:-18vw`), so uncut they push the root's scrollWidth to 1644 at a 1440 viewport — and `html{overflow-x:clip}` does not actually hold that: measured, `scrollTo(400,0)` still lands at scrollX=204, so the page can be pushed sideways with a trackpad into dead black. (The service page ships that today at scrollX=400; §27 recorded it as "no horizontal scrolling", which does not survive measurement. Flagged, not changed here.) Clipping the SHAPE CONTAINER rather than the section is the same distinction `.footer-light` keeps (§27): it is a clip for its own reason, not a section boundary. The cut lands exactly where the viewport already cuts — this element is `inset:0` on a full-width section — so nothing visible changes, which is §4's long-standing rule that a left/right cut at the viewport edge is invisible. `overflow-y` stays `visible` on purpose and must not become `hidden`: `clip` is the one value that does not coerce the other axis, and the blue disc reaching ~158px down into `.reel` is the whole point of the conversion. Setting `overflow:hidden` here puts the cut back. */ overflow-x:clip; overflow-y:visible; } /* THE OFFSETS ARE CAPPED AGAINST THE DISC, AND THAT IS §33'S RULE AGAIN. Each disc is sized from the viewport WIDTH (`min(72vw,1020px)`) and was offset from the viewport HEIGHT (`top:-24vh`, `bottom:-30vh`). Those two do not scale together, so at a narrow viewport the offset stays large while the disc gets small, and the light walks clean off the section: at 390px the blue sits ENTIRELY below the hero, a 242px ball floating in the top of the showreel. That was invisible until now only because the old one-sided mask reached zero at the hero's bottom edge and deleted it — the mobile hero shipped with no blue at all, which is not the composition the design draws either. Uncut, the misplacement is what you see. §33 names the general form of this: cap both or neither. So each offset is capped against the disc's own diameter, held in `--d`. The multipliers are read off the authored desktop values rather than chosen — at 1440x900, 24vh/1020px = .212 and 30vh/860px = .314 — so where the viewport is tall enough for the vh term to win, which is every desktop and laptop size, the result is EXACTLY what it was. The cap only engages where the disc has shrunk, which is where it was broken. Verified unchanged to 0px at 1440 and 1920, and the light back inside the hero's lower-left corner at 360 and 390. */ /* THE ORANGE IS A REAL ELEMENT AND THE BLUE IS STILL A PSEUDO, which looks like an inconsistency and is the whole §48 change. The orange now parts for the cursor (`pattern-stars.js`, variant E of the playground — HANDOFF §47, §48). The script needs the disc to be three things at once: the lattice's GEOMETRY ANCHOR, so the glow it builds is this gradient's box and not a second statement of the same clamps (§33); the FALLBACK, left on the page untouched if the script never runs or the canvas never gets a context; and something it can hide once it is actually running. A pseudo-element can be none of them — it has no node to measure, no node to carry `data-stars-disc`, and `.hero-light::before` cannot be read by `getBoundingClientRect`. So `::before` is gone and `.hero-disc--orange` carries exactly what it carried, declaration for declaration, including the drift. The blue is untouched and stays a pseudo: nothing is pointed at it, and converting it too would be a change with no reason behind it. The authored stops are ALSO restated in `pattern-stars.js`'s `profile()`, because neither a shader nor a per-mark alpha can sample a CSS gradient. That is the one duplicated geometry in this effect and it is duplicated because there is no way not to: CHANGE THE STOPS HERE AND CHANGE THEM THERE, then re-run the fidelity measurement in §48. */ /* `content` is NOT in the shared declaration. A string `content` on a real element is invalid rather than inherited-harmless, and the one browser that ever decides to honour it would blank the node. The pseudo declares its own. */ .hero-light::after { content:""; } .hero-light::after,.hero-disc { position:absolute; aspect-ratio:1; border-radius:50%; filter:blur(30px); width:var(--d); } /* THE STOPS CARRY THE BRAND ORANGE AT FULL STRENGTH — §50. The client read this glow as "a dull orange, not her brand orange". It was never the wrong colour: measured at the core it ran #cc361a against the brand's #f04222 — hue 9.4deg against 9.3, saturation 87% against 86%, and a PEAK CHANNEL OF 204 AGAINST 240. Identical hue, 85% of the brightness. That is §25's finding a third time: the colour is right and the luminance is not, and the eye reports the shortfall as the wrong colour. Two things were taking it down and both are in this one declaration. The core was authored at `.95` alpha over black, which is 228 before anything else happens; and the old stops began falling IMMEDIATELY from the centre, so the 30px blur had no plateau to work with and pulled the peak down again to 204. The stops below hold full strength across the middle fifth and then fall, which gives the blur something flat to spread and lands the core on the brand value. THE SAME STOPS ARE RESTATED IN `pattern-stars.js`'s `profile()` and in the playground's `.pp-oglow`. A canvas cannot sample a CSS gradient, so there is no way to have one copy; §48 flagged it as the one duplicated geometry in this effect. CHANGE ONE AND CHANGE ALL THREE, then re-run `tools/measure-fidelity.js` — the blob field is calibrated against this gradient and silently stops matching it otherwise. */ .hero-disc--orange { --d:min(72vw,1020px); top:calc(-1 * min(24vh, var(--d) * .212)); right:-14vw; background:radial-gradient(circle at 50% 50%,rgba(240,66,34,1),rgba(240,66,34,.98) 18%,rgba(240,66,34,.62) 40%,rgba(240,66,34,.12) 64%,transparent 76%); animation:driftA 28s var(--ease) infinite alternate, heroBreathe 8s var(--ease) infinite; } /* Hidden only once the field is built and painted, which is §45's arrangement: every early return in the script leaves the authored gradient on the page. The canvas inherits the same `driftA`, so the ambient motion the client asked for survives the swap (`.rs-blobs` below). */ .hero.is-stars .hero-disc--orange { opacity:0; } .hero-light::after { --d:min(62vw,860px); bottom:calc(-1 * min(30vh, var(--d) * .314)); left:-18vw; background:radial-gradient(circle at 50% 50%,rgba(53,36,213,.95),rgba(53,36,213,.5) 38%,rgba(53,36,213,.08) 62%,transparent 74%); animation:driftB 35s var(--ease) -11s infinite alternate; } @keyframes driftA { to { transform:translate3d(-3%,4%,0) scale(1.08); } } @keyframes driftB { to { transform:translate3d(4%,-3%,0) scale(1.07); } } /* =========================================================================== THE HERO'S BREATH — §53 The client asked for the orange to "move a tiny bit, smoothly". It already did: `driftA` has translated and scaled this glow by a few per cent for twenty-eight seconds since long before she asked. MEASURED, THAT MOTION CHANGES AT MOST 2 LEVELS OF PIXEL OVER EIGHT SECONDS (`tools/probe-drift.js`), which is not a subtle effect — it is an absent one. THE REASON IS THE SHAPE, NOT THE AMOUNT, and it generalises to every glow on this site: A BLURRED RADIAL FIELD HAS NO EDGE TO TRACK. Sliding a featureless gradient sideways moves almost no pixel anywhere, because every pixel's neighbour is nearly the same colour. Displacement is the wrong lever for soft light. LUMINANCE IS THE RIGHT ONE — the eye reads a large field getting brighter and dimmer immediately, which is the same sensitivity §50 ran into from the other side when 85% brightness was reported as "the wrong colour". So the breath is opacity, on its own clock, running alongside the drift rather than replacing it. Two animations on one element is fine here BECAUSE THEY TOUCH DIFFERENT PROPERTIES — `transform` and `opacity` compose; two keyframes both writing `transform` would not, the last would simply win. IT ONLY EVER DIMS. §50 spent a cycle getting this core to the brand's own 240, so the keyframe holds 1 at both ends and takes the trough down, never up: the authored peak is still the brightest this glow ever gets, and `--breathe` is the one number to tune. Measured peak-to-trough across the hero with `tools/probe-drift.js`, drift held still: 1 0 levels 0% of the hero (no breath — the state before §53) .97 4 levels 13% .95 5 levels 27% .93 6 levels 33% <- shipped .90 8 levels 40% RATE MATTERS MORE THAN SWING, which is the part that was got wrong first time. A slow luminance change is noticed by how fast it moves, not by how far it eventually travels, so the period is half of the setting. .93 over 13s shipped at 0.92 levels per second and the client still could not tell it was moving. .88 over 8s is 2.25 — about two and a half times the rate for one and a half times the swing. THE TROUGH IS THE CONSTRAINT, NOT THE PEAK. §50 found that this glow at 85% of its brightness gets reported as "a dull orange, not her brand orange". That was a STATIC 85%, and this returns to 100% every four seconds, but it is why the dim stops at 12% rather than buying visibility with a deeper trough: deepening it walks straight into a complaint this project has already had twice. Raise the RATE before the amplitude if it is still not enough. BOTH THE CANVAS AND THE FALLBACK DISC CARRY IT, so the hero breathes identically whether or not the lattice built. */ @keyframes heroBreathe { 0%,100% { opacity:1; } 50% { opacity:var(--breathe,.88); } } /* =========================================================================== THE LATTICE THAT PARTS FOR THE CURSOR — §48 --------------------------------------------------------------------------- Two things on the site run `pattern-stars.js`: the homepage hero's ORANGE, rebuilt as a field of soft blobs on a canvas (`.rs-blobs`, variant E of the playground), and the FOOTER LOCKUP on every page, ringed by brand marks that get out of the cursor's way (`.rs-star`, variant C). Both are the same physics driving different marks — HANDOFF §46, §47, §48. These rules are here rather than in the playground page because they are now shared by three documents. The playground's own `.pp-*` hero copies stay where they are: those exist so that experimenting on the hero's SHAPES cannot reach the homepage, and that reason has not changed. THE FIELD LAYER IS ALWAYS `pointer-events:none` AND THE LISTENER IS ALWAYS ON THE SECTION. §44's sixth finding: a listener bound to a shape layer here receives nothing at all and throws no error while doing it. It broke twice. =========================================================================== */ .rs-field { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } /* THE HERO'S FIELD MUST NOT CLIP, and this is the same argument as the padding on the script's `CLIP` clamp — the other half of it. `overflow:hidden` on a field carrying `filter:blur(30px)` clips first and blurs second, so the orange would be faded to nothing along the hero's own top edge: a soft cut 30px inside the viewport, where the authored gradient ran on upward off screen. The canvas is already trimmed to the section plus a blur's margin by the script, and `.hero-light` still clips the horizontal, so there is nothing left for this to clip but the margin that exists to be sampled. `z-index` goes too: `.hero-light` is already `z-index:-1`, and a stacking context here would lift the canvas over the headline. */ .hero .rs-field { overflow:visible; z-index:auto; } /* The outer box carries ONLY the per-frame translate. Scale, rotation and the twinkle are on the inner ``, so the thing written a few hundred times a frame is one short transform and nothing else needs rebuilding with it. NO `will-change`. It reads as the obvious optimisation for an element whose transform changes every frame and at this scale it is the opposite: it forces a permanent composited layer per mark. Measured at 1440x900, taking it off moved the playground's variant C from 33.3ms a frame to 16.7. The browser promotes a transforming element on its own and un-promotes it when it stops. */ .rs-star { position:absolute; } .rs-star > b { display:block; width:100%; height:100%; background:rgba(249,249,249,.9); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; opacity:var(--o); animation-name:rsTwinkle; animation-iteration-count:infinite; animation-timing-function:var(--ease); animation-direction:alternate; } /* Red is SCARCE here, roughly one mark in seven. §11's rule about rationing the red applies to a pattern more than to anything else, because a pattern repeats whatever it is given. */ .rs-star > b.is-red { background:var(--red); } @keyframes rsTwinkle { to { opacity:calc(var(--o) * .42); } } /* THE BLOB FIELD IS ONE CANVAS, NOT HUNDREDS OF ELEMENTS, and that is the most expensive thing §47 learned. Built as DOM first — several hundred overlapping soft layers six gaps wide — it cost 183ms a frame against 16.7 for star marks, and halving everything only got it to 67ms. The DOM is not the wrong tool by a constant there, it is the wrong tool. `left`/`top`/`width`/`height` are all written by the script: the canvas is sized to the DISC rather than to the section, so the hero's orange does not pay for the 37% of itself that hangs off the top and right of the viewport. ON THE HERO IT CARRIES THE HERO'S OWN DRIFT. The glow it replaces animated under `driftA`, ambient motion is half of what the client asked for (§44), and the keyframe is percentages of the element's own box — which is now this canvas, laid out as the disc's box. So the same keyframe is the same motion. The script reads the pointer through this element's rendered rect, which is what keeps the gap under the cursor while the whole field drifts; see `point()` for why that is exact rather than approximate. THE DRIFT IS SCOPED TO `.hero` AND MUST STAY SCOPED. The playground's variant E is the calibration rig for this glow — §47 measures it against the authored gradient by screenshot difference — and §47's measuring note says to pause the drift before taking any before/after pair. A drift inherited there would quietly invalidate the one measurement that says this is still the hero's light. */ .rs-blobs { position:absolute; left:0; top:0; } .hero .rs-blobs { animation:driftA 28s var(--ease) infinite alternate; } /* The breath sits on the FIELD rather than the canvas so that one rule covers the whole layer whatever the marks are — §53. A COST ARGUMENT WAS WRITTEN HERE AND THE MEASUREMENT KILLED IT, which is worth leaving in place. The hero runs `BLUR:30` as `filter:blur(30px)` on this element, and animating opacity on the canvas INSIDE it looked like it had to re-run that blur every frame — the acceptance run had just printed 16.7ms at 1920 against §50's 11.3, which fitted perfectly. It was not true. `tools/ab-breathe.js` turns the breath off and leaves `driftA` running: 16.80ms with it and 16.81ms without, and at 1440 the OFF case measured HIGHER than the ON case. The breath is free in either position, and the gap against §50 is this harness on this day, not a regression. §50's numbers came from another session and are not a baseline you can diff against — measure the same page both ways instead, which costs one minute. */ .hero .rs-field { animation:heroBreathe 8s var(--ease) infinite; } /* NO CSS BLUR HERE. `BLUR` is applied by the script to the FIELD, one layer up, so it blurs the composed cloud rather than each sprite. */ /* The script does not start its loop at all under reduced motion, so the lattice is laid out and left still; these two are the decorative layers on top of that. */ @media (prefers-reduced-motion:reduce) { .rs-star > b,.hero .rs-blobs,.hero .rs-field { animation:none; } } .hero-eyebrow { margin:0 0 auto; text-align:right; } /* The reference sets 6 words; this headline is 23. The opening clause keeps the poster scale and alternation, and the qualifier that follows drops to a supporting line — the full sentence is intact, the hierarchy does the work. */ .hero-title { margin:0; max-width:13ch; font-size:clamp(46px,8.6vw,152px); } /* Keeps the closing phrase together so it wraps as a unit instead of leaving "and" stranded at the end of the previous line. */ .hero-title .keep { white-space:nowrap; } .hero-title .tail { display:block; margin-top:clamp(18px,2.2vw,34px); max-width:46ch; font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300; font-size:clamp(15px,1.45vw,21px); line-height:1.5; letter-spacing:.01em; text-transform:none; color:rgba(249,249,249,.78); } .hero-title em { font-style:normal; } /* --- Showreel ----------------------------------------------- */ /* A contained player in normal document flow, on client instruction, after the reference they sent. THE STAR STAYS, AND SO DOES SCROLL DRIVING IT. What went is only the scroll-jacking: the reel used to be a 260vh section with a sticky full-viewport stage, which held the viewport for two and a half screens. That pin is what the client asked to lose — not the opening, and not the scroll link. The two were never actually joined. The pin existed to MANUFACTURE scroll distance, but the frame already travels a screen's worth on its own just by rising through the viewport, and that travel is the progress source now. The page scrolls at its natural speed and the star opens as the frame comes up. Same mark, same 27%->620% range, same `1-(1-p)^2.6` curve as the original, same grade riding along. The frame around it is contained now, after the reference the client sent: inset from the page, 16:9, soft corners. The star opens INSIDE that frame rather than across the whole viewport. */ .reel { position:relative; /* Inset well past the page gutter — the whole point of the change is that it reads as an object ON the page rather than a full-bleed backdrop. The max-width then stops it growing back to near-full-bleed on very wide screens, where a vw inset alone keeps a constant ratio and the frame creeps wider in absolute terms than anything else on the site. */ padding:clamp(34px,5vh,70px) clamp(20px,12vw,300px) clamp(56px,7vh,110px); } .reel-stage { position:relative; max-width:1340px; margin-inline:auto; } /* No `overflow:hidden` on the section and none on the stage. The hero's blue disc reaches ~158px down into the top of this section and fades out there — see the hero notes above — and a clip at this boundary cuts it flat. The rounded corners are clipped on the frame itself, which the disc is behind and never enters. */ .reel-frame { position:relative; overflow:hidden; aspect-ratio:16 / 9; border-radius:clamp(9px,.9vw,17px); /* MIN is 27 — raised from 16, then 22, on instruction, purely as a size decision. It is the starting value here too, so the star is already the right size before any scroll handler has run. */ -webkit-mask:var(--mark) center / calc(var(--aperture,27) * 1%) no-repeat; mask:var(--mark) center / calc(var(--aperture,27) * 1%) no-repeat; } /* Once the star has opened past the frame the mask and the grade are both no-ops, but the compositor still re-rasterises a masked, filtered video on every frame of playback — which cost the reel about a fifth of its playback rate when this was full-viewport. Shedding both is identical to look at and hands the frames back to decoding. */ .reel.is-revealed .reel-frame { -webkit-mask:none; mask:none; } .reel.is-revealed .reel-frame video { filter:none; } .reel-frame video { display:block; width:100%; height:100%; object-fit:cover; /* A light hold on the footage through the middle of the opening, gone by the time the star is no longer the subject. Driven by the same scroll progress, and clearing well ahead of the aperture — see the handler. */ filter:brightness(calc(.72 + .28 * var(--reel-progress,0))) saturate(calc(.6 + .4 * var(--reel-progress,0))); } .reel-bar { position:absolute; z-index:2; inset:auto clamp(16px,2vw,30px) clamp(16px,2vw,28px); display:flex; align-items:flex-end; justify-content:space-between; gap:20px; pointer-events:none; } .reel-bar span { color:rgba(249,249,249,.6); } .reel-toggle { pointer-events:auto; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(249,249,249,.75); border-radius:50%; /* The reel cuts between white cards and dark footage, so the control carries its own ground rather than trusting the frame behind it. */ background:rgba(0,0,0,.62); color:var(--paper); cursor:pointer; transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease); } .reel-toggle:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); } .reel-toggle svg { width:15px; height:15px; fill:currentColor; } /* The frame is tall at phone widths once it is inset and 16:9, so the inset drops back to roughly the page gutter there. */ @media (max-width:640px) { .reel { padding-inline:var(--gutter); } .reel-bar { inset:auto 14px 14px; } } /* Both of these must switch the mask off explicitly. The frame HOLDS at the small star by default and only the animation opens it, so anywhere the animation does not run the reel would otherwise sit as a 27% star forever — the failure mode is the whole video missing, not a missing flourish. */ @media (prefers-reduced-motion:reduce) { .reel-frame { -webkit-mask:none; mask:none; } .reel-frame video { filter:none; } /* `.hero-light::before` USED TO BE THE ORANGE AND IS NOT THE ORANGE ANY MORE — it is a real element, `.hero-disc--orange`, so this rule had stopped covering it and the glow kept drifting and now breathing under reduced motion. It only showed when the lattice did NOT build, since `.hero .rs-blobs` is covered separately, which is why it survived. */ .hero-disc--orange,.hero-light::after { animation:none; } } .no-js .reel-frame { -webkit-mask:none; mask:none; } .no-js .reel-frame video { filter:none; } /* --- Stats ------------------------------------------------- */ /* The reference sets these as four oversized didone numerals on black, with soft red light drifting behind them. The figures carry the section; the labels stay small and quiet underneath. */ .stats-light { display:none; } .stats { /* No overflow:hidden — clipping a soft glow leaves a hard edge at the section boundary. The page is one continuous black, so the light is allowed to bleed past the section the way the reference's does. No `isolation` either (§27): this section hosts no shape of its own — `.stats-light` is `display:none` — but an isolating box is a floor that a neighbour's light cannot be composited across, and the point of the conversion is that the page has exactly one compositing group. */ position:relative; padding:clamp(80px,8.5vw,160px) var(--gutter) clamp(110px,12.5vw,230px); } /* The stats glow is gone. Red and blue were appearing as large blurred haze in three separate places, which is a generic gradient treatment and the opposite of decisive. They now bookend the page only — hero and footer — so the middle of the page is clean black and the colour means arrival and departure rather than atmosphere. Removing it also retires the 4px horizontal overflow it caused. */ /* Four equal columns, as the reference sets them. A hierarchy was tried here and reverted: leading on "35+" made the smallest figure the loudest, which fought the numbers themselves. An even row reads as a ledger — stated once, confidently, without a pitch. */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,4vw,70px); } /* Kinfolk is a didone and sets very wide, so the row read loose and thin against the reference. Tighter tracking pulls the figures in, a hairline stroke adds weight the family has no bold cut for, and the size comes down nearer the reference's 76px. */ .stat strong { display:block; font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-weight:400; font-size:clamp(40px,5.3vw,84px); line-height:.88; letter-spacing:-.035em; -webkit-text-stroke:.7px currentColor; } /* Only while counting: proportional figures reflow as digits are added, and a number that shuffles sideways undoes the point of animating it. */ .stat strong.is-counting { font-variant-numeric:tabular-nums; } .stat span { display:block; margin-top:clamp(10px,1.2vw,18px); max-width:24ch; color:var(--muted); font-size:clamp(12px,.95vw,14px); line-height:1.45; } @media (max-width:860px) { .stats-grid { grid-template-columns:repeat(2,1fr); row-gap:clamp(34px,6vw,54px); } } @media (prefers-reduced-motion:reduce) { .stats-light span { animation:none; } } /* --- Services ---------------------------------------------- */ /* Two columns: an oversized numeral on the left, everything else on the right. Closed rows show the numeral alone — the reference hides the name until the row opens, so the list reads as four huge figures. */ .system { padding:clamp(92px,10vw,180px) var(--gutter) clamp(54px,5.6vw,96px); } .system-head { margin:0 0 clamp(44px,6vh,80px); } .system-title { margin:0; max-width:20ch; font-size:clamp(38px,5.4vw,76px); } .system-meta { margin:clamp(20px,2.6vh,34px) 0 0; max-width:40ch; color:var(--paper); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.5; } /* Separator is drawn, not written, so no character is added to the copy. */ .system-meta .sep::before { content:"\00b7"; margin:0 .5em; } .system-list { border-top:1px solid var(--line); } /* The numeral sits beside the whole row, not inside the button. When it lived in the button it set that row's height, so an open row showed the name, then ~170px of dead air, then the detail. Now a closed row is still numeral-tall and an open one flows tight under the name. */ .system-item { position:relative; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,4vw,70px); align-items:end; /* NO BOTTOM PADDING ON THE ROW. The numeral is cut off BY the rule, so it has to reach it; the gap the name needs is carried by `.system-body` instead. One value cannot be both the name's breathing room and the numeral's reach to the rule — they pull opposite ways. */ padding:clamp(34px,3.6vw,64px) 0 0; /* The whole row toggles, numeral included — see the click handler. */ cursor:pointer; } .system-toggle { width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; } /* The reference sets these in the hairline grotesque, not the didone. The didone's thick/thin at 260px fought the headline above it, and the -.16em pull sliced the tops and tails of the glyphs against the row hairlines, which read as a clipping bug rather than a crop. */ .system-num { display:block; font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300; /* Client reference: the numeral is larger than the row that holds it and runs up over the hairline into the row above. Two pieces make that work and both are needed: 1. The SIZE is set past what the old padding allowed. 186px fitted comfortably inside the row, which is why the numerals read as a column of labels rather than the subject of the section. 2. The BOX is shorter than the glyph, by negative margins. They take the overflow out of the grid's height calculation, so the row does not grow to contain the numeral — the glyph runs to the hairline instead of the row backing off to clear it. Remove them and every row gets ~60px taller and the tension goes. MEASURED LIMIT, do not raise the top margin past about -.12em. The numerals are bottom-anchored, so an upward bleed runs into the BOTTOM of the numeral in the row above, not into empty space. At -.26em the glyphs overlapped by 43px on every pair of rows and 03/04 collided outright. The reference does not overlap either: its numerals are contained and simply sit tight on their rule. Weight stays Light on instruction: the reference is thinner than this and the client does not want it thinner. THE COEFFICIENT IS MEASURED OFF THE REFERENCE, not chosen. A shut numeral there is 185px of ink on a 1210px page — 15.3% of the width, which is a ~21vw type size. The first pass used 15.5vw and the client's answer was "where is the change?", from a 1000px window where that is 155px against the old 115px. At the cap it looked right; at the width she was actually using it was a 35% bump and read as nothing. Measure the proportion, then check it at the width in use, not at the cap. */ font-size:clamp(118px,21vw,356px); line-height:.72; letter-spacing:-.04em; /* THE NUMERAL IS CUT OFF BY THE ROW RULE. The lower part of every glyph is not drawn — the row ends and the numeral ends with it, mid-stroke. This is the effect, and it is the one thing the client was asking for through three rounds of it being read as "make them bigger". IT IS A CLIP, NOT AN OVERFLOW. Everything before this tried to make the glyph reach further — past the rule, into the next row — and the answer was always no. The glyph does not travel at all: the BOX is shortened to `--cut` and `overflow:hidden` throws the rest away, so the bottom of the box lands on the rule and the digit is sliced there. THE CLIP CANNOT GO ON THE ROW. `.system-item` paints §42's blue fill from a pseudo-element pulled out past the gutter to the viewport edges, and `overflow` on the row would cut that back to the row's own width — a hidden value on one axis forces the other to `auto`, so there is no "vertical only". Clipping the numeral itself is what keeps the blue full-bleed. `--cut` is the visible slice as a fraction of the line box, so it scales with the type and is the one number to tune. The line box is .72em, so .46em shows about two-thirds of the digit. */ --cut:.46em; align-self:end; height:var(--cut); overflow:hidden; margin:0; } /* A shut row carries its name at display size — it is the headline of that stage. Opening it demotes the name to a label so the detail underneath becomes the subject, which is the whole gesture of the row. */ .system-name { margin:0; font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:clamp(30px,4.4vw,64px); line-height:1.04; text-transform:uppercase; letter-spacing:-.025em; transition:font-size .45s var(--ease),letter-spacing .45s var(--ease); } /* The name's clearance from the rule now lives here rather than on the row, so the numeral can reach the rule. */ .system-body { padding-bottom:clamp(12px,1.3vw,22px); } .system-item.is-open { align-items:start; } .system-item.is-open .system-body { padding-bottom:clamp(30px,3.2vw,56px); } /* THE OPEN ROW SHOWS ITS NUMERAL WHOLE, which is how the client's reference has it: the cut rows are the shut ones, and the open stage is complete. It also has to be — the open row's cut would land nowhere near its own rule, because the detail makes that row several times taller than the numeral, so the digit would be sliced in mid-air. */ .system-item.is-open .system-num { align-self:start; height:auto; overflow:visible; } .system-item.is-open .system-name { font-size:clamp(21px,2.3vw,34px); letter-spacing:-.012em; } .system-symbol { position:relative; flex:none; width:38px; height:38px; margin-top:6px; display:grid; place-items:center; border:1px solid rgba(249,249,249,.34); border-radius:50%; /* Always present now that the whole row is the control — it is the only thing saying the row opens. */ opacity:.5; transition:opacity .35s var(--ease),border-color .3s; } .system-item:hover .system-symbol, .system-item.is-open .system-symbol { opacity:1; } .system-symbol::before,.system-symbol::after { content:""; position:absolute; width:13px; height:1px; background:currentColor; transition:transform .35s var(--ease); } .system-symbol::after { transform:rotate(90deg); } .system-item.is-open .system-symbol::after { transform:rotate(0); } /* The open row stands on brand blue, on client instruction. Three things make it read as a band of the page rather than a card that appeared: 1. It FULL-BLEEDS. The fill is a pseudo-element pulled out to the viewport edges past the section gutter, so the colour runs edge to edge and the row looks like a stripe through the list. Boxed inside the gutter it read as a panel floating on black. 2. It WIPES, it does not fade. scaleY from the top origin on the same duration and curve as the panel's own growth, so one gesture: the ground arrives under the detail at exactly the speed the detail opens. A cross-fade here looked like a hover state misfiring. 3. It carries NO radius and NO shadow. The row hairlines stay the only edges in the section. Closing one row while opening another runs a scale-out against a scale-in, which reads as the blue handing off down the list. That is why the fill is per-row and not one shared element that travels. */ .system-item::before, .system-item::after { content:""; position:absolute; z-index:0; top:0; bottom:0; left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1); background:var(--blue); pointer-events:none; transform:scaleY(0); transform-origin:top; } .system-item::before { opacity:0; } /* Closed rows get the same colour at a whisper on hover — the fill then looks like it was already there waiting, rather than switched on. */ .system-item::after { opacity:0; transition:opacity var(--t-detail) var(--ease-detail),transform var(--t-detail) var(--ease-detail); } .system-item:hover::after { opacity:.09; transform:scaleY(1); } .system-item.is-open::after { opacity:0; } .system-item.is-open::before { opacity:1; transform:scaleY(1); } /* Content has to sit above the fill. The numeral and body are the row's only two children — see the grid above. */ .system-num,.system-body { position:relative; z-index:1; } /* On blue, the paper-alpha hairlines and the grey label go muddy, which makes the open row look lower-contrast than the closed ones above it. The open row should be the loudest thing in the section, so lift them. */ .system-item.is-open .system-tags li { border-color:rgba(249,249,249,.52); } .system-item.is-open .system-outcome span { color:rgba(249,249,249,.78); } .system-item.is-open .system-for::before { border-color:rgba(249,249,249,.85); } .system-item.is-open .system-symbol { border-color:rgba(249,249,249,.6); } .system-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); } .system-item.is-open .system-panel { grid-template-rows:1fr; } .system-panel > div { overflow:hidden; } .system-detail { padding-top:clamp(26px,2.6vw,44px); } .system-for { display:flex; gap:12px; margin:0 0 clamp(26px,3.4vh,42px); max-width:44ch; color:var(--paper); font-size:clamp(13px,1.1vw,17px); line-height:1.5; } .system-for::before { content:""; flex:none; width:9px; height:9px; margin-top:.5em; border:1px solid rgba(249,249,249,.65); border-radius:50%; } .system-outcome span { display:block; margin-bottom:12px; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; } .system-outcome p { margin:0 0 clamp(26px,3.4vh,42px); font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-size:clamp(18px,1.9vw,30px); text-transform:uppercase; letter-spacing:.03em; line-height:1.2; } .system-tags { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; } .system-tags li { padding:10px 17px; border:1px solid rgba(249,249,249,.3); border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; } @media (max-width:820px) { /* Stacked, the numeral sits ABOVE its name rather than beside it, so an upward bleed would run into the row above with nothing alongside it to read against. The overflow is cut back to a crop at the top rule only and the row goes back to top alignment. */ .system-item { grid-template-columns:1fr; gap:14px; align-items:start; } /* No bottom pull here. Beside the name it buys tightness against the row rule; above the name it eats the gap instead — measured at 0px clear at 620 and 768, where the name was touching the numeral's descender line. */ /* NO CUT STACKED. The numeral sits above its own name, nowhere near the row rule, so there is no edge for it to be cut against — sliced there it reads as a rendering fault rather than a crop. */ .system-num { font-size:clamp(96px,27vw,170px); align-self:start; height:auto; overflow:visible; margin:-.14em 0 0; } } @media (prefers-reduced-motion:reduce) { .system-panel { transition:none; } /* The fill still has to appear — it is state, not decoration — so the wipe is dropped and the colour is simply there. */ .system-item::before,.system-item::after { transition:none; transform:scaleY(1); } .system-item::before { opacity:0; } .system-item.is-open::before { opacity:1; } } /* --- Shared editorial primitives ---------------------------- */ /* Everything below the services list sits on the same black ground. The reference never cuts to a light panel, so neither does this: the only colour that interrupts the page is the red scribble, the red marks in the marquee and the blue behind one word. */ /* The quiet baseline. Most sections now sit closer together than they did, which is what buys the room for the two moments that open right out. An even rhythm across fourteen sections is what made the page read flat: when everything is spaced like a feature, nothing is one. */ /* Breathing room top and bottom, so a section owns its own space instead of being separated only by the one above it ending. Sized in vw, not vh: the previous clamp pinned to its 72px floor on any viewport under ~1350px tall, which is most laptops — the page was crowded for the people most likely to be reading it. Section rhythm should follow the measure. */ .band { padding-inline:var(--gutter); padding-block:clamp(60px,6.8vw,114px); } /* The header is fixed at 92px, so every in-page link would otherwise land its heading underneath it. */ :is(section,footer)[id] { scroll-margin-top:112px; } .band-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px,4vh,40px); } .band-head h2 { margin:0; font-size:clamp(32px,3.7vw,54px); } .band-note { max-width:46ch; color:rgba(249,249,249,.85); font-size:14px; line-height:1.6; } .eyebrow { display:block; margin:0 0 clamp(20px,3vh,28px); } .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* --- Entrance -------------------------------------------- */ /* Restrained on purpose: 14px of travel and a long settle, never a slide or a bounce. The point is that content arrives composed rather than that anything is seen to move — if the animation is legible as an animation it has already failed at this price point. The hidden state is applied by script (.reveal-ready) rather than sitting in the stylesheet, so a failed or slow script can never leave the page blank, and there is no flash of hidden content before JS runs. */ .reveal-ready [data-reveal] { opacity:0; transform:translateY(14px); } .reveal-ready [data-reveal].is-in { opacity:1; transform:none; transition:opacity .95s var(--ease-weight),transform .95s var(--ease-weight); transition-delay:calc(var(--i,0) * 65ms); } /* The hero is the only thing that moves on load rather than on scroll, and it travels further because nothing has been established yet to disturb. */ .hero-eyebrow,.hero-title { animation:heroIn 1.15s var(--ease-weight) both; } .hero-title { animation-delay:.1s; } @keyframes heroIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .reveal-ready [data-reveal] { opacity:1; transform:none; transition:none; } .hero-eyebrow,.hero-title { animation:none; } .menu-overlay { transition:none; } .menu-overlay.is-open .overlay-nav a { animation:none; } } /* --- Craft layer -------------------------------------------- */ /* Motion had one duration and one curve on everything, which reads as a default rather than a decision. Weight should move slowly, detail should move quickly — that difference is most of what makes an interface feel considered rather than assembled. */ :root { --ease-weight:cubic-bezier(.16,1,.3,1); /* large masses, long settle */ --ease-detail:cubic-bezier(.3,.7,.2,1); /* small elements, crisp */ --t-weight:.72s; --t-detail:.22s; } .system-panel { transition:grid-template-rows var(--t-weight) var(--ease-weight); } /* The blue fill is weight, not detail — it moves with the panel it grounds. Opacity is deliberately shorter than the transform: the colour is fully present early and the wipe finishes under it, so the row never looks like it is still deciding. */ .system-item::before { transition:transform var(--t-weight) var(--ease-weight),opacity .3s var(--ease-detail); } .system-name { transition:font-size var(--t-weight) var(--ease-weight),letter-spacing var(--t-weight) var(--ease-weight); } .btn-pill { transition:background var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail); } .btn-pill .arrow { transition:transform var(--t-detail) var(--ease-detail); } /* Testimonials. The rail is the weight and moves on its own long curve; the controls are detail and snap. */ .treel-step { transition:background var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail); } /* --- Selected work ------------------------------------------ */ /* A hand-set gallery, not a grid: six panels of deliberately unequal width and vertical offset. Widths total 94% per row and the 2% column gap makes up the rest, so the row fills the measure exactly. */ /* Rows of three. Each row declares its own column proportions and its own vertical offsets, so three rows of the same count never read as a repeated template. The wide column is the one that carries film. */ .work-row { display:grid; gap:clamp(18px,2.4vw,40px); align-items:start; margin-bottom:clamp(40px,5.5vw,96px); } .work-row:last-of-type { margin-bottom:0; } .work-row--a { grid-template-columns:0.78fr 1.5fr 0.92fr; } /* Row B runs landscape, narrow portrait, tall portrait — three different shapes rather than one frame repeated, with the right-hand panel the largest so the row has somewhere to land. */ .work-row--b { grid-template-columns:1.55fr 0.95fr 1.6fr; } .work-row--a > :nth-child(1) { margin-top:clamp(28px,4vw,76px); } .work-row--a > :nth-child(3) { margin-top:clamp(10px,1.4vw,26px); } .work-row--b > :nth-child(1) { margin-top:clamp(12px,1.7vw,32px); } .work-row--b > :nth-child(2) { margin-top:clamp(26px,3.8vw,72px); } .work-row--b > :nth-child(3) { margin-top:0; } .work-row--b > :nth-child(1) .shot { aspect-ratio:4/3; } .work-row--b > :nth-child(2) .shot { aspect-ratio:4/5; } .work-row--b > :nth-child(3) .shot { aspect-ratio:5/6; } /* Row C: wide landscape, portrait, near-square — the widest spread of the three rows, and the only one whose panels step down in size left to right. */ .work-row--c { grid-template-columns:1.75fr 1.05fr 0.85fr; } .work-row--c > :nth-child(1) { margin-top:0; } .work-row--c > :nth-child(2) { margin-top:clamp(34px,5vw,96px); } .work-row--c > :nth-child(3) { margin-top:clamp(20px,3vw,62px); } .work-row--c > :nth-child(1) .shot { aspect-ratio:16/10; } .work-row--c > :nth-child(2) .shot { aspect-ratio:4/5; } .work-row--c > :nth-child(3) .shot { aspect-ratio:9/10; } /* The client's name in the didone, what we did for them in the grotesque. A distinction with a reason behind it, rather than mixing faces for texture — which is the test every other alternation on this page has to pass too. */ .shot-title .name { font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase; } /* Row C has no index to carry the caption, so its link label stands rather than waiting for a hover. */ .shot-more.is-standing { opacity:1; transform:none; color:rgba(249,249,249,.6); } .work-item:hover .shot-more.is-standing { color:var(--paper); } .work-item { display:flex; flex-direction:column; gap:12px; min-width:0; } .shot { position:relative; overflow:hidden; background:var(--ink); aspect-ratio:4/5; } /* The film panel is the widest in its row, so it takes a landscape frame while the stills beside it stay portrait — the contrast in shape is what stops a row of three reading as a strip. */ .work-item--film .shot { aspect-ratio:16/9; } .shot img,.shot video { width:100%; height:100%; object-fit:cover; object-position:var(--pos,center center); filter:var(--photo-grade); transition:transform .7s var(--ease),filter .7s var(--ease); } /* Hover lifts the grade rather than removing it, so a hovered panel does not jump to a different colour world than the ones beside it. */ .work-item:hover .shot img,.work-item:hover .shot video, .work-item:focus-visible .shot img,.work-item:focus-visible .shot video { transform:scale(1.04); filter:contrast(1.04) saturate(.82); } .shot-title { font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:17px; line-height:1.15; text-transform:uppercase; letter-spacing:-.01em; } .shot-meta { color:rgba(249,249,249,.6); font-size:10px; } .shot-meta .sep::before { content:"\00b7"; margin:0 .5em; } /* The whole panel is the link, so standing "learn more" labels only repeat an affordance the cursor already gives. Kept in the markup for screen readers and revealed on intent. */ .shot-more { color:var(--paper); font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease),transform .3s var(--ease); } .work-item:hover .shot-more, .work-item:focus-visible .shot-more { opacity:1; transform:none; } /* Touch has no hover state to reveal it with. */ @media (hover:none) { .shot-more { opacity:1; transform:none; color:rgba(249,249,249,.6); } } /* --- Manifesto ---------------------------------------------- */ /* The measure is set in em, not ch. ch is the width of the resolved font's "0" — Kinfolk's is 0.70em and the macOS Didot fallback's is 0.52em, so a ch-based measure silently narrows by a quarter whenever the webfont does not arrive, which is what turns this headline into seven lines instead of five. 13.3em is the same measure Kinfolk gave, now independent of which serif actually resolves. */ /* One of the two places the page is allowed to open right out. The statement arrives after a long silence and is followed by another, so it reads as a held breath rather than as the next item in a list. Empty space is the cheapest thing to produce and the most expensive thing to look at, and the page had almost none. */ .manifesto { padding-block:clamp(118px,13.5vw,250px); } .manifesto h2 { margin:0; max-width:13.3em; font-size:clamp(40px,5.6vw,88px); line-height:.94; } /* The circle is drawn, not typed: a single open stroke that overshoots its own start, so it reads as a hand mark rather than an ellipse. */ .ring { position:relative; display:inline-block; } .ring svg { position:absolute; left:-9%; top:-22%; width:118%; height:150%; overflow:visible; pointer-events:none; } .manifesto .btn-pill { margin-top:clamp(28px,4vh,36px); } /* --- Founder ------------------------------------------------ */ /* The full-width founder plate is gone on the client's instruction — she did not want her photograph large and above the team. She appears in the team row instead (see .team-lead), and this is now the copy alone. */ .duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,5vw,48px); align-items:start; } /* No top margin: it existed only to clear the "Founder" eyebrow above it, and that eyebrow has been removed. The body column's padding drops with it for the same reason — it was set to meet a headline that started lower down, and kept it would leave the two columns out of step. */ .founder-title { margin:0; font-size:clamp(30px,3.3vw,46px); line-height:.95; } .founder-body { padding-top:8px; color:rgba(249,249,249,.88); font-size:16px; line-height:1.7; } .founder-body p { margin:0 0 20px; } .founder-body .btn-pill { margin-top:6px; } /* --- Team --------------------------------------------------- */ /* The founder is a fixed card and the rest of the team drifts past her. Emphasis by behaviour rather than by size: she is the one figure that stays put, the first face in reading order, and the only one without a photographic background behind her. Nothing here is enlarged, because scale is exactly what the client asked to remove. */ /* Her column is wider than a rail card on purpose, and it has to be: the cutout carries transparent margins either side, so her body fills only about two thirds of its box. Matched box widths would have made her the smallest figure of the five — measured at 248 against the rail's 328. */ .team { display:grid; /* minmax(0,…) on the rail, or its flex track's min-content wins the negotiation and squeezes her column back to its own minimum. */ grid-template-columns:minmax(240px,1.18fr) minmax(0,2.7fr); gap:clamp(22px,3vw,54px); align-items:start; } .team-lead { margin:0; display:flex; flex-direction:column; gap:14px; } /* A framed photograph, like every other face here. This card was built for anzhelika-cutout.webp and carried the machinery that an alpha cutout needs — no frame, an upward scale to crop its transparent margins, and a mask fading her legs out so the crop did not read as a cut. The supplied portrait has a real background, so all three were removed rather than left to act on a picture that does not want them. Her emphasis is now entirely positional: the one card that does not move, first in reading order, a larger frame and a larger name. */ .team-lead-shot { display:block; aspect-ratio:4/5; overflow:hidden; } /* The asset is cropped to this ratio on disk, so cover is an exact fit and nothing is thrown away at render time. */ .team-lead-shot img { width:100%; height:100%; object-fit:cover; object-position:var(--pos,center center); filter:var(--photo-grade); } /* The rail breaks the right gutter so the next face is always entering the margin — the same move the testimonials and the work rows make. */ .team-rail { --gap:clamp(14px,1.7vw,28px); --dwell:5.2s; } .team-view { overflow:hidden; margin-right:calc(var(--gutter) * -1); } .team-track { display:flex; gap:var(--gap); align-items:flex-start; transition:transform 1.05s var(--ease-weight); } .team-track.is-jumping { transition:none; } /* Three sit on the measure and the fourth begins in the gutter. */ .team-item { flex:0 0 calc((100% - var(--gutter) - 2 * var(--gap)) / 3); } /* Hand-authored, never nth-child and never random: the offset travels with the person through the loop, and a value that cannot change between passes is the only kind that stays designed. */ .team-item { margin:0; margin-top:var(--drop,0px); display:flex; flex-direction:column; gap:12px; } /* Only what sits on the measure is lit, as the quote rail does. */ .team-item { opacity:.26; transition:opacity var(--t-weight) var(--ease-weight); } .team-item.is-lit { opacity:1; } .team-item .shot { aspect-ratio:3/4; } .team-lead figcaption,.team-item figcaption { display:flex; flex-direction:column; gap:12px; } .team-lead h3,.team-item h3 { margin:0; font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-weight:400; line-height:1; text-transform:uppercase; letter-spacing:.01em; } /* One size step between her and the rest. Any more and it is a hierarchy rather than a nudge. */ .team-lead h3 { font-size:34px; } .team-item h3 { font-size:26px; } .team-lead p,.team-item p { margin:0; max-width:24ch; color:rgba(249,249,249,.7); font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; line-height:1.35; } /* Her role line holds full strength; the rail's sit back a step. */ .team-lead p { color:rgba(249,249,249,.88); } .team-rail .treel-foot { margin-top:clamp(24px,2.6vw,40px); } .roster-placeholder { display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(145deg,#34312e,#171717); color:rgba(249,249,249,.18); font:400 clamp(90px,11vw,200px)/1 "Kinfolk",Didot,"Bodoni 72",Georgia,serif; } /* --- Recognition -------------------------------------------- */ /* Client names, not logo files: thirteen marks drawn in thirteen palettes never sit together, and the reference sets the names as type with the brand mark between them. */ .marquee { --logo-w:clamp(150px,16vw,220px); --logo-mark:clamp(25px,2.7vw,38px); --logo-h:clamp(40px,4.2vw,56px); border-block:1px solid rgba(249,249,249,.28); padding:26px 0; overflow:hidden; display:flex; width:max-content; max-width:100%; } .marquee-track { display:flex; flex:none; align-items:center; white-space:nowrap; animation:namesScroll 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state:paused; } /* The supplied marks are black artwork on transparency, so on this page they were all but invisible — inverting makes them white without touching the transparent ground. They are also 400px canvases with a lot of built-in padding, so the box has to run large for the mark to read at a normal size. */ /* Every mark gets the same box and is fitted inside it. Constraining by height alone let aspect ratio decide optical weight: these range from 1.00 (a square badge) to 5.10 (a long wordmark), so the square one rendered as a 74px block beside 37px strips and owned the whole row. A fixed box makes a wide mark fill the width and a square one fill the height, which is what actually reads as even. */ .marquee-track figure { position:relative; margin:0; flex:none; width:var(--logo-w); height:var(--logo-h); } /* Each file is a square canvas with the mark letterboxed inside it, and the mark fills anywhere from 16% to 80% of that canvas. Fitting the canvas therefore sizes the padding, not the logo, which is why one mark came out 26px tall and another 6px. --f carries each file's measured content fraction, so every mark lands on the same optical height and the transparent surplus simply overhangs the box unseen. */ /* Sized, not scaled. The previous version laid each logo out small and then transform-scaled it up by as much as 3x, which resamples a 400px source past its own resolution — that is the softness that shows the moment opacity lifts on hover. Setting the height directly means the browser rasterises once, downscaling from the 400px master, so every mark is sharp. Centring is absolute rather than grid/flex because an item taller than its box stops being centred by those, which is what threw the marks onto different baselines when this was last tried. */ .marquee-track img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:calc(var(--logo-mark) / var(--f,.25)); max-width:none; object-fit:contain; /* brightness(0) crushes every opaque pixel to black and keeps the alpha, then invert lifts it to flat white. A plain invert() leaves greys as greys, which is why the halftone behind one wordmark came back as mud rather than as part of the mark. */ filter:brightness(0) invert(1); opacity:.78; transition:opacity .4s var(--ease); } /* Two of the supplied marks are already light artwork on a dark ground. Inverting those turned them into solid pale blocks; lifting their brightness turned the dark ground into a grey slab. They want the grade and nothing else, so the ground sinks into the page and only the light part of the mark is left. */ .marquee-track img[data-light] { filter:grayscale(1); } .marquee-track figure:hover img { opacity:1; } .marquee-track i { /* Smaller than the marks it separates — at 18px it was competing with the shorter wordmarks instead of punctuating them. */ flex:none; width:13px; height:13px; margin:0 clamp(14px,1.6vw,24px); background:var(--red); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; } @keyframes namesScroll { to { transform:translateX(-100%); } } /* --- Proof -------------------------------------------------- */ /* The heading stands alone (§24). The lead paragraph and the two badges that sat beside it are gone, so the flex row that held them is gone with them and the head is simply a heading. `.stars` stays: it is still worn by all six quotes, and it is one of the few red objects §11 left on the site. */ .proof-title { margin:0 0 clamp(28px,4vh,40px); font-size:clamp(32px,3.7vw,54px); } .stars { color:var(--red); font-size:13px; letter-spacing:.2em; } /* Three quotes on the measure, drifting one column at a time. What makes a three-up testimonial slider read as a template is three bordered boxes of equal height — that turns quotes into a comparison table. There are no boxes here: one hairline runs the full measure and the columns hang off it, which is the page's own separator language doing the work a border would have done badly. The columns are held together instead by the baseline their attributions share. Every quote stays authored in the markup. The loop is made from clones the script marks aria-hidden, exactly as the logo marquee already does, so no copy is written twice and the markup stays the source of truth. */ .treel-wrap { border-top:1px solid rgba(249,249,249,.28); padding-top:clamp(30px,3.6vw,52px); --gap:clamp(18px,2.2vw,40px); --dwell:4.6s; } /* Breaks the right gutter, so the next quote is always entering the margin. That is how the row says there is more without a dot row underneath it, and it is the move the work rows already make. */ .treel { overflow:hidden; margin-right:calc(var(--gutter) * -1); } .treel-track { display:flex; gap:var(--gap); align-items:stretch; transition:transform 1.05s var(--ease-weight); } .treel-track.is-jumping { transition:none; } /* Three fill the measure exactly; the fourth begins in the gutter. The gutter is subtracted because this element is a gutter wider than the measure it has to divide. */ .treel-item { flex:0 0 calc((100% - var(--gutter) - 2 * var(--gap)) / 3); } /* Only what sits on the measure is lit. Asking the eye to read a column that is half off the page is the other half of why these feel cheap. */ .treel-item { opacity:.26; transition:opacity var(--t-weight) var(--ease-weight); } .treel-item.is-lit { opacity:1; } .tquote { margin:0; display:flex; flex-direction:column; gap:clamp(20px,2.4vw,32px); } .tquote blockquote { margin:0; font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:clamp(18px,1.55vw,23px); line-height:1.26; text-transform:uppercase; letter-spacing:-.005em; } /* Controls. A drifting rail with nothing to steer it reads as broken rather than as restraint, so this one earns its furniture — but the least of it: two marks, and nothing else. There was a filling hairline here and it is gone. Six quotes three at a time is a sliding window, not a sequence of pages, so there is no honest fraction to show: the window covers positions 5,6,7 of six, which is either 133% or a wrap, and it read as a bar overflowing and then jumping backwards once a cycle. A progress rule has to measure something real. */ .treel-foot { display:flex; align-items:center; gap:10px; margin-top:clamp(30px,3.4vw,52px); } .treel-step { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(249,249,249,.4); border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background var(--t-detail) var(--ease-detail),color var(--t-detail) var(--ease-detail),border-color var(--t-detail) var(--ease-detail); } .treel-step:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); } .treel-step::before { content:""; width:12px; height:12px; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; transition:transform var(--t-detail) var(--ease-detail); } .treel-step:hover::before { transform:rotate(90deg) scale(1.15); } /* The mark is the page's arrow everywhere else; back is simply it turned around, rather than a second glyph introduced for one button. */ .treel-step[data-treel-step="-1"]::before { transform:rotate(180deg); } .treel-step[data-treel-step="-1"]:hover::before { transform:rotate(90deg) scale(1.15); } .tattrib { margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .tattrib strong { font-family:"Kinfolk",Didot,"Bodoni 72",Georgia,serif; font-weight:400; font-size:clamp(22px,1.8vw,26px); line-height:1; text-transform:uppercase; letter-spacing:.01em; } .tattrib small { color:rgba(249,249,249,.65); font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; } /* A small square above the stars. Deliberately small: a large portrait makes the section about faces, and at this size a client photograph reads as a signature on the quote rather than a second subject competing with it. */ /* No fill of its own. While the mark is still small the square is mostly empty, and any tone at all reads as a lighter patch sitting on the section — so the uncovered part is simply the page. Transparent rather than a matched hex, so it keeps matching if the section ever changes. */ .tthumb { position:relative; overflow:hidden; flex:none; width:clamp(52px,5vw,68px); aspect-ratio:1; background:none; } .tthumb img { width:100%; height:100%; object-fit:cover; object-position:var(--pos,center 28%); /* The one grade every photograph on the page carries. Six client portraits will arrive from six cameras; this is what narrows them. */ filter:var(--photo-grade); /* The picture is always seen through the mark. At rest the mark is scaled far past the square, so nothing is actually cropped — the shape only becomes visible while it is small, which is the whole of the effect. 1400% keeps the star's waist clear of the corners; the arms run on the axes, so the diagonals are the part that has to be checked. */ -webkit-mask:var(--mark) center/1400% no-repeat; mask:var(--mark) center/1400% no-repeat; } /* The portrait blooms out of the mark. The same move the showreel aperture makes at the top of the page, played small: the star opens and the image arrives through it, rather than a photograph simply fading up. It is the one flourish in this section, and it only fires on the quote being turned to. */ /* The timing is carried on the keyframes, not on the element, and the element runs linear. The reason is geometric: mask-size interpolates linearly, and the mark covers the square at about 250% — only 16% of the way from 38% to 1400%. On the page's usual --ease-weight that point arrives 25ms in, so the star was a star for a frame and a half and the remaining 900ms crawled invisibly from 1300% to 1400%. The star has to hold near its own size first and accelerate late, which is the opposite curve to everything else here — hence ease-in on the opening segment. */ @keyframes tbloom { 0% { -webkit-mask-size:38%; mask-size:38%; opacity:0; animation-timing-function:var(--ease-detail); } 20% { -webkit-mask-size:54%; mask-size:54%; opacity:1; animation-timing-function:cubic-bezier(.66,0,.86,.36); } 100% { -webkit-mask-size:1400%; mask-size:1400%; opacity:1; } } /* Hands over as the aperture passes the size of the square. */ @keyframes tseed { 0% { opacity:.34; } 62% { opacity:0; } 100% { opacity:0; } } /* Gated on the section having arrived, so the bloom is not spent while the testimonials are still below the fold. Its finished state is identical to the resting state, so if the entrance never runs the picture is simply there — the animation can only ever add. */ .treel-wrap.is-in .treel-item.is-entering .tthumb img { animation:tbloom .8s linear both; } .treel-wrap.is-in .treel-item.is-entering .tthumb::before { animation:tseed .8s linear both; } /* The seed the bloom appears to grow from, and the stand-in when a quote has no portrait yet: the mark, low, on the square. Sitting behind the image it costs nothing once the picture covers it. */ .tthumb::before { content:""; position:absolute; inset:0; opacity:0; background:var(--paper); -webkit-mask:var(--mark) center/42% no-repeat; mask:var(--mark) center/42% no-repeat; } .tthumb:empty::before { opacity:.17; animation:none; } /* Without JavaScript the rail is simply a row that wraps, every quote lit and readable. The copy never depends on a script running — the same argument as the entrance's hidden state being applied by script rather than sitting in the stylesheet. */ .no-js .treel { overflow:visible; margin-right:0; } .no-js .treel-track { flex-wrap:wrap; row-gap:clamp(34px,4vw,56px); } .no-js .treel-item { opacity:1; } .no-js .treel-foot { display:none; } /* Same contract for the team rail: nothing lights itself without the script, so unstyled it would be four people at .26 with the fourth clipped out of a hidden overflow. It becomes a row that wraps. */ .no-js .team-view { overflow:visible; margin-right:0; } .no-js .team-track { flex-wrap:wrap; row-gap:clamp(30px,3.6vw,48px); } .no-js .team-item { opacity:1; margin-top:0; } .no-js .team-rail .treel-foot { display:none; } /* The rows used to carry 36px of their own padding, so this rule inherited its breathing room from the last one. It holds its own gap now, but a smaller one than when the attribution sat directly above it — the rail's own foot already closes the section. */ .proof-foot { margin-top:clamp(30px,3.4vw,58px); padding-top:28px; border-top:1px solid rgba(249,249,249,.28); } /* --- Belonging ---------------------------------------------- */ /* The qualifier. It sells nothing and lists nothing: it names a feeling the reader is meant to recognise in themselves and answers it with belonging rather than a service. That is why it sits here — the testimonials are other people's words, the closing is the ask, and this is what turns "these people got results" into "and you are one of them" immediately before being asked to apply. So it carries no eyebrow, no button and no body copy. One sentence held in space is the whole design; anything else added here would give the eye somewhere to go other than the line. */ .belong { position:relative; padding-inline:var(--gutter); padding-block:clamp(120px,15vw,260px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(26px,3.4vw,52px); } /* Deliberately below the screenshot's saturation. At full strength this is the brightest object on a page whose entire argument is restraint, and it would still be ringing when the red closing ask arrives a screen later. It has to read as light behind the words, not as a panel they sit on. */ /* Painted as a gradient that reaches transparent inside its own box, not as an oval larger than the section. The first build sized a 1254px ellipse inside a 725px section under overflow:clip, so the glow was guillotined into a rectangle — a hard top edge and hard sides, straight across the page. It was invisible to every check because the section was screenshotted on its own bounds, which is exactly where the cut fell. Deliberately below the saturation of the supplied mock: at full strength this is the brightest object on a page whose whole argument is restraint, and it would still be ringing when the red closing ask arrives a screen later. It has to read as light behind the words, never as a panel they sit on — so the corners of the section stay black. */ /* This is the one glow on the page that needed no box change, because it was already built to §29's rule: 46% vertical radius centred at 47% reaches from 1% to 93% of its own box, so the light finishes inside the element and nothing was ever cutting it. Only `.glow-soft` was — its 15% top and bottom fades were erasing the gradient's outer shoulders, which is why this glow now reads slightly fuller at the same position and the same peak. */ /* THE SIDE INSETS ABSORB THE BREATHE, AND THE LIGHT IS UNCHANGED. `inset:0` plus `scale(1.045)` makes this element 4.5% wider than the page at the top of its cycle. While `.belong` clipped, that was contained; once it stopped, those 8px at a 1440 viewport became real horizontal scroll — dead black, since the gradient is already transparent out there (measured: brightest pixel in the overflowing columns is 10/255 and nothing exceeds 24), but scrollable, which the page was not before. So the box is inset by 2.153% each side: 95.694% × 1.045 = 100.0%, exactly the viewport at full breath. The horizontal radius is then re-expressed as a share of the narrower box — 46 / 0.95694 = 48.07% — so the light is the same size it always was, at rest and at full scale alike, because both states scale by the same factor. The vertical radius is untouched: the box height does not change, and only left/right were inset. The centre stays 50% 47%, which is what the authored-centre assertion checks, so a mistake here shows up as a moved light rather than hiding. */ .belong-glow { position:absolute; z-index:-1; inset:0 2.153%; pointer-events:none; background:radial-gradient(ellipse 48.07% 46% at 50% 47%, rgba(53,36,213,.60) 0%, rgba(53,36,213,.38) 30%, rgba(53,36,213,.14) 54%, rgba(53,36,213,.04) 74%, transparent 100%); /* Scale only. A translating drift would walk the faded edge back into the section boundary and the hard edge would return at one end. */ animation:belongBreathe 26s var(--ease) infinite alternate; } @keyframes belongBreathe { to { transform:scale(1.045); } } /* The one red on this screen, and the smallest object in the section. */ .belong-mark { display:block; width:clamp(26px,2.6vw,38px); aspect-ratio:1; background:var(--red); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; } /* Kinfolk is the default voice of a headline and .alt flips a run back to the grotesque — the page's existing mechanism, used unchanged. Here the grotesque carries the long clauses and the didone lands on the two phrases doing the work: what they are meant for, and what Rysing is. */ /* 20em is measured, not chosen: it is the width at which the sentence breaks on its own clauses — "...and your brand / are meant for something bigger, / Rysing is the place that gets you." At 16em it split "meant for" from "something bigger" and ran the second clause into the third, which reads as text that happened to wrap rather than a line that was set. It holds at both ends of the size clamp. */ .belong h2 { margin:0; max-width:20em; font-size:clamp(30px,4.6vw,76px); line-height:1.04; letter-spacing:-.012em; text-wrap:balance; } /* --- Spotlight ---------------------------------------------- */ /* One photograph with the copy laid over its lower-left, as the client's design draws it. This was split into three panels once and has been put back; the three keynote case studies still exist further down the page, standing on their own without this head. */ /* Hosts no shape, but it carried two of the three things §27's contract forbids and both were doing nothing. The `background:var(--ink)` was the same black `body` paints, and because .spot does not isolate it painted ABOVE any z-index:-1 light reaching this far down the page — a latent version of the cut `.reel` was actually shipping. `overflow:hidden` had nothing to clip either: the photograph is in flow, the scrim is `inset:0`, and `.spot-copy` is inset on all four sides. */ .spot { position:relative; } /* Every photograph on the page carries the same grade; the stage shot's LED wash was the one image still running at full saturation. */ .spot img { width:100%; aspect-ratio:16/8; object-fit:cover; object-position:var(--pos,center 32%); filter:var(--photo-grade); } /* The photograph is dark at the bottom already; this only guarantees the copy holds at small sizes where the crop tightens. */ .spot::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.12) 58%,transparent 80%); } .spot-copy { position:absolute; z-index:1; left:clamp(20px,4vw,56px); right:clamp(20px,4vw,56px); bottom:clamp(20px,4vw,56px); display:flex; flex-direction:column; align-items:flex-start; gap:18px; } /* In em, never ch (§4). The original set 17ch, and that is exactly the trap §4 describes: Kinfolk's zero is 0.70em, so 17ch resolves to ~11.9em with the webfont and ~8.8em without it — both of which break this headline into three lines, not the two the design draws. Swept 16–22em: the design's break "We bring company founders / into the spotlight" holds from 17.2 to 20.2em, so this takes the midpoint rather than an edge. */ .spot-copy h2 { margin:0; max-width:18.7em; font-size:clamp(32px,4.1vw,62px); line-height:.98; } /* One word on blue — besides the belonging glow, the only place the secondary brand colour appears between the hero and the footer. */ .spot-copy h2 mark { background:var(--blue); color:inherit; padding:0 .12em; } .spot-copy p { margin:0; font-size:16px; } /* --- Newsletter --------------------------------------------- */ /* A centred column, not the two-up with a printed cover beside it. The ask is a single field, so everything above it narrows toward that field rather than sitting beside a second object competing for the eye. This is the one headline below the fold allowed to alternate faces. It is also the page's last ask before the closing, and the alternation is what distinguishes it from the three section heads around it. */ .fudge { position:relative; text-align:center; } /* The blue returns at the right edge as the page approaches the footer, where it is already waiting behind the wordmark — read as the footer's light rising rather than a fourth use of the colour. Painted as a gradient that reaches transparent inside its own box: an oversized shape under overflow:clip gets guillotined into a rectangle. */ /* The box is 24% taller than the section at the bottom, and the gradient is remapped so the light does not move. This glow genuinely overran `inset:0`: a 58% vertical radius centred at 64% reaches 122% of the section, so 22% of it was being cut — the hard edge `.glow-soft` was hiding rather than fixing. §31's transform, for a box grown `inset:-a% 0 -b% 0`: the centre `p` becomes `(p + a)/(1 + a + b)` and a vertical radius expressed as a SHARE OF THE BOX becomes `r/(1 + a + b)`. Here a=0, b=24, so the divisor is 1.24: 64 → 51.61 and 58 → 46.77. The light now reaches 4.84%–98.38% of its box, inside on both sides. Horizontal values are untouched because the element's width does not change (§31), and the right-hand cut at the viewport edge is the established exception (§4). §33's second rule holds: 24% of a 685px section is 164px of overhang, and `.closing` plus the footer sit below it, so the box stops 1252px short of the bottom of `body`. */ .fudge-glow { position:absolute; z-index:-1; inset:0 0 -24% 0; pointer-events:none; background:radial-gradient(ellipse 38% 46.77% at 96% 51.61%, rgba(53,36,213,.52), rgba(53,36,213,.30) 34%, rgba(53,36,213,.10) 58%, rgba(53,36,213,.02) 76%, transparent 100%); } .fudge-copy { max-width:1150px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(22px,2.6vw,34px); } /* 17.3em is measured: it is the middle of the 17.0–17.6em window in which the headline breaks after "business", which is how the supplied design sets it. Narrower and it falls to three lines, one per face; wider and "and" is dragged up to hang at the end of line one. In em, not px — a px measure holds the break at one font size and loses it at the next step of the clamp. */ .fudge h2 { margin:0; max-width:17.3em; font-size:clamp(30px,4.1vw,62px); line-height:1.02; letter-spacing:-.012em; } .fudge-copy > p { margin:0; max-width:58ch; color:rgba(249,249,249,.85); font-size:15px; line-height:1.75; } .fudge-points { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; padding:0; list-style:none; } .fudge-points li { display:inline-flex; align-items:center; min-height:34px; padding:0 18px; border:1px solid rgba(249,249,249,.42); border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .fudge form { width:100%; max-width:820px; } /* The field is the whole point of the section, so it runs wider than the sentence above it — the one element here allowed to be the widest. */ .fudge-field { display:flex; align-items:center; gap:18px; border-bottom:1px solid var(--paper); text-align:left; } .fudge-field:focus-within { border-color:var(--red); } .fudge-field input { flex:1 1 auto; min-width:0; min-height:56px; padding:0; border:0; outline:0; background:none; color:var(--paper); font-family:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300; font-size:17px; } .fudge-field input::placeholder { color:rgba(249,249,249,.5); } .fudge-field button { flex:none; min-height:56px; padding:0; border:0; background:none; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; /* A