/* ==========================================================================
CLEVEN · BOLINHA QUE SEGUE O CURSOR
Sempre no contraste do que está por baixo.
Uso: (no )
(fim do )
O truque é `mix-blend-mode: difference` com branco: cada pixel vira o
inverso do que está atrás. Sobre preto fica branca, sobre creme fica
escura, sobre uma foto acompanha a foto. Não há cor fixa a escolher —
e nunca some, seja qual for o fundo.
Três tamanhos:
padrão · discreta
link · vira anel, deixando o alvo à vista
foto · cresce, para ler bem sobre a imagem
Em telas de toque ela nem entra em cena — nem por CSS, nem por JS.
========================================================================== */
.cleven-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 9998;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 0 solid #fff;
pointer-events: none;
opacity: 0;
mix-blend-mode: difference;
transition:
opacity 260ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1)),
width 260ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1)),
height 260ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1)),
background-color 260ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1)),
border-width 260ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cleven-cursor.is-on {
opacity: 1;
}
/* sobre links e botões: vira anel e deixa ver o que está por baixo */
.cleven-cursor.is-active {
width: 34px;
height: 34px;
background: transparent;
border-width: 1.5px;
}
/* sobre foto: cheia e maior, para se ler em qualquer trecho da imagem */
.cleven-cursor.is-photo {
width: 46px;
height: 46px;
background: #fff;
border-width: 0;
}
/* ponteiro grosso, sem mouse ou sem hover: a bolinha nem entra em cena */
@media (hover: none), (pointer: coarse) {
.cleven-cursor {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.cleven-cursor {
display: none;
}
}