/* HOW OFTEN THE METAL REDRAWS AT REST, in frames per second, read once at boot by liquid-metal.v5.js. Turn this one number if the shimmer reads as stepping (raise) or the page feels heavy while nothing is happening (lower). 30, not 20 and not 60. The file's own default is 20, set when the buttons were redrawing every frame and the compositor was re-committing every one of them on every section - 6012ms of Commit per 150 idle frames at the hero. That is what 60 costs HERE, and it is why the cap exists; /billing can run at 60 only because it has three of these and no scroll-linked sections. But a 50ms step turns a slow drift into a slideshow, which is the thing that looks broken. 30 halves the visible step for half again the redraws. Hover and press are NOT throttled at any setting. So the quick check on a real machine is to put the cursor on a button: if it smooths out under the pointer, what you are seeing is this number and not dropped frames. */ :root { --lm-idle-hz: 30; } /* JPAccess — metallic treatment for the Unique features cards and the pricing CTAs (v1). * * WHY THIS IS A SEPARATE FILE AND NOT A BUNDLE EDIT * The page is a prebuilt Vite bundle with no source in this repo, so anything * written into index-*.js is lost the next time it is rebuilt and cannot be * reviewed. liquid-metal.v1.css established the pattern: additive layers keyed * off stable hooks (#features, [data-slot="liquid-button"]), never a rewrite of * the bundle's own utility classes. A rebuilt bundle keeps working with or * without this file. * * WHY THE CARDS ARE CSS METAL AND NOT THE REAL LIQUID-METAL CANVAS * liquid-metal.v1.js mounts an animated rim per element. That is * affordable for the two or three CTAs on the page; it is not affordable for * nine feature cards. This landing page has already been measured into the * ground once by an animation that looked cheap — the SVG dash effect took it * to 2.7fps — so the cards get a STATIC brushed-metal edge and sheen instead. * It reads as the same material at a glance and costs one gradient. * * The palette is the bundle's own tokens (--deep, --line, --fg), so this * follows the site into whatever theme it is in rather than pinning hex values * that would drift. */ /* ---------------------------------------------------------------- cards -- The bundle draws these as `border border-line bg-bg` — a flat bordered box, the only flat surface in a page that is otherwise glass. The rules below replace the flat edge with a brushed rim and lift the card off the page the way .glass does, WITHOUT touching the bundle's classes: everything is scoped under #features so nothing else can be caught by it. */ #features .grid > * { position: relative; isolation: isolate; /* The metal edge. A 1px gradient border is not expressible directly, so the card paints the gradient and masks it to its own 1px frame — this keeps the 1rem radius exactly, which border-image cannot do. */ border-color: transparent !important; background: linear-gradient(hsl(var(--bg)), hsl(var(--bg))) padding-box, linear-gradient(145deg, hsl(0 0% 100% / .95) 0%, hsl(var(--line-strong)) 22%, hsl(0 0% 100% / .9) 38%, hsl(var(--warm)) 58%, hsl(0 0% 100% / .85) 74%, hsl(var(--line-strong)) 100%) border-box; border: 1px solid transparent; box-shadow: 0 1px 1px hsl(var(--deep) / .05), 0 10px 34px hsl(var(--deep) / .10), inset 0 1px hsl(0 0% 100% / .95); transition: box-shadow .35s ease, transform .35s ease; } /* A single diagonal highlight travelling across the top edge — the thing that makes a flat gradient read as METAL rather than as a coloured border. Static by design; see the header. Behind the content (-1) and pointer-transparent so it can never eat a click. */ #features .grid > *::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(122deg, hsl(0 0% 100% / 0) 34%, hsl(0 0% 100% / .55) 47%, hsl(0 0% 100% / 0) 60%); } #features .grid > *:hover { box-shadow: 0 2px 3px hsl(var(--deep) / .07), 0 18px 46px hsl(var(--deep) / .16), inset 0 1px hsl(0 0% 100% / 1); } /* Bold. The bundle sets the card title at font-semibold (600); at this size, against a metal edge, 600 reads as ordinary body weight. */ #features h3 { font-weight: 750 !important; letter-spacing: -0.012em; } /* --------------------------------------------------------------- pricing -- These already carry the animated rim (they are variant="deep", which is what liquid-metal.v1.js keys on). What they lacked is WEIGHT: the label sits at the bundle's default and the rim is thin, so the effect does not read as a primary action next to the cards above it. Scoped by .glass-plain, which is the pricing card's own surface class, so only buttons that actually sit in a pricing card are caught and the hero CTA — deliberately calmer — is untouched. */ .glass-plain [data-slot="liquid-button"] { font-weight: 750 !important; letter-spacing: .002em; } /* NO RIM OVERRIDE HERE ANY MORE. This used to pull .lm-face in to 3px to give the pricing row a thicker metal band than the rest of the site. That band is what read as "too much going on" on the locked pills, and because it was an override, thinning the base value in liquid-metal.v1.css did nothing to it while quietly thinning every other metal button on the page. The pricing buttons now use the same 2px edge as the hero, the nav and /billing. */ /* And a lift, so the row of three reads as the page's primary action. */ .glass-plain [data-slot="liquid-button"] { box-shadow: 0 1px 1px hsl(var(--deep) / .18), 0 12px 30px hsl(var(--deep) / .34); } /* Before liquid-metal.v1.js mounts (and if it is skipped for reduced motion), the button still has to look metallic rather than flat black. */ .glass-plain [data-slot="liquid-button"] > .glass-deep { background: linear-gradient(hsl(var(--deep) / .94), hsl(var(--deep) / .94)) padding-box, linear-gradient(145deg, hsl(0 0% 100% / .85) 0%, hsl(var(--warm) / .8) 30%, hsl(0 0% 100% / .7) 52%, hsl(var(--warm) / .75) 76%, hsl(0 0% 100% / .8) 100%) border-box; border: 1px solid transparent; } @media (prefers-reduced-motion: reduce) { #features .grid > * { transition: none; } }