/** * ChipsAI Cursor * * Site-wide custom cursor (dot + lerp ring + magnetic + trail). * Auto-disabled on touch devices. * * @package ChipsAI\CustomBlocks */ /* ============================================ BUILDER PLACEHOLDER (visible only in Bricks editor) ============================================ */ .cai-cursor-marker--builder { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed rgba(127, 233, 217, 0.5); border-radius: 10px; background: rgba(127, 233, 217, 0.06); color: #2a2a2a; font: 500 13px/1.4 system-ui, sans-serif; max-width: 360px; } .cai-cursor-marker--builder .cai-cursor-marker__icon { width: 28px; height: 28px; color: #18b09b; flex-shrink: 0; } .cai-cursor-marker--builder .cai-cursor-marker__icon svg { width: 100%; height: 100%; } .cai-cursor-marker--builder .cai-cursor-marker__text { display: flex; flex-direction: column; gap: 2px; } .cai-cursor-marker--builder strong { font-weight: 600; } .cai-cursor-marker--builder span { font-size: 11px; color: #666; } /* Frontend marker is invisible — it only carries config in data-attribute. */ .cai-cursor-marker:not(.cai-cursor-marker--builder) { display: none; } /* ============================================ CURSOR LAYER (mounted by JS to ) ============================================ */ .cai-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 2147483647; /* above everything */ } .cai-cursor__dot, .cai-cursor__ring, .cai-cursor__trail-dot { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; will-change: transform; transform: translate3d(-100px, -100px, 0); opacity: 0; transition: opacity 0.3s ease; } .cai-cursor--ready .cai-cursor__dot, .cai-cursor--ready .cai-cursor__ring, .cai-cursor--ready .cai-cursor__trail-dot { opacity: 1; } .cai-cursor__dot { z-index: 2; background: var(--cai-cur-dot-color, #7FE9D9); width: var(--cai-cur-dot-size, 8px); height: var(--cai-cur-dot-size, 8px); margin-left: calc(var(--cai-cur-dot-size, 8px) / -2); margin-top: calc(var(--cai-cur-dot-size, 8px) / -2); } .cai-cursor__ring { z-index: 1; width: var(--cai-cur-ring-size, 32px); height: var(--cai-cur-ring-size, 32px); margin-left: calc(var(--cai-cur-ring-size, 32px) / -2); margin-top: calc(var(--cai-cur-ring-size, 32px) / -2); border: var(--cai-cur-ring-border, 1.5px) solid var(--cai-cur-ring-color, #7FE9D9); background: color-mix(in srgb, var(--cai-cur-ring-color, #7FE9D9) calc(var(--cai-cur-ring-fill, 0) * 100%), transparent); transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } /* Magnetic state: ring morphs to fit the target element. JS sets width/height/border-radius inline. */ .cai-cursor__ring--magnetic { border-color: transparent; background: color-mix(in srgb, var(--cai-cur-ring-color, #7FE9D9) calc(var(--cai-cur-magnetic-fill, 0.15) * 100%), transparent); margin-left: 0; margin-top: 0; } /* ============================================ TRAIL ============================================ */ .cai-cursor__trail { z-index: 0; } .cai-cursor__trail-dot { background: var(--cai-cur-trail-color, #7FE9D9); width: var(--cai-cur-trail-size, 5px); height: var(--cai-cur-trail-size, 5px); margin-left: calc(var(--cai-cur-trail-size, 5px) / -2); margin-top: calc(var(--cai-cur-trail-size, 5px) / -2); } /* ============================================ BLEND MODES ============================================ */ .cai-cursor--blend-difference .cai-cursor__dot, .cai-cursor--blend-difference .cai-cursor__ring, .cai-cursor--blend-difference .cai-cursor__trail-dot { mix-blend-mode: difference; } .cai-cursor--blend-exclusion .cai-cursor__dot, .cai-cursor--blend-exclusion .cai-cursor__ring, .cai-cursor--blend-exclusion .cai-cursor__trail-dot { mix-blend-mode: exclusion; } .cai-cursor--blend-overlay .cai-cursor__dot, .cai-cursor--blend-overlay .cai-cursor__ring, .cai-cursor--blend-overlay .cai-cursor__trail-dot { mix-blend-mode: overlay; } .cai-cursor--blend-screen .cai-cursor__dot, .cai-cursor--blend-screen .cai-cursor__ring, .cai-cursor--blend-screen .cai-cursor__trail-dot { mix-blend-mode: screen; } /* ============================================ HIDE NATIVE CURSOR ============================================ */ html.cai-cursor-hide-native, html.cai-cursor-hide-native body, html.cai-cursor-hide-native * { cursor: none !important; } /* Re-enable system cursor on form fields where typing is essential. */ html.cai-cursor-hide-native input[type="text"], html.cai-cursor-hide-native input[type="email"], html.cai-cursor-hide-native input[type="search"], html.cai-cursor-hide-native input[type="url"], html.cai-cursor-hide-native input[type="tel"], html.cai-cursor-hide-native input[type="password"], html.cai-cursor-hide-native input[type="number"], html.cai-cursor-hide-native textarea, html.cai-cursor-hide-native [contenteditable="true"] { cursor: text !important; } /* ============================================ AUTO-DISABLE on touch & reduced motion ============================================ */ @media (hover: none), (pointer: coarse) { .cai-cursor, .cai-cursor__dot, .cai-cursor__ring, .cai-cursor__trail-dot { display: none !important; } html.cai-cursor-hide-native, html.cai-cursor-hide-native body, html.cai-cursor-hide-native * { cursor: auto !important; } } @media (prefers-reduced-motion: reduce) { .cai-cursor, .cai-cursor__dot, .cai-cursor__ring, .cai-cursor__trail-dot { display: none !important; } }