/* ========================================================= DOTS MEDIA CUSTOM CURSOR Desktop only — touch devices keep the default cursor (see the "has-custom-cursor" body class toggled in cursor.js). ========================================================= */ body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor img, body.has-custom-cursor [data-cursor] { /* * !important because individual card/section CSS often sets its * own "cursor: pointer" on images or links, which would otherwise * break inheritance from and bring the native OS cursor * back on top of our custom one. */ cursor: none !important; } /* --------------------------------------------------------- THE SMALL DOT — follows the mouse 1:1 --------------------------------------------------------- */ .cursor-dot { position: fixed; top: 0; left: 0; z-index: 100000; width: 8px; height: 8px; background: #ffffff; border-radius: 50%; pointer-events: none; transform: translate3d(-50%, -50%, 0); /* * Opacity is intentionally left out of the transition so the * dot disappears the instant a hover/view state is entered, * with no fade lag that could make it briefly visible. */ transition: transform 0.15s ease; } /* --------------------------------------------------------- THE RING — trails slightly behind, grows on hover --------------------------------------------------------- */ .cursor-circle { position: fixed; top: 0; left: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 50%; pointer-events: none; transform: translate3d(-50%, -50%, 0); transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .cursor-text { color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; opacity: 0; transition: opacity 0.25s ease; } /* * Hovering a normal link / button: dot hides, ring grows and * turns orange with a soft glow — matches the reference, where * every button/link hover uses the same orange ring as images, * just smaller and without the "VIEW" label. */ body.cursor-hover .cursor-dot { opacity: 0 !important; } body.cursor-hover .cursor-circle { width: 56px; height: 56px; background: rgba(10, 7, 5, 0.25); border-color: #ff7a1a; box-shadow: 0 0 14px rgba(255, 122, 26, 0.5), 0 0 30px rgba(255, 122, 26, 0.28); } /* Hovering something tagged data-cursor="view": bigger orange ring + label */ body.cursor-view .cursor-dot { opacity: 0 !important; } body.cursor-view .cursor-circle { width: 92px; height: 92px; background: rgba(10, 7, 5, 0.35); border-color: #ff7a1a; box-shadow: 0 0 20px rgba(255, 122, 26, 0.55), 0 0 45px rgba(255, 122, 26, 0.3); } body.cursor-view .cursor-text { opacity: 1; } /* Hide the whole custom cursor when it leaves the viewport */ body:not(.has-custom-cursor) .cursor-dot, body:not(.has-custom-cursor) .cursor-circle { display: none; }