/* =========================================================================== InvestVerdict — what each class of machine is asked to paint --------------------------------------------------------------------------- perf.js puts data-perf="still|low|mid|high" on before first paint. This file spends that budget. THE EXPENSIVE THINGS, IN ORDER 1. backdrop-filter — the compositor has to read back what is behind the element, blur it, and composite, EVERY frame it moves. On integrated graphics this alone can cost more than all the JavaScript on the page. 2. Large filter: blur() radii. Cost grows with the square of the radius; blur(90px) is not "a bit more" than blur(30px), it is nine times more. 3. Infinite animations on large or blurred elements, which never let the compositor settle. 4. Big soft box-shadows, for the same read-blur-composite reason. WHAT IS NEVER REMOVED Anything that carries meaning: focus rings, hover feedback, the state of a control, the market ticker. A slow machine gets a plainer site, not a less usable one. Removing the signal that a button was pressed to save a millisecond is a bad trade at any frame rate. =========================================================================== */ /* ── LOW: no read-back effects at all ──────────────────────────────────── */ [data-perf="low"] *, [data-perf="still"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* The glass panels lose their blur, so they need a real background or they become unreadable text floating over a starfield. */ [data-perf="low"] nav, [data-perf="low"] .glass, [data-perf="low"] .tabs-bar, [data-perf="still"] nav, [data-perf="still"] .glass, [data-perf="still"] .tabs-bar { background: #071426 !important; } /* Ambient glows become flat, cheap radial gradients. They are decoration; the page reads the same without the blur pass. */ [data-perf="low"] .hero-ambient, [data-perf="low"] .galaxy-neb, [data-perf="low"] .globe-bg, [data-perf="low"] .aurora, [data-perf="low"] .bc .blob, [data-perf="still"] .hero-ambient, [data-perf="still"] .galaxy-neb, [data-perf="still"] .globe-bg, [data-perf="still"] .aurora, [data-perf="still"] .bc .blob { filter: none !important; animation: none !important; opacity: .35; } [data-perf="low"] .hero-glow, [data-perf="low"] .hero-glow2 { filter: none !important; opacity: .5; } /* Soft shadows are cheap once and expensive on anything that moves. */ [data-perf="low"] * { box-shadow: none !important; } [data-perf="low"] .btn:focus-visible, [data-perf="low"] a:focus-visible, [data-perf="low"] button:focus-visible { box-shadow: 0 0 0 3px rgba(201,152,42,.45) !important; } /* ── STILL: somebody asked for no movement ─────────────────────────────── */ [data-perf="still"] *, [data-perf="still"] *::before, [data-perf="still"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Canvases have nothing to say when they are not animating. */ [data-perf="still"] #stars, [data-perf="still"] #ivSwarm { display: none !important; } /* ── MID: keep the character, halve the cost ───────────────────────────── */ [data-perf="mid"] .hero-ambient, [data-perf="mid"] .galaxy-neb { filter: blur(38px) !important; } [data-perf="mid"] nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── HIGH: everything as designed ──────────────────────────────────────── */ /* Nothing here on purpose. The stylesheet is the design; this file only ever takes away. Adding effects that only appear on fast machines would mean the design nobody reviewed is the one most people see. */ /* ── one thing for every tier ────────────────────────────────────────────── An element that is animated forever should tell the browser so, and an element that is NOT should never carry will-change — a permanent will-change pins a layer in GPU memory, which is exactly what a machine short of GPU memory cannot afford. */ [data-perf="low"] *, [data-perf="still"] * { will-change: auto !important; }