/* ============================================================ STAIR DIGITAL — shared styles Palette: ivory #FAF8F3 · surface #E7F1EE · teal #0E9C93 amber #F0854B · ink #1C3B38 (light theme) Type: Inter Tight, one universal family for the whole site. ============================================================ */ /* Inter Tight is linked from each page's instead of @import here: an @import cannot start downloading until this file has been fetched AND parsed, so it serialises two round trips before any text can paint. */ :root{ --ivory:#FAF8F3; --surface:#E7F1EE; --surface-2:#F1EDE4; --teal:#0E9C93; --teal-deep:#0B857D; --amber:#F0854B; --amber-deep:#D96A30; --ink:#1C3B38; --ink-soft:rgba(28,59,56,.62); --ink-mut:rgba(28,59,56,.42); --line:rgba(28,59,56,.12); --line-soft:rgba(28,59,56,.07); --shadow:rgba(28,42,40,.10); --grad:linear-gradient(135deg,#0E9C93,#0B857D); --font:"Inter Tight",system-ui,sans-serif; --serif:var(--font); --body:var(--font); --disp:var(--font); --maxw:1240px; --ease:cubic-bezier(.22,1,.36,1); --nav-h:78px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--body); background:var(--ivory); color:var(--ink); line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--teal);color:var(--ivory)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px} /* ---------- small-caps label ---------- */ .eyebrow{ font-family:var(--disp);font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--teal-deep);font-weight:500;display:inline-flex;align-items:center;gap:14px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:11px; font-family:var(--disp);font-size:15px;font-weight:500;letter-spacing:.01em; padding:15px 28px;border-radius:3px;cursor:pointer; transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); border:1px solid transparent;white-space:nowrap; } .btn svg{width:18px;height:18px;transition:transform .35s var(--ease)} .btn-primary{background:var(--teal);color:var(--ivory);box-shadow:0 12px 30px -14px var(--shadow)} .btn-primary:hover{background:var(--teal-deep);transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(14,156,147,.5)} .btn-primary:hover svg{transform:translateX(4px)} .btn-outline{background:transparent;color:var(--ink);border-color:var(--line)} .btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);background:rgba(14,156,147,.05)} /* ---------- NAV ---------- */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h); display:flex;align-items:center; background:rgba(250,248,243,.72);backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent;transition:border-color .4s,background .4s,box-shadow .4s; } header.nav.scrolled{border-bottom:1px solid var(--line-soft);box-shadow:0 8px 30px -24px var(--shadow)} .nav-in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 40px} .brand{display:flex;align-items:center;gap:13px} .brand img{height:38px;width:auto} .brand .wm{display:flex;flex-direction:column;line-height:1} .brand .wm b{font-family:var(--disp);font-size:20px;letter-spacing:.24em;font-weight:600;color:var(--ink);padding-left:.24em} .brand .wm span{font-family:var(--disp);font-size:8.5px;letter-spacing:.5em;color:var(--amber-deep);margin-top:5px;padding-left:.5em} /* the inline nav links are retired: the burger is the only entry point now */ .menu{display:none} .nav-cta{display:flex;align-items:center;gap:18px} .nav-cta .btn{padding:11px 20px;font-size:14px} /* the only nav control: three lines that become an X while the menu is open */ .burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px; position:relative;z-index:101} .burger span{width:24px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s} .burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} /* ---------- HOME-ONLY SECTION BUTTONS ---------- Present only on index.html. They stay hidden until the hero sequence has finished playing, then take over from the three lines on desktop. */ .nav-links{display:none;align-items:center;gap:clamp(4px,.5vw,10px); opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .7s var(--ease),transform .7s var(--ease)} .nav.links-on .nav-links{opacity:1;transform:none;pointer-events:auto} .nav-links a{position:relative;font-family:var(--disp);font-size:13.5px;font-weight:500;letter-spacing:.01em; color:var(--ink);text-decoration:none;padding:9px 14px;border-radius:999px;white-space:nowrap; transition:color .32s var(--ease),background .32s var(--ease)} .nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;border-radius:2px; background:var(--teal-deep);transform:scaleX(0);transform-origin:left; transition:transform .42s var(--ease)} .nav-links a:hover{color:var(--teal-deep);background:rgba(14,156,147,.07)} .nav-links a:hover::after{transform:scaleX(1)} /* eight items need more room than the old 981px breakpoint gave them; below this the burger menu stays, which holds the same list */ @media(min-width:1220px){ .nav-links{display:flex} /* once the buttons are live the burger steps aside on desktop */ .nav.links-on .burger{opacity:0;pointer-events:none;transform:scale(.85); transition:opacity .45s var(--ease),transform .45s var(--ease)} } /* ---------- FULLSCREEN MENU ---------- */ .drawer{ position:fixed;inset:0;z-index:99; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:calc(var(--nav-h) + 10px) 20px 32px;overflow-y:auto; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .55s var(--ease),visibility .55s; } .drawer.open{opacity:1;visibility:visible;pointer-events:auto} /* Field behind the menu. This was a fullscreen WebGL2 shader. It spun a GL context up every time the menu opened, and it was still rendering while the browser navigated away, which is what made clicking a menu item stutter. Two drifting gradient blobs give the same soft field with no context at all, and they only animate while the drawer is open. */ .menu-bg{position:fixed;inset:0;z-index:0;overflow:hidden; background:linear-gradient(160deg,var(--ivory),#E6F1EE 52%,#F3EFE6)} .menu-bg::before{content:"";position:absolute;left:-18%;top:-24%; width:76%;aspect-ratio:1.25;border-radius:50%; background:radial-gradient(closest-side,rgba(95,201,191,.55),transparent 72%); will-change:transform;animation:menuA 22s ease-in-out infinite alternate; animation-play-state:paused} .menu-bg::after{content:"";position:absolute;right:-20%;bottom:-26%; width:72%;aspect-ratio:1.3;border-radius:50%; background:radial-gradient(closest-side,rgba(240,133,75,.30),transparent 74%); will-change:transform;animation:menuB 27s ease-in-out infinite alternate; animation-play-state:paused} /* nothing moves until the drawer is actually open */ .drawer.open .menu-bg::before,.drawer.open .menu-bg::after{animation-play-state:running} @keyframes menuA{to{transform:translate3d(24%,20%,0) scale(1.18)}} @keyframes menuB{to{transform:translate3d(-22%,-18%,0) scale(1.14)}} @media(prefers-reduced-motion:reduce){ .menu-bg::before,.menu-bg::after{animation:none} } .menu-list{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; width:min(720px,86vw)} /* Sized against viewport HEIGHT as well as width: with eight items the list is height-constrained, not width-constrained, and a pure vw size left only 13px of clearance above the fold on a 720px-tall window. */ .drawer a{font-family:var(--serif);font-weight:600;font-size:clamp(22px,min(3.8vw,4.6vh),48px);letter-spacing:-.025em; line-height:1.1;color:var(--ink);width:100%;text-align:center;justify-content:center; padding:clamp(7px,1.25vh,14px) 0;border-top:1px solid rgba(28,59,56,.16);display:block; transform-origin:center;transition:transform .45s var(--ease),color .35s var(--ease)} .menu-list a:last-child{border-bottom:1px solid rgba(28,59,56,.16)} .drawer a:hover{transform:scale(1.24);color:var(--teal-deep)} .drawer .btn{position:relative;z-index:2;margin-top:clamp(26px,4.5vh,50px);justify-content:center} /* iOS-style frosted glass button (used for the menu's Let's Talk) */ .btn-glass{background:rgba(255,255,255,.16);color:var(--ink);border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:0 10px 34px -14px rgba(28,42,40,.3),inset 0 1px 0 rgba(255,255,255,.7)} .btn-glass:hover{background:rgba(255,255,255,.3);color:var(--ink);transform:translateY(-2px); box-shadow:0 16px 46px -16px rgba(28,42,40,.34),inset 0 1px 0 rgba(255,255,255,.85)} .btn-glass svg{stroke:currentColor} /* ---------- CROSS-PAGE TRANSITION ---------- Native same-origin cross-document fade where supported; ignored elsewhere. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s} /* ---------- NEXT CHAPTER (the site never dead-ends: each page hands to the next) ---------- */ .next-chapter{display:block;position:relative;overflow:hidden;text-align:center;color:var(--ink); padding:clamp(84px,17vh,190px) 0 clamp(70px,12vh,140px); background:linear-gradient(180deg,var(--ivory) 0%,var(--surface) 100%); border-top:1px solid var(--line-soft)} .next-chapter .nc-label{font-family:var(--disp);font-size:12px;letter-spacing:.28em; text-transform:uppercase;color:var(--teal-deep);font-weight:500} .next-chapter .nc-title{font-family:var(--serif);font-weight:700;font-size:clamp(32px,5vw,68px); letter-spacing:-.032em;line-height:1.03;margin-top:16px;max-width:18ch;margin-left:auto;margin-right:auto; transition:transform .6s var(--ease),color .4s var(--ease)} .next-chapter .nc-title em{font-style:italic;color:var(--teal-deep)} .next-chapter:hover .nc-title{transform:translateY(-5px)} .next-chapter .nc-cue{display:inline-flex;align-items:center;gap:10px;margin-top:30px; font-family:var(--disp);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mut)} .next-chapter .nc-cue svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2; animation:ncBob 1.9s ease-in-out infinite} @keyframes ncBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} @media(prefers-reduced-motion:reduce){.next-chapter .nc-cue svg{animation:none}} /* ---------- FOOTER ---------- */ footer.ft{background:var(--surface);border-top:1px solid var(--line-soft);padding:70px 0 34px} .ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--line)} .ft-brand img{height:44px;margin-bottom:20px} .ft-brand p{font-size:15px;color:var(--ink-soft);max-width:34ch;line-height:1.7;font-weight:300} .ft h5{font-family:var(--disp);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mut);margin-bottom:18px;font-weight:500} .ft ul{list-style:none;display:grid;gap:11px} .ft ul a{font-size:15px;color:var(--ink-soft);transition:color .3s} .ft ul a:hover{color:var(--teal-deep)} .ft .ct{font-size:15px;color:var(--ink-soft);line-height:1.9} .ft .ct a:hover{color:var(--teal-deep)} .ft-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px} .ft-bottom p{font-size:13px;color:var(--ink-mut)} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.in{opacity:1;transform:none} /* ---------- inner-page scaffold ---------- */ .page-hero{padding:calc(var(--nav-h) + 90px) 0 70px;background:linear-gradient(180deg,var(--surface),var(--ivory))} .page-hero .eyebrow{margin-bottom:26px} .page-hero h1{font-family:var(--serif);font-size:clamp(40px,6vw,74px);line-height:1.05;font-weight:300;letter-spacing:-.01em} .page-hero h1 em{font-style:italic;color:var(--teal-deep)} .page-hero p{font-size:19px;color:var(--ink-soft);max-width:60ch;margin-top:24px;line-height:1.7;font-weight:300} .soon{padding:90px 0 130px;text-align:center} .soon .tag{font-family:var(--disp);display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);border:1px solid var(--line);padding:8px 16px;border-radius:3px;margin-bottom:26px} .soon h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:300;color:var(--ink)} .soon p{font-size:18px;color:var(--ink-soft);max-width:52ch;margin:20px auto 0;font-weight:300} /* ---------- CONSULTATION CHOOSER ---------- */ .chooser{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s} .chooser.open{opacity:1;visibility:visible} .chooser-back{position:absolute;inset:0;background:rgba(28,42,40,.34);backdrop-filter:blur(6px)} /* light kinetic-grid dialog: the canvas warps to the cursor and ripples on click, the controls on top are glass, and the type stays ink so it reads on the light ground */ .chooser-card{position:relative;width:min(520px,92vw);overflow:hidden; background:var(--surface-2);border:1px solid rgba(28,59,56,.14); border-radius:20px;padding:44px 40px 40px; box-shadow:0 50px 64px -40px rgba(28,42,40,.5),inset 0 1px 0 rgba(255,255,255,.7); transform:translateY(18px) scale(.98);transition:transform .4s var(--ease);text-align:center} .chooser.open .chooser-card{transform:none} /* Was a WebGL animated-gradient. It created a GL context on page load for a dialog most visitors never open. Two drifting blobs, paused until the dialog is actually shown. */ .chooser-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; background:linear-gradient(150deg,#FAF8F3,#DCEDE9 55%,#E9F3F8)} .chooser-grid::before,.chooser-grid::after{content:"";position:absolute; width:78%;aspect-ratio:1.2;border-radius:50%;will-change:transform; animation-play-state:paused} .chooser-grid::before{left:-16%;top:-24%; background:radial-gradient(closest-side,rgba(111,201,191,.62),transparent 72%); animation:agA 20s ease-in-out infinite alternate} .chooser-grid::after{right:-18%;bottom:-26%; background:radial-gradient(closest-side,rgba(14,156,147,.38),transparent 74%); animation:agB 25s ease-in-out infinite alternate} .chooser.open .chooser-grid::before,.chooser.open .chooser-grid::after{animation-play-state:running} @media(prefers-reduced-motion:reduce){.chooser-grid::before,.chooser-grid::after{animation:none}} @keyframes agA{to{transform:translate3d(22%,20%,0) scale(1.16)}} @keyframes agB{to{transform:translate3d(-20%,-18%,0) scale(1.12)}} /* NB: exclude .chooser-x here, otherwise this rule beats its position:absolute and the close button drops into the centre of the card */ .chooser-card > *:not(.chooser-grid):not(.chooser-x){position:relative;z-index:1} .chooser-x{position:absolute;top:14px;right:14px;z-index:3; display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.6);border:1px solid rgba(28,59,56,.16); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-size:19px;line-height:1;color:var(--ink);cursor:pointer;font-family:var(--body); transition:background .3s,transform .3s var(--ease)} .chooser-x:hover{background:#fff;transform:rotate(90deg)} .chooser-card h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,31px);font-weight:700; letter-spacing:-.024em;color:var(--ink);margin-top:6px} .chooser-opts{display:grid;gap:13px;margin-top:28px} /* glass rows on the light ground */ .chooser-opt{display:flex;align-items:center;gap:16px;text-align:left;padding:17px 20px;border-radius:14px; background:rgba(255,255,255,.52);border:1px solid rgba(28,59,56,.14); -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:border-color .35s,background .35s,transform .35s var(--ease),box-shadow .4s var(--ease)} .chooser-opt:hover{border-color:var(--teal);background:rgba(255,255,255,.78);transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 36px -18px rgba(28,42,40,.4)} .chooser-opt .ic{width:44px;height:44px;flex:none;border-radius:50%;color:#fff; background:var(--teal);display:flex;align-items:center;justify-content:center} .chooser-opt .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7} .chooser-opt .tx b{font-family:var(--disp);display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.01em} .chooser-opt .tx span{font-size:14px;color:var(--ink-soft)} /* ---------- responsive ---------- */ @media(max-width:1000px){ .nav-cta .btn{display:none} .ft-grid{grid-template-columns:1fr 1fr;gap:34px} } @media(max-width:640px){ .wrap,.nav-in{padding:0 24px} .ft-grid{grid-template-columns:1fr} .chooser-card{padding:38px 26px 32px} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} } /* ============================================================ LIQUID GLASS — shared surface treatment Layered speculars + a sweeping highlight that tracks the cursor, so it reads as thick refractive glass rather than flat frosting. Applied via .lg on any control; .lg-dark for light type on dark. ============================================================ */ .lg{position:relative;overflow:hidden;isolation:isolate; background: linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.16) 42%,rgba(255,255,255,.28) 100%), rgba(255,255,255,.30); border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.28), inset 0 0 22px rgba(255,255,255,.22), 0 14px 34px -16px rgba(12,20,26,.45); transition:transform .45s var(--ease),box-shadow .5s var(--ease), border-color .4s var(--ease),background .4s var(--ease)} /* the moving specular: a soft band that follows --mx/--my set by liquid-glass.js */ .lg::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none; background:radial-gradient(38% 38% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.85) 0%,rgba(255,255,255,.32) 38%,transparent 70%); opacity:0;transition:opacity .45s var(--ease)} .lg:hover::before{opacity:1} /* a thin refracted rim that brightens on the lit side */ .lg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; padding:1px; background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.05) 45%,rgba(255,255,255,.65)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:.55;transition:opacity .45s var(--ease)} .lg:hover::after{opacity:1} .lg:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 28px rgba(255,255,255,.3), 0 22px 48px -18px rgba(12,20,26,.55)} .lg:active{transform:translateY(-1px) scale(.995)} /* dark variant: glass over a dark field, light type */ .lg-dark{ background: linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.13) 100%), rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 24px rgba(255,255,255,.10), 0 16px 38px -18px rgba(0,0,0,.7)} .lg-dark:hover{border-color:rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 30px rgba(255,255,255,.16), 0 24px 52px -20px rgba(0,0,0,.8)} .lg-dark::before{background:radial-gradient(38% 38% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5) 0%,rgba(255,255,255,.16) 40%,transparent 72%)} @media(prefers-reduced-motion:reduce){ .lg,.lg:hover{transform:none} .lg::before{display:none} } /* ============================================================ POP BUTTON — 3D push (port of the PopButton component). Same mechanic: a stacked box-shadow edge that the button sinks into on hover and presses flat on active. Recoloured off the reference pinks onto brand teal + amber so the label stays white and readable. Used for the primary "Let's Talk" CTA. ============================================================ */ .btn-pop{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px; font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase; color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none; padding:18px 34px;border-radius:14px; background:var(--teal);border:2px solid var(--teal-deep); /* the resting stacked edge: light top face, teal body, amber underglow */ box-shadow: 0 12px 0 -2px #4fc4ba, 0 12px 0 0 var(--teal-deep), 0 22px 0 0 rgba(240,133,75,.45); transition:transform .15s cubic-bezier(0,0,.58,1),background .15s cubic-bezier(0,0,.58,1), box-shadow .15s cubic-bezier(0,0,.58,1)} .btn-pop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2; transition:transform .3s var(--ease)} .btn-pop:hover{background:var(--teal-deep);transform:translateY(4px); box-shadow: 0 8px 0 -2px #4fc4ba, 0 8px 0 0 var(--teal-deep), 0 16px 0 0 rgba(240,133,75,.42)} .btn-pop:hover svg{transform:translateX(4px)} .btn-pop:active{background:var(--teal-deep);transform:translateY(12px); box-shadow: 0 0 0 -2px #4fc4ba, 0 0 0 0 var(--teal-deep), 0 0 0 0 rgba(240,133,75,0)} .btn-pop:focus-visible{outline:2px solid var(--amber);outline-offset:4px} @media(prefers-reduced-motion:reduce){ .btn-pop,.btn-pop:hover,.btn-pop:active{transform:none;transition:background .2s} } /* ============================================================ SMOOTHNESS PASS — applies to every page. ============================================================ */ /* 1. Kill the ~300ms tap delay on touch devices. Mobile browsers wait to see if a tap is a double-tap-to-zoom before firing the click. On buttons and links that delay is the single biggest reason a phone feels unresponsive, and it costs nothing to opt out. */ a,button,summary,[role="button"],input,select,textarea,label{touch-action:manipulation} /* 2. Stop scroll chaining out of scrollable panels. Without this, reaching the end of a dialog or a carousel hands the scroll to the page underneath, which reads as the page "jumping" mid gesture. */ .drawer,.chooser-card,.ld-modal-card,.cap-panel{overscroll-behavior:contain} /* 3. content-visibility:auto was here, on the repeated below-fold blocks, so the browser could skip layout and paint for sections nobody had scrolled to. REMOVED. Excluding the pinned sections themselves was not enough. GSAP ScrollTrigger measures every pin's start and end once, at load. A contained section reports its placeholder contain-intrinsic-size until it is realised, so any pin BELOW one shifted as the visitor scrolled past. .assoc sits directly above the pinned split cards on the About page, which is what put the card panels over the logo strip. The saving was modest and the breakage was visible. The performance work that mattered was removing the WebGL contexts, and that stands. If this is revisited, call ScrollTrigger.refresh() on realisation and keep containment off any page that pins at all. */ /* 4. Promote the things that actually move, and only those. A compositor layer is cheap to move but costs memory, so this is kept to the handful of elements that animate on scroll or hover. */ .hp-mark,.hp-go,.bkbuy-btn{will-change:transform} /* 5. Never let a horizontal overflow appear: on a phone that turns every vertical swipe into a fight between two axes. */ html,body{overflow-x:clip}