/* ========================================================================= GLASS CURSOR ------------------------------------------------------------------------- A small brand-coloured dot that tracks the pointer exactly, plus a larger frosted-glass ring that trails behind it and settles around it. Everything here is gated on .glass-cursor-on, which assets/js/cursor.js adds to only when it finds a real pointing device and motion is not reduced. With JS off, or on touch, or under prefers-reduced-motion, none of these rules apply and the native cursor is left completely alone. ========================================================================= */ @media (hover: hover) and (pointer: fine) { .glass-cursor-on, .glass-cursor-on * { cursor: none; } /* Keep a real caret wherever text is entered or selected — losing the I-beam there is genuinely disorienting, and a ring is a poor substitute for knowing exactly where the insertion point is. */ .glass-cursor-on input, .glass-cursor-on textarea, .glass-cursor-on select, .glass-cursor-on [contenteditable="true"] { cursor: auto; } .gc-ring, .gc-dot { position: fixed; top: 0; left: 0; z-index: 2147483647; border-radius: 50%; pointer-events: none; /* must never intercept a click */ opacity: 0; will-change: transform; transition: opacity .25s ease; } /* Revealed only once the pointer has actually reported a position, so the cursor never flashes in the top-left corner on load. */ .glass-cursor-ready .gc-ring, .glass-cursor-ready .gc-dot { opacity: 1; } /* ---- The ring: frosted glass --------------------------------------- backdrop-filter is what samples and blurs the page behind the ring; the inset highlights are what read as a lit glass edge rather than a flat translucent disc. */ .gc-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; /* centre on the pointer */ background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px) saturate(180%); -webkit-backdrop-filter: blur(6px) saturate(180%); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 4px 18px rgba(80, 60, 120, .18), inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -2px 8px rgba(144, 57, 228, .10); transition: width .28s cubic-bezier(.22, 1, .36, 1), height .28s cubic-bezier(.22, 1, .36, 1), margin .28s cubic-bezier(.22, 1, .36, 1), background .28s ease, border-color .28s ease, opacity .25s ease; } .gc-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #9039e4; box-shadow: 0 0 8px rgba(144, 57, 228, .55); transition: width .2s ease, height .2s ease, margin .2s ease, opacity .25s ease; } /* ---- Over something clickable -------------------------------------- The ring opens up and tints toward the brand colour while the dot shrinks away, so the ring itself becomes the pointer. */ .gc-ring.is-active { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(144, 57, 228, .12); border-color: rgba(144, 57, 228, .50); } .gc-dot.is-active { width: 0; height: 0; margin: 0; } /* ---- Press feedback ------------------------------------------------ */ .gc-ring.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgba(144, 57, 228, .22); border-color: rgba(144, 57, 228, .65); } /* ---- Pointer left the window --------------------------------------- */ .gc-ring.is-out, .gc-dot.is-out { opacity: 0; } /* On dark sections the white glass edge would glare, so lean on the brand tint instead. Add .gc-dark to any dark-background wrapper. */ .gc-dark .gc-ring { background: rgba(144, 57, 228, .18); border-color: rgba(167, 139, 250, .55); } } /* Someone who has asked for less motion should not be given a trailing, easing object that chases their pointer. Opt out completely. */ @media (prefers-reduced-motion: reduce) { .glass-cursor-on, .glass-cursor-on * { cursor: auto; } .gc-ring, .gc-dot { display: none !important; } }