/* ========================================================= Refineder — Custom Cursor (dot + trailing ring) Works with cursor.js Only active on fine-pointer devices (mouse) that can hover and have no reduced-motion preference. The gating class `refineder-cursor-enabled` is added to by cursor.js. Attribute API (optional, for custom hover states): data-cursor="text" -> show text caret style data-cursor="view" -> big "view" bubble data-cursor-label="View" -> text shown inside the bubble ========================================================= */ @media (hover: hover) and (pointer: fine) { html.refineder-cursor-enabled, html.refineder-cursor-enabled * { cursor: none !important; } } @media (hover: hover) and (pointer: fine) { html.refineder-cursor-enabled body { /* nothing — kept for clarity */ } } .refineder-cursor-ring, .refineder-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 9999px; transform: translate3d(-50%, -50%, 0); will-change: transform, width, height, opacity, background-color; opacity: 0; } .refineder-cursor-ring { width: 38px; height: 38px; border: 1.5px solid var(--color-main-primary, #d7195d); background-color: rgba(215, 25, 93, 0.08); transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), height 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s ease, border-color 0.28s ease, opacity 0.3s ease; } .refineder-cursor-dot { width: 7px; height: 7px; background-color: var(--color-main-primary, #d7195d); box-shadow: 0 0 10px rgba(215, 25, 93, 0.6); transition: width 0.18s ease, height 0.18s ease, opacity 0.3s ease, background-color 0.18s ease; } /* Visible state — added once the cursor has entered the page */ html.refineder-cursor-ready .refineder-cursor-ring, html.refineder-cursor-ready .refineder-cursor-dot { opacity: 1; } /* Hovering interactive elements: ring grows, dot shrinks */ html.refineder-cursor-enabled.refineder-cursor--hover .refineder-cursor-ring { width: 60px; height: 60px; background-color: rgba(215, 25, 93, 0.16); border-color: var(--color-main-pink-3, #df477d); } html.refineder-cursor-enabled.refineder-cursor--hover .refineder-cursor-dot { width: 0; height: 0; opacity: 0; } /* Mouse pressed: subtle pulse */ html.refineder-cursor-enabled.refineder-cursor--down .refineder-cursor-ring { width: 30px; height: 30px; background-color: rgba(215, 25, 93, 0.24); } /* "view" bubble — for media / cards (data-cursor="view") */ html.refineder-cursor-enabled.refineder-cursor--view .refineder-cursor-ring { width: 84px; height: 84px; background-color: var(--color-main-primary, #d7195d); border-color: var(--color-main-primary, #d7195d); box-shadow: 0 0 28px rgba(215, 25, 93, 0.45); } html.refineder-cursor-enabled.refineder-cursor--view .refineder-cursor-dot { opacity: 0; } html.refineder-cursor-enabled.refineder-cursor--view .refineder-cursor-ring::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; } /* Text caret style — for inputs / contenteditable (data-cursor="text") */ html.refineder-cursor-enabled.refineder-cursor--text .refineder-cursor-ring { width: 3px; height: 26px; border-radius: 2px; background-color: var(--color-main-primary, #d7195d); border-color: transparent; } html.refineder-cursor-enabled.refineder-cursor--text .refineder-cursor-dot { opacity: 0; } /* Hidden while cursor leaves the window */ html.refineder-cursor-enabled.refineder-cursor--hidden .refineder-cursor-ring, html.refineder-cursor-enabled.refineder-cursor--hidden .refineder-cursor-dot { opacity: 0; } @media (prefers-reduced-motion: reduce) { .refineder-cursor-ring, .refineder-cursor-dot { transition: opacity 0.2s ease; } }