/** * AED Custom Cursor Styles * Add to your global CSS or a separate in every page * Companion to cursor.js */ /* ── Hide native cursor everywhere except text fields ── */ *, *::before, *::after { cursor: none !important; } input, textarea, select, [contenteditable] { cursor: text !important; } /* ── Shared base ── */ .aed-cursor-dot, .aed-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; will-change: transform; transition: opacity 0.3s ease; } /* ── Dot ── */ .aed-cursor-dot { width: 6px; height: 6px; background: #3DD6A3; transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, opacity 0.3s ease; } .aed-cursor-dot.is-text { width: 2px; height: 20px; border-radius: 1px; background: rgba(255, 255, 255, 0.6); } .aed-cursor-dot.clicking { transform: translate(-50%, -50%) scale(0.6) !important; } /* ── Ring ── */ .aed-cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(61, 214, 163, 0.5); background: transparent; display: flex; align-items: center; justify-content: center; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease; } /* ── Cursor label ── */ .aed-cursor-label { font-family: 'DM Sans', system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: transparent; user-select: none; transition: color 0.2s ease, opacity 0.2s ease; white-space: nowrap; } /* ── State: link hover ── */ .aed-cursor-ring.is-link { width: 52px; height: 52px; border-color: rgba(255, 255, 255, 0.35); } /* ── State: view (portfolio cards) ── */ .aed-cursor-ring.is-view { width: 80px; height: 80px; border-color: rgba(61, 214, 163, 0.7); background: rgba(61, 214, 163, 0.08); } .aed-cursor-ring.is-view .aed-cursor-label { color: #3DD6A3; font-size: 9px; letter-spacing: 0.14em; } /* ── State: action (primary buttons) ── */ .aed-cursor-ring.is-action { width: 56px; height: 56px; border-color: #3DD6A3; background: rgba(61, 214, 163, 0.15); } .aed-cursor-ring.is-action .aed-cursor-label { color: #3DD6A3; font-size: 16px; letter-spacing: 0; } /* ── State: text input ── */ .aed-cursor-ring.is-text { width: 2px; height: 24px; border-radius: 1px; border-color: transparent; background: transparent; } /* ── Click pulse ── */ .aed-cursor-ring.clicking { width: 28px; height: 28px; border-color: #3DD6A3; background: rgba(61, 214, 163, 0.2); transition: width 0.1s ease, height 0.1s ease, border-color 0.1s ease, background 0.1s ease; } /* ── Disable entirely on touch devices ── */ @media (hover: none) { .aed-cursor-dot, .aed-cursor-ring { display: none !important; } *, *::before, *::after { cursor: auto !important; } }