/** * Qualia Custom Cursor * * White-border ring cursor that follows the mouse, expands + fills with * white on hover over interactive elements. mix-blend-mode: difference * ensures the ring inverts underlying colours for contrast on any background. * * Visibility strategy: * - Native cursor hidden via `.qualia-cursor-active *` selector — the body * class is added by JS only AFTER the cursor div is injected. If JS fails * (deferred, blocked, touch device), the native cursor remains. * - Previous approach (`* { cursor: none }` unconditionally) broke when JS * was deferred by LiteSpeed Cache — native cursor hidden, custom cursor * never created = invisible cursor. * - z-index 999999 clears Elementor sticky header (z-index 9999). * - mix-blend-mode: difference inverts underlying colours for contrast. * - No will-change: transform (creates stacking context, breaks Elementor). * * Hover expansion uses width/height (not scale) so that CSS transitions do not * fight the JS transform updates on every mousemove frame. transform is used * exclusively by JS for position (translate3d only — no scale). * * Disabled on: touch devices, Elementor editor, prefers-reduced-motion (size), * prefers-contrast: more, forced-colors (Windows High Contrast Mode). * * Cursor colour: #fff (white) with mix-blend-mode: difference. No brand token * is used — the blend mode produces the correct visual contrast automatically. * * @package QualiaChild * @since 2.6.0 */ /* Hide native cursor — only when JS has successfully initialised. The .qualia-cursor-active class is added to by qualia-cursor.js after the custom cursor div is injected into the DOM. */ .qualia-cursor-active, .qualia-cursor-active * { cursor: none !important; } /* Restore native cursor on touch / stylus / no-pointer devices. */ @media (pointer: none), (pointer: coarse) { .qualia-cursor-active, .qualia-cursor-active * { cursor: auto !important; } } /* Elementor editor: restore native cursor and hide custom cursor. */ .elementor-editor-active, .elementor-editor-active * { cursor: auto !important; } .elementor-editor-active .qualia-cursor { display: none !important; } /* ─── Cursor element ──────────────────────────────────────────────────────── */ .qualia-cursor { position: fixed; top: 0; left: 0; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; z-index: 999999; mix-blend-mode: difference; /* Start hidden until JS positions and reveals it. */ opacity: 0; /* transform is excluded from transitions — JS updates translate3d on every mousemove (every ~16ms) and a CSS transition on transform causes micro-stutters as the two compete. Hover expansion uses width/height instead of scale(), so those are transitioned here. */ transition: width 0.15s ease, height 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease; } .qualia-cursor.is-visible { opacity: 1; } /* Hover state: expand to 50px (2.5× the 20px base) and fill with white. Size is handled by CSS width/height — JS sets translate3d only, using a 25px offset (half of 50px) to keep the visual center on the pointer. */ .qualia-cursor.is-hover { width: 50px; height: 50px; background: #fff; border-color: #fff; } /* ─── Reduced motion ──────────────────────────────────────────────────────── */ /* Disable ALL transitions and prevent size change — cursor still moves (JS handles position). */ @media (prefers-reduced-motion: reduce) { .qualia-cursor { transition: none !important; } .qualia-cursor.is-hover { width: 20px; height: 20px; background: transparent; border-color: #fff; } } /* Respect high-contrast preference — user likely depends on custom OS cursor. */ @media (prefers-contrast: more) { .qualia-cursor-active, .qualia-cursor-active * { cursor: auto !important; } .qualia-cursor { display: none !important; } } /* Respect Windows High Contrast Mode — system visuals must be preserved. */ @media (forced-colors: active) { .qualia-cursor-active, .qualia-cursor-active * { cursor: auto !important; } .qualia-cursor { display: none !important; } }