/** * Custom cursor. * * The elements are fixed to the viewport and appended to , so their * variables are set on :root by the widget rather than scoped to it. */ .sc-cur-mount{display:none} .sc-cur{ position:fixed; top:0; left:0; z-index:99999; pointer-events:none; will-change:transform; opacity:0; transition:opacity .3s ease; } /* Shown only once the pointer has actually moved, so it never sits in the top-left corner waiting on a page nobody has touched yet. */ .sc-cur.is-on{opacity:1} .sc-cur-ring{ width:var(--cur-ring,38px); height:var(--cur-ring,38px); margin-left:calc(var(--cur-ring,38px) / -2); margin-top:calc(var(--cur-ring,38px) / -2); border:var(--cur-ring-width,1.5px) solid var(--cur-ring-color,#2E9BDB); background:var(--cur-ring-fill,transparent); border-radius:50%; display:grid; place-content:center; transition:width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), margin .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, opacity .3s ease; } .sc-cur-dot{ width:var(--cur-dot,6px); height:var(--cur-dot,6px); margin-left:calc(var(--cur-dot,6px) / -2); margin-top:calc(var(--cur-dot,6px) / -2); background:var(--cur-dot-color,#5FBFF2); border-radius:50%; transition:opacity .25s ease,transform .25s ease; } /* Over something interactive the ring simply grows. It keeps its outline and stays unfilled, so whatever is underneath — including the pointer itself — remains readable through it. */ .sc-cur-ring.is-hot{ width:calc(var(--cur-ring,38px) * var(--cur-scale,1.9)); height:calc(var(--cur-ring,38px) * var(--cur-scale,1.9)); margin-left:calc(var(--cur-ring,38px) * var(--cur-scale,1.9) / -2); margin-top:calc(var(--cur-ring,38px) * var(--cur-scale,1.9) / -2); background:var(--cur-hover-fill,transparent); border-color:var(--cur-hover-border,var(--cur-ring-color,#2E9BDB)); border-width:var(--cur-hover-width,var(--cur-ring-width,1.5px)); } /* A label supplied by the hovered element. */ .sc-cur-label{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cur-ring-color,#2E9BDB); white-space:nowrap; opacity:0; transform:scale(.8); transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1); } .sc-cur-ring.has-label .sc-cur-label{opacity:1;transform:none} /* While pressed. */ .sc-cur-ring.is-down{transform:scale(.86)} body.sc-cur-hide, body.sc-cur-hide *{cursor:none !important} /* Anything without a fine pointer — touch, pen — keeps the system cursor, and so does anyone who has asked for reduced motion. */ @media (pointer:coarse),(hover:none),(prefers-reduced-motion:reduce){ .sc-cur{display:none !important} body.sc-cur-hide, body.sc-cur-hide *{cursor:auto !important} }