/* ============================================ Raslans Marketing — Custom Cursor Premium interactive cursor with glow trail ============================================ */ /* NOTE: We do NOT hide the default cursor globally. The JS will add .custom-cursor-active to only when the custom cursor is successfully created. */ html.custom-cursor-active, html.custom-cursor-active * { cursor: none !important; } /* Main cursor dot */ .cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: #0066FF; border-radius: 50%; pointer-events: none; z-index: 100000; transform: translate(-50%, -50%); transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, opacity 0.3s ease; will-change: transform; } /* Outer ring / follower */ .cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 2px solid rgba(0, 102, 255, 0.5); border-radius: 50%; pointer-events: none; z-index: 100000; transform: translate(-50%, -50%); transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease; will-change: transform; } /* Hover state — links, buttons */ .cursor.cursor--hover { width: 0; height: 0; opacity: 0; } .cursor-ring.cursor--hover { width: 56px; height: 56px; border-color: #0066FF; background: rgba(0, 102, 255, 0.08); } /* Click state */ .cursor.cursor--click { width: 6px; height: 6px; background: #00D4FF; } .cursor-ring.cursor--click { width: 28px; height: 28px; border-color: #00D4FF; } /* Text input state */ .cursor.cursor--text { width: 2px; height: 24px; border-radius: 1px; background: #0066FF; } .cursor-ring.cursor--text { width: 32px; height: 32px; border-color: rgba(0, 102, 255, 0.2); } /* WhatsApp hover */ .cursor.cursor--whatsapp { width: 0; height: 0; opacity: 0; } .cursor-ring.cursor--whatsapp { width: 56px; height: 56px; border-color: #25D366; background: rgba(37, 211, 102, 0.1); } /* Hidden on mobile/touch devices — restore default cursor */ @media (pointer: coarse), (hover: none) { html.custom-cursor-active, html.custom-cursor-active * { cursor: auto !important; } .cursor, .cursor-ring { display: none !important; } } /* Hidden when cursor leaves window */ .cursor.cursor--hidden, .cursor-ring.cursor--hidden { opacity: 0; }