@media (min-width: 991px) {
* {
cursor: none !important;
}
:root {
--color--cursor-background: color-mix(
in srgb,
var(--color--text),
transparent 10%
);
--color--cursor-background-light: color-mix(
in srgb,
var(--brand--off-white),
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-view: 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-instagram: url('data:image/svg+xml,');
--bg-linkedin: 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,');
}
/* Default Cursor */
.cursor-custom {
width: 15px;
height: 15px;
border-radius: 100%;
border-width: 2px;
border-style: solid;
/* border-color: var(--color--text); */
border-color: transparent;
background-color: var(--brand--aperol);
position: fixed;
pointer-events: none !important;
left: 0;
top: 0;
transform: translate(calc(-50% + 15px), -50%);
transition: width 0.1s, height 0.1s;
z-index: 10001;
background-repeat: no-repeat;
background-position: center center;
}
/* Cursor Release Fade */
.cursor-release {
background-color: color-mix(in srgb, var(--color--text), transparent 80%);
width: 0px;
height: 0px;
border-radius: 100%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width 0.5s, height 0.5s, opacity 0.5s;
z-index: 10000;
}
/*Cursor Presses*/
.cursor-pressed {
background-color: transparent;
width: 100px;
height: 100px;
border-width: 2px;
border-style: solid;
border-color: color-mix(in srgb, var(--color--text), transparent 80%);
transition: width 0.2s, height 0.2s, opacity 0.2s ease-out;
z-index: 10002;
}
/* Shared styles for action cursors */
.cursor-action {
width: 60px;
height: 60px;
border-radius: 100%;
background-repeat: no-repeat;
background-color: var(--color--cursor-background);
transition: width 0.3s, height 0.3s, opacity 0.3s ease-out;
}
/* Generic Cursors */
.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-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-view {
background-image: var(--bg-view);
}
.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-instagram {
background-image: var(--bg-instagram);
}
.cursor-linkedin {
background-image: var(--bg-linkedin);
}
.cursor-x {
background-image: var(--bg-x);
}
.cursor-chat {
background-image: var(--bg-chat);
}
.cursor-pointer {
background-image: var(--bg-pointer);
background-color: transparent;
border-radius: 0%;
border-color: transparent;
}
.cursor- {
background-image: var(--bg-);
}
.cursor-drag {
width: 100px;
height: 100px;
border-width: 2px;
border-style: solid;
border-color: var(--brand--mud);
background-color: var(--color--cursor-background-light);
background-image: var(--bg-drag);
background-position: center center;
background-size: cover;
}
.cursor-scroll {
width: 130px;
height: 130px;
background-image: var(--bg-scroll);
background-size: cover;
border-color: transparent;
background-color: transparent;
}
}