/* * Custom cursor — NPM Refinery * * Small ring that follows the mouse with a slight lag, growing and * tinting accent color over links/buttons/anything else marked * .npm-cursor-target. Desktop only — npm-cursor.js only enables this * (adds .npm-cursor-enabled to ) on devices with an actual mouse * and skips it for prefers-reduced-motion visitors, so touch/reduced- * motion visitors keep the OS's normal cursor/tap behavior untouched — * nothing here applies unless that class is present. */ .npm-cursor-enabled, .npm-cursor-enabled a, .npm-cursor-enabled button, .npm-cursor-enabled [role="button"], .npm-cursor-enabled .npm-cursor-target { cursor: none; } .npm-cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--accent, #ba9a52); background-color: #ba9a52; pointer-events: none; z-index: 9999; opacity: 0; transition: width .2s ease, height .2s ease, background-color .2s ease, opacity .2s ease, border-color .2s ease; will-change: transform; } .npm-cursor.is-visible { opacity: 1; } /* Grows and tints over a link/button/.npm-cursor-target — same accent token used for hover states everywhere else on the site. */ .npm-cursor.is-active { width: 42px; height: 42px; background-color: rgba(186, 154, 82, 0.35); border-color: var(--wp--preset--color--accent, #ba9a52); }