/*
Custom Cursor Styling */
/* Only hide cursor when JavaScript is available and custom cursor is active */
@media (min-width: 991px) {
.custom-cursor-active * {
cursor: none !important;
}
:root {
--cursor--color: var(--brand--green);
--cursor-10: color-mix(in srgb, var(--cursor--color), transparent 90%);
--cursor-20: color-mix(in srgb, var(--cursor--color), transparent 80%);
--cursor-50: color-mix(in srgb, var(--cursor--color), transparent 50%);
--cursor-90: color-mix(in srgb, var(--cursor--color), transparent 5%);
--color--cursor-background: color-mix(
in srgb,
var(--_semantic---text--text-primary),
transparent 10%
);
--bg-text: url('data:image/svg+xml,');
--bg-external: url('data:image/svg+xml,');
--bg-scroll: url('data:image/svg+xml,');
--bg-check: url('data:image/svg+xml,');
--bg-info: url('data:image/svg+xml,');
--bg-close: url('data:image/svg+xml,');
--bg-look: url('data:image/svg+xml,');
--bg-drag: url('data:image/svg+xml,');
--bg-arrow-right: url('data:image/svg+xml,');
--bg-arrow-left: url('data:image/svg+xml,');
--bg-chevron-right: url('data:image/svg+xml,');
--bg-chevron-left: url('data:image/svg+xml,');
--bg-x: url('data:image/svg+xml,');
--bg-chat: url('data:image/svg+xml,');
--bg-pointer: url('data:image/svg+xml,');
--bg-home: url('data:image/svg+xml,');
--bg-search: url('data:image/svg+xml,');
--bg-chevron-left: url('data:image/svg+xml,');
--bg-chevron-right: url('data:image/svg+xml,');
--bg-plus: url('data:image/svg+xml,');
--bg-tiktok: url('data:image/svg+xml,');
--bg-instagram: url('data:image/svg+xml,');
--bg-linkedin: url('data:image/svg+xml,');
--bg-youtube: url('data:image/svg+xml,');
--bg-lock:url('data:image/svg+xml,');
--bg-click-anywhere: url('data:image/svg+xml,');
--bg-case-study: url('data:image/svg+xml,');
--bg-email: url('data:image/svg+xml,');
}
/* Default Cursor */
.cursor-default {
width: 15px;
height: 15px;
border-radius: 100%;
border-width: 2px;
border-style: solid;
border-color: transparent;
background-color: var(--brand--green);
position: fixed;
pointer-events: none !important;
left: 0;
top: 0;
transform: translate(-50%, -50%);
z-index: 10001;
background-repeat: no-repeat;
background-position: center center;
will-change: transform;
transition: width 0.2s ease-in-out, height 0.2s ease-in-out,
background-color 0.2s;
}
/* Secondary layer (halo) */
.cursor-halo {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: var(--cursor-10);
border: 2px solid var(--cursor-10);
position: fixed;
transform: translate(-50%, -50%) scale(1);
transform-origin: center center;
pointer-events: none;
z-index: 10000;
will-change: transform;
transition: width 0.2s, height 0.2s, border-width 0.2s;
}
/* Click feedback */
.cursor-pressed {
width: 90px;
height: 90px;
}
/* Cursors with icons and other custom styling */
.cursor-custom {
width: 100px;
height: 100px;
border-radius: 100%;
background-repeat: no-repeat;
background-color: var(--cursor-90);
/* transition: width 0.3s, height 0.3s, opacity 0.3s ease-out; */
}
/* Generic Cursors */
.cursor-pointer {
width: 40px;
height: 40px;
background-image: var(--bg-pointer);
background-color: transparent;
border-color: transparent;
/* transition: width 0s, height 0s, background-color 0s; */
}
.cursor-link {
width: 60px;
height: 60px;
transition: width 0.5s, height 0.5s, opacity 0.5s;
}
.cursor-text {
background-image: var(--bg-text);
background-size: cover;
background-position: center center;
border-radius: 0%;
border-color: transparent;
background-color: transparent;
}
.cursor-button {
width: 60px;
height: 60px;
background-image: var(--bg-chevron-right);
}
/* Custom Cursors */
.cursor-plus {
background-image: var(--bg-plus);
}
.cursor-chevron-left {
background-image: var(--bg-chevron-left);
}
.cursor-chevron-right {
background-image: var(--bg-chevron-right);
}
.cursor-search {
background-image: var(--bg-search);
}
.cursor-home {
background-image: var(--bg-home);
}
.cursor-external {
background-image: var(--bg-external);
}
.cursor-check {
background-image: var(--bg-check);
}
.cursor-info {
background-image: var(--bg-info);
}
.cursor-close {
background-image: var(--bg-close);
}
.cursor-look {
background-image: var(--bg-look);
}
.cursor-chevron-right {
background-image: var(--bg-chevron-right);
}
.cursor-chevron-left {
background-image: var(--bg-chevron-left);
}
.cursor-arrow-right {
background-image: var(--bg-arrow-right);
}
.cursor-arrow-left {
background-image: var(--bg-arrow-left);
}
.cursor-x {
background-image: var(--bg-x);
}
.cursor-chat {
background-image: var(--bg-chat);
}
.cursor-tiktok {
background-image: var(--bg-tiktok);
}
.cursor-instagram {
background-image: var(--bg-instagram);
}
.cursor-linkedin {
background-image: var(--bg-linkedin);
}
.cursor-youtube {
background-image: var(--bg-youtube);
}
.cursor-email {
background-image: var(--bg-email);
}
.cursor-click-anywhere {
width: 120px;
height: 120px;
background-image: var(--bg-click-anywhere);
background-position: center center;
background-color: var(--cursor-90);
/* border-radius: 0%; */
}
.cursor-locked {
background-image: var(--bg-lock);
}
.cursor-drag {
width: 120px;
height: 40px;
border-width: 2px;
border-radius: 0%;
background-image: var(--bg-drag);
background-position: center center;
}
.cursor-case-study {
width: 170px;
height: 40px;
background-image: var(--bg-case-study);
background-position: center center;
background-color: var(--cursor-90);
}
.cursor-scroll {
width: 80px;
height: 80px;
background-image: var(--bg-scroll);
background-size: cover;
border-style: solid;
}
}