/* =========================================================
FIT.PLAY — LOGO-3D.CSS
Efeito visual "3D + neon" para o texto "FIT.PLAY", usado no
hero da home e no cabeçalho da tela de login. Usa as mesmas
variáveis de cor do tema ativo (--cor-primaria e
--cor-secundaria), então já se adapta automaticamente a
qualquer tema que a pessoa escolher.
COMO USAR:
1. Inclua este arquivo no das páginas onde quiser o
efeito (index.html, login.html), depois do style.css:
2. No lugar do texto "FIT.PLAY" que já existe, adicione a
classe "logo-3d":
FIT.PLAY
Não precisa trocar nenhuma imagem nem vídeo — é tudo feito
com texto + CSS, então continua leve e nítido em qualquer tela.
========================================================= */
.logo-3d {
position: relative;
display: inline-block;
font-weight: 900;
letter-spacing: 2px;
color: var(--cor-primaria, #00aaff);
/* efeito de profundidade: várias camadas de sombra empilhadas,
cada uma um pouco mais escura e deslocada, criando o "3D" */
text-shadow:
1px 1px 0 rgba(0,0,0,0.25),
2px 2px 0 rgba(0,0,0,0.2),
3px 3px 4px rgba(0,0,0,0.2),
0 0 8px rgba(var(--cor-primaria-rgb, 0,170,255), 0.3),
0 0 16px rgba(var(--cor-secundaria-rgb, 0,68,255), 0.18);
animation: logo3dPulso 3.2s ease-in-out infinite;
}
/* leve pulsação de brilho, contínua e sutil — dá sensação de "vivo"
sem ficar cansativo de olhar */
@keyframes logo3dPulso {
0%, 100% {
filter: brightness(1);
text-shadow:
1px 1px 0 rgba(0,0,0,0.25),
2px 2px 0 rgba(0,0,0,0.2),
3px 3px 4px rgba(0,0,0,0.2),
0 0 8px rgba(var(--cor-primaria-rgb, 0,170,255), 0.3),
0 0 16px rgba(var(--cor-secundaria-rgb, 0,68,255), 0.18);
}
50% {
filter: brightness(1.06);
text-shadow:
1px 1px 0 rgba(0,0,0,0.25),
2px 2px 0 rgba(0,0,0,0.2),
3px 3px 5px rgba(0,0,0,0.22),
0 0 12px rgba(var(--cor-primaria-rgb, 0,170,255), 0.45),
0 0 22px rgba(var(--cor-secundaria-rgb, 0,68,255), 0.25);
}
}
/* leve efeito de "reflexo" passando por cima do texto,
como se fosse uma luz deslizando (opcional, mas dá um
toque bem "premium") */
.logo-3d::after {
content: "FIT.PLAY";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
115deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,0.4) 50%,
transparent 60%,
transparent 100%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: logo3dBrilho 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes logo3dBrilho {
0% { background-position: 200% 0; }
35% { background-position: -50% 0; }
100% { background-position: -50% 0; }
}
/* Em telas pequenas, reduz um pouco a intensidade da sombra para
não pesar demais visualmente em fontes menores */
@media (max-width: 480px) {
.logo-3d {
text-shadow:
1px 1px 0 rgba(0,0,0,0.2),
2px 2px 3px rgba(0,0,0,0.2),
0 0 8px rgba(var(--cor-primaria-rgb, 0,170,255), 0.3);
}
}