/** * Custom cursor (dot + ring, mix-blend-mode: difference). * Brand ref: --gt-brand-navy #005282, --gt-brand-cyan #00aeef — colors come from contrast via difference, not these vars. * * Optional: on , data-cursor-theme="off" disables custom cursor (restore system cursor; JS exits early). */ html[data-cursor-theme='off'] body, html[data-cursor-theme='off'] { cursor: auto !important; } html[data-cursor-theme='off'] #gt-cursor { display: none !important; } @media (pointer: fine) and (prefers-reduced-motion: no-preference) { html, body { cursor: auto; } #gt-cursor { display: none !important; } } #gt-cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } #gt-cursor.gt-cursor--visible { opacity: 1; visibility: visible; } #gt-cursor-ring { position: fixed; z-index: 9999; width: 40px; height: 40px; margin: 0; padding: 0; box-sizing: border-box; border: 1.5px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); opacity: 1; transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease; will-change: left, top, width, height, opacity; } #gt-cursor-dot { position: fixed; z-index: 10000; width: 8px; height: 8px; margin: 0; padding: 0; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); will-change: left, top; } #gt-cursor.gt-cursor--hovering #gt-cursor-ring { width: 56px; height: 56px; opacity: 0.6; } /* Touch / coarse pointers: system cursor, no custom layer */ /* Respect reduced motion: restore default cursor */ @media (prefers-reduced-motion: reduce) { html, body { cursor: auto !important; } #gt-cursor { display: none !important; } }