/* assets/css/cursor-effect.css Cleaned / compact version - Put at: assets/css/cursor-effect.css - Cursor files expected at: assets/cursors/cursor.cur assets/cursors/cursor-hover.cur (Paths are relative to this CSS file -> ../cursors/ ) */ /* ---------- variables ---------- */ :root{ --c-dot-size: 10px; --c-ring-size: 34px; --trail-base: 6px; --z-cursor: 2147483000; --z-trail: 2147482999; --z-click: 2147482998; --brand-a: 124,240,255; --brand-b: 167,139,250; --white: 255,255,255; } /* ------------------------------- Native .cur fallbacks (you swapped them) default = cursor-hover.cur hover/interactive = cursor.cur ------------------------------- */ body { cursor: url('../cursors/cursor-hover.cur') 4 16, auto !important; } /* interactive elements */ a:hover, a:hover *, button:hover, button:hover *, [role="button"]:hover, [role="button"]:hover *, input[type="button"]:hover, input[type="button"]:hover *, input[type="submit"]:hover, input[type="submit"]:hover *, .btn:hover, .btn:hover *, .hoverable:hover, .hoverable:hover * { cursor: url('../cursors/cursor.cur') 4 16, pointer !important; } /* JS failsafe: toggled on when needed */ html.cursor-hovering, html.cursor-hovering * { cursor: url('../cursors/cursor.cur') 4 16, pointer !important; } /* accessibility focus */ a:focus, button:focus, [role="button"]:focus { outline: 3px solid rgba(var(--brand-a), 0.18); outline-offset: 3px; } /* hide custom DOM visuals on touch devices / coarse pointers */ @media (hover: none), (pointer: coarse) { body { cursor: auto !important; } .custom-cursor, .cursor, .trail, .click-effect { display: none !important; } } /* ------------------------------- DOM-based cursor visuals - JS toggles html.cs-cursor-enabled to hide native cursor - JS creates .custom-cursor (or you can create in HTML) ------------------------------- */ /* hide native cursor when JS-enabled */ html.cs-cursor-enabled { cursor: none !important; } /* container */ .custom-cursor, .cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor); transform: translate3d(0,0,0); display: block !important; /* ensure visible */ } /* dot (instant) */ .cursor-dot { position: absolute; width: var(--c-dot-size); height: var(--c-dot-size); border-radius: 50%; background: rgb(var(--white)); box-shadow: 0 0 6px rgba(var(--white), .95); transform: translate(-50%,-50%) scale(1); transition: transform 120ms cubic-bezier(.2,.9,.3,1), opacity 160ms linear; will-change: transform, opacity, left, top; } /* ring (lagging) */ .cursor-ring { position: absolute; width: var(--c-ring-size); height: var(--c-ring-size); border-radius: 50%; border: 1.2px solid rgba(var(--white), .6); transform: translate(-50%,-50%) scale(1); transition: transform 300ms cubic-bezier(.2,.9,.3,1), border-color 200ms linear, box-shadow 200ms linear; mix-blend-mode: screen; pointer-events: none; } /* hover/enlarged state (JS toggles .hovering on container) */ .custom-cursor.hovering .cursor-dot, .cursor.hovering .cursor-dot { transform: translate(-50%,-50%) scale(1.45); background: linear-gradient(90deg, rgb(var(--brand-a)), rgb(var(--brand-b))); box-shadow: 0 0 12px rgba(var(--brand-a), .9); } .custom-cursor.hovering .cursor-ring, .cursor.hovering .cursor-ring { transform: translate(-50%,-50%) scale(1.2); border-color: rgba(var(--brand-a), .9); box-shadow: 0 6px 22px rgba(var(--brand-a), .08); } /* magnetized (elements using data-cursor-magnet) */ .custom-cursor.magnet .cursor-ring, .cursor.magnet .cursor-ring { transform: translate(-50%,-50%) scale(1.35); border-color: rgba(var(--brand-b), .95); box-shadow: 0 10px 30px rgba(var(--brand-b), .06); } /* idle fade (JS toggles .idle) */ .custom-cursor.idle, .cursor.idle { opacity: 0.32; transition: opacity 420ms ease; } /* ------------------------------- Trail (sparkles) created by JS - default small particle with fade/scale animation ------------------------------- */ .trail { position: fixed; pointer-events: none; z-index: var(--z-trail); width: var(--trail-base); height: var(--trail-base); border-radius: 50%; border: 1px solid rgba(var(--white), .92); box-shadow: 0 0 8px rgba(var(--white), .8), 0 0 16px rgba(var(--white), .45), inset 0 0 6px rgba(var(--white), .45); mix-blend-mode: screen; transform: translate(-50%,-50%) scale(0.8); opacity: 1; transition: transform 700ms cubic-bezier(.2,.9,.3,1), opacity 700ms linear, filter 700ms linear; will-change: transform, opacity, left, top, width, height, filter; } /* optional legacy trail styling (kept for compatibility) */ .trail.legacy { border: 1.5px solid rgba(var(--white), .95); animation: legacySpark 0.7s ease-out forwards; } @keyframes legacySpark { 0% { transform: translate(-50%,-50%) scale(0.2); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } } /* ------------------------------- Click ripple ------------------------------- */ .click-effect { position: fixed; pointer-events: none; z-index: var(--z-click); width: 36px; height: 36px; border-radius: 50%; border: 1.8px solid rgba(var(--white), .92); transform: translate(-50%,-50%) scale(0.3); opacity: 0.95; box-shadow: 0 0 10px rgba(var(--white), .35); animation: clickBurst 520ms cubic-bezier(.2,.9,.3,1) forwards; } @keyframes clickBurst { 0% { transform: translate(-50%,-50%) scale(0.3); opacity: 1; border-width: 8px; } 100% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; border-width: 1px; } } /* ------------------------------- reduced-motion safety ------------------------------- */ @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring, .trail, .click-effect { transition: none !important; animation: none !important; } } /* ------------------------------- End of file ------------------------------- */