/* ==========================================================================
CLEVEN · FOTOS
Preto e branco em repouso; a cor volta quando o cursor passa por cima.
Uma regra só para os três sites — cada um marca a foto do seu jeito.
Uso: (no )
Em telas de toque não há hover: as fotos ficam coloridas direto, senão
ninguém no celular veria a cor.
========================================================================== */
.founder__portrait img, /* home */
.cleven-photo img, /* growth */
[data-cleven-photo] img {
filter: grayscale(1) contrast(1.04);
transition: filter 600ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
/* network: o retrato é background do próprio elemento, não um */
.card-avatar--photo {
filter: grayscale(1) contrast(1.04);
transition: filter 600ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
@media (hover: hover) and (pointer: fine) {
.founder__portrait:hover img,
.cleven-photo:hover img,
[data-cleven-photo]:hover img,
.card:hover .card-avatar--photo,
.card-avatar--photo:hover {
filter: grayscale(0) contrast(1);
}
}
/* sem mouse não há hover — a cor não pode ficar inalcançável */
@media (hover: none), (pointer: coarse) {
.founder__portrait img,
.cleven-photo img,
[data-cleven-photo] img,
.card-avatar--photo {
filter: grayscale(0) contrast(1);
}
}
@media (prefers-reduced-motion: reduce) {
.founder__portrait img,
.cleven-photo img,
[data-cleven-photo] img,
.card-avatar--photo {
transition: none;
}
}