/* A light section. Used by Reversal for the middle of the page, and by Ink/Kinetic for the single stark flip at the CTA. Tokens computed and contrast-verified. */ .lightsec{--ground:#E8E4DA;--ink:#0B0B0C;--muted:#4E4A46;--red:#8A5200; background:var(--ground);color:var(--ink);border-bottom-color:rgba(11,11,12,.20)} .lightsec .rlab,.lightsec .body,.lightsec .golabelsub,.lightsec .cta-sit{color:var(--muted)} .lightsec .dh,.lightsec .golabel,.lightsec .hero,.lightsec .pagetitle{color:var(--ink)} .lightsec .cta{color:var(--red);border-color:var(--red)} .lightsec .cta:hover{color:var(--ink);border-color:var(--ink)} .lightsec .redrule{background:var(--red)} .lightsec .beat,.lightsec .fdr{border-top-color:rgba(11,11,12,.20)} .lightsec .rail{border-right-color:rgba(11,11,12,.20)} .lightsec .texfield::before{display:none} /* 'Display' and 'Text' are declared once, for every public page, in assets/type.css (C5, 22 Sep). */ *{box-sizing:border-box;margin:0;padding:0} :root{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--bone:#E8E4DA;--red:#FFB547;--blood:#FFB547;--blood-edge:#D98E1F;--faint:#827B77;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);--rail:22%; --p:0;--o:0;--m:1;--b2:0;--b3:0} html{background:var(--ground);-webkit-text-size-adjust:100%} body{background:var(--ground);color:var(--ink);font-family:'Text',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%} a{color:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:3px} .skip{position:absolute;left:-9999px;top:0;background:#FFB547;color:#0B0B0C; padding:12px 18px;z-index:100;font-weight:600} .skip:focus{left:0} /* ── opening sequence ── */ .seq{height:360vh;position:relative} .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center} .layer{position:absolute;inset:0;display:grid;place-items:center;padding:0 6vw} /* TMRW's actual order: the mark SHRINKS as the words GROW, then the words open and clear. Opacities are computed in JS (--m, --b2, --b3) because the curves overlap and nested CSS min/max got unreadable. */ .s-mark{color:var(--ink);width:min(44vw,400px);height:auto; opacity:var(--m); transform:scale(calc(1 - var(--p)*0.42)) translateY(calc(var(--p) * -6vh)); will-change:opacity,transform} .markwrap{opacity:0;animation:mkin 1400ms cubic-bezier(.22,.9,.24,1) 200ms forwards} @keyframes mkin{to{opacity:1}} .opener{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;padding:0 5vw} .s-b2{font-family:'Display';font-size:clamp(28px,5.2vw,80px);line-height:1.06;text-align:center; opacity:var(--b2); transform:scale(calc(0.88 + var(--p)*0.26)); will-change:opacity,transform} /* the image grows between the two lines and pushes them apart. no transforms needed, the flex column does the work, which is exactly TMRW's move. */ .s-open{width:100%;height:calc(var(--o) * 100vh);overflow:hidden;position:relative;will-change:height} .s-open img{width:100%;height:100vh;object-fit:cover;display:block; transform:scale(calc(1.14 - var(--o)*0.14));will-change:transform} .s-open .veil{position:absolute;inset:0;background:linear-gradient(180deg,#0B0B0C55,#0B0B0CAA)} .s-b3{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center; padding:0 6vw;font-family:'Display';font-size:clamp(26px,4.2vw,62px);line-height:1.1; opacity:var(--b3);text-shadow:0 2px 40px rgba(11,11,12,.75);will-change:opacity} .cue{position:absolute;bottom:5vh;left:50%;width:1px;height:44px; background:linear-gradient(var(--red),transparent);opacity:calc(1 - var(--p)*6)} /* ── page frame ── */ .spine{position:absolute;top:0;bottom:0;left:var(--rail);width:1px;background:var(--ink); opacity:.38;pointer-events:none;z-index:5} main{position:relative} .doc{position:relative} .band{border-bottom:1px solid rgba(237,235,230,.22);display:grid;grid-template-columns:var(--rail) 1fr; align-items:center;height:76px;position:sticky;top:0;z-index:30; background:rgba(11,11,12,.9);backdrop-filter:blur(12px)} .band .brand{padding-left:34px} .band .brand a{display:flex;align-items:center;gap:13px;text-decoration:none} .band .axnav{height:18px;width:auto;color:var(--ink)} .band .wm{font-family:'Display';font-size:21px} /* 17px under Blocky; EB Garamond (Dusk, 23 Sep) sets smaller, so the bar's wordmark gets 21px, as on the home page's phone bar */ .band .right{padding:0 34px 0 30px;display:flex;justify-content:flex-end;gap:26px;align-items:center} .band .right a{color:var(--muted);text-decoration:none;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;font-weight:600;transition:color .2s} .band .right a:hover{color:var(--red)} .band a.lp{border:1px solid var(--navred,#FFB547);padding:8px 14px;color:var(--navred,#FFB547)} .band a.lp:hover{background:var(--blood,#FFB547);color:#0B0B0C} .sect{display:grid;grid-template-columns:var(--rail) 1fr;border-bottom:1px solid rgba(237,235,230,.22); scroll-margin-top:96px} [id]{scroll-margin-top:96px} .rail{padding:44px 24px 44px 34px} .rlab{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600; position:sticky;top:110px} .field{padding:44px 34px 56px 30px;min-width:0} .hero{font-family:'Display';font-size:clamp(40px,6.8vw,104px);line-height:1.03;max-width:15ch} .redrule{height:1px;background:var(--red);margin:38px 0 24px;width:0;transition:width 1.1s cubic-bezier(.22,.9,.24,1)} .redrule.on{width:110px} .dh{font-family:'Display';font-size:clamp(24px,3.1vw,44px);line-height:1.12;margin-bottom:18px;max-width:20ch} .body{font-size:17px;line-height:1.66;color:var(--muted);max-width:46ch} .beat{padding:38px 0;border-top:1px solid rgba(237,235,230,.22)} .beat:first-child{border-top:0;padding-top:0} /* An organic diagonal field bled into the section's background. It lives in the RIGHT half only, past the text measure, because at full width it dropped body text to 1.23:1. Measured, not guessed: the copy column ends around 58% of the viewport. */ .texfield{position:relative;isolation:isolate;overflow:hidden} .texfield>*{position:relative;z-index:1} /* Spans the FULL section and fades in from the left rather than starting at a hard edge. No scale transform: scaling a rotated bitmap resamples twice and reads as low resolution. */ .texfield::before{content:'';position:absolute;inset:-14% -4%;z-index:0;pointer-events:none; background-image:var(--tex);background-size:cover;background-position:center right; opacity:.5;filter:saturate(.82); transform:rotate(-2.5deg); -webkit-mask-image:linear-gradient(97deg,transparent 4%,rgba(0,0,0,.05) 34%, rgba(0,0,0,.16) 56%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.97) 100%); mask-image:linear-gradient(97deg,transparent 4%,rgba(0,0,0,.05) 34%, rgba(0,0,0,.16) 56%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.97) 100%)} .texfield.right::before{transform:rotate(2.5deg);background-position:center left; -webkit-mask-image:linear-gradient(263deg,transparent 4%,rgba(0,0,0,.05) 34%, rgba(0,0,0,.16) 56%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.97) 100%); mask-image:linear-gradient(263deg,transparent 4%,rgba(0,0,0,.05) 34%, rgba(0,0,0,.16) 56%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.97) 100%)} @media (max-width:1100px){.texfield::before{display:none}} .tex{position:relative;height:46vh;overflow:hidden;border-bottom:1px solid rgba(237,235,230,.22)} .tex img{position:absolute;inset:0;width:100%;height:128%;object-fit:cover;opacity:.5;filter:contrast(1.1); will-change:transform} .tex .tveil{position:absolute;inset:0;background:linear-gradient(180deg,#0B0B0CE0,#0B0B0C55 45%,#0B0B0CE0)} .tex .tlab{position:absolute;left:34px;bottom:26px;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--muted);font-weight:600} .plate{margin-top:48px;border:1px solid rgba(237,235,230,.28);position:relative;aspect-ratio:21/9;overflow:hidden} .plate img{width:100%;height:118%;object-fit:cover;display:block;will-change:transform} .pcap{margin-top:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#827B77} /* ── companies ── */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:12px} .co{position:relative;min-height:176px;overflow:hidden;text-decoration:none;color:var(--ink); box-shadow:0 0 0 1px rgba(237,235,230,.26);display:block;background:var(--ground); transition:box-shadow .3s ease,background .35s ease,transform .3s ease,opacity .7s ease} .mk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:0 26px 30px;color:var(--ink);opacity:.74; transition:opacity .3s ease,transform .45s cubic-bezier(.22,.9,.24,1)} .mk svg{width:100%;height:auto;max-height:var(--mh,34px);min-height:20px} .mk img{max-width:100%;max-height:var(--mh,34px);object-fit:contain} .cometa{position:absolute;left:22px;right:22px;bottom:18px;opacity:0;transform:translateY(8px); transition:opacity .3s ease,transform .32s cubic-bezier(.22,.9,.24,1)} .cobrief{display:block;font-size:11.5px;line-height:1.45;color:var(--red)} .courl{display:block;margin-top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--red);opacity:.82} .co:hover,.co:focus-visible{box-shadow:0 0 0 1px var(--red);background:#131315;transform:translateY(-2px)} .co:hover .mk,.co:focus-visible .mk{opacity:1;transform:translateY(-26px)} .co:hover .cometa,.co:focus-visible .cometa{opacity:1;transform:translateY(0)} .golabel{font-family:'Display';font-size:clamp(20px,2.4vw,34px);line-height:1.2} .golabelsub{font-size:15px;line-height:1.6;color:var(--muted);margin-top:12px;max-width:46ch} /* ── who / access ── */ .who2{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start} .who2 img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.06); border:1px solid rgba(237,235,230,.28);opacity:.92} .pagehead{display:grid;grid-template-columns:var(--rail) 1fr;border-bottom:1px solid rgba(237,235,230,.22)} .pagehead .field{padding:74px 34px 62px 30px} .pagetitle{font-family:'Display';font-size:clamp(40px,6.4vw,96px);line-height:1.03;max-width:15ch} .two{display:grid;grid-template-columns:1fr 1fr} .door{padding:44px 40px 48px;border-left:1px solid rgba(237,235,230,.22)} .door:first-child{border-left:0;padding-left:0} .doorlab{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:700; margin-bottom:16px} .cta-wrap{max-width:52ch} .cta-sit{font-size:16px;line-height:1.66;color:var(--muted)} .cta{display:inline-block;margin-top:22px;font-family:'Display';font-size:22px;color:var(--red); text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:3px;transition:color .2s,border-color .2s} .cta:hover{color:var(--ink);border-color:var(--ink)} .fdr{margin-top:44px;padding-top:24px;border-top:1px solid rgba(237,235,230,.22)} /* ── form ── */ form{max-width:46ch;margin-top:26px} .row{margin-bottom:22px} label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); font-weight:600;margin-bottom:8px} input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(237,235,230,.34); color:var(--ink);font-family:inherit;font-size:16px;padding:9px 0;transition:border-color .2s} input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--red)} select option{background:#141416;color:var(--ink)} .attest{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;cursor:pointer} .attest input{width:16px;height:16px;flex:0 0 16px;margin-top:3px;accent-color:var(--red)} .attest span{font-size:12.5px;line-height:1.6;color:var(--muted);text-transform:none; letter-spacing:normal;font-weight:400} button{margin-top:28px;background:transparent;border:1px solid var(--red);color:var(--red); font-family:'Display';font-size:19px;padding:12px 26px;cursor:pointer;transition:background .25s,color .25s} button:hover{background:var(--red);color:#0B0B0C} /* The three light footer scrims (.g-hfoot/.g-tfoot/.g-afoot) used to climb from .800 to .920 alpha, which is the "beige block": at .92 the ground photograph is gone and the band is flat cream. They now hold near .805 and lighten by a couple of values, so the shoreline of the ground ran to the bottom edge of the document. Do not raise the alpha again. ── THE FOOTER IS NOT A BLOCK ── Gryph, relaying the design call: "remove the beige block and just leave it as a gradient in itself... you just have to keep the gradient that we have under Select Direct Investments, and then keep that all the way down. We keep this footer and stuff, but we just draw it all the way down." Three things made it read as a separate panel, and none of them was the copy: 1. a full-width hairline across its top edge, which is the cut you could see; 2. its own scrim climbing to .92 alpha, which washed the ground photograph out to flat cream, so the shoreline stopped dead at the footer line (see .g-hfoot); 3. rules between the columns and under them, which drew a box. All three are gone. The footer is now type standing on the page's own ground, which is also the RX3 footer construction from the reference set: bare text, no cards, no boxes. The Site column went with them, on his instruction: "I would remove the Why Us from the footer, I'd remove the site footer entirely. Condense it if we just have Access and Legal." Every page it linked to is still reachable from the nav on every page. */ /* ------------------------------------------------------------------------------------ v39. THE STRUCTURE IS BACK, THE PANEL IS NOT. Gryph: "it's fine that we remove this site navigation stuff, but on second thought, maybe we should keep it in. I think you should still box it out a little, how it was before, like more of a normal footer," then a screenshot of startmytomorrow.com: "this would be good please." TMRW's footer is a solid black slab. Ours cannot be, and that tension is resolved in favour of the ground: v38 is still binding, so the footer has NO fill of its own and NO hairline across its top edge. Those two, plus a .92 scrim, are what made it read as a beige block. What comes back is INTERNAL structure only: a mark block, three labelled link columns, a vertical hairline between each cell, and one full-width hairline closing the block above the bottom bar. The ground still runs to the last row of the document underneath all of it. Every colour here is a token. v38's defect was a hardcoded #827B77 that measured 4.73:1 on near-black and 3.06:1 on the light footer, and the old hairline was a hardcoded rgba(237,235,230,.22) — a LIGHT rule, all but invisible on g-hfoot and g-afoot. --line and --muted are set per ground, so one rule serves both the dark footers (g-xfoot) and the light ones (g-hfoot, g-afoot). ------------------------------------------------------------------------------------ */ /* Gryph: "this footer should have a top part to it. Right now there's no top bar, it's just floating." He is right and the reason is worth recording. The old top rule WAS removed on purpose, because it was the visible cut across a flat cream slab. But the cut was the .92-alpha slab, not the rule: now that the ground runs continuously under the footer, the column hairlines start in mid-air with nothing to hang from. The rule comes back, and it comes back as var(--line) -- a DARK hairline on the light footers -- so it reads as structure rather than as the light seam it used to be. */ .foot{padding:0 0 54px;border-top:1px solid var(--line)} .footcols{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:0; border-bottom:1px solid var(--line)} .fbrand{padding:46px 34px 38px;display:flex;flex-direction:column;gap:14px;min-width:0} .fwm{font-family:'Display';font-size:clamp(30px,2.5vw,38px);line-height:1;color:var(--ink)} .fstate{font-size:15px;line-height:1.55;color:var(--ink);max-width:30ch} .fsupp{font-size:12.5px;line-height:1.6;color:var(--faint);max-width:30ch} .fcol{padding:46px 22px 38px 26px;border-left:1px solid var(--line); display:flex;flex-direction:column;gap:11px;min-width:0} .fcol:last-child{padding-right:34px} /* The micro-label is QUIET, not the red one the pre-v38 footer used. Three red caps labels sitting under a red CTA made red the loudest thing on the lightest ground on the site. --muted is 5.6:1 on the light footer and 6.9:1 on the dark one. One token to put it back: color:var(--red). */ .fcl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700; margin-bottom:5px} .fcol a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s;width:fit-content} .fcol a:hover{color:var(--ink)} .footbase{padding:24px 34px 0;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} /* --faint was hardcoded #827B77, which is 4.73:1 on near-black and only 3.06:1 on the light footer this page now ends on. The securities disclaimer is the single line on the site that most needs to be readable, and it had quietly dropped below AA when the footer went light. It is a token now, set per ground alongside --muted. */ .honest{font-size:12.5px;line-height:1.7;color:var(--faint);max-width:40ch} .legal{font-size:10.5px;line-height:1.7;color:var(--faint);max-width:62ch} .rv{opacity:0;transform:translateY(18px); transition:opacity .85s cubic-bezier(.22,.9,.24,1),transform .85s cubic-bezier(.22,.9,.24,1)} .rv.on{opacity:1;transform:none} .wd{display:inline-block;white-space:nowrap;opacity:.13;transition:opacity .45s ease} .wd.lit{opacity:1} .co{opacity:0;transform:translateY(14px)} .co.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv,.co{opacity:1!important;transform:none!important}.wd{opacity:1!important} .redrule{width:110px!important} .seq{height:auto}.stick{position:static;height:auto;padding:12vh 0} .layer{position:static}.s-mark,.s-b2{opacity:1!important;transform:none!important} /* the wrapper carries the intro fade, and killing the animation leaves it at its initial 0, which removed the Axel mark entirely for anyone with Reduce Motion on. */ .markwrap{opacity:1!important;animation:none!important} /* .opener is absolutely positioned over .layer in the animated version. Left that way under reduced motion it covered the mark and put the third line before the second. Static, the DOM order is the reading order: mark, line, photo, line, held line. */ .opener{position:static;inset:auto;padding:0 5vw;margin-top:6vh} .s-mark{width:min(34vw,240px);margin:0 auto} .s-open{clip-path:none!important;position:relative;height:52vh;margin:22px 0} .s-b3{position:static;opacity:1!important;transform:none!important;margin-top:28px} .s-b3 .sub{opacity:1!important} .cue{display:none} } @media (max-width:820px){ :root{--rail:0px} .spine{display:none} .sect,.band,.foot,.pagehead{grid-template-columns:1fr} .rail{padding:26px 22px 0}.rlab{position:static}.field{padding:16px 22px 40px} .band{height:auto;padding:12px 0}.band .brand{padding:0 22px} .band .right{padding:10px 22px 0;justify-content:flex-start;gap:16px;flex-wrap:wrap} /* Tap targets (QA, 13 Sep): the section links measured 14px tall and the wordmark 21px. Padding adds touch area and the matching negative margin keeps every word exactly where it was. */ .band .right a:not(.lp){padding:13px 0;margin:-13px 0} .band .brand a{padding:10px 0;margin:-10px 0} .grid{grid-template-columns:repeat(2,1fr)} .hero{font-size:clamp(30px,8.2vw,52px);max-width:100%} .body,.cta-wrap,.honest{max-width:100%} .co{min-height:132px}.mk{padding:0 14px 26px} .who2{grid-template-columns:1fr;gap:20px}.who2 img{max-width:220px} .two{grid-template-columns:1fr} .door{border-left:0;border-top:1px solid rgba(237,235,230,.22);padding:32px 0 34px} .door:first-child{border-top:0} .pagehead .field{padding:40px 22px 34px} .footcols{grid-template-columns:1fr} .fbrand{padding:30px 22px 22px;gap:12px} .fcol{padding:22px 22px 22px;border-left:0;border-top:1px solid var(--line);gap:10px} .fcol:last-child{padding-right:22px} .footbase{padding:22px 22px 0;flex-direction:column} /* min(): in landscape at 820 wide or less, 66vw made the AX mark TALLER than the viewport (495x444 in a 342px-tall 750x342 viewport, bottom 102px cut off, the red cue drawn through the letters). The mark's viewBox is 343.2 x 308, so 61vh of width caps its height at ~55% of the viewport. On every portrait phone 66vw is the smaller term, so portrait is untouched. Found by the Sep 10 verification critic; pre-existing. */ .s-mark{width:min(66vw,61vh)}.tex{height:34vh} } /* THE OPENING ON A PHONE. Gryph, from his own phone, Sep 10 2026: "On mobile we should make this shorter top to bottom. We don't need the lava to take up the full screen, closer to half would be better so it's easier to scroll through." Two changes, both phone-only, desktop untouched (v29 locked the desktop opening): 1. The frame opens to 50vh, not 100vh, and the photograph is sized to that same 50vh so the whole composition is inside the frame when it is fully open, rather than its top half. 2. The pin is 300vh, not 360vh: 200vh of scroll instead of 260vh. public.js computes progress from seq.offsetHeight, so every beat compresses in proportion and the choreography he signed off is unchanged, only faster. Per beat, in vh of scroll: mark words held crossfade held line 360vh 59 74 33 68 300vh 45 57 25 52 WHY 300 AND NOT SHORTER, measured rather than guessed. A 240vh draft was built and verified first. Modelling iOS momentum flicks (velocity x 0.998/ms, from the top), a 1.2-screen flick carried the two lines past at full opacity for ~400ms without stopping on them, and flicks of 1.5 screens and up ran past the end of the pin. A second pass scanned every flick from 0.4 to 2.4 screens in 0.1 steps: across the common 0.8-2.0 range, 300vh leaves the reader stopped on a pinned message 80% of the time against 36% at 240vh, and never past the opening (240vh: 12%). KNOWN AND STRUCTURAL, and smaller than production's: between the two lines and the held line there is a band (0.615 to 0.734 of the pin) where a flick can come to rest with neither message at full strength. On a full-height phone 1.3 and 1.4-screen flicks land in it; with the iOS toolbar showing, 1.4 and 1.5. Every pin from about 209vh to 425vh has such a band somewhere in 0.8-2.0 screens. Production's 360vh has it at 1.6-1.9 screens and rests in it 28% of the time, against 20% here. Narrowing it means a faster crossfade in public.js (the --b2/--b3 slopes, 4.2 and 5.2 -> 9, cut the band from 202px to 91px in a test), which changes the choreography he signed off, so it is his call rather than a CSS tweak. An earlier version of this comment claimed 300vh rested every common flick on a readable beat; the first pass had only sampled five flick sizes and the band fell between them. GUARDED BY prefers-reduced-motion:no-preference ON PURPOSE. The reduced-motion block above sets .seq{height:auto} and .s-open{height:52vh}, and it sits EARLIER in this file, so an unguarded rule here would win at equal specificity and trap a Reduce Motion reader on a phone inside a 300vh section. The no-JS fallback is safe either way: html:not(.js) .seq scores (0,2,1) and outranks both. */ /* ⚠️ THE 50vh FRAME IS OVERRULED. THE PIN IS NOT. Gryph, 18 Sep, after seeing it on his phone: "I want the red to take up the full page. We don't need to make it smaller, because honestly, I don't think it really makes it quicker to scroll through at all." He is right about the frame and it is worth writing down so nobody re-derives it: THE FRAME HEIGHT DOES NOT AFFECT SCROLL LENGTH AT ALL. The pin is `.seq`, a fixed multiple of the viewport, and `.s-open` grows inside it while the stage is stuck. Halving the frame bought zero scrolling and cost the full-bleed opening, which is the beat he signed off in v29. So the frame goes back to 100vh and THE PIN STAYS AT 300vh: that is the only one of the two that shortens anything (2532px against 3038px at 390x844, 17% less), it is what he approved on 10 Sep, and the 17 Sep lighter pass had reverted it by accident while leaving the comment above standing over code that no longer matched it. One number to put the pin back to 360vh. NOTE the frame never actually fills the screen: `.opener` is a flex column and the two lines take their share, so 100vh resolves to about 93% of the viewport. That is the full-bleed look he means, and closing the last 7% would mean laying the lines OVER the photograph instead of being pushed apart by it, which is the TMRW move this whole sequence is built on. Do not. */ @media (max-width:820px) and (prefers-reduced-motion:no-preference){ .seq{height:300vh} .s-open{height:calc(var(--o) * 100vh)} .s-open img{height:100vh} } /* THE SAME CAP FOR BIGGER PHONES ON THEIR SIDE. The 61vh cap in the 820px block does not reach landscape phones wider than 820 (iPhone 12/13 Pro Max and 14 Plus at 832x380, XR at 896x414, Pixel 7 at 863x360, Pixel 4a 5G at 840x312), which fell back to the desktop mark, min(44vw,400px): 85 to 106% of the screen height, the red cue through the letters. Found by the second Sep 10 verification pass; pre-existing, identical on production. (min-width:821px) so it can never touch the 820 block's own rule; (max-height:500px) so ordinary desktop windows keep their 400px mark (a desktop window that short had the same overlap and is better for this); reduced motion guarded, as above, so that path is untouched. */ @media (min-width:821px) and (max-height:500px) and (prefers-reduced-motion:no-preference){ .s-mark{width:min(44vw,400px,61vh)} } .g-hseq{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-hhero{--ground:#111112;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(101deg,rgba(11,11,12,1) 30%,rgba(11,11,12,.97) 52%,rgba(11,11,12,.85) 74%,rgba(11,11,12,.66) 100%),url(img/tex-rock.jpg?v=1) right top/1600px auto repeat,linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,0.900) 100%);color:var(--ink)} .g-hfocus{--ground:#111112;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(101deg,rgba(11,11,12,1) 30%,rgba(11,11,12,.97) 52%,rgba(11,11,12,.85) 74%,rgba(11,11,12,.66) 100%),url(img/tex-rock.jpg?v=1) right top/1600px auto repeat,linear-gradient(180deg,rgba(11,11,12,0.900) 0%,rgba(11,11,12,0.920) 100%);color:var(--ink)} .g-hwhy{--ground:#151516;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(101deg,rgba(11,11,12,1) 30%,rgba(11,11,12,.97) 52%,rgba(11,11,12,.85) 74%,rgba(11,11,12,.66) 100%),url(img/tex-rock.jpg?v=1) right top/1600px auto repeat,linear-gradient(180deg,rgba(11,11,12,0.920) 0%,rgba(11,11,12,0.950) 100%);color:var(--ink)} .g-hcos{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--faint:#827B77;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(101deg,rgba(11,11,12,1) 30%,rgba(11,11,12,.97) 52%,rgba(11,11,12,.85) 74%,rgba(11,11,12,.66) 100%),url(img/tex-rock.jpg?v=1) right top/1600px auto repeat,linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-hway{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--faint:#827B77;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(101deg,rgba(11,11,12,1) 30%,rgba(11,11,12,.97) 52%,rgba(11,11,12,.85) 74%,rgba(11,11,12,.66) 100%),url(img/tex-rock.jpg?v=1) right top/1600px auto repeat,linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-hfoot{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--faint:#827B77;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-thero{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(rgba(11,11,12,.90),rgba(11,11,12,.90)),url(img/tex-rock.jpg?v=1) left top/1100px auto repeat,linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-tdean{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(rgba(11,11,12,.90),rgba(11,11,12,.90)),url(img/tex-rock.jpg?v=1) left top/1100px auto repeat,linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-tbrdg{--ground:#0F0F10;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(11,11,12,.22);--line2:linear-gradient(180deg,rgba(237,235,230,.30),rgba(11,11,12,.34));background:linear-gradient(180deg,rgba(11,11,12,0.950) 0%,rgba(11,11,12,0.860) 52%,rgba(92,84,73,0.340) 84%,rgba(210,204,192,0.740) 100%);color:var(--ink)} .g-treach{--ground:#C4C0B7;--ink:#0B0B0C;--muted:#524D48;--red:#8A5200;--line:rgba(11,11,12,.22);--line2:rgba(11,11,12,.34);background:linear-gradient(180deg,rgba(210,204,192,0.740) 0%,rgba(216,211,199,0.800) 100%);color:var(--ink)} .g-tfoot{--ground:#CCC8BF;--ink:#0B0B0C;--muted:#57524D;--red:#8A5200;--faint:#57524D;--line:rgba(11,11,12,.22);--line2:rgba(11,11,12,.34);background:linear-gradient(180deg,rgba(216,211,199,0.800) 0%,rgba(219,214,203,0.804) 55%,rgba(223,218,207,0.810) 100%);color:var(--ink)} .g-ahero{--ground:#111112;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(rgba(11,11,12,.90),rgba(11,11,12,.90)),url(img/tex-rock.jpg?v=1) left top/1100px auto repeat,linear-gradient(180deg,rgba(11,11,12,0.930) 0%,rgba(11,11,12,0.910) 100%);color:var(--ink)} .g-aform{--ground:#0E0E0F;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(rgba(11,11,12,.90),rgba(11,11,12,.90)),url(img/tex-rock.jpg?v=1) left top/1100px auto repeat,linear-gradient(180deg,rgba(11,11,12,0.910) 0%,rgba(11,11,12,0.980) 68%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-abrdg{--ground:#0E0E0F;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(11,11,12,.22);--line2:linear-gradient(180deg,rgba(237,235,230,.30),rgba(11,11,12,.34));background:linear-gradient(180deg,rgba(11,11,12,0.950) 0%,rgba(11,11,12,0.860) 52%,rgba(92,84,73,0.340) 84%,rgba(210,204,192,0.740) 100%);color:var(--ink)} .g-alp{--ground:#C3BFB6;--ink:#0B0B0C;--muted:#514C47;--red:#8A5200;--line:rgba(11,11,12,.22);--line2:rgba(11,11,12,.34);background:linear-gradient(180deg,rgba(210,204,192,0.740) 0%,rgba(216,211,199,0.800) 100%);color:var(--ink)} .g-afoot{--ground:#CBC7BE;--ink:#0B0B0C;--muted:#56524C;--red:#8A5200;--faint:#56524C;--line:rgba(11,11,12,.22);--line2:rgba(11,11,12,.34);background:linear-gradient(180deg,rgba(216,211,199,0.800) 0%,rgba(219,214,203,0.804) 55%,rgba(223,218,207,0.810) 100%);color:var(--ink)} .g-xhero{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} .g-xfoot{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547;--line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:linear-gradient(180deg,rgba(11,11,12,1.000) 0%,rgba(11,11,12,1.000) 100%);color:var(--ink)} /* ONE ground for the whole document. It is absolutely positioned rather than fixed, so it genuinely runs through the page instead of sitting behind it. */ .page{position:relative;isolation:isolate} .bgstack{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; background:#0B0B0C} body[data-page="access"] .bgstack,body[data-page="team"] .bgstack{background:#0B0B0C} body[data-page="404"] .bgstack{background-image:none} .seq,.doc{position:relative;z-index:1} .sect,.pagehead,.foot,.tex,.fieldsec,.show,.redplate,.seq{background-color:transparent} /* every border in the kit was hardcoded to the light ink; on this ground it has to follow the band, so all of them are re-pointed at --line. */ .sect,.pagehead,.foot,.foothead,.fcol,.beat,.fdr,.door,.tex,.colist,.corow,.band, .fieldsec,.show{border-color:var(--line)} .plate,.who2 img{border-color:var(--line2)} .co{box-shadow:0 0 0 1px var(--line2)} input,select,textarea{border-bottom-color:var(--line2)} .honest,.legal,.pcap{color:var(--muted)} /* one rule per band rather than a single full-height spine, which cannot cross a ramp. This also fixes the overlap Gryph caught: it is a real border now, not an absolutely positioned element sitting on top of the copy. */ .spine{display:none} .bandspacer{position:relative;border-bottom:1px solid var(--line)} .bandspacer::after{content:'';position:absolute;left:var(--rail);top:0;bottom:0;width:1px; background:var(--line2)} @media (max-width:820px){.bandspacer{height:26vh!important} .bandspacer::after,.rail::after{display:none}} .rail{position:relative} .rail::after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line2)} /* the nav floats across the whole ramp, so it samples the band under it and interpolates. It reads the real stops off the DOM rather than a copied table. */ .band{background:var(--navbg,rgba(11,11,12,.9));border-bottom-color:var(--navline,rgba(237,235,230,.22)); transition:background-color .18s linear} .band .brand a,.band .axnav,.band .wm{color:var(--navink,#EFEBE6)} .band .right a{color:var(--navmuted,#9E9894)} .band a.lp{border-color:var(--navred,#FFB547);color:var(--navred,#FFB547);letter-spacing:.16em} .band .right a:hover{color:var(--navred,#FFB547)} .band a.lp:hover{background:var(--blood,#FFB547);color:#0B0B0C;border-color:var(--blood-edge,#D98E1F)} /* one saturated red field, the only place where colour is the ground */ .redplate{background:#FFB547!important;color:#0B0B0C;padding:104px 34px 112px; border-bottom:1px solid rgba(239,235,230,.26);position:relative} .redplate .rp{font-family:'Display';font-size:clamp(30px,4.6vw,68px);line-height:1.06; max-width:17ch;text-transform:uppercase;letter-spacing:-.01em} .redplate .rpb{font-size:16px;line-height:1.66;color:#FCD3D6;max-width:44ch;margin-top:24px} .pill{display:inline-flex;align-items:center;gap:14px;margin-top:38px; border:1px solid rgba(239,235,230,.55);border-radius:999px;padding:13px 26px; font-family:'Display';font-size:19px;color:#EFEBE6;text-decoration:none; transition:background .25s,color .25s,border-color .25s} .pill:hover{background:#0B0B0C;color:#FFB547;border-color:#0B0B0C} .pill .ar{font-family:'Text';font-size:15px} @media (max-width:820px){.redplate{padding:62px 22px 68px}} /* the showcase. one photograph, dissolved into a warm horizon, read THROUGH the cards. */ .show{position:relative;overflow:hidden;padding:0;border-bottom:0; display:flex;flex-direction:column} /* NOTE: there was a .show>img rule here for a smoke plate over the showcase. No such element is ever emitted, so it styled nothing, and the crossover it was meant to hide was happening on bare ground. The ramp now lives in .g-hcos alone (the photograph is gone.jpg itself, whose vertical tone profile was retargeted to be monotonic. Do not reintroduce a plate here without re-measuring the ramp. */ /* the veil holds the top of the section genuinely dark, because twelve white wordmarks live there, and only then lets go into the glow. */ .show .showveil{position:absolute;inset:0; background:linear-gradient(180deg,#0B0B0CE8 0%,#0B0B0CBF 16%,#0B0B0CB8 54%, #2A2521C9 70%,#7C766DE6 86%,#A8A196FA 96%,#A8A196 100%)} /* .glowpool is GONE, element and all. It was a child of .show, so the warm pool could not be anything but a section-sized object: its centre landed at page-y 5046 with a 301px vertical radius, and .show ended at 5162, cutting the pool off 77px early at 38.5% of its radius while it still carried alpha .135. That is the hard line Gryph reported. .texzone wraps focus + why + show with overflow:hidden, so overhanging the div downward is not available either. The pool is now a BACKGROUND LAYER, first in the list (so it still paints over the section scrim exactly as the div did) in BOTH .g-hcos and .g-hway, with px geometry anchored to the ONE edge those two share: .show's bottom IS .wayin's top, so the two halves are the same function of page-y and join with no seam at any height. See the .g-* table and .wayin for the numbers and the invariant. */ .show .showhead,.show .carousel,.show .prog{position:relative;z-index:2} .show .showhead{padding:72px 34px 30px} .tag{display:inline-block;border:1px solid rgba(239,235,230,.62);border-radius:999px; padding:5px 13px 6px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase; font-weight:700;color:#EFEBE6;margin-bottom:20px} .show .golabel,.show .golabelsub{color:#EFEBE6} .show .golabelsub{color:#C9C3BD;margin-bottom:6px} /* no scroll-snap: it fights a continuous drift and yanks the row on every release. */ .carousel{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain; padding:26px 34px 52px;scrollbar-width:none;-ms-overflow-style:none; cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)} .carousel:active{cursor:grabbing} .carousel::-webkit-scrollbar{display:none} .card{flex:0 0 clamp(230px,25vw,330px);height:clamp(210px,23vw,290px); border:1px solid rgba(239,235,230,.52);border-radius:30px;position:relative; display:flex;align-items:center;justify-content:center;text-decoration:none;color:#EFEBE6; transition:border-color .3s ease,background .35s ease,opacity .3s ease} .card:hover,.card:focus-visible{border-color:#EFEBE6;background:rgba(239,235,230,.11)} /* DIM WHAT IS NOT HOVERED. From the design call: "when you hover, the card sort of lit up. The other ones need to have a lesser opacity, the ones that are not active." This is the note behind Gryph's "make the highlight brighter" and it is why the earlier attempt was sent back: the lighting is done by taking light OFF the other eleven, not by adding a red spotlight to the one. The hovered card's own treatment is untouched. */ .carousel:hover .card{opacity:.34} .carousel:hover .card:hover,.carousel .card:focus-visible{opacity:1} /* Touch browsers hold :hover on the last thing tapped, which would leave a phone looking at eleven faded cards with no way to clear it. */ @media (hover:none){.carousel:hover .card{opacity:1}} .card .mk{position:static;padding:0 34px;opacity:.9;transform:none} .card:hover .mk{opacity:1;transform:none} .card .cometa{left:26px;right:26px;bottom:20px} .card:hover .cometa,.card:focus-visible .cometa{opacity:1;transform:translateY(0)} .card .cobrief,.card .courl{color:#EFEBE6} .card .courl{opacity:.7} .showfoot{height:3.4vh;flex:0 0 auto} /* nothing loops under reduced motion, so the second set would just be the portfolio printed twice with a dead end at the far right. */ @media (prefers-reduced-motion:reduce){.card.dup{display:none} .carousel{-webkit-mask-image:none;mask-image:none}} @media (max-width:820px){.show .showhead{padding:48px 22px 22px} .carousel{padding:20px 22px 40px}} /* the pill replaces the underlined link everywhere on this direction */ .cta{border-bottom:0;border:1px solid var(--red);border-radius:999px;padding:12px 24px; display:inline-flex;align-items:center;gap:12px} /* the single call to action on the site, so it is a filled button rather than an outline */ .cta.big{background:var(--blood,#FFB547);color:#0B0B0C;font-size:24px;padding:16px 34px;margin-top:30px} .cta.big:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)} /* the request form is the only conversion on the site, so it sits on its own surface instead of dissolving into the page. Same rounded-outline language as the cards. */ /* Gryph: "I still want this form to be bigger and a little more robust. It just seems small and left-justified, and I don't see why we can't make it a little more aspirational." So the panel is wider, the fields are taller, and the type inside them is 18px rather than inherited. 18px also happens to be above the 16px floor below which iOS zooms the whole page on focus, so this is a mobile fix as well as a scale one. */ .formpanel{margin-top:34px;padding:44px 44px 46px;max-width:82ch;border-radius:26px; border:1px solid var(--line2);background:rgba(239,235,230,.055)} .formpanel form{margin-top:26px;max-width:none} .formpanel .row{margin-bottom:22px} /* Four short answers sit two-up so the panel can be wide without producing inputs sixty characters across. "How we know each other" is a sentence and stays full width. */ .rowpair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} .rowpair .row{margin-bottom:22px} @media (max-width:640px){.rowpair{grid-template-columns:1fr;gap:0}} .formpanel input[type=text],.formpanel input:not([type]),.formpanel input[type=email], .formpanel select,.formpanel input[type=tel],.formpanel textarea{background:rgba(239,235,230,.07);border:1px solid var(--line2); border-radius:13px;padding:15px 17px;font-size:18px} .formpanel input:focus,.formpanel select:focus,.formpanel textarea:focus{border-color:var(--red); background:rgba(239,235,230,.11)} .formpanel label{color:var(--muted)} /* The form-panel pill is the last red Gryph flagged as neon ("same as the send it button"): it filled with --red, never --blood. Only login.html renders it now, in the settled blood with the --blood-edge hairline and a white label (11.7:1) since --blood alone is 1.74:1. */ .formpanel button{background:var(--blood,#FFB547);color:#0B0B0C;border-color:var(--blood-edge,#D98E1F); border-radius:999px;font-size:23px;padding:15px 34px;margin-top:26px} .formpanel button:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)} /* Replaces the whole "02 ALREADY INVESTED" section and its full-size LP login button. Gryph: "maybe at the bottom of requesting access we have a little disclaimer that says 'already have an account? log in', with a hyperlink." An existing LP arrives here by mistake, so this is a correction, not a second call to action, and it is sized like one. */ /* THE RED, settled from Gryph's own reference (the blood drop, 12 Sep). Its body samples #BF0406 at hue 359.4 and saturation 98. What shipped was #FF2536: four degrees off, fifteen points less saturated and a quarter brighter, which is why he read it as neon rather than blood. TWO DEPTHS, one hue, and the split is forced by contrast, not taste: --blood #7B0303 SOLID SURFACES ONLY. Gryph picked option E from the live comparison page (12 Sep): "that's closest to what I want". As a fill it is only 1.74:1 against near-black, so it CANNOT carry its own edge. --blood-edge #BF0406 the 1px edge on every blood surface, 3.03:1, which is what makes the control clear the non-text threshold while the fill stays this deep. E's own edge in the lab was #A80102 at 2.5:1 and would not have. Do not merge these two values back together. (superseded) #BF0406 SOLID SURFACES ONLY. 3.03:1 as an object against near-black, which clears the 3:1 a control needs, with WHITE labels at 6.49:1. His own call: "if this is too dark and you have to use white text instead, then that's fine." --red #FF191C thin things: links, chip outlines, hairlines, small text. 4.96:1, because small red text must clear 4.5 and the blood only reaches 3.03. The darker half of the drop, #A80102, looks richer but measures 2.5:1 as an object, the same failure the old #A30F1C button had, so the body mean is what ships. */ /* "optional" beside a field name is a hint, not part of the name. */ .row .opt{opacity:.55;font-weight:400} .haveacct{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--muted)} .haveacct a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor} .haveacct a:hover{color:var(--ink)} .formlead{font-size:15px;line-height:1.6;color:var(--muted);max-width:46ch} @media (max-width:820px){.formpanel{padding:26px 22px 30px;border-radius:18px}} .cta:hover{background:var(--blood,#FFB547);color:#0B0B0C;border-color:var(--blood-edge,#D98E1F)} button{border-radius:999px} /* ------------------------------------------------------------------------------------ THE REQUEST FORM, made to carry weight. Gryph's note: "the request access form needs to be punchier and stand out more." Three changes, in order of how much they do: 1. the submit is a SOLID red pill, not an outline. It was the same weight as the input borders, so nothing on the panel read as the thing to press. 2. the panel gets a lifted surface and a red top edge, so it reads as a card on the page rather than as the page. 3. the lead line is set at reading size instead of caption size. The solid button runs near-black type on the red. Measured 4.46:1, which clears the 3:1 large-text threshold at 19px/700 with room to spare. Do NOT drop the weight or the size without re-measuring, because it does not clear 4.5:1 as small text. ------------------------------------------------------------------------------------ */ .formpanel{background:rgba(239,235,230,.055);border:1px solid var(--line2); box-shadow:0 1px 0 rgba(239,235,230,.06) inset,0 18px 50px -30px rgba(0,0,0,.9); position:relative;overflow:hidden} .formpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--red)} .formpanel .formlead{font-size:17px;line-height:1.6;color:var(--ink);max-width:44ch} /* SEND IT is display type with the same drawn red arrow as the homepage CTA, left aligned, as Gryph modelled it (12 Sep). No fill and no pill: the form panel's own red top edge already frames it, and red stays reserved for the arrow and the links. The label sits in its own .lbl span because the script swaps it to Sending and back, and writing to the button itself would delete the arrow. Scoped to #ar, the access form. login.html's two buttons are .send inside a .formpanel too and they keep the pill, so this cannot be a bare .send. The comment now sits OUTSIDE the selector: a newline between ".formpanel button" and ".send" reads as a descendant combinator, so the rule matched nothing and the button stayed a pill (caught with CSS.getMatchedStylesForNode). */ /* padding 7px 0 with margin-top 19px (was 0 and 26px): a 44px tap target at every width, the word where it was (QA, 13 Sep) */ #ar button.send{background:none;border:0;border-radius:0;padding:7px 0;margin-top:19px; color:var(--ink);font-family:'Display';font-weight:400;letter-spacing:0; font-size:clamp(28px,3vw,40px);line-height:1.1;text-align:left; display:inline-flex;align-items:center;gap:clamp(14px,1.4vw,24px);cursor:pointer} #ar button.send:hover,#ar button.send:focus-visible{background:none;color:var(--ink)} #ar button.send:disabled{opacity:.5;cursor:default} #ar button.send:disabled .ar{transform:none} .ferr{color:var(--red);font-size:14px;line-height:1.5;margin-top:18px;min-height:1px} .ferr:empty{margin-top:0} .fnote{color:var(--muted);font-size:12.5px;line-height:1.6;margin-top:18px;max-width:46ch} .ilink{color:var(--red);text-decoration:underline;text-underline-offset:2px} /* An invalid field has to be visible without relying on colour alone, so it gets a thicker edge as well as the red. */ .formpanel [aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)} @media (max-width:540px){ /* login's pill goes full width on a phone, as it did before SEND IT was restyled */ .formpanel button.send{width:100%;padding:16px 24px} #ar button.send{width:auto;padding:7px 0;font-size:clamp(26px,7vw,32px)} } /* ------------------------------------------------------------------------------------ NO JAVASCRIPT. The pinned opening is driven entirely by --p, --m, --b2, --b3 and --o, which only assets/public.js sets, so without it the reader gets a broken first screen. Unwind the sequence into a plain stacked block instead. Same shape as the reduced-motion block above, and the same reason: one failed script must never cost the reader the site. See CLAUDE.md v15. ------------------------------------------------------------------------------------ */ html:not(.js) .rv{opacity:1;transform:none} html:not(.js) .co{opacity:1;transform:none} html:not(.js) .wd{opacity:1} html:not(.js) .seq{height:auto} html:not(.js) .stick{position:static;height:auto;padding:14vh 0} html:not(.js) .layer{position:static} html:not(.js) .opener{position:static;gap:20px} html:not(.js) .markwrap{opacity:1;animation:none} html:not(.js) .s-mark,html:not(.js) .s-b2{opacity:1;transform:none} html:not(.js) .s-open{height:50vh} html:not(.js) .s-b3{position:static;transform:none;opacity:1;margin-top:22px} html:not(.js) .cue{display:none} /* The coda under the revealed line. Gryph: "under that, in the middle, center justify, and 'money is the easy part'." .s-b3 is already centred, so a block span inherits it. Red, and about a third the size, so it reads as the turn rather than a second headline. */ .s-b3 .sub{display:block;margin-top:clamp(16px,2.6vh,30px); font-size:clamp(15px,1.9vw,24px);line-height:1.35;color:var(--red);text-shadow:none} /* ------------------------------------------------------------------------------------ TOUCH. The twelve company briefs and domains live in .cometa at opacity 0, revealed only on :hover, so on every phone the showcase degraded to twelve unlabelled logos. That is the proof section, on the surface most people use. Measured at 360 wide: the card is 230x210, the wordmark 21.8px, and .cometa is 69px starting 4.1px under it, so it fits inside the card with room and needs no other change. The :hover and :focus-visible rules stay for pointer devices. ------------------------------------------------------------------------------------ */ @media (hover:none){ .card .cometa{opacity:1;transform:none} } /* ------------------------------------------------------------------------------------ THE FAILSAFE, and it closes a hole my earlier fix left open. Gating the hiding on html.js only distinguishes "JS is available" from "JS is off". It does NOT cover the likelier failure: JS available, public.js dropped, blocked, or throwing. In that state html.js is set, so the html:not(.js) rescue never fires and .rv stays at opacity 0 forever. Measured: 12 blocks stuck invisible on the home page, 3 on team including Dean's whole biography in the first screen. A timer costs nothing when the script arrives first and turns the worst case into readable text at 2.2 seconds. ------------------------------------------------------------------------------------ */ html.shown .rv,html.shown .co{opacity:1!important;transform:none!important} html.shown .wd{opacity:1!important} /* ------------------------------------------------------------------------------------ The focus section, rebuilt. Gryph: "reinvent this section so it's at the top banner... And then maybe stacked somewhere creatively, we have the words consumer health diagnostics and longevity." So the belief is the banner and the three categories are the graphic, which is also where the section gets the pop he said the plain list could not have. The rules are the site's existing hairline idiom, not a new visual language. ------------------------------------------------------------------------------------ */ .banner{font-family:'Display';font-size:clamp(30px,4.4vw,64px);line-height:1.06; letter-spacing:-.01em;max-width:26ch} /* ------------------------------------------------------------------------------------ THE CATEGORY TICKER. Gryph: "maybe this should be a scrolling banner, like a ticker tape thing... maybe that's even a neon red ticker tape with white text. That divides what we invest in and why us." ⚠️ A marquee was REMOVED in v24 on his instruction: "ticker tape stuff's kind of overused... I don't like that it does this weird scroll as I scroll up and down." The objection was the SCROLL COUPLING, not the ticker. So this one runs at a constant speed on its own clock and is completely decoupled from scroll position. Do NOT reconnect it to scroll. Red is #ED1422 rather than the site's --red. White on --red measures 3.99:1, which clears large text but fails small; #ED1422 measures 5.0:1, so the band passes AA at any size. It deliberately breaks the ground ramp, which is correct here: red is a different substance, not a value step. ------------------------------------------------------------------------------------ */ /* THE CATEGORY BAND. Static, dark, red words, hairline rules: his pick from a five-option lab page, after he called the moving red version "generic and too busy and too loud". ONE LINE, on his instruction, and four words were cut to make that possible: Lab tests, Air quality, Molecules and Sensors. Eight remain. The .tickrow wrapper and the duplicate word set are both gone. They only ever existed to make a marquee loop seamless and there is no marquee. Red #FF191C on #101011 measures 4.93:1. */ .ticker{position:relative;background:#101011;overflow:hidden; border-top:1px solid rgba(237,235,230,.18);border-bottom:1px solid rgba(237,235,230,.18)} /* CATEGORY CELLS. Gryph, 12 Sep, pointing at option D from the lab: "let's take away that jitter, and let's just make it a pretty clean box look like this." So the outlined red pills, their blurred The band is a seven-column grid, wrapping to four then two, drawn with ONE hairline per shared edge: the cells SPAN THE FULL WIDTH (Gryph, 12 Sep: "consumer and gut health should go all the way to the sides, not just be center justified"), each drawing its right rule with the first also drawing a left one, so the band is blocked out edge to edge. The rules are rgba(237,235,230,.34), stronger than the .22 hairline they replaced, because he asked for the blocking to read more strongly. Words are cream at --ink; RED IS RESERVED FOR ACTIONS and appears nowhere here. */ .tickset{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0; list-style:none;margin:0;padding:0;width:100%; /* the outer left edge belongs to the container, not li:first-child: below 1440 the set wraps and :first-child closed row one only, leaving every later row open (caught at 390) */ border-left:1px solid rgba(237,235,230,.34)} .tickset li{position:relative;display:flex;align-items:center;justify-content:center; font-family:'Display';line-height:1.15;color:var(--ink);text-align:center; font-size:clamp(13px,1.05vw,17px);padding:clamp(22px,3.2vh,34px) clamp(8px,1vw,18px); border-right:1px solid rgba(237,235,230,.34); transition:border-color .3s ease,background-color .3s ease} .tickset li:hover{background-color:rgba(239,235,230,.035)} @media (max-width:1100px){ /* SIX CELLS, EVEN ROWS, below desktop width (13 Sep). Seven cells in four columns left an empty slot, the same open box Gryph flagged on phones, so tablets and phones held sideways follow his phone rule: Sleep (5th in the markup) is hidden and Gut health (7th) takes its slot by `order`, in three columns of two rows: Consumer health, Diagnostics, Longevity / Wearables, Gut health, Metabolic health. Every cell keeps its right rule, INCLUDING the one at the outside edge, or the band reads as unfinished. The bottom rule goes on the first row only; the last row's underside is the band's own border. The phone block below narrows this to two columns and extends the bottom rule to its first two rows. */ .tickset{grid-template-columns:repeat(3,minmax(0,1fr))} .tickset li:nth-child(5){display:none} .tickset li:nth-child(7){order:1} .tickset li:nth-child(6){order:2} .tickset li:nth-child(-n+3){border-bottom:1px solid rgba(237,235,230,.34)} } @media (max-width:560px){ .tickset{grid-template-columns:repeat(2,minmax(0,1fr))} .tickset li{font-size:14px;padding:20px 10px} /* PHONES SHOW SIX (Gryph, 13 Sep): seven cells in two columns left an empty box beside Gut health. The hiding and reordering come from the block above, so the grid reads Consumer health, Diagnostics / Longevity, Wearables / Gut health, Metabolic health. Desktop keeps all seven in markup order. Only the first two rows draw a bottom rule; the last row's underside is the band's own border. */ .tickset li:nth-child(-n+4){border-bottom:1px solid rgba(237,235,230,.34)} } .tickset li>span{position:relative;z-index:1} /* the tether the call asked for: one short tug that settles. Not a rattle, and it does not repeat, so a cursor resting on a chip is not a permanent moving object. */ /* Eight chips cannot hold one readable line on a phone, so below this width they wrap. One line is the desktop instruction; an unreadable single line is not an improvement. */ @media (max-width:820px){ } /* ------------------------------------------------------------------------------------ ONE CONTINUOUS ROCK TEXTURE across the argument. Gryph: "you could do that rock texture from the reason why we invest all the way through the YS section, and then it will kind of stop and bleed out as it does through these direct investments." A per-section pseudo-element cannot span sections, so the zone is a wrapper around focus, why and the showcase, and the texture is one element over all three. It fades out across the lower third, which is the showcase, so it stops by the time the green arrives. The v26 contrast lesson still binds: full width at high opacity dropped body copy to 1.23:1. So it stays in the right-hand portion, past the copy measure, at low opacity, and is disabled below 1100px. ------------------------------------------------------------------------------------ */ .texzone{position:relative;isolation:isolate;overflow:hidden} .texzone>*{position:relative;z-index:1} /* The rocky bleed does NOT live here any more. Every band inside this wrapper paints an OPAQUE black gradient at z-index 1, so a ::before at z-index 0 underneath could never be seen: measured, the left-to-right delta was +0.0 to +0.8 of luminance, i.e. nothing. The texture is now the second layer inside each band's own background, under a black veil that carries the ramp. Same lesson as the glow pool: when a band is opaque, own the band's background rather than sitting beneath it. */ .texzone::before{display:none} @media (max-width:1100px){.texzone::before{display:none}} /* the old per-section texture is superseded by the zone */ #why.texfield::before{display:none} /* ------------------------------------------------------------------------------------ THE GREEN PLATE at the top of The Way In. Gryph: "I want more of these green elements to actually be highlighted to see the growth... the green in the graphic really doesn't come through here yet." Measured, and he was right for a reason worth keeping: the ground photograph's lower half saturation of 2 to 7 percent and 0.0% green pixels on nearly every row. The green was not washed out, it was absent. canal.jpg is 54.6% green pixels, and v33 identified it as the braided river through black sand he meant. Horizon never emitted it. CONTAINED, not full bleed: the source is only 900px wide, and he has already sent one graphic back for looking fuzzy. Capped so it is never upscaled past about 1.25x. ------------------------------------------------------------------------------------ */ /* THE WAY IN, as a section, is GONE. Gryph: "remove this section 03 THE WAY IN all together and just move the request access button here." The rail column and its padding were what produced the flat grey band he photographed between the showcase and the picture, so removing the section removes the band. What is left is the photograph, edge to edge, with one button on it and no label above it. The rail sequence is now 00, 01, 02. */ /* THE ENDING. Gryph: "request access should be right under the company animation and right above the footer. we can remove this image all together." So there is no photograph here any more, just the button in a band of its own. It keeps the g-hway ground class deliberately: that scrim is SEMI-TRANSPARENT, which is what lets the page's ground photograph carry on through this band and into the footer. Do not make it opaque. */ /* THE POOL'S TAIL LANDS IN HERE. The warm pool is centred 116px above this element's top edge with a 208px vertical radius, so it reaches zero 92px down into this band and the footer below never sees it. .wayin measures 161px at >=821px and 123px on a phone, so there is 31px of clearance at the tightest width; min-height is the floor that keeps the invariant true if this band is ever made shorter. If .wayin is ever deleted, the pool gets clipped at .show's bottom again and the hard line comes straight back. */ /* Gryph: "I think this could be brighter and a bit higher on the page." BRIGHTER. The button was inheriting --red, which on this band is #8C0F1B -- the red the arc computes for red TEXT on a light ground. Wrong constraint for a filled button: what has to clear contrast here is the LABEL against the fill, plus the fill against the ground as a UI component (3:1). Measured against the composited ground under the band: #8C0F1B 5.70 vs ground (what it was: dark, and the label was --ground #BDB9B0 at 4.63) #D8101E 3.57 vs ground (shipped once, and he called it "a little too red") #A30F1C 3.69 vs ground, 6.04 for a white label <- superseded 11 Sep: the band is black now #FF191C 2.51 vs ground <- the identity red FAILS here, the button stops reading Gryph on #D8101E: "this looks a little too red now, maybe we need more of a red/orange hue, closer to what it was before." A saturated FILL reads far more aggressively red than the same hue does as a thin accent, which is why hue 358 was right for the accent in v21 and wrong here. #A30F1C measures hue 354.7 (the "hue 10.5" in the older note was #A9412B, a different value), and it carries a better margin against the ground than the true red did. The label is near-white, not the band's own ground colour. HIGHER. Padding was symmetric, so the button sat mid-band. Top padding cut and bottom padding raised by the same amount, which lifts it without shortening the page or touching the ground ramp underneath it. .showfoot came down from 7vh to 3.4vh. */ .wayin{display:grid;place-items:center; padding:clamp(10px,1.4vh,20px) 24px clamp(52px,7.4vh,86px);min-height:104px} .wayin .cta{margin:0;white-space:nowrap} /* Measured on the rendered pixels, #D8101E against the real ground beside it is 3.07:1 -- a pass by 0.07, which is too thin to survive any future change to the ramp. Rather than darken the fill and lose the brightness he asked for, the 1px edge carries the boundary: #6E0A12 is 5.55:1 against that ground and the same hue as the fill. So the component is unambiguously an object and the fill stays bright. */ /* The Way In band is near-black (Gryph, 11 Sep: "can we make this all black now"), so the old light-band reasoning above no longer applies. The deep fill stays, because it is the blood red Dean picked, but on #0B0B0C it measures only 2.48:1 as an object, so the BOUNDARY is carried by a bright #FF191C hairline at 5.11:1. Hover inverts to that red with a near-black label, the same move as every other .cta on the site: the previous hover set the fill to #0B0B0C, which on this ground made the button disappear. */ /* THE HOMEPAGE CTA IS DISPLAY TYPE PLUS A RED ARROW, not a filled pill. Gryph, 12 Sep, pointing at option D from the lab: "for request Access in the bottom of the main page, can you change the graphic to this." So the blood fill, the edge and the pill radius all come off THIS control only; the Send it button on the access form stays a filled button, because a form submit should look like one. The word is cream at --ink (16.58:1) and only the arrow carries red (--red, 4.96:1), which keeps red for actions without turning the whole line into a graphic. */ .wayin .cta.big{background:none;border:0;border-radius:0;padding:0;color:var(--ink); font-family:'Display';font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.1; display:inline-flex;align-items:center;gap:clamp(16px,1.6vw,30px);white-space:nowrap} /* THE ARROW IS ONE FILLED PATH, traced from the reference Gryph supplied (12 Sep) at 1% of its width: shaft 7% thick with a semicircular left cap, legs at 45 degrees of uniform thickness with horizontal end cuts, a flat outer facet on each leg, and a sharp point. He picked this weight (option C, 3.43px at 1440) over the reference's own 10.05%, which reads blunt beside serif type at 49px and outweighs every other red hairline. It was three rectangles before: a rect shaft and a rotated bordered square for the head, which left a spike and two notches at the tip that no amount of nudging fixed. A fill has no linecaps, no miter joins and no rotation, so that whole class of defect is gone. Hidden from assistive tech since the label already says it. */ .wayin .cta.big .ar,.send .ar{position:relative;display:inline-block;width:clamp(44px,3.4vw,74px); aspect-ratio:100/49.74;height:auto;flex:0 0 auto;align-self:center;color:var(--red)} .wayin .cta.big .ar,.send .ar{transition:transform .32s cubic-bezier(.22,.9,.24,1)} .wayin .cta.big:hover{background:none;border:0;color:var(--ink)} .wayin .cta.big:hover .ar,#ar button.send:hover .ar,#ar button.send:focus-visible .ar{transform:translateX(10px)} @media (prefers-reduced-motion:reduce){.wayin .cta.big:hover .ar, #ar button.send:hover .ar,#ar button.send:focus-visible .ar{transform:none}} @media (max-width:640px){ .wayin{padding:34px 20px} .wayin .cta.big{font-size:clamp(26px,7.4vw,34px)} } /* The bio's opening arc, set larger than body. Gryph: "I think we can make that text bigger." */ .leadbody{font-size:clamp(19px,1.7vw,24px);line-height:1.5;color:var(--ink);max-width:40ch} /* Email and LinkedIn sit side by side under the bio, per "this can just be a button under his bio". The email keeps the red pill; LinkedIn is the quieter outline beside it. */ .btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px} .btnrow .cta{margin-top:0;white-space:nowrap} /* The email pill never wraps (QA, 13 Sep): at 821 to 877px and below 375px the arrow dropped to a line of its own. nowrap keeps it one line; on the narrowest phones the type steps down so the full-width pill still fits. */ @media (max-width:400px){.btnrow .cta{font-size:16px;padding-left:14px;padding-right:14px}} /* Just above the phone breakpoint the rail still takes its column, so the field is at its narrowest. */ @media (min-width:821px) and (max-width:960px){.btnrow .cta{font-size:18px;padding-left:18px;padding-right:18px}} /* Icon only, no word, no pill. Kept MONOCHROME in the site ink rather than LinkedIn blue: there is no blue anywhere on this site and the design is committed to one red accent, so the brand blue would be the only foreign colour on the page. Monochrome use is permitted by LinkedIn's own brand guidance. Swap `color` to #0A66C2 if the real blue is wanted. The 8px padding takes the tap target to 44px, which the glyph alone would not reach. */ .lilink{display:inline-flex;align-items:center;justify-content:center;padding:8px; color:var(--muted);transition:color .18s ease} .lilink:hover,.lilink:focus-visible{color:var(--red)} .lilink svg{display:block} /* The form is the page now, so it carries the weight rather than sitting in a column. */ /* This ID-scoped override was silently beating the .formpanel width above it, which is why raising the class rule did nothing. Keep the two in step, or measure the rendered width. */ #request .formpanel{max-width:82ch} /* Gloock ships one weight. Any bold on a display line is synthesised by the browser and the hero was the only line getting it, so it did not match the banners under it. */ .hero,.pagetitle,.banner,.dh,.s-b2,.s-b3{font-weight:400} /* The two solid red pills were different sizes and weights. The form submit now matches .cta.big: 24px regular is large text, so near-black on red clears the 3:1 threshold. */ .formpanel button /* The old separator-dot and column-gap override is gone: the chip rules above own the spacing now, and an override down here silently beat them (equal weight, later wins). */ /* Team on a phone: the pill was 331px in a 316-346px column, so the LinkedIn glyph fell to a second row alone at the left edge and at 360 the pill itself wrapped. The pill goes full width and the glyph sits centred under it. */ @media (max-width:540px){ .btnrow{justify-content:center} .btnrow .cta{width:100%;text-align:center;font-size:19px} .leadbody{font-size:21px} } /* The showcase glow peaked exactly at the section's bottom edge, then the next section was flat grey, so peach snapped to grey in one pixel row. Peak moved up so it fades to nothing before the edge. */ /* (the later .glowpool override that moved the peak up lives in .g-hcos/.g-hway now) */ /* Balanced wrapping for the opener lines and the portfolio statement, so a phone never strands one word on its own line ("first.", "existed."). Browsers without text-wrap ignore it. */ .s-b2,.s-b3,.showhead .banner,#why .banner{text-wrap:balance} /* The founder / accredited investor choice on the access form: a plain fieldset, no box. */ .roles{border:0;margin:26px 0 0;padding:0;min-width:0} .roles .attest{margin:0} /* Native radios ignore the input:focus border rules, so they get a visible ring of their own. */ .attest input:focus-visible{outline:2px solid var(--red);outline-offset:3px} /* Blood, not fire (Dean, 11 Sep): the accent is a pure red with the orange taken out. Bright blood #FF191C for text on the dark bands, deep blood #8C0F1B on the light ones, and the one filled button #A30F1C. Every value was checked for contrast against the grounds it sits on. */ /* ══════════════════════════════════════════════════════════════════════════════════════ v51 — THE LIGHTER PASS (Gryph, 17 Sep 2026). Mockups and the full reasoning live in design/lighter-2026-09-17/ (not deployed). The page now runs dark at the top, crosses to daylight once inside one photograph, and ends on a thin red band. Only the home, People and Access pages take these rules; login and the legal pages are untouched by everything here except the shared token defaults, which do not change. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ── the opening ── */ /* Full bleed: `.opener` carries padding:0 5vw, which inset the frame 72px each side at 1440 and read as a box with corners. The mask feathers the top and bottom into the ground. */ .s-open{width:100vw;margin-left:calc(50% - 50vw); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%)} /* THE FLASH, gold only. A second copy of the photograph, rebuilt by the #goldonly SVG filter from the GREEN channel alone with a negative offset, screen blended and revealed through a moving mask. Measured on this frame: the gold filaments average G=194, the red ground averages G=18, so red maps to zero and cannot move. --fx is a registered property, so the sweep direction is unambiguous; mask-position percentages travel backwards when the mask is wider than its box. */ @property --fx{syntax:'';inherits:false;initial-value:-20%} .s-open .flash{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:2; mix-blend-mode:screen;--fx:-20%; -webkit-mask-image:linear-gradient(96deg,transparent calc(var(--fx) - 13%),#000 var(--fx),transparent calc(var(--fx) + 13%)); mask-image:linear-gradient(96deg,transparent calc(var(--fx) - 13%),#000 var(--fx),transparent calc(var(--fx) + 13%))} .s-open .flash img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(calc(1.14 - var(--o)*0.14));filter:url(#goldonly) brightness(1.5)} .s-open.lit .flash{animation:sweepLR 1900ms cubic-bezier(.4,0,.25,1) 140ms} @keyframes sweepLR{0%{--fx:-18%;opacity:0}10%{opacity:1}88%{opacity:1}100%{--fx:118%;opacity:0}} @media (prefers-reduced-motion:reduce){.s-open .flash{display:none}} /* ── the light half ── */ /* Cool daylight, never cream: warm cream plus a serif plus red is the most generated look going, and it is the register Dean rejected. Measured on #F4F5F8: ink 19.0:1, muted 6.5:1, red 5.9:1. */ .lt{--ground:#FFFFFF;--ink:#0B0B0C;--muted:#55595C;--red:#8A5200;--faint:#5E6266; --line:rgba(11,11,12,.13);--line2:rgba(11,11,12,.22);color:var(--ink)} .lt .tag{border-color:rgba(11,11,12,.5);color:#0B0B0C} .lt .mk svg,.lt .mk img{filter:brightness(0)} .g-hlight{background:linear-gradient(180deg,#E2E4EC,#F4F5F8)} .g-hlight2,.g-hfoot2{background:#F4F5F8} .a-dark{--ground:#0B0B0C;--ink:#EFEBE6;--muted:#9E9894;--red:#FFB547; --line:rgba(237,235,230,.22);--line2:rgba(237,235,230,.30);background:#0B0B0C;color:var(--ink)} /* the crossing: one photograph carries the page from black to daylight, and its own bottom colour is where the light half starts, so there is no seam to see */ .bridge{position:relative;overflow:hidden;min-height:clamp(760px,132vh,1320px);background:#E2E4EC; color:#EFEBE6;z-index:1} .bridge>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%} .bridge .bveil{position:absolute;inset:0;background:linear-gradient(180deg, #0B0B0C 0%,rgba(11,11,12,.93) 11%,rgba(11,11,12,.66) 26%,rgba(11,11,12,.24) 44%, rgba(11,11,12,0) 58%,rgba(11,11,12,0) 80%,#E2E4EC 99%)} .bridge .bcopy{position:relative;z-index:2;padding:clamp(96px,15vh,170px) 34px 0 calc(var(--rail) + 30px)} .bridge .rlab{color:#B9B3AD;position:static} .bridge .banner{margin-top:22px;max-width:19ch;color:#F4F0EB;text-shadow:0 2px 30px rgba(11,11,12,.45)} .bridge .body{margin-top:24px;max-width:64ch;color:#DAD5CF;text-wrap:balance} @media (max-width:820px){.bridge{min-height:118vh}.bridge .bcopy{padding:88px 22px 0}} /* why us, on the light ground, with one green plate */ .whygrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,90px); align-items:start} .whytext .body{margin-top:18px;max-width:52ch} .whyplate{margin:6px 0 0;border-radius:26px;overflow:hidden;aspect-ratio:4/5; box-shadow:0 30px 60px -40px rgba(20,30,30,.45)} .whyplate img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:900px){.whygrid{grid-template-columns:1fr}.whyplate{aspect-ratio:4/3}} /* the companies: photographs on the page, wordmarks under them, no card chrome */ .show.lt .banner,.show.lt .golabel{color:var(--ink)} .card.pc{flex:0 0 clamp(256px,23vw,330px);height:auto;border:0;border-radius:0;background:none; color:var(--ink);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start} .card.pc:hover{background:none} .pcimg{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:22px;background:#DDE3E3} .pcimg img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.22,.9,.24,1)} .card.pc:hover .pcimg img{transform:scale(1.035)} .pcbar{display:flex;align-items:center;height:58px;padding:0 2px} .pcbar .mk{position:static;padding:0;opacity:1;justify-content:flex-start;color:#0B0B0C} .pcbar .mk svg{width:auto;height:var(--mh);max-width:100%;min-height:0} .pcbar .mk img{width:auto;height:var(--mh);max-width:100%} .pcbrief{display:block;padding:0 2px;font-size:13px;line-height:1.5;color:var(--muted); min-height:58px;max-width:34ch} @media (max-width:820px){.show .carousel{padding:22px 22px 48px}} /* ── the ending: one saturated band, then the light footer ── */ .wayin.redband{background:#FFB547;padding:clamp(32px,4.4vh,52px) 24px clamp(34px,4.8vh,56px); margin-top:0} .wayin.redband .cta.big{font-family:'Text';font-weight:600;font-size:clamp(14px,1.15vw,18px); letter-spacing:.22em;text-transform:uppercase;color:#0B0B0C;border:0;padding:0; gap:clamp(16px,1.8vw,30px)} .wayin.redband .cta.big .ar{color:#0B0B0C;width:clamp(30px,2.2vw,46px)} .wayin.redband .cta.big:hover{color:#0B0B0C} .wayin.redband .cta.big:hover .ar{transform:translateX(10px)} /* the column rules used to hang open at the top: the footer's own border was invisible at .12 on this ground, so it is set explicitly here */ .foot.lt{border-top:1px solid rgba(11,11,12,.20)} .foot.lt,.foot.lt .footcols{border-color:rgba(11,11,12,.20)} .foot.lt .fcol{border-left-color:rgba(11,11,12,.16)} /* the opening frame is licensed CC BY, which requires a credit. Smallest honest form: one line in the legal band, at the size of the disclaimer beside it. */ .imgcredit{font-size:10.5px;line-height:1.7;color:var(--faint);margin-top:6px} /* ── People and Access ── */ /* a short red bar on the join between the dark head and the light page */ .pagehead.p-dark{position:relative;background:#0B0B0C} .pagehead.p-dark::after{content:"";position:absolute;left:0;bottom:-1px;height:3px; width:min(46%,560px);z-index:2; background:linear-gradient(90deg,#FFB547 0%,#FFB547 62%,rgba(255,181,71,0) 100%)} @media (max-width:820px){.pagehead.p-dark::after{width:min(72%,340px);height:2px}} /* the portrait: left, black and white, re-cropped so the head is centred with less air above it */ .who2{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,56px)} .who2 img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;border-radius:4px; filter:grayscale(1) contrast(1.04);opacity:.95} @media (max-width:900px){.who2{grid-template-columns:1fr}.who2 img{max-width:280px}} /* the email, set as letterspaced caps between two hairlines */ .mailcaps{border:0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2); border-radius:0;padding:14px 0;font-family:'Text';font-weight:600;font-size:clamp(12px,1vw,14.5px); letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .mailcaps:hover{background:none;color:var(--red);border-color:var(--red)} /* the access form, bare: fields on hairlines, no card, and the send button in the same language as the button at the end of the home page */ .formpanel.bare{background:none;border:0;box-shadow:none;padding:0;border-radius:0;max-width:74ch} .formpanel.bare::before{display:none} .formpanel.bare input[type=text],.formpanel.bare input:not([type]),.formpanel.bare input[type=email], .formpanel.bare input[type=tel],.formpanel.bare select,.formpanel.bare textarea{background:none;border:0; border-bottom:1px solid var(--line2);border-radius:0;padding:12px 2px} .formpanel.bare input:focus,.formpanel.bare select:focus,.formpanel.bare textarea:focus{background:none; border-bottom-color:var(--red);box-shadow:0 1px 0 var(--red)} #ar button.send.redcaps{background:#FFB547;color:#0B0B0C;border:0;border-radius:999px; font-family:'Text';font-weight:600;font-size:clamp(13px,1.05vw,16px);letter-spacing:.22em; text-transform:uppercase;padding:clamp(15px,2vh,20px) clamp(26px,3vw,40px);margin-top:26px; gap:clamp(14px,1.6vw,24px)} #ar button.send.redcaps .ar{color:#0B0B0C;width:clamp(28px,2vw,40px)} #ar button.send.redcaps:hover{background:#F0A030;color:#0B0B0C} /* A field that is not required says so with a small open ring after its name, not with the word "optional" set above every one of them (Gryph, 17 Sep). The word is still there for screen readers, and the ring carries a title for a hover. */ /* The asterisk marks what a person MUST fill in, which is the convention everyone already reads. The required attribute is what tells assistive tech, so the mark is decoration and is hidden from it. LinkedIn and Company carry nothing, because nothing is the clearest way to say optional. */ .reqdot{display:inline-block;margin-left:5px;color:var(--red);opacity:.85;font-size:13px;line-height:1; letter-spacing:0;vertical-align:baseline} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── v53: the accent, used the same way on every page (Gryph, 18 Sep) ─────────────────────────── Red was doing all its work in the opening and then vanishing. It now appears once per module and nowhere else: the thin rule under a display title, the links, the focus ring, and a hairline that arrives under a company's wordmark on hover. No new colours, no red fills beyond the one band. */ /* the rule under a page title sits closer than the hero's, which has more air to play with */ .pagetitle + .redrule{margin:22px 0 0} /* on a photograph the rule needs to be seen: the bridge title's rule is the brighter red */ .bridge .redrule{margin:26px 0 0;background:#FFB547} .show .redrule{margin:20px 0 0} /* text links pick up the accent on hover, on the light grounds as well as the dark */ .fcol a:hover,.footbase a:hover{color:var(--red)} /* a company's wordmark gets a hairline on hover. Quiet: it is one line, in the accent, and it only exists while the pointer is on that card. */ .card.pc .pcbar{border-bottom:1px solid transparent;transition:border-color .28s ease} .card.pc:hover .pcbar,.card.pc:focus-visible .pcbar{border-bottom-color:var(--red)} /* ── v54: the phone, which is where most of this will be read (Gryph, 18 Sep) ─────────────────── His word was "chunky". Measured at 390: display type set 30 to 35px on a 33px line, the crossing title was capped at 19 characters so it fell into a 262px column beside an empty gutter, and the page ran 6,825px because four sections were each taller than a screen. Type comes down a step and gains leading, the measures open to the column they are in, and the tallest blocks lose height. Desktop is untouched: every rule here is inside the phone breakpoint. */ @media (max-width:560px){ /* display type: one step down, and air between the lines so a three-line stack reads as lines */ .hero{font-size:clamp(27px,7.4vw,44px);line-height:1.1} .banner{font-size:clamp(24px,6.6vw,34px);line-height:1.12} .pagetitle{font-size:clamp(30px,8.6vw,52px);line-height:1.06} .s-b2{font-size:clamp(25px,6.9vw,44px);line-height:1.12} .s-b3{font-size:clamp(22px,5.9vw,38px);line-height:1.16} /* a measure set in characters is for a wide column; on a phone the column IS the measure */ .bridge .banner,.show .banner,#why .banner,.hero,.body,.leadbody{max-width:100%} /* the crossing keeps its shape without eating a screen and a fifth */ .bridge{min-height:92vh} .bridge .bcopy{padding-top:clamp(64px,11vh,110px)} /* the footer was 799px of the 6,825: the three link columns sit two-up and lose their tall padding */ .footcols{grid-template-columns:1fr 1fr} .fbrand{grid-column:1 / -1;padding:26px 22px 18px} .fcol{padding:18px 22px 20px;border-top:1px solid var(--line)} .fcol:nth-child(even){border-left:1px solid var(--line)} /* Site and Access pair up; Legal takes the whole last row and runs its three links across it, because a half-empty cell reads as something missing. */ .fcol:last-child{grid-column:1 / -1} .fcol:last-child{display:block} .fcol:last-child a{display:inline-block;margin-right:18px} .fcol:last-child .fcl{margin-bottom:9px} .footbase{padding-top:18px} /* sections started with a label, a gap, then a title. On a phone that gap is a third of a screen, so the label sits closer to what it labels. */ .rail{padding:22px 22px 0} .field{padding:10px 22px 34px} .show .showhead{padding:34px 22px 16px} /* the row shows more of the next card, so it reads as a row rather than as one big tile, and the brief under each wordmark comes up to reading size */ .card.pc{flex-basis:clamp(232px,62vw,268px)} .pcbrief{font-size:13.5px;min-height:52px} } /* ══ 18 Sep, from Gryph's phone ══ */ /* 1. THE PHONE WAS SHOWING THE WRONG THIRD OF THE OPENING FRAME. Measured at 390x844: the frame is taller than it is wide, so object-fit:cover takes a window only 32.6% of the source's width, and centred that is source x 33.7%..66.3%. That is the sparse right-hand field of the micrograph. Gold coverage there is 2.4%; the left fifth of the frame, where the spine and its radiating filaments live, runs 20-32%. So the phone got the empty part and the structure never appeared at any scroll position. Gryph, with a screenshot of the part he wants: "i think the phone should be more like this side of the red image." A sliver of the outer spine at the edge, then the dark band, then the main spine, which is the composition he sent. NOTE THE COUPLING: this value and the frame height below are one decision. cover takes a window of 274.9/h of the source width, so the frame height sets how much of the photograph is in play: 65.1% of it at a 50vh frame, 32.6% at 100vh. 3% holds up at both, which is why it survived the frame going back to full height: at 100vh it shows source x 2.0%..34.6%, gold 18.7%, which is the densest window of any offset tried. Re-measure if the frame height ever moves again. BOTH IMAGES TAKE IT. The flash is a second copy of the same photograph lit through the green channel; if it crops differently from the plate underneath, the sweep lights filaments that are not there. */ @media (max-width:820px){ .s-open img,.s-open .flash img{object-position:3% 50%} } /* 2. PEOPLE: the email and the LinkedIn glyph share a line again, and the portrait comes down. The full-width rule in the phone block above was written in v37 for the old RED PILL, when the pill was 331px in a 316-346px column and the glyph had nowhere to go. The email is letterspaced caps on hairlines now (v51) and does not need to fill the column: at 16px with .2em tracking it measured 343.8px of a 346px column, which is why the glyph still fell to its own row. Auto width at 11.5px puts it back beside the glyph, which is exactly what the desktop already does, so this is the phone matching the design rather than a phone-only treatment. */ @media (max-width:560px){ .btnrow{justify-content:flex-start;flex-wrap:nowrap;gap:12px;margin-top:26px} .btnrow .cta.mailcaps{width:auto;text-align:left;font-size:11.5px;letter-spacing:.16em; padding:11px 0;white-space:nowrap} /* the glyph comes down with the email, but the padding goes UP to hold the 44px tap target: 22px of ink plus 8px each side is 38px, which is under the minimum. */ .lilink{padding:11px 6px} .lilink svg{width:22px;height:22px} /* it was 280px of a 346px column, which is most of the screen for a head-and-shoulders crop */ .who2 img{max-width:184px} } /* 3. ACCESS ENDS ON THE LEGAL BAND ALONE. Gryph: "think we can also just remove this footer entirely from the request access form." The mark block and the Site / Access / Legal columns are gone from access.html. The Access column pointed at the page you are already standing on and the Site column pulls you off the form you came to fill in, so on a one-screen page they were 389px of nothing. THE SECURITIES DISCLAIMER STAYS, and the three legal links stay with it. This is the one page where somebody attests they are an accredited investor and hands over a name, an email, a phone and a LinkedIn, so it is the worst page on the site to take the disclaimer and the privacy policy off. One line instead of four blocks. */ .flegal{display:flex;gap:16px;flex-wrap:wrap;font-size:10.5px;line-height:1.7;align-items:flex-start} .flegal a{color:var(--muted);text-decoration:none;transition:color .2s} .flegal a:hover{color:var(--ink)} /* The sentence beside the door. With no members' area behind it, "Request access" was a button asking someone to apply to an unnamed thing, which is exactly what Dean meant by "we are still missing the concept of exclusive access" (18 Sep). It describes the RESPONSE rather than an offering on purpose: there is no portal to promise, and describing live rounds on a public page is the general-solicitation question counsel has not answered. The tone is hardcoded like everything else in .wayin.redband, because that band carries its own fixed ground rather than the arc tokens. Measured on #7B0303: #EBDAD5 is 8.36:1, against the caps link's #F7F1ED at 10.10:1, so the sentence reads clearly and still sits under the call to action. Hierarchy comes from case and tracking, not from dimming it toward the floor. */ /* ⚠️ .ctaplate had NO rule of its own and was shrink-to-fit around the link, so the link only LOOKED centred: the plate was exactly the link's width and .wayin's place-items:center centred the plate. Adding the sentence widened the plate to the sentence's measure and the link dropped to its left edge, which is the formatting Gryph caught. The plate now centres its own children, so the alignment no longer depends on the plate happening to be the width of its widest child. */ .wayin .ctaplate{display:flex;flex-direction:column;align-items:center} /* min() rather than a phone override: a flat max-width:100% under 560px let the sentence stretch to a single 470px line at 520-560, a worse measure than at any other width, because there the column is WIDER than 46ch. min() caps it at a readable measure and still never exceeds the column on a narrow phone, so the same rule holds from 320px up with no discontinuity. */ .wayin.redband .ctalead{max-width:min(46ch,100%);margin:0 0 clamp(16px,2.1vh,26px);text-align:center; font-family:'Text';font-size:clamp(14.5px,1.1vw,17px);line-height:1.55;color:#EBDAD5} /* ══ v55 · C5, 22 Sep 2026: the minimal header and footer every public page now shares ══════════════ Karima's call and Gryph's rulings: no site navigation (People is deleted, Access is now "Talk to us" and reached from the home page's red band), the wordmark alone in the bar, and a footer that is the name again, the disclaimer and the three legal links. The wordmark ships in all three versions and assets/mark.css shows one, so Gryph's pick is a single edit for every page at once. */ .band .wm .wm-stack{display:inline-flex;flex-direction:column;font-size:.62em;line-height:.98} .band{grid-template-columns:1fr} .c5foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:clamp(34px,5vh,52px) 34px 64px;color:var(--ink)} .c5foot .fmark{display:inline-flex;color:var(--ink);text-decoration:none;font-family:'Display'; font-size:clamp(30px,2.5vw,38px);line-height:1} .c5foot .fmark .wm-stack{display:inline-flex;flex-direction:column;font-size:.8em;line-height:.96} /* at reading size, like the rest of C5 (no body text under 17px on a desktop, 16px on a phone) */ .c5legal{margin-top:26px;font-size:17px;line-height:1.6;color:var(--muted);max-width:820px} .c5links{margin-top:20px;display:flex;gap:22px;flex-wrap:wrap;font-size:17px;line-height:1.6} .c5links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);transition:color .2s,border-color .2s} .c5links a:hover{color:var(--red);border-color:var(--red)} @media (max-width:820px){.c5foot{padding:30px 22px 70px}.c5legal,.c5links{font-size:16px}} /* ── Talk to us (access.html), as C5 had it: the dark head without the rail, the light form, the field names restyled to reading size in the body face (the small-label rule), the attestation, note and error lines at 17px. The form's own markup, scripts and behaviour are unchanged. ── */ body[data-page="access"] .pagehead,body[data-page="access"] #request{display:block} body[data-page="access"] .pagehead .field{padding:clamp(96px,15vh,160px) 34px clamp(54px,8vh,80px)} body[data-page="access"] #request .field{padding:clamp(56px,8vh,96px) 34px clamp(80px,12vh,130px)} body[data-page="access"] #ar label:not(.attest){font-size:17px;letter-spacing:.005em;text-transform:none;font-weight:500;margin-bottom:4px} body[data-page="access"] #ar .attest span,body[data-page="access"] #ar .ferr{font-size:17px} body[data-page="access"] #ar .fnote{font-size:17px;max-width:560px} @media (max-width:820px){ body[data-page="access"] .pagehead .field{padding:72px 22px 44px} body[data-page="access"] #request .field{padding:44px 22px 70px} body[data-page="access"] #ar label:not(.attest),body[data-page="access"] #ar .attest span, body[data-page="access"] #ar .ferr,body[data-page="access"] #ar .fnote{font-size:16px} }