/* ==========================================================================
1. Variáveis de Tema (Light & Dark Mode)
========================================================================== */
/* Variáveis para o tema claro */
:root.light {
--color-background: #f8fafc; /* Fundo principal */
--color-card: #ffffff; /* Fundo de cards/componentes */
--color-text-primary: #334155; /* Cor principal do texto */
--color-text-secondary: #64748b; /* Cor secundária do texto */
--color-text-heading: #0f172a; /* Cor de títulos */
--color-background-hover: #e2e8f0; /* Fundo para hover */
/* PONTO DE EDIÇÃO: CURSOR PERSONALIZADO (IMAGEM DO CURSOR) */
/* Cor do Sol (Tema Claro): Amarelo claro, combinando com as partículas */
--custom-cursor: url('data:image/svg+xml;utf8,') 12 12;
}
/* Variáveis para o tema escuro */
:root.dark {
--color-background: #0f172a; /* Fundo principal */
--color-card: #1e293b; /* Fundo de cards/componentes */
--color-text-primary: #cbd5e1; /* Cor principal do texto */
--color-text-secondary: #94a3b8; /* Cor secundária do texto */
--color-text-heading: #f1f5f9; /* Cor de títulos */
--color-background-hover: #334155; /* Fundo para hover */
/* PONTO DE EDIÇÃO: CURSOR PERSONALIZADO (IMAGEM DO CURSOR) */
/* Cor da Lua (Tema Escuro): Roxo/Magenta, combinando com as partículas */
--custom-cursor: url('data:image/svg+xml;utf8,') 12 12;
}
/* Aplica as variáveis CSS baseadas no tema ativo */
.bg-background { background-color: var(--color-background); }
.bg-card { background-color: var(--color-card); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-text-heading { color: var(--color-text-heading); }
.bg-background-hover { background-color: var(--color-background-hover); }
.dark .dark\:text-slate-400 { color: #94a3b8; } /* Específico para Tailwind no tema escuro */
/* ==========================================================================
2. Estilos Base e Animações Globais
========================================================================== */
body {
font-family: 'Inter', sans-serif;
/* PONTO DE EDIÇÃO: CURSOR PADRÃO */
/* Removido 'cursor: none;' para permitir o cursor personalizado */
cursor: var(--custom-cursor), auto; /* Usa o cursor SVG e volta para 'auto' se o SVG falhar */
overflow-x: hidden; /* Evita scroll horizontal em caso de elementos fora da tela */
}
/* Garante que elementos interativos tenham o cursor de ponteiro */
a, button, [role="button"], .whatsapp-fab-container {
cursor: pointer;
}
/* O contêiner arrastável terá seu cursor redefinido pelo JS quando for arrastável */
#draggable-whatsapp {
cursor: grab; /* Cursor padrão para arrastar */
}
#draggable-whatsapp.dragging {
cursor: grabbing; /* Cursor quando está arrastando */
}
/* Animação para o "digitando" no nome Fabiano */
#typed-name::after {
content: '|';
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* Animação para elementos que aparecem ao rolar a página */
.scroll-animate {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.scroll-animate.visible {
opacity: 1;
transform: translateY(0);
}
/* Estilos para links de navegação */
.nav-link {
transition: color 0.2s ease;
font-weight: 500; /* Levemente mais ousado */
}
/* Estilo para o link de navegação ativo */
.nav-link-active {
color: #2563eb; /* Azul */
font-weight: 700; /* Mais ousado quando ativo */
}
/* Estilos para links sociais no rodapé */
.social-link-footer {
transition: color 0.2s ease;
}
.social-link-footer:hover {
color: #60a5fa; /* Azul claro */
}
/* Estilos para cards de projeto */
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px); /* Efeito de flutuar */
box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Sombra mais intensa */
}
/* Estilos para o botão de e-mail */
.email-btn {
transition: transform 0.2s ease;
}
.email-btn:hover {
transform: scale(1.05); /* Aumenta um pouco no hover */
}
/* ==========================================================================
3. Canvas para Partículas
========================================================================== */
#particle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Garante que fique atrás de todo o conteúdo */
pointer-events: none; /* Permite cliques através do canvas */
}
/* ==========================================================================
4. Menu Mobile
========================================================================== */
@media (max-width: 767px) {
/* PONTO DE EDIÇÃO: CURSOR EM DISPOSITIVOS MÓVEIS */
/* Em dispositivos móveis, o cursor personalizado geralmente não se aplica,
então garantimos que o cursor padrão do sistema seja usado. */
body { cursor: auto; }
#menu-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-card);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
padding: 1rem;
}
#menu-container ul {
flex-direction: column; /* Links em coluna no mobile */
align-items: center;
gap: 1rem;
}
}
/* ==========================================================================
5. Botão "Voltar ao Topo"
========================================================================== */
#back-to-top {
position: fixed;
bottom: 30px; /* Distância da parte inferior */
right: 30px; /* Distância da direita */
z-index: 101; /* Garante que fique acima de outros elementos */
background-color: #2563eb; /* Azul */
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
#back-to-top:hover {
background-color: #1d4ed8; /* Azul mais escuro no hover */
transform: translateY(-3px);
}
#back-to-top.hidden {
display: none; /* Esconde o botão quando não necessário */
}
/* ==========================================================================
6. Botão Flutuante de WhatsApp ARRASTÁVEL
========================================================================== */
#draggable-whatsapp { /* O contêiner pai que será arrastável */
position: fixed; /* Essencial para ser arrastável e flutuar */
/* Valores iniciais, podem ser ajustados ou serão definidos via JS */
bottom: 30px; /* Posição inicial da parte inferior */
right: 100px; /* Posição inicial da direita, para não colidir com o Back To Top */
z-index: 100; /* Acima do conteúdo, mas abaixo do Back To Top */
display: flex;
flex-direction: column-reverse; /* Opções acima do botão principal */
align-items: center;
cursor: grab; /* Indica que o elemento pode ser arrastado */
user-select: none; /* Impede seleção de texto ao arrastar */
}
#draggable-whatsapp.dragging {
cursor: grabbing; /* Cursor quando está sendo arrastado */
}
.whatsapp-main-button {
width: 65px; height: 65px;
background-color: #25D366; /* Verde WhatsApp */
color: white;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
cursor: pointer; border: 1px solid #f1f1f1;
font-size: 2.3rem;
animation: pulsar 0.8s ease-out 1s infinite alternate; /* Animação de pulsar */
}
/* Animação de pulsar para o botão principal do WhatsApp */
@keyframes pulsar {
from { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
to { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}
.whatsapp-options {
display: flex;
flex-direction: column;
align-items: flex-end; /* Alinha as opções à direita do botão */
margin-bottom: 1rem;
opacity: 0;
transform: translateY(10px); /* Começa um pouco abaixo */
pointer-events: none; /* Permite cliques através das opções quando ocultas */
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Estado ativo: opções visíveis e interativas */
#draggable-whatsapp.active .whatsapp-options {
opacity: 1;
transform: translateY(0);
pointer-events: auto; /* Permite interação com as opções */
}
.whatsapp-bubble {
display: flex; align-items: center;
background-color: var(--color-card);
color: var(--color-text-heading);
padding: 8px 16px; border-radius: 9999px;
margin-bottom: 0.75rem; /* Espaçamento entre as bolhas */
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
text-decoration: none; white-space: nowrap;
transition: transform 0.2s ease;
}
.whatsapp-bubble:hover {
transform: scale(1.05); /* Aumenta um pouco no hover */
}
.whatsapp-bubble .whatsapp-text {
margin-right: 8px;
font-weight: 500;
}
.whatsapp-bubble i {
font-size: 1.2rem; /* Tamanho do ícone dentro da bolha */
color: #25D366; /* Cor verde para o ícone do WhatsApp */
}