/**handles:geshmak-icon-button-cursor**/ /** בס״ד * GESHMAK BUTTON — HOVER CURSOR (frontend styles) * * The floating cursor element is created by geshmak-icon-button-cursor.js and * appended to . Its colour is driven by `color` (the inline SVG uses * currentColor), its size by width/height, and its overlay behaviour by * mix-blend-mode — all set inline per-instance by the script from the button's * panel settings. * * DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/ */ .gshmk-btn-cursor { position: fixed; top: 0; left: 0; z-index: 2147483600; /* above virtually everything, below max */ pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0); will-change: transform, opacity; transition: opacity 0.18s ease; /* width / height / color / mix-blend-mode set inline per instance */ } .gshmk-btn-cursor.is-visible { opacity: var(--gshmk-btn-cursor-opacity, 1); } .gshmk-btn-cursor svg { display: block; width: 100%; height: 100%; } /* Native-cursor suppression is handled entirely in JS: on hover the script sets * an inline `cursor: none !important` on the button and each descendant, which is * the only thing that reliably beats a stacked global class's or the theme's own * `:hover { cursor: pointer !important }`. A CSS class rule cannot win that. */ /* Safety net: never paint a custom cursor for users who prefer reduced motion * (the script already avoids creating it; this is a defensive backstop). */ @media (prefers-reduced-motion: reduce) { .gshmk-btn-cursor { display: none !important; } }