/* ========================================================= BASE TIPOGRÁFICA GLOBAL DO PROJETO --------------------------------------------------------- Define o tamanho de fonte raiz (root) do site. Este valor serve como referência para todas as medidas em "rem" usadas ao longo do CSS. IMPORTANTE: - 100% equivale ao tamanho padrão do navegador (geralmente 16px) - Respeita configurações de acessibilidade do usuário - Alterar este valor muda a escala de TODO o site ========================================================= */ html { font-size: 100%; /* Mantém a base tipográfica alinhada ao padrão do navegador */ } /* ========================================================= RESET GLOBAL DE ESPAÇAMENTOS E MODELO DE CAIXA --------------------------------------------------------- Aplica regras básicas a TODOS os elementos da página, garantindo consistência visual entre navegadores. Este bloco elimina margens e espaçamentos padrão e define um modelo de cálculo previsível para larguras e alturas dos elementos. IMPORTANTE: - Afeta absolutamente todos os elementos (*) - Remover ou alterar este bloco impacta TODO o layout - Deve permanecer no início do arquivo CSS ========================================================= */ * { margin: 0; /* Remove margens padrão aplicadas pelo navegador */ padding: 0; /* Remove espaçamentos internos padrão */ box-sizing: border-box; /* Garante que width e height incluam padding e border. Evita cálculos manuais e quebras inesperadas de layout. */ } /* ========================================================= CONFIGURAÇÃO GLOBAL DO CORPO DA PÁGINA (BODY) --------------------------------------------------------- Define o comportamento visual e estrutural padrão de todo o conteúdo exibido no site. Este bloco controla: - Tipografia base - Cores globais (via variáveis CSS) - Ritmo de leitura do texto - Estrutura vertical da página - Comportamento de rolagem - Transições visuais entre temas/estados IMPORTANTE: - Afeta TODAS as páginas e seções - Alterações aqui impactam o site inteiro - Deve ser tratado como configuração estrutural ========================================================= */ body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Define a família de fontes padrão do site. A lista funciona como fallback: se uma fonte não existir, o navegador tenta a próxima. O tipo "sans-serif" garante legibilidade em qualquer sistema. */ background-color: var(--bg-color-page); /* Cor de fundo principal do site. Utiliza variável CSS para permitir troca de tema (ex: claro / escuro) sem alterar este bloco. */ color: var(--text-color); /* Cor padrão de todos os textos. Centralizar essa definição evita repetição e inconsistências. */ line-height: 1.6; /* Define o espaçamento vertical entre linhas de texto. Melhora a legibilidade e o conforto visual em leituras longas. Valores entre 1.5 e 1.7 são considerados ideais. */ display: flex; /* Transforma o body em um contêiner flexível. Permite controlar facilmente o empilhamento vertical dos principais blocos da página. */ flex-direction: column; /* Organiza os elementos filhos do body em coluna (vertical). Essencial para layouts com header, conteúdo e footer. */ min-height: 100vh; /* Garante que a página tenha pelo menos a altura total da tela. Evita fundos "cortados" em páginas com pouco conteúdo. */ scroll-behavior: smooth; /* Ativa rolagem suave ao navegar por âncoras internas (#id). Melhora a percepção de navegação e orientação do usuário. */ transition: background 0.4s ease, color 0.4s ease; /* Suaviza a troca de cores de fundo e texto. Usado principalmente em mudanças de tema (ex: dark/light). Evita transições abruptas e desconfortáveis. */ } /* ========================================================= HEADER FIXO GLOBAL --------------------------------------------------------- Define o cabeçalho fixo visível em todas as páginas. Controla: - Posição e altura - Cores e estilo visual - Layout interno e alinhamento de conteúdo - Prioridade de sobreposição (z-index) - Sombreamento para destaque IMPORTANTE: - Afeta TODA a navegação do site - Alterações em dimensões, padding ou z-index podem impactar menus e elementos flutuantes - Variáveis CSS permitem personalização de cores e sombra ========================================================= */ .header { position: fixed; /* Mantém o header fixo no topo da página durante a rolagem */ top: 0; /* Define que o topo do header começa na borda superior da tela */ left: 0; /* Posiciona o header no canto esquerdo da tela */ width: 100%; /* O header ocupa 100% da largura da tela */ height: 80px; /* Define a altura do header. Alterar pode afetar alinhamento de menus e conteúdo */ background-color: var(--bg-color-header); /* Cor de fundo do header usando variável CSS para fácil customização */ color: #F8F8F8; /* Cor padrão do texto no header (ex: título, links) */ display: flex; /* Transforma o header em contêiner flexível, permitindo alinhamento interno */ align-items: center; /* Alinha verticalmente o conteúdo do header ao centro */ justify-content: space-between; /* Distribui o conteúdo do header com espaço igual entre os elementos */ padding: 0 50px; /* Espaçamento interno lateral. Ajustar altera distanciamento de itens do header */ font-weight: 600; /* Define a espessura da fonte do texto do header */ letter-spacing: 0.4px; /* Define o espaçamento entre letras para melhor legibilidade */ z-index: 1000; /* Garante que o header fique acima de outros elementos sobrepostos */ box-shadow: var(--box-shadow-header); /* Sombra do header usando variável CSS, adiciona profundidade visual */ } /* ========================================================= CONTÊINER DE CONTROLES DO HEADER --------------------------------------------------------- Define o layout interno dos elementos de controle dentro do header, como botões, ícones e menus. IMPORTANTE: - Afeta somente a disposição horizontal dos elementos - Alterar o gap ou alinhamento pode impactar a estética e o espaçamento dos controles - Este bloco depende de `.header` estar configurado como flex ========================================================= */ .header-controls { display: flex; /* Transforma o contêiner em flexível, permitindo alinhar os itens em linha */ align-items: center; /* Alinha verticalmente todos os elementos ao centro */ gap: 32px; /* Define o espaço entre cada item do contêiner */ } /* ========================================================= SEÇÃO ESQUERDA DO HEADER (.header-left) --------------------------------------------------------- Define o estilo e layout do conteúdo posicionado à esquerda do header, geralmente logo ou título. IMPORTANTE: - Afeta somente a parte esquerda do header - Alterar font-size, gap ou alinhamento impacta a aparência e espaçamento dos itens internos - Este bloco deve estar em harmonia com `.header-controls` ========================================================= */ .header-left { font-size: 30px; /* Define o tamanho da fonte dos elementos dentro da seção esquerda */ font-weight: 600; /* Define a espessura da fonte (negrito médio) */ letter-spacing: 0.6px; /* Define o espaçamento entre letras para melhor legibilidade */ color: #F8F8F8; /* Cor do texto da seção esquerda do header */ display: flex; /* Transforma o contêiner em flexível, permitindo alinhar itens em linha */ align-items: center; /* Alinha verticalmente todos os itens ao centro */ gap: 0px; /* Espaçamento entre os elementos internos. 0px significa que estão colados */ } /* ========================================================= TEXTO DE ÚLTIMA ATUALIZAÇÃO NO HEADER ESQUERDO (.header-left .last-update) --------------------------------------------------------- Estiliza a informação de data ou status exibida abaixo do título/logo na seção esquerda do header. IMPORTANTE: - Afeta somente o elemento específico de atualização - Alterar font-size, margin ou line-height impacta legibilidade e alinhamento visual - Mantém hierarquia visual clara em relação ao título principal ========================================================= */ .header-left .last-update { font-size: 14px; /* Define o tamanho da fonte do texto de última atualização */ color: #F8F8F8; /* Cor do texto, garantindo contraste com o fundo do header */ font-weight: 400; /* Espessura normal da fonte, menos chamativa que o título */ margin-top: 4px; /* Espaçamento acima do texto, separando do elemento principal */ line-height: 1.2; /* Altura da linha para leitura compacta e visual alinhado */ } /* ========================================================= ELEMENTO DE ÚLTIMA ATUALIZAÇÃO VISUAL (.last-update) --------------------------------------------------------- Controla o estilo e animação do texto de atualização que pode aparecer dinamicamente no header ou outros componentes. IMPORTANTE: - Afeta a visibilidade e posição inicial do elemento - Propriedades como opacity e transform são usadas para animação (entrada suave) - Alterações sem entender a animação podem quebrar o efeito visual ========================================================= */ .last-update { font-size: 14px; /* Define o tamanho da fonte do texto de atualização */ color: #F8F8F8; /* Cor do texto, garantindo contraste com o fundo */ font-weight: 400; /* Espessura normal da fonte, para não competir com títulos */ margin-top: 2px; /* Espaçamento acima do elemento, separando de outros textos */ opacity: 0; /* Inicialmente invisível; usado para animação de aparecimento */ transform: translateX(80px); /* Posição inicial deslocada horizontalmente (80px à direita) para animação */ transition: opacity 1.2s ease, transform 1.2s ease; /* Define a duração e suavidade da animação de entrada: - Opacidade - Movimento horizontal */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DO TEXTO DE ATUALIZAÇÃO (.last-update.visible) --------------------------------------------------------- Controla o estado visível do elemento `.last-update`. Quando a classe `.visible` é adicionada via JS ou interação, o texto aparece suavemente na posição correta. IMPORTANTE: - Depende do estado inicial definido em `.last-update` - Alterar valores de opacity ou transform pode quebrar a animação - Esta classe geralmente é aplicada dinamicamente via JavaScript ========================================================= */ .last-update.visible { opacity: 1; /* Torna o elemento totalmente visível */ transform: translateX(0); /* Move o elemento para a posição original, desfazendo o deslocamento inicial */ } /* ========================================================= LINKS DO HEADER DIREITO (.header-right a) --------------------------------------------------------- Estiliza os links posicionados na seção direita do header, geralmente usados para navegação, botões ou ícones. IMPORTANTE: - Afeta apenas links dentro de `.header-right` - Alterações em margin, padding ou transition podem impactar o espaçamento e animação visual - Propriedade position relativa permite pseudo-elementos ou animações baseadas em deslocamento ========================================================= */ .header-right a { position: relative; /* Permite posicionamento relativo para animações ou pseudo-elementos */ margin-left: 26px; /* Espaçamento à esquerda entre links, criando separação visual */ text-decoration: none; /* Remove sublinhado padrão do link */ color: #F8F8F8; /* Cor do texto do link, garantindo contraste com o fundo do header */ transition: color 0.2s ease, transform 0.2s ease; /* Suaviza mudanças de cor e movimentos ao interagir com o link */ padding-bottom: 4px; /* Pequeno espaçamento interno inferior, útil para hover effects ou sublinhados animados */ } /* ========================================================= PSEUDO-ELEMENTO DE DESTAQUE DO LINK (.header-right a::after) --------------------------------------------------------- Cria uma barra visual (underline animado) que aparece quando o usuário interage com os links da seção direita do header. IMPORTANTE: - Depende do link ter `position: relative` (.header-right a) - Alterações em width, height ou transition afetam a animação - A cor do background define a cor da barra de destaque ========================================================= */ .header-right a::after { content: ""; /* Cria o pseudo-elemento vazio que será a barra animada */ position: absolute; /* Permite posicionar a barra em relação ao link */ left: 0; /* Posiciona a barra na extremidade esquerda do link */ bottom: 0; /* Posiciona a barra na base do link */ width: 0; /* Inicialmente invisível; largura será animada ao hover */ height: 2px; /* Altura da barra, definindo sua espessura */ background-color: #aad4ff; /* Cor da barra animada (destaque visual do link) */ transition: width 0.4s ease; /* Suaviza a expansão da barra quando a largura muda (ex: hover) */ } /* ========================================================= EFEITO HOVER NOS LINKS DO HEADER DIREITO (.header-right a:hover) --------------------------------------------------------- Controla a interação visual quando o usuário passa o mouse sobre os links na seção direita do header. Este bloco trabalha em conjunto com: - `.header-right a` (layout e transição) - `.header-right a::after` (barra animada de destaque) IMPORTANTE: - Alterações em color ou transform podem quebrar a animação esperada - Mantém feedback visual consistente e melhora UX ========================================================= */ .header-right a:hover { color: #aad4ff; /* Muda a cor do link para a cor de destaque ao passar o mouse */ transform: translateY(-2px); /* Move o link levemente para cima, criando efeito de “elevação” */ } /* ========================================================= EXPANSÃO DA BARRA DO LINK AO HOVER (.header-right a:hover::after) --------------------------------------------------------- Controla a animação da barra de destaque (pseudo-elemento ::after) quando o usuário passa o mouse sobre o link na seção direita do header. Este bloco trabalha em conjunto com: - `.header-right a::after` (define a barra inicial e transição) - `.header-right a:hover` (altera cor e elevação do link) IMPORTANTE: - Alterar width ou transition pode quebrar o efeito visual - Permite que a barra se expanda suavemente de 0 até 100% ========================================================= */ .header-right a:hover::after { width: 100%; /* Expande a barra de destaque para ocupar toda a largura do link */ } /* ========================================================= FOTO DO HEADER (.header-photo) --------------------------------------------------------- Controla o estilo e animação da imagem de perfil ou ícone dentro do header. Este bloco define: - Tamanho e formato da imagem - Comportamento de exibição inicial (invisível e deslocada) - Animação suave de entrada IMPORTANTE: - Depende de `.header` ou outro contêiner flexível para alinhamento - Alterar width, height ou border-radius altera proporção e formato - Alterar opacity ou transform impacta a animação de entrada ========================================================= */ .header-photo { width: 70px; /* Largura da imagem no header */ height: 70px; /* Altura da imagem no header */ border-radius: 50%; /* Torna a imagem redonda (círculo perfeito) */ object-fit: cover; /* Garante que a imagem preencha a área sem distorção, cortando partes excedentes se necessário */ vertical-align: middle; /* Alinha verticalmente em relação a elementos de texto ou inline */ opacity: 0; /* Inicialmente invisível; usado para animação de entrada */ transform: translateX(40px); /* Posição inicial deslocada horizontalmente (40px à direita) para animação de entrada */ transition: opacity 1.2s ease, transform 1.2s ease; /* Suaviza a animação de aparecimento: - Opacidade - Movimento horizontal */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DA FOTO DO HEADER (.header-photo.visible) --------------------------------------------------------- Controla o estado visível da imagem do header. Quando a classe `.visible` é adicionada via JS ou interação, a imagem aparece suavemente no lugar correto. Este bloco trabalha em conjunto com: - `.header-photo` (define tamanho, formato e estado inicial) - Contêiner flexível do header para alinhamento IMPORTANTE: - Alterar opacity ou transform pode quebrar a animação - Esta classe geralmente é aplicada dinamicamente via JavaScript ========================================================= */ .header-photo.visible { opacity: 1; /* Torna a imagem totalmente visível */ transform: translateX(0); /* Move a imagem para sua posição original, desfazendo o deslocamento inicial */ } /* ========================================================= SEÇÃO DE NOME E DATA NO HEADER (.header-name-date) --------------------------------------------------------- Organiza os elementos de texto relacionados ao usuário ou título com a data associada, geralmente ao lado da foto do header. Este bloco define: - Layout vertical dos elementos - Espaçamento entre linhas para leitura clara IMPORTANTE: - Depende do contêiner pai ter display flex ou alinhamento apropriado - Alterar line-height ou flex-direction impacta legibilidade e layout ========================================================= */ .header-name-date { display: flex; /* Define o contêiner como flexível para organizar itens internamente */ flex-direction: column; /* Empilha os elementos verticalmente (nome acima da data) */ line-height: 1.2; /* Espaçamento vertical entre linhas, garantindo leitura compacta e alinhamento visual */ } /* ========================================================= TEXTO DO HEADER (.header-text) --------------------------------------------------------- Contêiner usado para agrupar elementos de texto dentro do header, como título, subtítulo ou informações adicionais. Este bloco define: - Layout interno dos textos - Organização vertical dos elementos IMPORTANTE: - Depende do contêiner pai para posicionamento correto - Alterar flex-direction muda a forma como os textos são empilhados ========================================================= */ .header-text { display: flex; /* Define o contêiner como flexível, permitindo organizar itens internamente */ flex-direction: column; /* Empilha os elementos verticalmente, criando hierarquia visual clara */ } /* ========================================================= NOME DO USUÁRIO NO HEADER (.header-name) --------------------------------------------------------- Controla o estilo e animação do nome exibido no header, geralmente ao lado da foto do usuário. Este bloco define: - Tipografia (tamanho, peso e cor) - Estado inicial invisível e deslocado horizontalmente - Animação suave de entrada quando ativado IMPORTANTE: - Alterar opacity ou transform impacta a animação - Alterar font-size ou font-weight impacta hierarquia visual ========================================================= */ .header-name { font-size: 30px; /* Tamanho da fonte para destaque do nome */ font-weight: 600; /* Espessura da fonte para destacar o nome visualmente */ color: #F8F8F8; /* Cor do texto garantindo contraste com o fundo do header */ opacity: 0; /* Inicialmente invisível para animação de entrada */ transform: translateX(160px); /* Deslocamento inicial para a direita para efeito de animação */ transition: opacity 1.2s ease, transform 1.2s ease; /* Suaviza a transição de visibilidade e posição quando a classe de ativação é adicionada */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DO NOME DO HEADER (.header-name.visible) --------------------------------------------------------- Controla o estado visível do nome do usuário no header. Quando a classe `.visible` é adicionada via JS ou interação, o nome aparece suavemente na posição correta. Este bloco trabalha em conjunto com: - `.header-name` (define tipografia e estado inicial invisível) IMPORTANTE: - Alterar opacity ou transform pode quebrar a animação - Esta classe geralmente é aplicada dinamicamente via JavaScript ========================================================= */ .header-name.visible { opacity: 1; /* Torna o nome totalmente visível */ transform: translateX(0); /* Move o nome para sua posição original, desfazendo o deslocamento inicial */ } /* ========================================================= LINK DENTRO DO NOME DO HEADER (.header-name a) --------------------------------------------------------- Estiliza qualquer link presente dentro do nome do usuário no header, garantindo que ele herde o estilo do texto pai. Este bloco define: - Cor, decoração e peso da fonte do link - Coerência visual sem sobrescrever a tipografia do pai IMPORTANTE: - Alterar color ou font-weight aqui pode quebrar a consistência visual - Este bloco mantém links discretos sem sublinhado ou cores diferentes ========================================================= */ .header-name a { color: inherit; /* Herda a cor do elemento pai (.header-name) */ text-decoration: none; /* Remove sublinhado padrão de links */ font-weight: inherit; /* Herda a espessura da fonte do elemento pai */ } /* ========================================================= EFEITO HOVER NOS LINKS DO NOME DO HEADER (.header-name a:hover) --------------------------------------------------------- Controla a interação visual quando o usuário passa o mouse sobre links dentro do nome do header. Este bloco garante que: - O link não receba sublinhado inesperado - A cor permaneça coerente com o elemento pai IMPORTANTE: - Alterar color ou text-decoration pode quebrar a coerência visual - Mantém feedback discreto e consistente no hover ========================================================= */ .header-name a:hover { text-decoration: none; /* Garante que o link não fique sublinhado ao passar o mouse */ color: inherit; /* Mantém a cor herdada do elemento pai, evitando mudanças visuais */ } /* ========================================================= ÁREA PRINCIPAL DO SITE (MAIN) --------------------------------------------------------- Define o contêiner principal do conteúdo da página. Este bloco controla: - Expansão do conteúdo para preencher o espaço disponível - Espaçamento interno (padding) em torno do conteúdo - Alinhamento horizontal do texto IMPORTANTE: - Alterar padding pode impactar a distância de header e footer - Alterar flex afeta a distribuição de espaço vertical - text-align center centraliza apenas o conteúdo inline/texto ========================================================= */ main { flex: 1; /* Faz o main expandir para ocupar o espaço restante do contêiner flexível */ padding: 90px 20px 80px; /* Espaçamento interno: - 90px do topo (evita sobreposição com o header) - 20px laterais (margem mínima em telas menores) - 100px inferior (afasta do footer) */ text-align: center; /* Centraliza horizontalmente o conteúdo de texto ou inline dentro do main */ } /* ========================================================= CONTÊINER CENTRALIZADO (.container) --------------------------------------------------------- Define uma área de conteúdo centralizada com largura máxima, garantindo alinhamento consistente em diferentes tamanhos de tela. Este bloco controla: - Limite máximo de largura - Centralização horizontal - Espaçamento interno lateral IMPORTANTE: - Alterar max-width muda o ponto de quebra do layout - Alterar margin ou padding impacta alinhamento e responsividade ========================================================= */ .container { max-width: 1324px; /* Define a largura máxima do contêiner para telas grandes */ margin: 0 auto; /* Centraliza horizontalmente o contêiner usando margin automática */ padding: 0 20px; /* Espaçamento interno lateral para evitar que o conteúdo encoste nas bordas da tela */ } /* ========================================================= TÍTULO PRINCIPAL DAS SEÇÕES (.main-section h1) --------------------------------------------------------- Estiliza os títulos de nível 1 dentro das seções principais da página, garantindo alinhamento, hierarquia visual e layout flexível. Este bloco controla: - Layout flexível dos elementos dentro do título - Tipografia (tamanho, peso, cor) - Espaçamento inferior - Limite máximo de largura - Comportamento responsivo com quebra de linha IMPORTANTE: - Alterar font-size ou font-weight impacta hierarquia visual - Alterar flex-wrap ou gap afeta disposição de ícones ou elementos internos ========================================================= */ .main-section h1 { display: flex; /* Transforma o título em contêiner flexível para alinhar ícones ou elementos internos */ align-items: center; /* Alinha verticalmente o conteúdo do título ao centro */ gap: 10px; /* Espaço entre elementos internos, como ícones e texto */ font-size: 2rem; /* Define o tamanho da fonte para destaque visual do título */ font-weight: 600; /* Espessura da fonte para enfatizar hierarquia do título */ color: #264653; /* Cor do texto do título, garantindo contraste e destaque */ margin-bottom: 0.5rem; /* Espaçamento abaixo do título, separando do conteúdo seguinte */ max-width: 1324px; /* Limita a largura do título para manter consistência em telas grandes */ position: relative; /* Permite posicionamento absoluto de elementos filhos se necessário */ flex-wrap: wrap; /* Permite que elementos internos quebrem linha em telas menores */ } /* ========================================================= ÍCONE DO TÍTULO (.title-icon) --------------------------------------------------------- Estiliza os ícones que acompanham os títulos dentro das seções principais, controlando tamanho, opacidade e animação ao interagir. Este bloco define: - Dimensões do ícone - Nível de visibilidade inicial - Suavidade das transformações e interações visuais IMPORTANTE: - Alterar width ou height impacta proporção e alinhamento - Alterar opacity muda a visibilidade e destaque do ícone - Transition controla animações suaves em hover ou efeitos JS ========================================================= */ .title-icon { width: 32px; /* Largura do ícone */ height: 32px; /* Altura do ícone, mantendo proporção quadrada */ opacity: 0.8; /* Define a transparência inicial, tornando o ícone levemente suavizado */ transition: transform 0.4s ease, opacity 0.4s ease; /* Suaviza alterações de posição e visibilidade ao interagir com o ícone */ } /* ========================================================= EFEITO HOVER NO ÍCONE DO TÍTULO (.title-icon:hover) --------------------------------------------------------- Controla a interação visual quando o usuário passa o mouse sobre ícones que acompanham os títulos das seções principais. Este bloco define: - Aumento leve do tamanho (zoom) do ícone - Intensificação da opacidade para destaque visual IMPORTANTE: - Depende de `.title-icon` para definir tamanho, opacidade e transição - Alterar transform ou opacity pode quebrar o efeito de hover - Melhora o feedback visual e a experiência do usuário ========================================================= */ .title-icon:hover { transform: scale(1.08); /* Aumenta o tamanho do ícone em 8% ao passar o mouse */ opacity: 1; /* Torna o ícone totalmente visível ao interagir */ } /* ========================================================= CONTÊINER DO TÍTULO (.main-section .title-wrapper) --------------------------------------------------------- Agrupa o título e seus elementos associados, como ícones, permitindo posicionamento relativo para efeitos visuais ou pseudo-elementos. Este bloco define: - Comportamento do contêiner como inline-block - Referência para posicionamento absoluto de elementos filhos IMPORTANTE: - Alterar display ou position pode impactar alinhamento e a aplicação de pseudo-elementos - Mantém a estrutura organizada para animações ou ícones ========================================================= */ .main-section .title-wrapper { display: inline-block; /* Permite que o contêiner se comporte como bloco inline, respeitando alinhamento horizontal e ocupando apenas o espaço necessário */ position: relative; /* Cria contexto de referência para posicionamento absoluto de elementos filhos ou pseudo-elementos dentro do contêiner */ } /* ========================================================= PARÁGRAFOS DAS SEÇÕES PRINCIPAIS (.main-section p) --------------------------------------------------------- Estiliza os textos em parágrafos dentro das seções principais, garantindo legibilidade, tamanho adequado e contraste com o fundo. Este bloco define: - Tamanho da fonte para leitura confortável - Cor do texto baseada em variável CSS para consistência IMPORTANTE: - Alterar font-size impacta hierarquia visual e leitura - Alterar color sem usar a variável pode quebrar o tema geral do site ========================================================= */ .main-section p { font-size: 1.05rem; /* Define o tamanho da fonte para parágrafos das seções */ color: var(--text-color); /* Define a cor do texto usando variável CSS para consistência com o tema */ } /* ========================================================= RODAPÉ FIXO DA PÁGINA (.footer) --------------------------------------------------------- Define o estilo e posicionamento do footer fixo na parte inferior da página, garantindo alinhamento centralizado e estética consistente. Este bloco controla: - Posição fixa na tela - Dimensões do footer - Layout interno usando flexbox - Estilo visual (cor, sombra, tipografia) - Espaçamento entre elementos internos IMPORTANTE: - Alterar height, padding ou gap impacta alinhamento do conteúdo - Alterar z-index pode causar sobreposição com outros elementos ========================================================= */ .footer { position: fixed; /* Mantém o footer fixo no final da página, mesmo ao rolar o conteúdo */ bottom: 0; /* Posiciona o footer na parte inferior da tela */ left: 0; /* Alinha o footer à esquerda da tela */ width: 100%; /* Ocupa toda a largura da tela */ height: 80px; /* Altura do footer */ background-color: var(--bg-color-footer); /* Cor de fundo do footer, definida por variável CSS */ color: #F8F8F8; /* Cor do texto do footer */ display: flex; /* Transforma o contêiner em flexível para organizar itens internos */ align-items: center; /* Alinha verticalmente os elementos ao centro */ justify-content: center; /* Centraliza horizontalmente os elementos internos */ gap: 40px; /* Espaço entre elementos internos do footer */ font-size: 0.95rem; /* Tamanho da fonte do conteúdo do footer */ z-index: 1000; /* Garante que o footer fique acima de outros elementos se necessário */ box-shadow: var(--box-shadow-footer); /* Sombra do footer para destaque visual */ } /* ========================================================= LINKS DO FOOTER (.footer a) --------------------------------------------------------- Estiliza os links dentro do footer, geralmente contendo texto acompanhado de ícones, garantindo alinhamento e animação suave. Este bloco define: - Layout flexível para alinhar ícone e texto - Espaçamento entre ícone e texto - Cor e estilo do link - Transição suave de interações visuais - Performance otimizada para transformações IMPORTANTE: - Alterar gap ou align-items impacta alinhamento do conteúdo - Alterar color ou text-decoration muda a aparência do link - will-change indica ao navegador que transform será alterado, melhorando performance da animação ========================================================= */ .footer a { display: flex; /* Transforma o link em contêiner flexível para alinhar ícone e texto */ align-items: center; /* Alinha verticalmente o ícone e o texto ao centro */ gap: 8px; /* Espaço entre o ícone e o texto dentro do link */ text-decoration: none; /* Remove sublinhado padrão do link */ color: #F8F8F8; /* Define a cor do link */ transition: color 0.4s ease, transform 0.4s ease; /* Suaviza mudanças de cor e transformações ao interagir com o link */ will-change: transform; /* Informa ao navegador que a propriedade transform será animada, ajudando na performance */ } /* ========================================================= EFEITO HOVER NOS LINKS DO FOOTER (.footer a:hover) --------------------------------------------------------- Controla a interação visual quando o usuário passa o mouse sobre os links do footer. Este bloco define: - Aumento leve do tamanho do link para destaque - Feedback visual claro sem alterar a cor ou alinhamento IMPORTANTE: - Depende de `.footer a` para alinhamento, cor e transição - Alterar transform pode impactar animações existentes - Melhora a experiência do usuário ao indicar interatividade ========================================================= */ .footer a:hover { transform: scale(1.1); /* Aumenta o link em 10% ao passar o mouse, criando efeito de destaque */ } /* ========================================================= ÍCONES DO FOOTER (.footer-icon) --------------------------------------------------------- Estiliza os ícones presentes dentro dos links do footer, controlando tamanho, visibilidade inicial e animação de entrada. Este bloco define: - Dimensões do ícone - Estado inicial invisível e reduzido - Transição suave para transformações e opacidade IMPORTANTE: - Alterar width ou height impacta proporção e alinhamento - Alterar transform ou opacity muda a animação de entrada - Transition define a suavidade das alterações visuais ========================================================= */ .footer-icon { width: 24px; /* Largura do ícone */ height: 24px; /* Altura do ícone, mantendo proporção quadrada */ transform: scale(0); /* Inicialmente reduzido a 0, usado para animação de entrada */ opacity: 0; /* Inicialmente invisível */ transition: transform 0.5s ease, opacity 0.5s ease; /* Suaviza alterações de tamanho e visibilidade ao exibir o ícone */ } /* ========================================================= SEÇÃO ESQUERDA DO FOOTER (.footer-left) --------------------------------------------------------- Controla o layout e estilo do conteúdo localizado à esquerda do footer, geralmente usado para informações de contato, direitos autorais ou textos adicionais. Este bloco define: - Posicionamento absoluto em relação ao footer - Layout flexível vertical - Alinhamento e espaçamento dos elementos internos - Tipografia e cor do texto IMPORTANTE: - Alterar left ou position impacta o alinhamento horizontal - Alterar flex-direction ou align-items muda a disposição dos elementos - Alterar font-size ou color altera a legibilidade e destaque ========================================================= */ .footer-left { position: absolute; /* Permite posicionamento preciso do contêiner dentro do footer */ left: 50px; /* Distância da borda esquerda do footer */ display: flex; /* Transforma o contêiner em flexível para organizar itens internamente */ flex-direction: column; /* Empilha os elementos verticalmente */ align-items: flex-start; /* Alinha os elementos à esquerda do contêiner */ gap: 2px; /* Espaçamento entre elementos internos, garantindo separação mínima */ font-size: 14px; /* Define tamanho da fonte do conteúdo da seção esquerda */ color: #F8F8F8; /* Cor do texto da seção esquerda, garantindo contraste com o fundo */ } /* ========================================================= PARÁGRAFOS NA SEÇÃO ESQUERDA DO FOOTER (.footer-left p) --------------------------------------------------------- Estiliza os parágrafos dentro da seção esquerda do footer, controlando espaçamento, alinhamento inicial e animação de entrada. Este bloco define: - Margens e espaçamento entre linhas - Estado inicial invisível e deslocado horizontalmente - Transição suave para animação de entrada IMPORTANTE: - Alterar transform ou opacity impacta animação de entrada - Alterar margin ou line-height afeta legibilidade e layout ========================================================= */ .footer-left p { margin: 0; /* Remove margens padrão para evitar espaçamento indesejado */ line-height: 1.4; /* Define altura das linhas para leitura confortável */ transform: translateX(64px); /* Deslocamento horizontal inicial usado para animação de entrada */ opacity: 0; /* Inicialmente invisível para efeito de fade-in */ transition: transform 0.8s ease, opacity 0.8s ease; /* Suaviza a transição de posição e visibilidade ao animar */ } /* ========================================================= NOTA DE PRIVACIDADE (.privacy-note) --------------------------------------------------------- Estiliza textos de aviso ou notas de privacidade, geralmente exibidos no footer ou seções informativas. Este bloco define: - Tamanho da fonte para legibilidade discreta - Cor do texto coerente com o tema do footer - Estilo itálico para diferenciar do conteúdo principal IMPORTANTE: - Alterar font-size impacta legibilidade em dispositivos menores - Alterar color pode quebrar contraste e acessibilidade - font-style italic diferencia visualmente a nota de outros textos ========================================================= */ .privacy-note { font-size: 14px; /* Tamanho da fonte para nota de privacidade, pequeno mas legível */ color: #F8F8F8; /* Cor do texto da nota, mantendo contraste com o fundo */ font-style: italic; /* Aplica itálico para diferenciar visualmente do conteúdo normal */ } /* ========================================================= TEXTO PRINCIPAL DO FOOTER (.footer-main-text) --------------------------------------------------------- Estiliza os textos principais dentro do footer, garantindo legibilidade e contraste com o fundo. Este bloco define: - Tamanho da fonte adequado para destaque sem exagero - Cor do texto consistente com o tema do footer IMPORTANTE: - Alterar font-size impacta hierarquia visual e legibilidade - Alterar color pode quebrar contraste com o fundo ========================================================= */ .footer-main-text { font-size: 16px; /* Define tamanho da fonte para o conteúdo principal do footer */ color: #F8F8F8; /* Cor do texto garantindo contraste com o fundo */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DOS PARÁGRAFOS DA SEÇÃO ESQUERDA DO FOOTER (.footer-left p.show) --------------------------------------------------------- Controla a animação de entrada para os parágrafos da seção esquerda do footer. Quando a classe `.show` é adicionada via JavaScript ou interação, os parágrafos aparecem suavemente no lugar correto. Este bloco trabalha em conjunto com: - `.footer-left p` (define estado inicial invisível e deslocado) IMPORTANTE: - Alterar transform ou opacity impacta a animação - Esta classe é aplicada dinamicamente para criar efeito de fade-in ========================================================= */ .footer-left p.show { transform: translateX(0); /* Move o parágrafo para a posição original, desfazendo o deslocamento inicial */ opacity: 1; /* Torna o parágrafo totalmente visível */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DOS ÍCONES DO FOOTER (.footer-icon.show) --------------------------------------------------------- Controla a animação de entrada para os ícones dentro dos links do footer. Quando a classe `.show` é adicionada via JavaScript ou interação, os ícones aparecem suavemente. Este bloco trabalha em conjunto com: - `.footer-icon` (define estado inicial invisível e reduzido) IMPORTANTE: - Alterar transform ou opacity impacta a animação - Esta classe é aplicada dinamicamente para criar efeito de fade-in e scale ========================================================= */ .footer-icon.show { transform: scale(1); /* Redimensiona o ícone para seu tamanho original, desfazendo a redução inicial */ opacity: 1; /* Torna o ícone totalmente visível */ } /* ========================================================= SEÇÃO DE INTRODUÇÃO (.intro-section) --------------------------------------------------------- Define o layout da seção de introdução do site, geralmente usada para apresentar o conteúdo inicial ou banner. Este bloco controla: - Layout flexível para centralizar conteúdo - Espaçamento interno (padding) para respiro visual IMPORTANTE: - Alterar justify-content muda o alinhamento horizontal - Alterar padding impacta distância do conteúdo em relação às bordas ========================================================= */ .intro-section { display: flex; /* Transforma a seção em contêiner flexível */ justify-content: center; /* Centraliza horizontalmente todo o conteúdo interno */ padding: 60px 20px; /* Espaçamento interno: - 60px no topo e inferior - 20px nas laterais */ } /* ========================================================= CONTÊINER INTERNO DA SEÇÃO DE INTRODUÇÃO (.intro-container) --------------------------------------------------------- Agrupa os elementos internos da seção de introdução (como texto e imagens), garantindo alinhamento, espaçamento e largura máxima para consistência visual. Este bloco define: - Layout flexível e alinhamento vertical - Espaçamento entre elementos internos - Limite máximo de largura e centralização na tela - Ocupação total da largura disponível IMPORTANTE: - Alterar gap impacta o espaçamento entre elementos internos - Alterar max-width ou width impacta responsividade - Alterar align-items muda o alinhamento vertical ========================================================= */ .intro-container { display: flex; /* Transforma o contêiner em flexível para organizar os elementos internos */ align-items: center; /* Alinha verticalmente os elementos ao centro do contêiner */ gap: 40px; /* Espaçamento horizontal entre elementos internos */ max-width: 1324px; /* Define largura máxima para manter layout consistente em telas grandes */ width: 100%; /* Faz o contêiner ocupar toda a largura disponível */ margin: 0 auto; /* Centraliza horizontalmente o contêiner na tela */ } /* ========================================================= FOTO DE INTRODUÇÃO (.intro-photo) --------------------------------------------------------- Estiliza o contêiner que envolve a foto da seção de introdução, controlando tamanho, layout interno e espaçamento. Este bloco define: - Flex-basis e comportamento do contêiner no layout flex - Layout interno flexível vertical - Margem e alinhamento centralizado - Espaçamento entre elementos internos IMPORTANTE: - Alterar flex impacta tamanho e comportamento responsivo - Alterar margin ou gap altera a separação visual - align-items: center mantém elementos centralizados verticalmente ========================================================= */ .intro-photo { flex: 0 0 308px; /* Define tamanho fixo do contêiner dentro do layout flexível: - flex-grow: 0 (não cresce) - flex-shrink: 0 (não encolhe) - flex-basis: 308px (largura inicial) */ display: flex; /* Ativa layout flex interno para organizar elementos dentro do contêiner */ flex-direction: column; /* Empilha elementos verticalmente */ margin: 16px; /* Espaçamento externo ao redor do contêiner */ align-items: center; /* Centraliza horizontalmente os elementos internos */ gap: 16px; /* Espaço entre elementos internos do contêiner */ } /* ========================================================= IMAGEM DA FOTO DE INTRODUÇÃO (.intro-photo img) --------------------------------------------------------- Estiliza a imagem dentro do contêiner `.intro-photo`, garantindo proporção, formato circular e destaque visual com sombra. Este bloco define: - Ocupação total da largura do contêiner - Proporção quadrada da imagem - Bordas arredondadas em círculo - Como a imagem se ajusta ao contêiner - Sombra para profundidade visual IMPORTANTE: - Alterar width impacta tamanho da imagem - Alterar aspect-ratio muda proporção, podendo distorcer a imagem - border-radius 50% cria formato circular - object-fit: cover garante que a imagem preencha o círculo - box-shadow adiciona destaque visual ========================================================= */ .intro-photo img { width: 100%; /* Faz a imagem ocupar toda a largura do contêiner pai */ aspect-ratio: 1 / 1; /* Garante proporção quadrada (altura = largura) */ border-radius: 50%; /* Transforma a imagem em círculo */ object-fit: cover; /* Corta ou ajusta a imagem para preencher o contêiner sem distorção */ box-shadow: var(--box-shadow-side-menu); /* Aplica sombra definida na variável CSS para destaque visual */ } /* ========================================================= BOTÃO DE PROJETOS (.btn-projetos) --------------------------------------------------------- Estiliza os botões usados na seção de projetos, controlando aparência, dimensões, espaçamento e efeitos visuais. Este bloco define: - Cor de fundo e cor do texto - Padding interno e largura do botão - Bordas arredondadas e sombra para destaque - Transições suaves para hover ou interações - Margens externas para separação de outros elementos IMPORTANTE: - Alterar background-color ou color muda aparência principal - Alterar border-radius ou box-shadow muda estética e profundidade - O correto é 'margin-bottom', atualmente está escrito 'margin-botton' e precisa corrigir ========================================================= */ .btn-projetos { background-color: var(--bg-color-button); /* Cor de fundo do botão, definida por variável CSS */ color: #F8F8F8; /* Cor do texto do botão */ padding: 10px 20px; /* Espaçamento interno vertical (10px) e horizontal (20px) */ width: 160px; /* Largura fixa do botão */ text-decoration: none; /* Remove sublinhado padrão de links se usados como */ font-weight: 400; /* Espessura da fonte do texto do botão */ border-radius: 25px; /* Bordas arredondadas para formato de pílula */ box-shadow: var(--box-shadow-button); /* Sombra para destaque visual do botão */ transition: background-color 0.4s ease, transform 0.4s ease; /* Suaviza mudanças de cor e transformações ao interagir */ margin-top: 16px; /* Espaço acima do botão */ margin-botton: 16px; /* Atenção: escrito incorretamente, deve ser 'margin-bottom' */ } /* ========================================================= EFEITO HOVER DO BOTÃO DE PROJETOS (.btn-projetos:hover) --------------------------------------------------------- Controla a interação visual quando o usuário passa o mouse sobre os botões de projetos. Este bloco define: - Mudança da cor de fundo para feedback visual - Aumento leve do botão para indicar interatividade IMPORTANTE: - Depende de `.btn-projetos` para largura, padding e bordas - Alterar transform ou background-color impacta animação e estética - Garante melhor experiência do usuário ao indicar que o botão é clicável ========================================================= */ .btn-projetos:hover { background-color: var(--bg-color-button-hover); /* Altera a cor de fundo ao passar o mouse */ transform: scale(1.06); /* Aumenta o botão em 6% para criar efeito de destaque */ } /* ========================================================= TEXTO DA SEÇÃO DE INTRODUÇÃO (.intro-text) --------------------------------------------------------- Estiliza o bloco de texto da seção de introdução, controlando layout, legibilidade e cor. Este bloco define: - Comportamento flexível para ocupar espaço disponível - Alinhamento justificado do texto - Espaçamento interno e altura das linhas - Cor e tamanho da fonte para leitura confortável IMPORTANTE: - Alterar flex impacta a ocupação do espaço dentro do contêiner - Alterar text-align muda a forma como o texto é exibido - Alterar line-height ou font-size impacta legibilidade ========================================================= */ .intro-text { flex: 1; /* Faz o bloco de texto ocupar o espaço restante dentro do contêiner flex */ text-align: justify; /* Alinha o texto horizontalmente de forma justificada */ margin-top: 12px; /* Espaçamento acima do texto para separar de outros elementos */ line-height: 1.7; /* Altura das linhas para melhor legibilidade */ color: var(--intro-text); /* Define a cor do texto usando variável CSS para consistência visual */ font-size: 1rem; /* Tamanho da fonte do texto da introdução */ } /* ========================================================= PARÁGRAFOS DENTRO DO TEXTO DE INTRODUÇÃO (.intro-text p) --------------------------------------------------------- Estiliza os parágrafos individuais dentro do bloco `.intro-text`, controlando espaçamento e legibilidade. Este bloco define: - Espaçamento inferior entre parágrafos - Altura das linhas para leitura confortável e fluida IMPORTANTE: - Alterar margin-bottom muda a distância entre parágrafos - Alterar line-height impacta legibilidade e densidade visual ========================================================= */ .intro-text p { margin-bottom: 1.2em; /* Espaço inferior de 1.2 vezes o tamanho da fonte para separar parágrafos */ line-height: 1.8; /* Altura das linhas aumentada para melhorar a leitura e fluidez do texto */ } /* ========================================================= TEXTO EM NEGRITO DENTRO DE INTRO-TEXT (.intro-text strong) --------------------------------------------------------- Estiliza os elementos `` dentro do bloco de texto da seção de introdução, garantindo consistência de cor com o restante do texto. Este bloco define: - Cor do texto em negrito para manter uniformidade visual IMPORTANTE: - Alterar color impacta destaque de partes importantes do texto - Mantém a hierarquia de leitura e contraste adequado ========================================================= */ .intro-text strong { color: var(--intro-text); /* Mantém a cor do texto em negrito consistente com o restante do texto */ } /* ========================================================= LISTA DE INTRODUÇÃO (.intro-list) --------------------------------------------------------- Estiliza listas dentro da seção de introdução, controlando espaçamento, estilo de marcador, cor e tamanho do texto. Este bloco define: - Margem superior para separar a lista de elementos anteriores - Espaçamento interno à esquerda para alinhar marcadores - Tipo de marcador da lista - Cor e tamanho do texto da lista IMPORTANTE: - Alterar margin-top impacta distância da lista em relação a outros elementos - Alterar padding-left muda o recuo dos marcadores - Alterar list-style-type muda o tipo de marcador (círculo, quadrado, número) - Alterar color ou font-size impacta legibilidade e contraste ========================================================= */ .intro-list { margin-top: 16px; /* Espaço acima da lista para separar de outros elementos */ padding-left: 20px; /* Recuo interno para posicionar os marcadores corretamente */ list-style-type: disc; /* Define o marcador da lista como círculo preenchido */ color: var(--curriculo-list); /* Cor do texto da lista, definida pela variável CSS */ font-size: 1.06rem; /* Tamanho da fonte dos itens da lista */ } /* ========================================================= ITENS DA LISTA DE INTRODUÇÃO (.intro-list li) --------------------------------------------------------- Estiliza cada item `
  • ` dentro da lista `.intro-list`, controlando espaçamento, legibilidade e cor do texto. Este bloco define: - Espaçamento inferior entre os itens da lista - Altura das linhas para melhor leitura - Cor consistente com o restante da lista IMPORTANTE: - Alterar margin-bottom muda a distância entre itens - Alterar line-height impacta legibilidade e densidade visual - Alterar color deve manter contraste adequado com o fundo ========================================================= */ .intro-list li { margin-bottom: 16px; /* Espaço inferior entre cada item da lista */ line-height: 1.7; /* Altura das linhas para facilitar leitura */ color: var(--curriculo-list); /* Cor do texto do item da lista, consistente com a variável CSS */ } /* ========================================================= MARCADORES DOS ITENS DA LISTA DE INTRODUÇÃO (.intro-list li::marker) --------------------------------------------------------- Estiliza os marcadores (bolinhas) de cada item da lista `.intro-list`, garantindo consistência de cor com o texto. Este bloco define: - Cor dos marcadores para combinar com os itens da lista IMPORTANTE: - Alterar color impacta contraste e destaque do marcador - Mantém uniformidade visual da lista com o tema do site ========================================================= */ .intro-list li::marker { color: var(--curriculo-list); /* Define a cor do marcador da lista usando a variável CSS */ } /* ========================================================= ITENS COM EFEITO FADE-IN (.fade-item) --------------------------------------------------------- Define o estado inicial de elementos que serão exibidos com efeito de transição suave (fade-in + slide vertical). Este bloco define: - Opacidade inicial invisível - Deslocamento vertical inicial para efeito de movimento - Transição suave para exibição de elementos IMPORTANTE: - Alterar opacity ou transform impacta a animação - transition define duração e suavidade do efeito - Esta classe deve ser combinada com uma classe ativa (ex: .show) para animar ========================================================= */ .fade-item { opacity: 0; /* Inicialmente invisível */ transform: translateY(30px); /* Deslocamento vertical inicial (30px para baixo) */ transition: opacity 0.8s ease, transform 0.8s ease; /* Suaviza alterações de opacidade e posição ao aparecer */ } /* ========================================================= ANIMAÇÃO DE EXIBIÇÃO DOS ITENS COM FADE-IN (.fade-item.visible) --------------------------------------------------------- Controla a transição de elementos com a classe `.fade-item`. Quando a classe `.visible` é adicionada via JavaScript ou interação, os elementos aparecem suavemente, desfazendo o deslocamento inicial. Este bloco trabalha em conjunto com: - `.fade-item` (define estado inicial invisível e deslocado) IMPORTANTE: - Alterar transform ou opacity impacta diretamente a animação - Esta classe deve ser aplicada dinamicamente para criar efeito de fade-in e slide ========================================================= */ .fade-item.visible { opacity: 1; /* Torna o elemento totalmente visível */ transform: translateY(0); /* Move o elemento para sua posição original, desfazendo o deslocamento inicial */ } /* ========================================================= SEÇÃO COM CABEÇALHO FIXO (.fixed-header-section) --------------------------------------------------------- Estiliza uma seção que permanece visível no topo ao rolar a página, mas com comportamento "sticky" abaixo de um header fixo. Este bloco define: - Posição fixa relativa ao scroll - Distância do topo da página - Cor de fundo inicial transparente - Ordem de empilhamento para sobreposição de elementos - Espaçamento interno inferior - Layout flexível interno IMPORTANTE: - Alterar top muda a posição inicial do sticky - Alterar z-index impacta sobreposição com outros elementos - Alterar display flex permite alinhar itens internamente ========================================================= */ .fixed-header-section { position: sticky; /* Mantém a seção fixa ao rolar a página, respeitando o offset definido */ top: 80px; /* Distância do topo da página para iniciar comportamento sticky */ background-color: transparent; /* Cor de fundo inicial transparente */ z-index: 50; /* Define a camada de empilhamento para sobreposição correta */ padding-bottom: 10px; /* Espaço interno inferior para separar conteúdo de bordas ou elementos abaixo */ display: flex; /* Ativa layout flex interno para organizar elementos horizontalmente */ } /* ========================================================= ESTADO ATIVO DA SEÇÃO FIXA DO CABEÇALHO (.fixed-header-section.is-active) --------------------------------------------------------- Controla a exibição da seção sticky quando ela se torna ativa, geralmente via JavaScript ao rolar ou interagir com a página. Este bloco trabalha em conjunto com: - `.fixed-header-section` (define posição, layout e comportamento sticky) IMPORTANTE: - Alterar opacity ou transform impacta animação de entrada - pointer-events: auto garante que elementos internos possam ser clicados ========================================================= */ .fixed-header-section.is-active { opacity: 1; /* Torna a seção totalmente visível */ transform: translateY(0); /* Move a seção para sua posição original, desfazendo qualquer deslocamento inicial */ pointer-events: auto; /* Permite interações do usuário com elementos dentro da seção */ } /* ========================================================= CONTÊINER DA SEÇÃO FIXA DO CABEÇALHO (.fixed-header-container) --------------------------------------------------------- Define o contêiner interno da seção sticky, garantindo limite máximo de largura e ocupação total da área disponível. Este bloco define: - Largura máxima para manter consistência visual em telas grandes - Largura total do contêiner para responsividade IMPORTANTE: - Alterar max-width impacta layout em telas grandes - Alterar width impacta comportamento responsivo ========================================================= */ .fixed-header-container { max-width: 1324px; /* Limita a largura máxima do contêiner para manter consistência visual */ width: 100%; /* Faz o contêiner ocupar toda a largura disponível do elemento pai */ } /* ========================================================= TÍTULO H1 DA SEÇÃO FIXA DO CABEÇALHO (.fixed-header-section h1) --------------------------------------------------------- Estiliza o título principal dentro da seção sticky, controlando layout, alinhamento, espaçamento e tipografia. Este bloco define: - Layout flexível para organizar ícones ou elementos internos - Alinhamento vertical dos elementos - Espaçamento entre elementos internos - Tamanho, peso e cor da fonte - Remoção de margens padrão do h1 IMPORTANTE: - Alterar display ou align-items impacta alinhamento dos elementos internos - Alterar gap muda o espaço entre ícones/textos internos - Alterar font-size ou font-weight impacta hierarquia visual - Alterar color deve manter contraste com o fundo ========================================================= */ .fixed-header-section h1 { display: flex; /* Define layout flexível para organizar elementos internos (ex: ícones + texto) */ align-items: center; /* Alinha verticalmente os elementos ao centro */ gap: 10px; /* Espaçamento horizontal de 10px entre elementos internos */ font-size: 2rem; /* Define tamanho do texto do título */ font-weight: 600; /* Define peso da fonte para maior destaque */ color: var(--fixed-header-section); /* Define cor do título usando variável CSS para consistência visual */ margin: 0; /* Remove margem padrão do h1 para alinhamento preciso */ } /* ========================================================= LINHA DECORATIVA NA SEÇÃO FIXA DO CABEÇALHO (.fixed-header-section .decorative-line) --------------------------------------------------------- Estiliza a linha decorativa usada na seção sticky, geralmente abaixo do título, para dar destaque visual e separar conteúdos. Este bloco define: - Largura e altura da linha - Cor da linha consistente com a seção - Bordas arredondadas para suavidade visual - Margem superior para separar do título e alinhamento correto IMPORTANTE: - Alterar width ou height muda a proporção visual da linha - Alterar background-color impacta contraste e visibilidade - border-radius suaviza as extremidades da linha - margin define separação do título ou elementos acima ========================================================= */ .fixed-header-section .decorative-line { width: 400px; /* Largura da linha decorativa */ height: 2px; /* Espessura da linha */ background-color: var(--fixed-header-section); /* Cor da linha, consistente com a seção sticky */ border-radius: 2px; /* Bordas arredondadas para suavizar extremidades */ margin: 8px 0 0 0; /* Margem superior de 8px; margens direita, inferior e esquerda zeradas */ } /* ========================================================= MENU LATERAL (.side-menu) --------------------------------------------------------- Estiliza o contêiner do menu lateral, controlando tamanho, aparência, layout interno e comportamento sticky. Este bloco define: - Dimensões fixas do menu - Cor de fundo e bordas arredondadas - Sombra para destaque visual - Espaçamento interno (padding) e controle de box-sizing - Comportamento sticky para manter visível ao rolar a página - Margem externa para separar do conteúdo adjacente - Layout flex vertical para organizar itens internos - Alinhamento e espaçamento entre elementos internos IMPORTANTE: - Alterar width ou height impacta ocupação visual - Alterar border-radius ou box-shadow muda estética - Alterar padding ou gap altera espaçamento interno - position: sticky mantém o menu visível durante o scroll ========================================================= */ .side-menu { width: 308px; /* Largura fixa do menu lateral */ height: 620px; /* Altura fixa do menu lateral */ background-color: var(--bg-color-header); /* Cor de fundo definida por variável CSS */ border-radius: 12px; /* Bordas arredondadas para suavizar o contêiner */ box-shadow: var(--box-shadow-side-menu); /* Sombra para criar profundidade visual */ padding: 12px; /* Espaçamento interno do contêiner */ box-sizing: border-box; /* Inclui padding e border dentro do cálculo de largura/altura */ position: sticky; /* Mantém o menu fixo ao rolar a página */ margin: 16px; /* Espaço externo para separar o menu de outros elementos */ display: flex; /* Ativa layout flexível interno */ flex-direction: column; /* Organiza os elementos verticalmente */ justify-content: flex-start; /* Alinha os elementos no topo do contêiner */ align-self: flex-start; /* Alinha o contêiner no início do eixo flex do pai */ gap: 4px; /* Espaçamento entre elementos internos do menu */ } /* ========================================================= LISTA DO MENU LATERAL (.side-menu ul) --------------------------------------------------------- Estiliza a lista interna do menu lateral, controlando espaçamento, layout e ocupação do contêiner. Este bloco define: - Remove marcadores padrão da lista - Remove padding e margem padrão do navegador - Layout flexível para organizar itens verticalmente - Ocupação total da altura do contêiner pai IMPORTANTE: - Alterar display ou flex-direction muda a organização dos itens - Alterar height impacta o comportamento de scroll ou preenchimento ========================================================= */ .side-menu ul { list-style: none; /* Remove os marcadores padrão da lista */ padding: 0; /* Remove o espaçamento interno padrão da lista */ margin: 0; /* Remove a margem externa padrão da lista */ display: flex; /* Ativa layout flex para organizar os itens da lista */ flex-direction: column; /* Empilha os itens verticalmente */ height: 100%; /* Faz a lista ocupar toda a altura do contêiner pai */ } /* ========================================================= ITENS DA LISTA DO MENU LATERAL (.side-menu li) --------------------------------------------------------- Estiliza cada item `
  • ` dentro da lista do menu lateral, controlando margens e espaçamento. Este bloco define: - Remove margens padrão aplicadas pelo navegador aos itens da lista IMPORTANTE: - Alterar margin impacta espaçamento entre itens do menu - Geralmente combinado com padding ou gap do contêiner pai ========================================================= */ .side-menu li { margin: 0; /* Remove qualquer margem padrão do item da lista */ } /* ========================================================= LINKS DO MENU LATERAL (.side-menu a) --------------------------------------------------------- Estiliza os links internos do menu lateral, controlando layout, dimensões, aparência e interatividade. Este bloco define: - Layout flexível para alinhar ícones e texto - Dimensões fixas de altura e largura para consistência - Padding interno para espaçamento confortável - Bordas arredondadas para estética suave - Remoção de sublinhado padrão - Cor e peso da fonte para legibilidade - Transições suaves ao interagir - Alinhamento dos elementos internos - Espaçamento inferior entre links IMPORTANTE: - Alterar display, align-items ou justify-content muda alinhamento do conteúdo - Alterar height ou width impacta tamanho visual do botão - Alterar padding, margin ou border-radius impacta layout e estética - transition: all suaviza qualquer alteração visual de cor, fundo ou tamanho ========================================================= */ .side-menu a { display: flex; /* Layout flexível para alinhar ícones e texto horizontalmente */ align-items: center; /* Alinha verticalmente o conteúdo interno ao centro */ height: 48px; /* Altura fixa do link para uniformidade visual */ width: 276px; /* Largura fixa do link, respeitando padding e border-radius */ padding: 0 12px; /* Espaçamento interno horizontal; vertical zero */ border-radius: 8px; /* Bordas arredondadas para estética suave */ text-decoration: none; /* Remove sublinhado padrão de links */ color: #F8F8F8; /* Cor do texto do link */ font-weight: 500; /* Peso da fonte para destaque moderado */ transition: all 0.4s ease; /* Suaviza alterações de cor, fundo e transformações ao interagir */ justify-content: flex-start; /* Alinha o conteúdo do link ao início do eixo horizontal */ margin-bottom: 4px; /* Espaço inferior entre links */ } /* ========================================================= EFEITO HOVER NOS LINKS DO MENU LATERAL (.side-menu a:hover) --------------------------------------------------------- Define o comportamento visual quando o usuário passa o mouse sobre os links do menu lateral, criando feedback de interação. Este bloco define: - Mudança de cor de fundo - Mudança de cor do texto - Pequeno deslocamento horizontal - Sombra para efeito de destaque IMPORTANTE: - Alterar background-color ou color impacta contraste e leitura - Alterar transform ajusta deslocamento do link ao passar o mouse - Alterar box-shadow muda percepção de profundidade - Geralmente usado em conjunto com transition definido em `.side-menu a` ========================================================= */ .side-menu a:hover { background-color: var(--bg-color-page); /* Altera a cor de fundo do link quando em hover */ color: var(--intro-text); /* Altera a cor do texto para indicar destaque */ transform: translateX(4px); /* Move o link levemente para a direita, criando efeito de movimento */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Adiciona sombra para criar efeito de profundidade e destaque */ } /* ========================================================= LINK ATIVO DO MENU LATERAL (.side-menu a.active) --------------------------------------------------------- Define o estilo visual do link que representa a página ou seção atualmente ativa, diferenciando-o dos demais links do menu. Este bloco define: - Cor de fundo e texto igual ao hover para indicar destaque - Cursor diferente para indicar que não é clicável - Efeito de sombra sutil no texto - Remove transform para que não haja deslocamento IMPORTANTE: - Alterar background-color ou color impacta contraste e destaque - cursor: not-allowed indica que o link está inativo/clicável - text-shadow cria leve destaque e profundidade no texto - transform: none mantém o link alinhado, sem efeito de movimento ========================================================= */ .side-menu a.active { background-color: var(--bg-color-page); /* Mantém fundo destacado igual ao hover */ color: var(--intro-text); /* Mantém cor do texto consistente com hover e destaque */ cursor: not-allowed; /* Indica que o link não é clicável */ text-shadow: 0 0 8px rgba(248, 248, 248, 0.1); /* Adiciona sombra sutil ao texto para destaque leve */ transform: none; /* Remove qualquer deslocamento aplicado em hover ou animações */ } /* ========================================================= LINK ATIVO DO MENU LATERAL AO PASSAR O MOUSE (.side-menu a.active:hover) --------------------------------------------------------- Define o comportamento visual quando o usuário passa o mouse sobre um link que já está ativo. Mantém o destaque do link ativo sem permitir interações de hover que alterem sua posição. Este bloco define: - Mantém fundo e cor do texto consistentes com o link ativo - Ajusta a sombra do texto para leve efeito visual - Remove transform para que o link não se mova IMPORTANTE: - Alterar background-color ou color impacta contraste e destaque - text-shadow cria efeito sutil de profundidade visual - transform: none garante que o link ativo permaneça fixo ========================================================= */ .side-menu a.active:hover { background-color: var(--bg-color-page); /* Mantém fundo destacado igual ao estado ativo */ color: var(--intro-text); /* Mantém cor do texto consistente com o estado ativo */ text-shadow: 0 0 6px rgba(255, 255, 255, 0.2); /* Leve sombra no texto para efeito visual sutil */ transform: none; /* Remove qualquer deslocamento ou animação de hover */ } /* ========================================================= CONTÊINER DO CURRÍCULO (.curriculo-container) --------------------------------------------------------- Estiliza o contêiner principal da seção de currículo, organizando o layout horizontal, espaçamento e dimensões para o conteúdo interno. Este bloco define: - Layout flexível em linha (row) para organizar colunas internas - Alinhamento vertical dos itens no topo - Espaçamento horizontal entre colunas - Limite máximo de largura e largura total responsiva - Centralização horizontal com margin auto - Altura calculada para preencher tela menos altura do header/footer - Controle de overflow ocultando conteúdo que excede o contêiner - Posição relativa para permitir posicionamento absoluto de elementos internos - Padding superior inicial (zero neste caso) IMPORTANTE: - Alterar flex-direction muda orientação das colunas - gap controla espaçamento entre colunas - height: calc(...) ajusta altura dinâmica com base em outros elementos da página - overflow: hidden evita que conteúdos internos ultrapassem os limites visuais ========================================================= */ .curriculo-container { display: flex; /* Ativa layout flexível para organizar colunas ou blocos internos horizontalmente */ flex-direction: row; /* Mantém itens organizados em linha (horizontal) */ align-items: flex-start; /* Alinha os itens no topo do contêiner */ gap: 24px; /* Espaçamento horizontal entre colunas internas */ max-width: 1324px; /* Limita largura máxima para manter consistência em telas grandes */ width: 100%; /* Faz o contêiner ocupar toda a largura disponível do elemento pai */ margin: 0 auto; /* Centraliza o contêiner horizontalmente */ height: calc(100vh - 256px); /* Altura calculada para preencher a tela menos 266px (header + footer) */ overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do contêiner */ position: relative; /* Permite posicionamento absoluto de elementos internos */ padding-top: 0; /* Remove padding superior inicial */ } /* ========================================================= BLOCO DE TEXTO DO CURRÍCULO (.curriculo-text) --------------------------------------------------------- Estiliza o contêiner de texto principal dentro da seção de currículo, controlando layout, rolagem, tipografia e comportamento visual do conteúdo. Este bloco define: - Flexibilidade para ocupar espaço disponível dentro do contêiner pai - Alinhamento do texto justificado - Altura da linha e cor do texto - Tamanho da fonte - Rolagem vertical automática para conteúdos maiores que o contêiner - Ocupação total da altura do contêiner - Box-sizing para incluir padding dentro do cálculo de dimensões - Rolagem suave para interações programáticas - Oculta barras de rolagem nativas em diferentes navegadores - Espaçamento interno superior IMPORTANTE: - Alterar flex impacta como o elemento cresce ou encolhe dentro do contêiner - overflow-y: auto permite rolar conteúdo sem expandir o contêiner - scrollbar-width e -ms-overflow-style ocultam barras de rolagem nativas - scroll-behavior: smooth suaviza navegação via âncoras ou JS ========================================================= */ .curriculo-text { flex: 1; /* Ocupa espaço disponível no contêiner pai */ text-align: justify; /* Justifica o texto, criando alinhamento uniforme nas extremidades */ line-height: 1.8; /* Altura da linha para melhor legibilidade */ color: var(--curriculo-text); /* Cor do texto definida por variável CSS para consistência visual */ font-size: 16px; /* Tamanho da fonte */ overflow-y: auto; /* Permite rolagem vertical caso o conteúdo ultrapasse a altura do contêiner */ height: 100%; /* Faz o bloco de texto ocupar toda a altura do contêiner pai */ box-sizing: border-box; /* Inclui padding e border no cálculo de altura e largura */ scroll-behavior: smooth; /* Suaviza a rolagem programática ou via âncoras */ scrollbar-width: none; /* Oculta barra de rolagem no Firefox */ -ms-overflow-style: none; /* Oculta barra de rolagem no Internet Explorer e Edge Legacy */ padding-top: 8px; /* Espaçamento interno superior para separar do topo */ } /* ========================================================= TEXTO NEGRITO DENTRO DO BLOCO DE CURRÍCULO (.curriculo-text strong) --------------------------------------------------------- Estiliza especificamente os elementos `` dentro do bloco de texto do currículo, garantindo destaque visual sem afetar o restante do texto. Este bloco define: - Cor diferenciada para textos importantes ou destacados - Mantém a semântica do HTML, usando para ênfase IMPORTANTE: - Alterar color muda o destaque visual do texto - Pode ser combinado com font-weight para maior contraste ========================================================= */ .curriculo-text strong { color: var(--curriculo-text-strong); /* Define cor especial para textos em negrito dentro do currículo */ } /* ========================================================= OCULTAÇÃO DA BARRA DE ROLAGEM NO WEBKIT (.curriculo-text::-webkit-scrollbar) --------------------------------------------------------- Estiliza a barra de rolagem do bloco de texto do currículo especificamente para navegadores baseados em WebKit (Chrome, Safari, Edge Chromium), escondendo-a para aparência mais limpa. Este bloco define: - display: none para ocultar a barra de rolagem visível - Funciona em conjunto com scrollbar-width e -ms-overflow-style para navegadores Firefox e IE/Edge Legacy IMPORTANTE: - Alterar esta propriedade permite mostrar ou estilizar a barra - Ocultar a barra não afeta a rolagem, que continua funcional ========================================================= */ .curriculo-text::-webkit-scrollbar { display: none; /* Oculta a barra de rolagem em navegadores WebKit */ } /* ========================================================= PARÁGRAFOS DENTRO DO BLOCO DE CURRÍCULO (.curriculo-text p) --------------------------------------------------------- Estiliza todos os elementos `

    ` dentro do bloco de texto do currículo, controlando cor, espaçamento e legibilidade. Este bloco define: - Cor do texto consistente com o restante do conteúdo - Altura da linha para facilitar leitura - Margem inferior para separar parágrafos, sem margem superior IMPORTANTE: - Alterar color impacta contraste e visibilidade do texto - line-height afeta legibilidade, principalmente em textos longos - margin define espaçamento vertical entre parágrafos ========================================================= */ .curriculo-text p { color: var(--curriculo-text); /* Cor do texto padrão do parágrafo */ line-height: 1.8; /* Altura da linha para leitura confortável */ margin: 0 0 16px; /* Margem superior e lateral zero, margem inferior de 16px para separar parágrafos */ } /* ========================================================= DIVS DIRETAS DENTRO DO BLOCO DE CURRÍCULO (.curriculo-text > div) --------------------------------------------------------- Estiliza qualquer `

    ` que seja **filho direto** do bloco de texto do currículo, garantindo consistência visual e legibilidade dentro do conteúdo. Este bloco define: - Cor do texto consistente com o restante do currículo - Altura da linha uniforme para melhor leitura - Margem zerada para evitar espaçamentos indesejados IMPORTANTE: - Alterar color impacta contraste e visibilidade do conteúdo - line-height afeta legibilidade, especialmente em textos agrupados - margin: 0 evita espaçamentos automáticos do navegador ========================================================= */ .curriculo-text > div { color: var(--curriculo-text); /* Cor do texto consistente com o bloco de currículo */ line-height: 1.8; /* Altura da linha para leitura confortável */ margin: 0; /* Remove qualquer margem padrão do navegador */ } /* ========================================================= LISTAS DO CURRÍCULO (.curriculo-list) --------------------------------------------------------- Estiliza listas internas do bloco de currículo, garantindo legibilidade, espaçamento adequado e consistência visual. Este bloco define: - Tamanho da fonte para leitura confortável - Flexibilidade para ocupar espaço dentro do contêiner pai - Tipo de marcador da lista (disco) - Padding à esquerda para alinhamento dos marcadores - Margem zerada para evitar espaçamento externo indesejado - Altura da linha para clareza visual IMPORTANTE: - Alterar font-size impacta legibilidade da lista - flex: 1 permite que a lista se expanda dentro do contêiner - list-style-type define tipo de marcador (disc, circle, square) - padding-left controla espaço entre borda e marcadores - line-height afeta espaçamento vertical entre itens ========================================================= */ .curriculo-list { font-size: 18px; /* Define tamanho da fonte para os itens da lista */ flex: 1; /* Permite que a lista ocupe espaço disponível dentro do contêiner pai */ list-style-type: disc; /* Define marcador de disco para cada item da lista */ padding-left: 20px; /* Espaço interno à esquerda para separar marcadores da borda */ margin: 0; /* Remove margem padrão da lista */ line-height: 2.4; /* Altura da linha para melhor leitura e espaçamento entre itens */ } /* ========================================================= ITENS DA LISTA DO CURRÍCULO (.curriculo-list li) --------------------------------------------------------- Estiliza cada item `
  • ` dentro da lista de currículo, garantindo consistência de cor e legibilidade. Este bloco define: - Cor do texto dos itens da lista, separando visualmente do texto padrão do currículo IMPORTANTE: - Alterar color impacta contraste e destaque dos itens da lista - Pode ser combinado com line-height e font-size do pai para uniformidade ========================================================= */ .curriculo-list li { color: var(--curriculo-list); /* Define cor específica para itens da lista dentro do currículo */ } /* ========================================================= LINK ATIVO NO HEADER DIREITO (.header-right a.active) --------------------------------------------------------- Estiliza links do header que estão ativos (representando a página atual), diferenciando-os visualmente e bloqueando interações do usuário. Este bloco define: - Cor do texto do link ativo - Cursor padrão para indicar que não é clicável - Desativa eventos de clique - Transição suave ao alterar cor ou sombra do texto IMPORTANTE: - Alterar color impacta destaque visual do link ativo - cursor: default mostra que o link não é interativo - pointer-events: none bloqueia qualquer interação do usuário - transition mantém suavidade caso haja mudanças programáticas ========================================================= */ .header-right a.active { color: #ffffff; /* Cor do link ativo no header direito */ cursor: default; /* Cursor padrão para indicar que o link não é clicável */ pointer-events: none; /* Bloqueia qualquer interação de clique ou hover */ transition: color 0.3s ease, text-shadow 0.3s ease; /* Suaviza mudanças de cor ou sombra caso ocorram via JS ou hover */ } /* ========================================================= BLOCO DE EXPERIÊNCIA (.experience) --------------------------------------------------------- Estiliza cada item ou seção de experiência dentro do currículo ou portfólio, separando visualmente cada entrada. Este bloco define: - Borda inferior fina para dividir experiências - Padding vertical para espaçamento interno confortável IMPORTANTE: - Alterar border-bottom impacta a separação visual entre itens - Alterar padding afeta altura do bloco e espaçamento interno ========================================================= */ .experience { border-bottom: 0.8px solid var(--experience-border); /* Borda inferior fina para separar visualmente cada experiência */ padding: 8px 0; /* Espaçamento interno vertical (topo e base) */ } /* ========================================================= BLOCO DE EXPERIÊNCIA COMPACTA (.experience--compact) --------------------------------------------------------- Estiliza versões compactas do bloco de experiência, geralmente usadas quando não se deseja exibir a borda inferior separadora. Este bloco define: - Remove a borda inferior padrão de `.experience` IMPORTANTE: - Útil para última experiência da lista ou quando o layout exige visual mais limpo - Alterar border-bottom pode afetar a percepção de separação entre itens ========================================================= */ .experience--compact { border-bottom: 0; /* Remove a borda inferior para uma aparência mais compacta */ } /* ========================================================= BLOCO DE INFORMAÇÕES DA EXPERIÊNCIA (.experience--inf) --------------------------------------------------------- Estiliza elementos internos de informação de uma experiência, aplicando recuo para diferenciar do restante do conteúdo. Este bloco define: - Margem à esquerda para deslocar levemente o conteúdo dentro do bloco de experiência IMPORTANTE: - Alterar margin-left ajusta o recuo do texto ou informações - Útil para criar hierarquia visual dentro do item de experiência ========================================================= */ .experience--inf { margin-left: 12px; /* Aplica recuo à esquerda para conteúdo interno da experiência */ } /* ========================================================= CABEÇALHO DO BLOCO DE EXPERIÊNCIA (.exp-header) --------------------------------------------------------- Estiliza o cabeçalho de cada bloco de experiência, geralmente contendo título, datas ou ícones de interação, permitindo que seja clicável ou expansível. Este bloco define: - Layout flexível para organizar conteúdo horizontalmente - Distribuição dos elementos entre extremidades (space-between) - Alinhamento vertical ao centro - Cursor de ponteiro para indicar que é clicável/interativo IMPORTANTE: - Alterar display, justify-content ou align-items muda o layout do header - cursor: pointer é essencial para indicar interatividade ao usuário ========================================================= */ .exp-header { display: flex; /* Ativa layout flexível horizontal para os elementos do header */ justify-content: space-between; /* Distribui elementos entre as extremidades (esquerda e direita) */ align-items: center; /* Alinha verticalmente os elementos ao centro */ cursor: pointer; /* Indica que o header é clicável */ } /* ========================================================= CABEÇALHO COMPACTO DO BLOCO DE EXPERIÊNCIA (.exp-header--compact) --------------------------------------------------------- Estiliza uma versão compacta do cabeçalho de experiência, usada quando se deseja um tamanho reduzido ou ajuste fino do layout. Este bloco define: - Padding à direita para reduzir espaço interno do header - Largura ajustável ao conteúdo (fit-content) para não ocupar espaço desnecessário IMPORTANTE: - Alterar padding-right muda o espaçamento interno à direita - width: fit-content faz o elemento ocupar apenas o espaço necessário - Útil em layouts mais densos ou quando o header precisa ser enxuto ========================================================= */ .exp-header--compact { padding-right: 4px; /* Reduz espaçamento interno à direita do cabeçalho compacto */ width: fit-content; /* Ajusta a largura do header ao conteúdo interno */ } /* ========================================================= CABEÇALHO DO BLOCO DE EXPERIÊNCIA COMPACTA (.experience--compact .exp-header) --------------------------------------------------------- Estiliza o cabeçalho de experiências quando o bloco é marcado como compacto, ajustando layout, alinhamento e espaçamento interno. Este bloco define: - Layout flexível para manter elementos em linha - Alinhamento vertical centralizado - Padding à esquerda removido para compactar o header - Gap entre elementos internos para separar visualmente IMPORTANTE: - Alterar display ou align-items muda o layout dos itens - padding-left: 0 garante alinhamento consistente com o bloco compacto - gap define espaçamento entre elementos internos (ícones, título, datas) ========================================================= */ .experience--compact .exp-header { display: flex; /* Mantém layout flexível em linha dentro do header compacto */ align-items: center; /* Centraliza verticalmente todos os elementos do header */ padding-left: 0; /* Remove padding à esquerda para compactar o cabeçalho */ gap: 8px; /* Espaçamento uniforme entre elementos internos do header */ } /* ========================================================= PERÍODO DA EXPERIÊNCIA (.exp-period) --------------------------------------------------------- Estiliza o texto que representa o período de cada experiência, geralmente datas de início e término, destacando visualmente e permitindo pequenas interações de estilo. Este bloco define: - Peso da fonte para destacar o período - Espaçamento à direita para separar de outros elementos - Cor específica para o período - Remove qualquer decoração de texto (sublinhado) - Transição suave ao alterar a cor (hover ou JS) IMPORTANTE: - Alterar font-weight muda destaque visual - margin-right ajusta espaçamento entre período e título ou ícones - text-decoration: none garante aparência limpa - transition mantém suavidade em mudanças de cor ========================================================= */ .exp-period { font-weight: 600; /* Deixa o texto do período mais destacado */ margin-right: 10px; /* Espaço entre o período e o elemento seguinte */ color: var(--exp-period); /* Cor definida para os períodos das experiências */ text-decoration: none; /* Remove sublinhado ou outras decorações do texto */ transition: color 0.3s ease; /* Suaviza qualquer mudança de cor do período */ } /* ========================================================= CARGO OU FUNÇÃO DA EXPERIÊNCIA (.exp-role) --------------------------------------------------------- Estiliza o texto que representa o cargo ou função exercida dentro de cada bloco de experiência, garantindo destaque e alinhamento visual consistente. Este bloco define: - Flex: 1 para que o elemento ocupe o espaço disponível dentro do container do header da experiência - Peso da fonte intermediário para equilíbrio visual - Cor específica para diferenciar do período ou outros textos IMPORTANTE: - Alterar flex impacta como o cargo se comporta no layout - font-weight: 500 garante destaque sem exagero - color deve seguir a paleta do site para consistência visual ========================================================= */ .exp-role { flex: 1; /* Ocupa o espaço restante dentro do header da experiência */ font-weight: 500; /* Peso da fonte para destaque moderado do cargo/função */ color: var(--exp-role); /* Cor específica para o cargo ou função dentro do bloco de experiência */ } /* ========================================================= BOTÃO DE EXPANSÃO/TOGGLE DA EXPERIÊNCIA (.exp-toggle) --------------------------------------------------------- Estiliza o botão usado para expandir ou recolher detalhes de cada bloco de experiência, garantindo destaque visual e interatividade clara para o usuário. Este bloco define: - Background transparente para não interferir no layout - Sem borda, mantendo aparência limpa - Cor definida por variável CSS para consistência - Peso da fonte em bold para destaque - Tamanho da fonte 20px para visibilidade - Cursor pointer para indicar que é clicável - Padding zero para evitar espaçamento interno indesejado - Margem à esquerda para separar de outros elementos - Transição suave para transformações (ex.: rotação ao expandir) IMPORTANTE: - Alterar color impacta contraste e destaque visual - cursor: pointer é essencial para sinalizar interatividade - transition garante animação suave em transformações aplicadas via JS ou hover ========================================================= */ .exp-toggle { background: none; /* Remove fundo para manter aparência limpa */ border: none; /* Remove borda padrão de botão */ color: var(--exp-toggle); /* Cor do toggle definida por variável CSS */ font-weight: bold; /* Destaca o toggle com fonte em negrito */ font-size: 20px; /* Tamanho da fonte para boa visibilidade */ cursor: pointer; /* Indica que o botão é clicável */ padding: 0; /* Remove padding interno padrão */ margin-left: 8px; /* Espaço à esquerda do toggle em relação a outros elementos */ transition: transform 0.4s ease; /* Suaviza animações de transformação, como rotação */ } /* ========================================================= BOTÃO DE TOGGLE COMPACTO DA EXPERIÊNCIA (.exp-toggle--compact) --------------------------------------------------------- Estiliza a versão compacta do botão de expansão/recolhimento dentro de experiências, ajustando o posicionamento no layout compacto. Este bloco define: - Remove a margem à esquerda do toggle, alinhando-o mais próximo de outros elementos internos do header compacto IMPORTANTE: - Útil quando o header da experiência está em formato compacto - Alterar margin-left ajusta a distância horizontal do toggle ========================================================= */ .exp-toggle--compact { margin-left: 0; /* Remove o espaçamento à esquerda para compactar o botão no layout */ } /* ========================================================= DETALHES DA EXPERIÊNCIA (.exp-details) --------------------------------------------------------- Estiliza o conteúdo expandível/recolhível de cada experiência, geralmente mostrado ao clicar no toggle, mantendo animação suave e alinhamento consistente. Este bloco define: - max-height: 0 e overflow: hidden para esconder detalhes inicialmente - Transição suave em max-height e opacity para animação de abertura/fechamento - Opacidade inicial 0 para efeito de fade-in - Padding-left para recuo em relação ao header da experiência - Cor específica para os detalhes - line-height normal para leitura compacta IMPORTANTE: - Alterar max-height impacta quanto do conteúdo será exibido - overflow: hidden garante que nada "vaze" quando fechado - transition define suavidade da animação - opacity controla visibilidade do conteúdo ========================================================= */ .exp-details { max-height: 0; /* Oculta o conteúdo verticalmente inicialmente */ overflow: hidden; /* Garante que conteúdo excedente não apareça quando fechado */ transition: max-height 0.4s ease, opacity 0.4s ease; /* Anima suavemente a abertura e fechamento dos detalhes */ opacity: 0; /* Torna o conteúdo invisível inicialmente */ padding-left: 8px; /* Recuo à esquerda para separar do header */ color: var(--exp-details); /* Cor do texto dos detalhes da experiência */ line-height: normal; /* Altura da linha para manter o texto legível e compacto */ } /* ========================================================= TÍTULOS H4 NOS DETALHES DE EXPERIÊNCIA (.exp-details h4) --------------------------------------------------------- Estiliza os títulos internos (h4) dentro do bloco de detalhes de cada experiência, destacando seções ou subtítulos. Este bloco define: - Tamanho da fonte para dar destaque sem exagero - Peso da fonte em 600 (semi-negrito) para destaque - Margem uniforme ao redor do título para separar visualmente - Cor específica para diferenciar do texto normal dos detalhes IMPORTANTE: - Alterar font-size impacta hierarquia visual do conteúdo - margin controla espaçamento interno e entre outros elementos - color deve seguir paleta de cores definida para consistência ========================================================= */ .exp-details h4 { font-size: 20px; /* Tamanho da fonte para destaque dos subtítulos */ font-weight: 600; /* Peso semi-negrito para destacar os títulos */ margin: 8px; /* Espaçamento uniforme em todos os lados do título */ color: var(--exp-details-h4); /* Cor definida para títulos H4 dentro dos detalhes */ } /* ========================================================= PARÁGRAFOS NOS DETALHES DE EXPERIÊNCIA (.exp-details p) --------------------------------------------------------- Estiliza o texto dentro do bloco de detalhes de cada experiência, garantindo legibilidade, espaçamento consistente e hierarquia visual. Este bloco define: - Tamanho da fonte para leitura confortável - Altura da linha para espaçamento adequado entre linhas - Margem inferior e recuo à esquerda para alinhamento com outros elementos - Cor consistente com a paleta de detalhes da experiência IMPORTANTE: - Alterar font-size ou line-height impacta legibilidade - margin-left cria hierarquia visual em relação ao header - color deve seguir variável CSS para manter consistência visual ========================================================= */ .exp-details p { font-size: 16px; /* Tamanho da fonte para leitura clara do conteúdo */ line-height: 1.8; /* Altura da linha para espaçamento vertical confortável */ margin: 0 0 8px 8px; /* Margem inferior para separar parágrafos e recuo à esquerda */ color: var(--exp-details); /* Cor do texto definida para os detalhes da experiência */ } /* ========================================================= LINKS NOS DETALHES DE EXPERIÊNCIA (.exp-details a) --------------------------------------------------------- Estiliza links contidos dentro do bloco de detalhes de cada experiência, garantindo espaçamento adequado entre links ou entre links e outros elementos do conteúdo. Este bloco define: - Margem vertical para separar links de outros elementos (acima e abaixo do link) IMPORTANTE: - Alterar margin impacta o espaçamento visual entre links e textos - A cor e comportamento dos links podem ser definidos separadamente ========================================================= */ .exp-details a { margin: 8px 0; /* Espaçamento vertical acima e abaixo de cada link nos detalhes */ } /* ========================================================= LINKS DE ARTIGOS NOS DETALHES DE EXPERIÊNCIA (.exp-details-artigos a) --------------------------------------------------------- Estiliza links de artigos ou referências dentro do bloco de detalhes de cada experiência, garantindo espaçamento horizontal consistente entre links. Este bloco define: - Margem horizontal (esquerda e direita) para separar links entre si e evitar que fiquem colados IMPORTANTE: - margin afeta o espaçamento lateral, útil para listas de links - cores e hover devem ser definidos separadamente para consistência ========================================================= */ .exp-details-artigos a { margin: 0 8px; /* Espaçamento horizontal entre links de artigos nos detalhes */ } /* ========================================================= LINK DE ARTIGO DESTAQUE NOS DETALHES DE EXPERIÊNCIA (.exp-details .link-artigo-destaque) --------------------------------------------------------- Estiliza links destacados dentro do bloco de detalhes de cada experiência, geralmente usados para artigos ou referências mais importantes. Este bloco define: - Margem à esquerda para separar o link de outros elementos dentro do bloco de detalhes IMPORTANTE: - margin-left ajusta o recuo horizontal do link destacado - Útil para criar hierarquia visual e destaque em relação a outros links ou textos ========================================================= */ .exp-details .link-artigo-destaque { margin-left: 8px; /* Recuo à esquerda para destacar visualmente o link */ } /* ========================================================= IMAGENS NOS DETALHES DE EXPERIÊNCIA (.exp-details img) --------------------------------------------------------- Estiliza imagens contidas dentro do bloco de detalhes de cada experiência, garantindo que sejam renderizadas como blocos e evitando espaços indesejados abaixo da imagem. Este bloco define: - display: block para remover comportamento inline padrão de imagens e prevenir gaps verticais IMPORTANTE: - Alterar display impacta o alinhamento e espaçamento das imagens dentro do conteúdo ========================================================= */ .exp-details img { display: block; /* Garante que a imagem seja exibida como bloco, eliminando gaps verticais */ } /* ========================================================= DETALHES DE EXPERIÊNCIA ABERTOS (.exp-details.open) --------------------------------------------------------- Estiliza o estado "aberto" dos detalhes de cada experiência, geralmente acionado ao clicar no toggle, permitindo que o conteúdo seja visível com animação suave. Este bloco define: - max-height grande para que o conteúdo possa ser totalmente exibido - Opacidade 1 para tornar o conteúdo visível IMPORTANTE: - max-height deve ser suficiente para conter todo o conteúdo sem cortar elementos - opacity garante efeito de fade-in ao abrir os detalhes - A transição definida em .exp-details suaviza a abertura ========================================================= */ .exp-details.open { max-height: 2000px; /* Define altura máxima suficiente para mostrar todo o conteúdo */ opacity: 1; /* Torna o conteúdo visível ao usuário */ } /* ========================================================= TOGGLE ROTACIONADO QUANDO DETALHES ABERTOS (.exp-header.open .exp-toggle) --------------------------------------------------------- Estiliza o botão de toggle dentro do header de experiência quando o bloco de detalhes está aberto, indicando visualmente que o conteúdo foi expandido. Este bloco define: - Rotação de 90° do toggle para sinalizar expansão do conteúdo IMPORTANTE: - transform: rotate(90deg) gira o botão ou ícone (ex.: seta) sem alterar seu layout - Este estado é acionado via classe .open no header - A transição definida em .exp-toggle suaviza a rotação ========================================================= */ .exp-header.open .exp-toggle { transform: rotate(90deg); /* Gira o botão de toggle 90° quando os detalhes da experiência estão abertos */ } /* ========================================================= DETALHES DE EXPERIÊNCIA ATIVA (.experience.active .exp-details) --------------------------------------------------------- Estiliza o bloco de detalhes de uma experiência quando a experiência está marcada como ativa, permitindo que o conteúdo excedente seja visível. Este bloco define: - overflow: visible para permitir que o conteúdo que ultrapassa o container seja exibido corretamente IMPORTANTE: - Útil em casos onde detalhes contêm elementos que podem "sair" do container principal (ex.: imagens, listas longas) - Não afeta o max-height ou opacity, apenas a renderização do conteúdo dentro do container ========================================================= */ .experience.active .exp-details { overflow: visible; /* Permite que o conteúdo interno do bloco de detalhes apareça fora do container, se necessário */ } /* ========================================================= ESTILO GLOBAL PARA HTML E BODY (html, body) --------------------------------------------------------- Define propriedades essenciais para a estrutura base do site, garantindo que o layout ocupe 100% da altura da tela e removendo margens e padding padrão do navegador. Este bloco define: - height: 100% para que o HTML e o body preencham toda a altura da janela - margin: 0 remove margens padrão do navegador - padding: 0 remove padding padrão do navegador - overflow: hidden impede barras de rolagem, útil para layouts de tela cheia ou quando o scroll é controlado por outros elementos IMPORTANTE: - Alterar overflow pode reativar a rolagem padrão da página - Essas propriedades afetam toda a página, portanto mudanças impactam todos os elementos filhos ========================================================= */ html, body { height: 100%; /* Garante que a página ocupe toda a altura da janela do navegador */ margin: 0; /* Remove a margem padrão aplicada pelo navegador */ padding: 0; /* Remove o padding padrão aplicado pelo navegador */ overflow: hidden; /* Bloqueia a rolagem padrão da página */ } /* ========================================================= WRAPPER DE SCROLL VERTICAL (.scroll-wrapper) --------------------------------------------------------- Cria um container que controla a rolagem vertical da página ou de seções específicas, permitindo scroll interno mesmo quando o body está com overflow: hidden. Este bloco define: - height: 100% para ocupar toda a altura do container pai - overflow-y: scroll para permitir rolagem vertical - scrollbar-width: none para esconder a barra de rolagem no Firefox - -ms-overflow-style: none para esconder a barra de rolagem no IE/Edge IMPORTANTE: - Útil quando o layout global bloqueia o scroll do body - Mantém a rolagem apenas dentro do wrapper - Alterar height ou overflow impacta como o conteúdo é rolado ========================================================= */ .scroll-wrapper { height: 100%; /* Ocupar toda a altura do container pai */ overflow-y: scroll; /* Permite rolagem vertical do conteúdo interno */ scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */ -ms-overflow-style: none; /* Oculta a barra de rolagem no IE e Edge */ } /* ========================================================= ESCONDER BARRA DE ROLAGEM NO WEBKIT (.scroll-wrapper::-webkit-scrollbar) --------------------------------------------------------- Remove a barra de rolagem em navegadores baseados em WebKit (Chrome, Safari, Edge Chromium) para manter aparência limpa do scroll interno do wrapper. Este bloco define: - display: none para esconder a barra de rolagem nativa IMPORTANTE: - Funciona apenas em navegadores que suportam pseudo-elemento ::-webkit-scrollbar - O conteúdo ainda pode ser rolado, apenas a barra fica invisível - Essencial para manter design minimalista quando usado com .scroll-wrapper ========================================================= */ .scroll-wrapper::-webkit-scrollbar { display: none; /* Oculta a barra de rolagem nativa no Chrome, Safari e Edge Chromium */ } /* ========================================================= BLOQUEIO DE SELEÇÃO DE TEXTO NO BODY (body) --------------------------------------------------------- Impede que o usuário selecione texto na página, mantendo a interface limpa e evitando marcações acidentais. Este bloco define: - user-select: none para navegadores modernos - -webkit-user-select: none para Chrome, Safari e Edge Chromium - -moz-user-select: none para Firefox - -ms-user-select: none para Internet Explorer e Edge Legacy IMPORTANTE: - Evita seleção de texto em todo o body - Útil para interfaces que dependem de interação por clique/drag sem seleção de texto - Alterar ou remover permite que o usuário selecione texto normalmente ========================================================= */ body { user-select: none; /* Bloqueia seleção de texto em navegadores modernos */ -webkit-user-select: none; /* Bloqueia seleção em Chrome, Safari e Edge Chromium */ -moz-user-select: none; /* Bloqueia seleção em Firefox */ -ms-user-select: none; /* Bloqueia seleção em Internet Explorer e Edge Legacy */ } /* ========================================================= MINIATURAS DE CERTIFICADOS (.cert-thumb) --------------------------------------------------------- Estiliza imagens em miniatura de certificados ou diplomas, garantindo tamanho consistente, borda visível e interação visual ao passar o mouse. Este bloco define: - border: 1px sólido com cor da seção fixa do header para destaque sutil da miniatura - border-radius: 6px para cantos arredondados - padding: 2px para criar pequeno espaçamento interno - width e height fixos para uniformidade das miniaturas - display: block para remover comportamento inline padrão de imagens - cursor: pointer para indicar que a miniatura é clicável - transition em transform e box-shadow para animação suave em hover IMPORTANTE: - Alterar width/height impacta layout do grid ou carrossel - A cor da borda deve seguir paleta do site para consistência visual ========================================================= */ .cert-thumb { border: 1px solid var(--fixed-header-section); /* Borda sutil usando cor da seção fixa do header */ border-radius: 6px; /* Cantos arredondados para estética agradável */ padding: 2px; /* Pequeno espaçamento interno entre imagem e borda */ width: 240px; height: 170px; /* Dimensões fixas para uniformidade das miniaturas */ display: block; /* Garante que a imagem se comporte como bloco */ cursor: pointer; /* Indica que a miniatura é clicável */ transition: transform 0.2s ease, box-shadow 0.2s ease; /* Suaviza transformações visuais ao interagir com a miniatura */ } /* ========================================================= EFEITO HOVER PARA MINIATURAS DE CERTIFICADOS (.cert-thumb:hover) --------------------------------------------------------- Adiciona interação visual quando o usuário passa o mouse sobre a miniatura de certificado, destacando o elemento. Este bloco define: - transform: scale(1.02) para aumentar levemente a miniatura criando efeito de zoom - box-shadow usando variável de sombra do side menu para dar profundidade e destaque visual IMPORTANTE: - A transição suave é controlada pelo .cert-thumb (transform e box-shadow) - Alterar scale ou box-shadow muda a intensidade do efeito visual ========================================================= */ .cert-thumb:hover { transform: scale(1.02); /* Leve aumento da miniatura para indicar interatividade */ box-shadow: var(--box-shadow-side-menu); /* Adiciona sombra para criar profundidade e destaque visual */ } /* ========================================================= MARGEM PARA TEXTO DE CERTIFICADOS (.cert-text-margin) --------------------------------------------------------- Define recuo à esquerda para textos associados às miniaturas de certificados, garantindo alinhamento e espaçamento consistente em relação à imagem. Este bloco define: - margin-left: 16px para separar visualmente o texto da miniatura IMPORTANTE: - Ajustar esta margem afeta o alinhamento horizontal do texto - Mantém consistência visual entre diferentes certificados ========================================================= */ .cert-text-margin { margin-left: 16px; /* Espaçamento à esquerda para separar o texto da miniatura */ } /* ========================================================= BLOCO DE MINIATURAS DE CERTIFICADOS (.cert-thumb-block) --------------------------------------------------------- Define espaçamento externo para cada bloco de miniatura de certificado, garantindo separação consistente entre as miniaturas no layout. Este bloco define: - margin: 20px 16px para criar espaço vertical e horizontal entre os blocos de miniaturas IMPORTANTE: - Ajustar estas margens impacta a distribuição das miniaturas dentro do container - Mantém uniformidade e evita que as miniaturas fiquem coladas ========================================================= */ .cert-thumb-block { margin: 20px 16px; /* Espaçamento vertical e horizontal entre miniaturas */ } /* ========================================================= MINIATURAS DE CERTIFICADOS COMPACTAS (.cert-thumb--compact) --------------------------------------------------------- Define espaçamento reduzido para miniaturas de certificados em layouts compactos ou quando várias miniaturas são exibidas em linha. Este bloco define: - margin: 0 8px para criar pequeno espaçamento horizontal entre miniaturas, sem adicionar margem vertical IMPORTANTE: - Útil para grids ou carrosséis de certificados onde o espaço horizontal é limitado - Mantém consistência visual mesmo em layouts compactos ========================================================= */ .cert-thumb--compact { margin: 0 8px; /* Pequeno espaçamento horizontal entre miniaturas compactas */ } /* ========================================================= MINIATURAS DE CERTIFICADOS EM ACORDION (.cert-thumb--accordion) --------------------------------------------------------- Define espaçamento externo para miniaturas de certificados exibidas dentro de um componente tipo accordion, garantindo separação consistente entre os itens. Este bloco define: - margin: 20px 8px para espaçamento vertical (20px) e horizontal (8px) entre miniaturas dentro do accordion IMPORTANTE: - Ajustar esta margem impacta a distribuição das miniaturas no accordion - Mantém alinhamento e estética uniforme do layout ========================================================= */ .cert-thumb--accordion { margin: 20px 8px; /* Espaçamento vertical e horizontal para miniaturas no accordion */ } /* ========================================================= SEÇÃO DE CATEGORIAS DE CERTIFICADOS (.cert-categories) --------------------------------------------------------- Define o espaçamento interno e externo da lista ou barra de categorias de certificados, garantindo alinhamento e separação visual consistente. Este bloco define: - margin-top: 0px e margin-bottom: 0px para remover margens externas e evitar espaçamento extra - padding: 16px 0 para adicionar espaçamento interno vertical, mantendo o conteúdo confortável visualmente IMPORTANTE: - Ajustar padding altera a distância entre categorias e outros elementos - Mantém consistência no layout do portfólio de certificados ========================================================= */ .cert-categories { margin-top: 0px; margin-bottom: 0px; /* Remove margens externas para controle de espaçamento */ padding: 16px 0; /* Espaçamento interno vertical entre categorias */ } /* ========================================================= LINKS DE CERTIFICADOS EM GRID (.cert-links) --------------------------------------------------------- Organiza links ou miniaturas de certificados em uma grade responsiva, facilitando a visualização lado a lado. Este bloco define: - display: grid para criar layout de grade - grid-template-columns: 1fr 1fr para dividir a área em duas colunas iguais - gap: 12px 40px define espaçamento vertical (12px) e horizontal (40px) entre os itens da grade - margin-top: 8px para espaçamento acima da grade em relação a elementos anteriores IMPORTANTE: - Ajustar grid-template-columns altera o número de colunas - Gap controla espaçamento entre itens; cuidado com valores grandes em telas pequenas ========================================================= */ .cert-links { display: grid; /* Cria um layout de grade para os links/miniaturas */ grid-template-columns: 1fr 1fr; /* Define duas colunas iguais na grade */ gap: 12px 40px; /* Espaçamento vertical de 12px e horizontal de 40px entre itens */ margin-top: 8px; /* Espaçamento acima da grade para separar de elementos anteriores */ } /* ========================================================= ESTILO DOS LINKS DE CERTIFICADOS (.cert-links a) --------------------------------------------------------- Estiliza os links individuais dentro da grade de certificados, garantindo legibilidade, interatividade e espaçamento adequado. Este bloco define: - text-decoration: none para remover sublinhado padrão dos links - font-size: 18px para tamanho de texto legível - color: var(--curriculo-list) para manter consistência com a paleta do currículo - transition: all 0.4s ease para animações suaves em hover e outros estados - padding: 4px 4px 4px 2px para controle de espaçamento interno - margin-left: 8px para separação horizontal em relação a outros elementos - width: fit-content para que o link ocupe apenas o espaço necessário ao texto IMPORTANTE: - Alterar padding ou margin impacta alinhamento e espaçamento visual - O transition facilita efeitos de hover ou transformação sem mudanças bruscas ========================================================= */ .cert-links a { text-decoration: none; /* Remove sublinhado padrão dos links */ font-size: 18px; /* Define tamanho legível do texto */ color: var(--curriculo-list); /* Mantém cor consistente com a paleta do currículo */ transition: all 0.4s ease; /* Suaviza mudanças de estilo ao interagir com o link */ padding: 4px 4px 4px 2px; /* Espaçamento interno do link (topo, direita, baixo, esquerda) */ margin-left: 8px; /* Espaçamento horizontal em relação a elementos anteriores */ width: fit-content; /* Faz o link ocupar apenas o espaço necessário ao conteúdo */ } /* ========================================================= EFEITO HOVER PARA LINKS DE CERTIFICADOS (.cert-links a:hover) --------------------------------------------------------- Adiciona interatividade visual quando o usuário passa o mouse sobre os links de certificados, destacando o elemento. Este bloco define: - transform: scale(1.04) para aumentar levemente o link criando efeito de zoom - color: var(--link-cert) para alterar a cor do texto em hover - text-shadow: var(--box-shadow-link-cert) para adicionar profundidade e destaque visual ao texto IMPORTANTE: - A transição suave é controlada pelo .cert-links a (transition: all 0.4s ease) - Ajustar scale, color ou text-shadow muda a intensidade do efeito visual ========================================================= */ .cert-links a:hover { transform: scale(1.04); /* Leve aumento do link para indicar interatividade */ color: var(--link-cert); /* Alteração de cor do texto no hover para destaque */ text-shadow: var(--box-shadow-link-cert); /* Sombra sutil no texto para maior profundidade visual */ } /* ========================================================= LINK DE VERIFICAÇÃO DE CERTIFICADO (.cert-link-verify) --------------------------------------------------------- Estiliza links de verificação de certificados ou diplomas, tornando-os destacados, interativos e visualmente consistentes. Este bloco define: - font-weight: bold para tornar o link mais visível e legível - text-decoration: none para remover sublinhado padrão - color: var(--link-cert) para manter a paleta de links do site - cursor: pointer para indicar que o elemento é clicável - transition: opacity 0.2s ease para animações suaves em hover ou interações IMPORTANTE: - Este link normalmente aponta para verificação externa de certificado - Alterar a cor ou font-weight impacta a hierarquia visual em relação a outros links ========================================================= */ .cert-link-verify { font-weight: bold; /* Torna o link mais visível e destacado */ text-decoration: none; /* Remove sublinhado padrão do link */ color: var(--link-cert); /* Mantém cor consistente com outros links de certificados */ cursor: pointer; /* Indica que o link é clicável */ transition: opacity 0.2s ease; /* Suaviza mudanças de opacidade em interações ou hover */ } /* ========================================================= EFEITO HOVER PARA LINK DE VERIFICAÇÃO DE CERTIFICADO (.cert-link-verify:hover) --------------------------------------------------------- Adiciona destaque visual ao passar o mouse sobre o link de verificação de certificado, criando profundidade e atraindo a atenção do usuário. Este bloco define: - text-shadow: var(--box-shadow-link-cert) para aplicar uma sombra sutil ao texto, aumentando o destaque durante o hover IMPORTANTE: - A transição suave já está definida em .cert-link-verify (transition: opacity 0.2s ease) - Alterar text-shadow muda a intensidade do destaque visual ========================================================= */ .cert-link-verify:hover { text-shadow: var(--box-shadow-link-cert); /* Aplica sombra ao texto para destaque visual no hover */ } /* ========================================================= LINK DE CERTIFICADO NÃO VERIFICADO (.cert-no-verify) --------------------------------------------------------- Estiliza textos ou links que indicam certificados não verificados, mantendo consistência visual com os links de verificação, mas sem interatividade. Este bloco define: - font-weight: bold para destacar o texto em relação ao corpo - text-decoration: none para remover sublinhado padrão - color: var(--link-cert) para manter a paleta de links do site IMPORTANTE: - Diferencia visualmente de certificados verificáveis - Não há cursor pointer nem efeitos de hover, indicando que não é clicável ========================================================= */ .cert-no-verify { font-weight: bold; /* Destaca visualmente o texto do certificado */ text-decoration: none; /* Remove sublinhado padrão do texto */ color: var(--link-cert); /* Mantém cor consistente com a paleta de links de certificados */ } /* ========================================================= LINKS DE CERTIFICADOS COMPACTOS (.cert-links--compact) --------------------------------------------------------- Ajusta o posicionamento de links de certificados em layouts compactos, geralmente usados quando há pouco espaço horizontal ou dentro de grids mais apertados. Este bloco define: - margin-left: 0 para remover qualquer espaçamento à esquerda e alinhar os links diretamente ao início do container IMPORTANTE: - Útil em layouts compactos para manter consistência visual - Altera apenas a margem esquerda, mantendo demais estilos dos links ========================================================= */ .cert-links--compact { margin-left: 0; /* Remove margem esquerda para alinhamento em layouts compactos */ } /* ========================================================= AJUSTE ESPECÍFICO DE CATEGORIAS DE CERTIFICADOS NO CURRÍCULO (#curriculo .cert-categories) --------------------------------------------------------- Remove margens e espaçamento interno no topo da seção de categorias de certificados dentro do container #curriculo, garantindo alinhamento preciso com outros elementos. Este bloco define: - margin-top: 0 !important para remover qualquer margem superior - padding-top: 0 !important para eliminar espaçamento interno no topo IMPORTANTE: - O uso de !important força a prioridade sobre regras anteriores - Útil para correções pontuais de layout em containers específicos - Deve ser usado com cuidado para não dificultar manutenção futura ========================================================= */ #curriculo .cert-categories { margin-top: 0 !important; /* Remove margem superior, garantindo alinhamento exato */ padding-top: 0 !important; /* Remove espaçamento interno superior, mantendo layout compacto */ } /* ========================================================= ESTADOS FIXOS PARA HEADER EM BODY STATIC (body.static-header .header-photo, .header-name, .last-update) --------------------------------------------------------- Força a exibição completa dos elementos do header quando o body possui a classe static-header, ignorando transições ou animações. Este bloco define: - opacity: 1 !important para garantir que todos os elementos estejam visíveis - transform: translateX(0) !important para posicionar os elementos na posição original sem deslocamento - transition: none !important para remover qualquer animação ou efeito de transição aplicado anteriormente IMPORTANTE: - Útil quando o header deve aparecer estático, sem animações - Uso de !important garante que esta regra sobrescreva todas as anteriores ========================================================= */ body.static-header .header-photo, body.static-header .header-name, body.static-header .last-update { opacity: 1 !important; /* Garante que o elemento esteja totalmente visível */ transform: translateX(0) !important; /* Posiciona o elemento sem deslocamento horizontal */ transition: none !important; /* Remove qualquer transição ou animação */ } /* ========================================================= FRASE DE ASSINATURA (.signature-phrase) --------------------------------------------------------- Estiliza a frase de assinatura do portfólio ou currículo, aplicando fonte cursiva, alinhamento central e efeitos de animação para entrada suave na página. Este bloco define: - font-family: 'Dancing Script', cursive para estilo caligráfico - font-size: 36px para destaque visual - margin-top: 32px para espaçamento em relação a elementos acima - color: var(--signature-phrase) para manter consistência com a paleta - text-align: center para centralizar o texto - opacity: 0 e transform: translateY(20px) para iniciar escondido e deslocado verticalmente - transition: opacity 1.2s ease, transform 1.2s ease para animação suave - line-height: 1.4 para melhorar legibilidade do texto IMPORTANTE: - A animação será ativada adicionando a classe .visible via JS ou CSS - Alterar font-size ou margin-top impacta hierarquia visual e espaçamento ========================================================= */ .signature-phrase { font-family: 'Dancing Script', cursive; /* Fonte cursiva elegante para assinatura */ font-size: 36px; /* Destaca visualmente a frase de assinatura */ margin-top: 32px; /* Espaçamento em relação a elementos superiores */ color: var(--signature-phrase); /* Cor definida na paleta de estilos */ text-align: center; /* Centraliza o texto no container */ opacity: 0; /* Inicialmente invisível para animação */ transform: translateY(20px); /* Deslocamento vertical inicial para efeito de entrada */ transition: opacity 1.2s ease, transform 1.2s ease; /* Animação suave de opacidade e posição */ line-height: 1.4; /* Espaçamento entre linhas para legibilidade */ } /* ========================================================= EFEITO DE ENTRADA PARA FRASE DE ASSINATURA (.signature-phrase.visible) --------------------------------------------------------- Define o estado visível da frase de assinatura, ativando animação suave de entrada que faz o texto aparecer e se posicionar no local correto. Este bloco define: - opacity: 1 para tornar o texto totalmente visível - transform: translateY(0) para posicionar o texto na posição original, eliminando deslocamento inicial da animação IMPORTANTE: - A classe .visible geralmente é adicionada via JS quando o elemento entra na viewport ou ao carregar a página - Combina com a transição definida em .signature-phrase ========================================================= */ .signature-phrase.visible { opacity: 1; /* Torna a frase totalmente visível */ transform: translateY(0); /* Remove deslocamento vertical inicial, mostrando a posição final */ } /* ========================================================= LINHA DECORATIVA PARA CERTIFICADOS (.decorative-line-cert) --------------------------------------------------------- Cria uma linha horizontal estilizada para separar seções ou destacar certificados, utilizando gradiente para efeito visual suave. Este bloco define: - border: 0 para remover borda padrão - height: 2px para definir a espessura da linha - width: 80% para ocupar a maior parte do container - margin: 1px auto para centralizar horizontalmente - background: linear-gradient(to right, transparent, var(--bg-color-header), transparent) para criar efeito de fade nas extremidades IMPORTANTE: - A largura e gradiente podem ser ajustadas para destacar mais ou menos a linha - Funciona bem como separador visual entre certificados ou outros blocos de conteúdo ========================================================= */ .decorative-line-cert { border: 0; /* Remove borda padrão do elemento */ height: 2px; /* Define a espessura da linha decorativa */ width: 80%; /* Define largura relativa ao container pai */ margin: 1px auto; /* Centraliza horizontalmente com pequena margem vertical */ background: linear-gradient( to right, transparent, var(--bg-color-header), transparent ); /* Gradiente que cria efeito suave nas extremidades da linha */ } /* ========================================================= LINHA DECORATIVA SUPERIOR (.decorative-line-sup) --------------------------------------------------------- Adiciona espaçamento acima de linhas decorativas ou separadores em seções do portfólio, garantindo melhor hierarquia visual e respiro entre elementos. Este bloco define: - margin-top: 16px para criar espaçamento vertical entre a linha e o conteúdo acima IMPORTANTE: - Ajustar margin-top altera o espaçamento e o equilíbrio visual da seção - Esta linha geralmente complementa títulos ou blocos de conteúdo, funcionando como divisor sutil ========================================================= */ .decorative-line-sup { margin-top: 16px; /* Espaçamento vertical acima da linha decorativa */ } /* ========================================================= DIVISOR DE ITENS DO MENU (.menu-divider-item) --------------------------------------------------------- Estiliza elementos de lista usados como divisores ou espaçadores dentro de menus laterais ou seções do site. Este bloco define: - list-style: none para remover marcadores padrão de lista - padding: 0 para eliminar espaçamento interno padrão - margin: 8px 0 para criar espaço vertical entre itens do menu IMPORTANTE: - Útil para separar visualmente grupos de links ou seções - Ajustar margin altera o espaçamento vertical entre elementos ========================================================= */ .menu-divider-item { list-style: none; /* Remove marcadores padrão da lista */ padding: 0; /* Remove espaçamento interno padrão */ margin: 8px 0; /* Espaçamento vertical entre itens do menu */ } /* ========================================================= LINHA DECORATIVA PARA MENU (.decorative-line-menu) --------------------------------------------------------- Cria uma linha horizontal para separar itens de menu ou seções dentro de menus laterais ou cabeçalhos, utilizando gradiente para efeito sutil. Este bloco define: - border: 0 para remover borda padrão - height: 1px para definir espessura fina da linha - width: 100% para ocupar toda a largura do container - margin: 4px 0 para criar pequeno espaçamento vertical entre elementos - background: linear-gradient(to right, #EAEAEA, #EAEAEA, transparent) para criar efeito de fade na extremidade direita IMPORTANTE: - Gradiente cria transição suave visual, evitando corte brusco - Ajustar height ou margin altera percepção visual da linha ========================================================= */ .decorative-line-menu { border: 0; /* Remove borda padrão do elemento */ height: 1px; /* Define espessura fina da linha decorativa */ width: 100%; /* Ocupa toda a largura do container pai */ margin: 4px 0; /* Espaçamento vertical acima e abaixo da linha */ background: linear-gradient( to right, #EAEAEA, #EAEAEA, transparent ); /* Gradiente sutil da esquerda para a direita */ } /* ========================================================= LINHA DECORATIVA PARA PROJETOS (.decorative-line-projetos) --------------------------------------------------------- Cria uma linha horizontal para separar ou destacar seções de projetos no portfólio, utilizando gradiente para efeito visual suave e elegante. Este bloco define: - border: 0 para remover borda padrão do elemento - height: 1px para definir espessura fina da linha - width: 40% para ocupar menos que a largura total do container - margin: 16px para criar espaçamento uniforme ao redor da linha - background: linear-gradient(to right, var(--linha-proj), var(--linha-proj), transparent) para criar efeito de fade na extremidade direita da linha IMPORTANTE: - Ajustar width ou margin altera o alinhamento e equilíbrio visual - Gradiente utiliza variável CSS (--linha-proj) para manter consistência de cores ========================================================= */ .decorative-line-projetos { border: 0; /* Remove borda padrão do elemento */ height: 1px; /* Define espessura fina da linha decorativa */ width: 40%; /* Largura relativa ao container, menor que 100% */ margin: 16px; /* Espaçamento uniforme ao redor da linha */ background: linear-gradient( to right, var(--linha-proj), var(--linha-proj), transparent ); /* Gradiente sutil da esquerda para a direita */ } /* ========================================================= BOTÕES DE TROCA DE TEMA (#theme-toggle-home, #theme-toggle-portfolio) --------------------------------------------------------- Estiliza os botões de alternância de tema (ex: claro/escuro) nas páginas Home e Portfólio, garantindo consistência visual e interatividade. Este bloco define: - background: none para remover qualquer fundo padrão - border: none para remover bordas padrão do botão - cursor: pointer para indicar interatividade - font-size: 28px para tornar o ícone ou símbolo visível - color: var(--header-name) para manter consistência de cores - transition: transform 0.2s ease, color 0.2s ease para animação suave de escala e cor durante hover ou clique IMPORTANTE: - Usado geralmente em conjunto com ícones (ex: sol/lua) - Alterar font-size ou color afeta a visibilidade e hierarquia visual ========================================================= */ #theme-toggle-home, #theme-toggle-portfolio { background: none; /* Remove fundo padrão do botão */ border: none; /* Remove borda padrão do botão */ cursor: pointer; /* Indica que o botão é clicável */ font-size: 28px; /* Define tamanho do ícone/texto do botão */ color: var(--header-name); /* Mantém cor consistente com o header */ transition: transform 0.2s ease, color 0.2s ease; /* Anima suavemente mudanças de cor e transformação */ } /* ========================================================= HOVER PARA BOTÕES DE TROCA DE TEMA (#theme-toggle-home:hover, #theme-toggle-portfolio:hover) --------------------------------------------------------- Define o comportamento visual ao passar o mouse sobre os botões de alternância de tema, aumentando a percepção de interatividade. Este bloco define: - color: var(--accent-color) para destacar o botão com a cor principal do tema ou site durante o hover IMPORTANTE: - Combina com a transição definida em #theme-toggle-home e #theme-toggle-portfolio para suavidade - Não altera tamanho nem posição, apenas a cor ========================================================= */ #theme-toggle-home:hover, #theme-toggle-portfolio:hover { color: var(--accent-color); /* Destaca o botão com a cor principal ao passar o mouse */ } /* ========================================================= ÍCONES DE TEMAS INICIAIS (#theme-icon-home, #theme-icon-portfolio) --------------------------------------------------------- Define o estado inicial dos ícones de alternância de tema antes de entrarem em cena (ex: animação ou carregamento). Este bloco define: - opacity: 0 para iniciar invisível - transform: scale(0.8) para reduzir levemente o tamanho inicial, criando efeito de “entrada” ao aparecer - transition: opacity 0.8s ease, transform 0.8s ease para animação suave ao tornar visível ou mudar de escala IMPORTANTE: - A transição será ativada adicionando classes via JS ou alterações de estado - Mantém consistência visual com efeitos de fade e zoom ========================================================= */ #theme-icon-home, #theme-icon-portfolio { opacity: 0; /* Inicialmente invisível para efeito de entrada */ transform: scale(0.8); /* Reduz levemente o tamanho inicial para animação */ transition: opacity 0.8s ease, transform 0.8s ease; /* Define transição suave de opacidade e escala */ } /* ========================================================= ÍCONES DE TEMAS VISÍVEIS APÓS CARREGAMENTO (#theme-toggle-home.loaded #theme-icon-home, #theme-toggle-portfolio.loaded #theme-icon-portfolio) --------------------------------------------------------- Define o estado visível dos ícones de alternância de tema quando o botão possui a classe .loaded, ativando animação de entrada suave. Este bloco define: - opacity: 1 para tornar o ícone totalmente visível - transform: scale(1) para posicionar o ícone em tamanho normal, removendo a escala inicial menor IMPORTANTE: - Combina com a transição definida em #theme-icon-home e #theme-icon-portfolio para efeito de fade + zoom - A classe .loaded é geralmente adicionada via JS após carregamento ou inicialização do tema ========================================================= */ #theme-toggle-home.loaded #theme-icon-home, #theme-toggle-portfolio.loaded #theme-icon-portfolio { opacity: 1; /* Torna o ícone visível */ transform: scale(1); /* Restaura tamanho original, removendo escala inicial */ } /* ========================================================= SUBTÍTULO PARA TECNOLOGIAS (.tech-subtitle-sup) --------------------------------------------------------- Estiliza subtítulos ou legendas de seções de tecnologias no portfólio ou certificados, criando hierarquia visual e destaque sutil. Este bloco define: - font-size: 14px para subtítulo menor que o texto principal - color: var(--link-cert) para manter consistência com links ou cores de destaque - font-style: italic para diferenciar do texto principal - margin: 2px 0 12px 0 para espaçamento vertical acima e abaixo - line-height: 1.4 para legibilidade do subtítulo IMPORTANTE: - Usado geralmente como complemento de títulos de seções - Ajustar margin ou font-size altera hierarquia visual ========================================================= */ .tech-subtitle-sup { font-size: 14px; /* Tamanho menor que o texto principal para hierarquia */ color: var(--link-cert); /* Cor de destaque consistente com links e certificados */ font-style: italic; /* Diferencia visualmente o subtítulo do texto principal */ margin: 2px 0 12px 0; /* Espaçamento vertical acima e abaixo do subtítulo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= PARÁGRAFOS DENTRO DE SUBTÍTULOS DE TECNOLOGIAS (.tech-subtitle-sup p) --------------------------------------------------------- Estiliza parágrafos que estão dentro de subtítulos de tecnologias ou legendas, garantindo consistência visual com o subtítulo pai. Este bloco define: - font-size: 14px para manter tamanho de subtítulo - color: var(--link-cert) para cor consistente com links e destaque - font-style: italic para diferenciar do texto principal - margin: 2px 0 12px 0 para espaçamento vertical adequado - line-height: 1.4 para legibilidade do texto IMPORTANTE: - Mantém consistência com .tech-subtitle-sup - Ajustar margin ou font-size altera hierarquia visual ========================================================= */ .tech-subtitle-sup p { font-size: 14px; /* Mantém tamanho de subtítulo */ color: var(--link-cert); /* Cor consistente com subtítulo e links */ font-style: italic; /* Mantém estilo itálico do subtítulo */ margin: 2px 0 12px 0; /* Espaçamento vertical acima e abaixo do parágrafo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= SUBTÍTULO PARA TECNOLOGIAS (.tech-subtitle) --------------------------------------------------------- Estiliza subtítulos ou legendas de tecnologias no portfólio, garantindo consistência visual e hierarquia dentro da seção. Este bloco define: - font-size: 14px para manter tamanho menor que o texto principal - color: var(--link-cert) para manter consistência com links e cores de destaque - font-style: italic para diferenciar do texto principal - margin: 12px 0 para criar espaçamento vertical uniforme acima e abaixo - line-height: 1.4 para legibilidade e espaçamento entre linhas IMPORTANTE: - Usado para títulos de subseções ou legendas de conteúdo técnico - Ajustar margin ou font-size altera a hierarquia visual da seção ========================================================= */ .tech-subtitle { font-size: 14px; /* Tamanho menor que o texto principal para hierarquia */ color: var(--link-cert); /* Cor consistente com links e destaque de certificados */ font-style: italic; /* Diferencia visualmente o subtítulo do texto principal */ margin: 12px 0; /* Espaçamento vertical acima e abaixo do subtítulo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= PARÁGRAFOS DENTRO DE SUBTÍTULOS DE TECNOLOGIAS (.tech-subtitle p) --------------------------------------------------------- Estiliza parágrafos que estão dentro de subtítulos de tecnologias, garantindo consistência visual com o subtítulo pai (.tech-subtitle). Este bloco define: - font-size: 14px para manter tamanho de subtítulo - color: var(--link-cert) para cor consistente com links e destaque - font-style: italic para diferenciar do texto principal - margin: 12px 0 para espaçamento vertical adequado - line-height: 1.4 para legibilidade do texto IMPORTANTE: - Mantém consistência com .tech-subtitle - Ajustar margin ou font-size altera hierarquia visual ========================================================= */ .tech-subtitle p { font-size: 14px; /* Mantém tamanho de subtítulo para os parágrafos */ color: var(--link-cert); /* Cor consistente com subtítulo e links */ font-style: italic; /* Mantém estilo itálico do subtítulo */ margin: 12px 0; /* Espaçamento vertical acima e abaixo do parágrafo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= SUBTÍTULO INFERIOR PARA TECNOLOGIAS (.tech-subtitle-inf) --------------------------------------------------------- Estiliza subtítulos ou legendas inferiores em seções de tecnologias, garantindo consistência visual e hierarquia dentro da seção. Este bloco define: - font-size: 14px para manter tamanho menor que o texto principal - color: var(--link-cert) para consistência com links e destaque - font-style: italic para diferenciar do texto principal - margin: 12px 0 0 0 para espaçamento apenas acima, sem margem inferior - line-height: 1.4 para legibilidade e espaçamento entre linhas IMPORTANTE: - Usado para legendas ou notas inferiores de seções de tecnologias - Ajustar margin ou font-size altera a hierarquia visual da seção ========================================================= */ .tech-subtitle-inf { font-size: 14px; /* Tamanho menor que o texto principal para hierarquia */ color: var(--link-cert); /* Cor consistente com links e destaque */ font-style: italic; /* Diferencia visualmente o subtítulo inferior */ margin: 12px 0 0 0; /* Espaçamento vertical apenas acima do subtítulo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= PARÁGRAFOS DENTRO DE SUBTÍTULOS INFERIORES DE TECNOLOGIAS (.tech-subtitle-inf p) --------------------------------------------------------- Estiliza parágrafos que estão dentro de subtítulos inferiores de tecnologias, garantindo consistência visual com o subtítulo pai (.tech-subtitle-inf). Este bloco define: - font-size: 14px para manter tamanho de subtítulo - color: var(--link-cert) para cor consistente com links e destaque - font-style: italic para diferenciar do texto principal - margin: 12px 0 0 0 para espaçamento apenas acima, sem margem inferior - line-height: 1.4 para legibilidade do texto IMPORTANTE: - Mantém consistência com .tech-subtitle-inf - Ajustar margin ou font-size altera hierarquia visual ========================================================= */ .tech-subtitle-inf p { font-size: 14px; /* Mantém tamanho de subtítulo para os parágrafos */ color: var(--link-cert); /* Cor consistente com subtítulo inferior e links */ font-style: italic; /* Mantém estilo itálico do subtítulo inferior */ margin: 12px 0 0 0; /* Espaçamento vertical apenas acima do parágrafo */ line-height: 1.4; /* Legibilidade e espaçamento entre linhas */ } /* ========================================================= TÍTULO DE TECNOLOGIAS (.tech-title) --------------------------------------------------------- Estiliza títulos principais dentro das seções de tecnologias, garantindo destaque e hierarquia visual consistente. Este bloco define: - font-weight: 600 para dar ênfase e negrito ao título - font-size: 16px para tamanho maior que subtítulos e parágrafos - margin-top: 20px para espaçamento acima do título - margin-bottom: 4px para pequeno espaçamento abaixo do título - color: var(--tech-title) para consistência visual com tema de tecnologias IMPORTANTE: - Usado como título de subseções dentro da área de tecnologia - Ajustar margin ou font-size altera hierarquia e leitura ========================================================= */ .tech-title { font-weight: 600; /* Negrito para destaque do título */ font-size: 16px; /* Tamanho maior que subtítulos e parágrafos */ margin-top: 20px; /* Espaçamento acima para separar do conteúdo anterior */ margin-bottom: 4px; /* Pequeno espaçamento abaixo do título */ color: var(--tech-title); /* Cor consistente com tema de tecnologias */ } /* ========================================================= PARÁGRAFOS DENTRO DE TÍTULOS DE TECNOLOGIAS (.tech-title p) --------------------------------------------------------- Estiliza parágrafos que estão dentro de títulos de tecnologias, garantindo consistência visual e hierarquia com o título pai (.tech-title). Este bloco define: - font-weight: 600 para manter ênfase e destaque - font-size: 18px para que o parágrafo seja ligeiramente maior que o título pai, podendo destacar informações importantes - margin: 16px 0 para espaçamento vertical uniforme - color: var(--tech-title) para consistência com o título da tecnologia IMPORTANTE: - Mantém destaque e hierarquia visual dentro da seção de tecnologias - Ajustar font-size ou margin altera percepção e legibilidade ========================================================= */ .tech-title p { font-weight: 600; /* Mantém ênfase e destaque do parágrafo */ font-size: 18px; /* Maior que o título pai para chamar atenção ao conteúdo */ margin: 16px 0; /* Espaçamento vertical uniforme acima e abaixo */ color: var(--tech-title); /* Cor consistente com o título da tecnologia */ } /* ========================================================= DESCRIÇÃO DE TECNOLOGIAS (.tech-desc) --------------------------------------------------------- Estiliza textos descritivos dentro das seções de tecnologias, fornecendo informações adicionais sobre ferramentas ou skills. Este bloco define: - font-size: 15px para texto de corpo, menor que títulos - opacity: 0.8 para suavizar a presença do texto, deixando-o menos dominante que títulos e subtítulos - line-height: 1.4 para legibilidade e espaçamento entre linhas - margin-bottom: 8px para separar do próximo elemento - color: var(--tech-desc) para consistência com o tema de tecnologias IMPORTANTE: - Usado em descrições ou explicações de habilidades ou ferramentas - Ajustar font-size, opacity ou margin altera hierarquia visual ========================================================= */ .tech-desc { font-size: 15px; /* Tamanho menor que títulos, adequado para descrição */ opacity: 0.8; /* Torna o texto levemente translúcido para suavidade */ line-height: 1.4; /* Espaçamento entre linhas para legibilidade */ margin-bottom: 8px; /* Espaçamento abaixo do texto para separar de próximos elementos */ color: var(--tech-desc); /* Cor consistente com tema de descrições de tecnologias */ } /* ========================================================= LISTA DE EXPERIÊNCIAS (.exp-list) --------------------------------------------------------- Estiliza listas de experiências ou responsabilidades dentro de seções de experiência profissional. Este bloco define: - margin: 16px 0 para espaçamento vertical acima e abaixo da lista - padding-left: 22px para alinhar o conteúdo da lista com indentação - list-style-type: disc para exibir marcadores padrão de lista - color: var(--text-color) para consistência com o texto principal - font-size: 0.95rem para tamanho de texto adequado dentro da lista - line-height: 1.65 para legibilidade e espaçamento entre linhas - opacity: 0.9 para suavizar ligeiramente a presença do texto IMPORTANTE: - Usado para responsabilidades, tarefas ou detalhes de experiência - Ajustar margin, padding ou font-size altera hierarquia e legibilidade ========================================================= */ .exp-list { margin: 16px 0; /* Espaçamento vertical acima e abaixo da lista */ padding-left: 22px; /* Indentação para alinhar os itens da lista */ list-style-type: disc; /* Marcadores padrão de lista */ color: var(--text-color); /* Cor consistente com o texto da seção de experiências */ font-size: 0.95rem; /* Tamanho do texto adequado para listas */ line-height: 1.65; /* Espaçamento entre linhas para legibilidade */ opacity: 0.9; /* Suaviza ligeiramente a presença do texto */ } /* ========================================================= ITENS DA LISTA DE EXPERIÊNCIAS (.exp-list li) --------------------------------------------------------- Estiliza cada item individual dentro da lista de experiências ou responsabilidades, garantindo espaçamento adequado entre eles. Este bloco define: - margin-bottom: 8px para separar visualmente cada item da lista IMPORTANTE: - Mantém a lista organizada e legível - Ajustar margin-bottom altera o espaçamento entre itens ========================================================= */ .exp-list li { margin-bottom: 8px; /* Espaçamento abaixo de cada item da lista */ } /* ========================================================= SEÇÃO DE PROJETOS (.project-section) --------------------------------------------------------- Estiliza cada bloco ou seção de projeto dentro do portfólio, fornecendo espaçamento adequado entre projetos. Este bloco define: - margin-bottom: 12px para criar distância entre esta seção e a próxima, evitando que os projetos fiquem muito juntos IMPORTANTE: - Usado para separar visualmente projetos listados em sequência - Ajustar margin-bottom altera o espaçamento vertical entre seções ========================================================= */ .project-section { margin-bottom: 12px; /* Espaçamento abaixo da seção de projeto */ } /* ========================================================= SUMMARY DE PROJETOS (.project-section summary) --------------------------------------------------------- Estiliza o elemento dentro de cada seção de projeto, geralmente usado em detalhes expansíveis (
    ) para títulos ou cabeçalhos de projetos. Este bloco define: - display: flex para alinhar o conteúdo horizontalmente - align-items: center para centralizar verticalmente os itens - justify-content: space-between para separar título e ícone de toggle - font-weight: 600 para dar ênfase ao título do projeto - cursor: pointer para indicar interatividade ao usuário - list-style: none para remover marcadores padrão de lista - position: relative para permitir posicionamentos internos absolutos - padding-left: 18px para criar espaçamento interno à esquerda IMPORTANTE: - Usado em combinação com
    para permitir expandir/colapsar conteúdo - Ajustar padding ou justify-content altera a apresentação visual do header ========================================================= */ .project-section summary { display: flex; /* Alinha itens horizontalmente */ align-items: center; /* Centraliza verticalmente os itens do summary */ justify-content: space-between; /* Separa título e ícone de toggle nos extremos */ font-weight: 600; /* Dá ênfase ao título do projeto */ cursor: pointer; /* Indica que o summary é clicável */ list-style: none; /* Remove marcadores padrão de lista */ position: relative; /* Permite posicionamento interno de elementos absolutos */ padding-left: 18px; /* Espaçamento interno à esquerda */ } /* ========================================================= REMOÇÃO DO MARCADOR PADRÃO DO SUMMARY (.project-section summary::-webkit-details-marker) --------------------------------------------------------- Remove o marcador padrão (seta) exibido pelo navegador para elementos dentro das seções de projeto. Este bloco define: - display: none para ocultar o marcador padrão IMPORTANTE: - Usado para permitir a personalização do toggle do summary - Funciona apenas em navegadores baseados em WebKit (Chrome, Safari) - Para compatibilidade cross-browser, pode-se adicionar pseudo-elementos personalizados ========================================================= */ .project-section summary::-webkit-details-marker { display: none; /* Oculta o marcador padrão de */ } /* ========================================================= ÍCONE PERSONALIZADO ANTES DO SUMMARY (.project-section summary::before) --------------------------------------------------------- Adiciona um marcador personalizado antes do elemento em seções de projetos, geralmente usado como seta para toggle. Este bloco define: - content: "▸" para exibir o ícone de seta antes do texto - font-size: 0.9rem para tamanho adequado e proporcional ao texto - position: absolute para posicionar o ícone relativamente ao summary - left: 0 para alinhar o ícone à esquerda do summary - font-weight: 600 para manter consistência com títulos em negrito - transition: transform 0.4s cubic-bezier(...) para animação suave quando a seta gira ao expandir/colapsar o summary IMPORTANTE: - Funciona em conjunto com a rotação do summary quando aberto - Permite personalização do estilo de toggle sem o marcador padrão ========================================================= */ .project-section summary::before { content: "▸"; /* Ícone de seta personalizado */ font-size: 0.9rem; /* Tamanho proporcional ao texto */ position: absolute; /* Permite posicionamento em relação ao summary */ left: 0; /* Alinha o ícone à esquerda */ font-weight: 600; /* Mantém consistência com o texto em negrito */ transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animação suave para girar a seta ao expandir/colapsar */ } /* ========================================================= ROTAÇÃO DO ÍCONE QUANDO O SUMMARY ESTÁ ABERTO (.project-section[open] summary::before) --------------------------------------------------------- Gira o ícone personalizado antes do summary quando a seção de projeto (
    ) está expandida. Este bloco define: - transform: rotate(90deg) para girar a seta 90 graus indicando visualmente que o conteúdo está aberto IMPORTANTE: - Funciona em conjunto com .project-section summary::before - Mantém feedback visual consistente ao usuário - O valor 90deg é padrão para indicar expansão; pode ser ajustado para outras orientações de seta ========================================================= */ .project-section[open] summary::before { transform: rotate(90deg); /* Gira a seta 90° quando a seção está aberta */ } /* ========================================================= PARÁGRAFOS DIRETOS DENTRO DE PROJECT SECTION (.project-section > p) --------------------------------------------------------- Estiliza parágrafos diretamente contidos em cada seção de projeto, normalmente usados para descrição ou detalhes do projeto. Este bloco define: - margin-top: 8px para espaçamento acima do parágrafo - text-align: justify para alinhamento uniforme do texto - font-size: 15px para legibilidade e consistência com descrições - line-height: 1.6 para espaçamento confortável entre linhas - animation: fadeInDetails 0.4s ease para animação suave de entrada quando o parágrafo aparece IMPORTANTE: - Animação fadeInDetails deve estar definida em outro bloco do CSS com keyframes correspondentes - Ajustar margin, font-size ou line-height altera legibilidade ========================================================= */ .project-section > p { margin-top: 8px; /* Espaçamento acima do parágrafo */ text-align: justify; /* Alinhamento uniforme do texto */ font-size: 15px; /* Tamanho de fonte adequado para descrições de projetos */ line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */ animation: fadeInDetails 0.4s ease; /* Animação suave de entrada do parágrafo */ } /* ========================================================= CONTEÚDO DE DIVULGAÇÃO EM PROJECT SECTION (.project-section .disclosure-content) --------------------------------------------------------- Estiliza o conteúdo expansível dentro de uma seção de projeto, usado geralmente em toggles ou detalhes adicionais que ficam ocultos inicialmente. Este bloco define: - opacity: 0 para manter o conteúdo invisível até ser ativado IMPORTANTE: - Funciona em conjunto com scripts ou classes que ativam a visibilidade (ex: adicionar classe .visible) - Pode ser animado usando transições ou keyframes para efeito de fade-in ========================================================= */ .project-section .disclosure-content { opacity: 0; /* Mantém o conteúdo inicialmente invisível */ } /* ========================================================= ANIMAÇÃO DE CONTEÚDO EXPANSÍVEL EM PROJECT SECTION (.project-section[open] .disclosure-content) --------------------------------------------------------- Aplica animação ao conteúdo expansível dentro da seção de projeto quando o elemento
    é aberto. Este bloco define: - animation: fadeInDisclosure 0.8s ease forwards • fadeInDisclosure: keyframes que devem estar definidos em outro bloco do CSS para animar a entrada do conteúdo • 0.8s: duração da animação • ease: curva de aceleração/desaceleração suave • forwards: mantém o estado final da animação (visível) IMPORTANTE: - Garante efeito de fade-in quando o usuário expande o projeto - Funciona junto com .project-section .disclosure-content { opacity: 0; } ========================================================= */ .project-section[open] .disclosure-content { animation: fadeInDisclosure 0.8s ease forwards; /* Animação de entrada do conteúdo quando a seção é aberta */ } /* ========================================================= ANIMAÇÃO FADE-IN PARA CONTEÚDO DE PROJECT SECTION (@keyframes fadeInDisclosure) --------------------------------------------------------- Define a animação usada para revelar o conteúdo expansível (.disclosure-content) quando a seção de projeto é aberta. Este bloco define: - from: estado inicial da animação • opacity: 0 → conteúdo invisível no início • transform: translateY(16px) → conteúdo deslocado 16px para baixo - to: estado final da animação • opacity: 1 → conteúdo totalmente visível • transform: translateY(0) → conteúdo na posição original IMPORTANTE: - Esta animação é aplicada em .project-section[open] .disclosure-content - Cria efeito de fade-in combinado com leve movimento para cima - Pode ser ajustada alterando duração, distância ou curva de easing ========================================================= */ @keyframes fadeInDisclosure { from { opacity: 0; /* Começa invisível */ transform: translateY(16px); /* Deslocamento vertical inicial para efeito de slide-up */ } to { opacity: 1; /* Termina totalmente visível */ transform: translateY(0); /* Conteúdo retorna à posição original */ } } /* ========================================================= TRANSIÇÃO DE CONTEÚDO EXPANSÍVEL (.disclosure-content) --------------------------------------------------------- Estiliza a transição visual do conteúdo expansível dentro da seção de projeto, permitindo animações suaves ao expandir ou recolher. Este bloco define: - overflow: hidden para evitar que o conteúdo ultrapasse o container - transition: define animações suaves para: • height: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) → animação suave do crescimento/retração vertical do conteúdo • opacity: 0.4s ease → fade-in e fade-out do conteúdo IMPORTANTE: - Funciona em conjunto com keyframes ou alterações de classe que controlam visibilidade e altura - Ajustar valores de tempo ou curva de easing altera percepção da animação ========================================================= */ .disclosure-content { overflow: hidden; /* Oculta conteúdo que ultrapassa o container */ transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease; /* Transição suave de altura e opacidade */ } /* ========================================================= TEXTO DENTRO DE SUMMARY (.summary-text) --------------------------------------------------------- Estiliza elementos de texto dentro do em seções expansíveis ou toggles, garantindo consistência visual e removendo estilos padrões indesejados. Este bloco define: - all: unset → remove todos os estilos herdados ou padrões do navegador - color: var(--summary-text) → cor do texto consistente com o tema - font-size: 16px → tamanho de fonte legível para títulos ou labels IMPORTANTE: - all: unset deve ser usado com cuidado, pois remove heranças e propriedades padrão como display, margin, padding - Pode ser combinado com outras propriedades para reestilização completa ========================================================= */ .summary-text { all: unset; /* Remove todos os estilos padrões e herdados do navegador */ color: var(--summary-text); /* Cor do texto consistente com o tema */ font-size: 16px; /* Tamanho da fonte legível e uniforme */ } /* ========================================================= ÍCONE DENTRO DE SUMMARY (.summary-icon) --------------------------------------------------------- Estiliza ícones ou elementos gráficos dentro do , garantindo consistência com o texto e removendo estilos padrão do navegador. Este bloco define: - all: unset → remove todos os estilos herdados ou padrões do navegador - color: var(--summary-text) → cor consistente com o texto do summary - font-size: 16px → tamanho uniforme e proporcional ao texto IMPORTANTE: - all: unset remove heranças e propriedades padrão (ex: margin, padding) - Ideal para ícones inline que acompanham labels de summary ========================================================= */ .summary-icon { all: unset; /* Remove todos os estilos padrões e herdados do navegador */ color: var(--summary-text); /* Cor consistente com o texto do summary */ font-size: 16px; /* Tamanho uniforme e proporcional ao texto */ } /* ========================================================= LISTA DE CURSOS (.courses-list) --------------------------------------------------------- Estiliza a lista de cursos ou formações, organizando os itens em coluna para melhor legibilidade. Este bloco define: - display: flex → define layout flexível - flex-direction: column → organiza os itens verticalmente IMPORTANTE: - Cada curso ou formação pode ser um item dentro da lista - Pode ser combinado com gap ou margin nos itens para espaçamento ========================================================= */ .courses-list { display: flex; /* Ativa layout flexível para a lista de cursos */ flex-direction: column; /* Organiza os itens verticalmente */ } /* ========================================================= ITEM DA LISTA DE CURSOS (.course-list-item) --------------------------------------------------------- Estiliza cada item individual dentro da lista de cursos, permitindo interatividade e separação visual clara entre os cursos. Este bloco define: - display: flex → organiza o conteúdo interno do item horizontalmente - justify-content: space-between → separa título e informações adicionais - border-bottom: 1px solid var(--divider-color) → cria linha divisória entre itens - margin: 0px → remove margens externas - padding: 12px 8px → adiciona espaçamento interno ao redor do conteúdo - cursor: pointer → indica que o item é interativo/clicável - border-radius: 8px → cantos arredondados para aparência suave - transition: background-color 0.4s ease, color 0.4s ease → animação suave ao alterar cores em hover ou estados ativos IMPORTANTE: - Mantém consistência visual e feedback ao usuário - Ajustar padding ou border-radius altera aparência e espaçamento ========================================================= */ .course-list-item { display: flex; /* Layout flexível para alinhar conteúdo horizontalmente */ justify-content: space-between; /* Separa o conteúdo nos extremos (ex: título e data) */ border-bottom: 1px solid var(--divider-color); /* Linha divisória inferior entre itens da lista */ margin: 0px; /* Remove margens externas */ padding: 12px 8px; /* Espaçamento interno do item */ cursor: pointer; /* Indica interatividade */ border-radius: 8px; /* Cantos arredondados para suavizar aparência */ transition: background-color 0.4s ease, color 0.4s ease; /* Transição suave ao alterar cores */ } /* ========================================================= HOVER NOS ITENS DE CURSOS (.course-list-item:hover) --------------------------------------------------------- Estiliza o efeito visual quando o usuário passa o mouse sobre um item da lista de cursos, fornecendo feedback interativo. Este bloco define: - background-color: var(--bg-color-header) → altera a cor de fundo para destacar o item selecionado - color: #F8F8F8 → altera a cor do texto para contraste com o fundo IMPORTANTE: - Funciona em conjunto com a propriedade transition definida em .course-list-item para suavizar a animação - Ajustar cores altera o contraste e percepção visual do hover ========================================================= */ .course-list-item:hover { background-color: var(--bg-color-header); /* Destaca o item ao passar o mouse */ color: #F8F8F8; /* Texto claro para contraste com o fundo */ } /* ========================================================= NOME DO CURSO (.course-name) --------------------------------------------------------- Estiliza o título ou nome de cada curso dentro da lista de cursos, garantindo legibilidade e consistência visual. Este bloco define: - font-weight: 500 → peso médio da fonte, balanceando destaque e legibilidade - font-size: 16px → tamanho da fonte adequado para leitura IMPORTANTE: - Pode ser combinado com outras propriedades (como color) para integrar ao tema geral do portfólio - Mantém consistência com outros textos de títulos de seções ========================================================= */ .course-name { font-weight: 500; /* Peso médio da fonte para destaque sem exagero */ font-size: 16px; /* Tamanho de fonte legível e uniforme */ } /* ========================================================= DATA DO CURSO (.course-date) --------------------------------------------------------- Estiliza a data associada a cada curso na lista de cursos, fornecendo informação complementar de forma discreta. Este bloco define: - opacity: 0.8 → suaviza a cor do texto para diferenciar da informação principal (nome do curso) - font-size: 16px → mantém o tamanho consistente com o nome do curso IMPORTANTE: - A opacidade permite que a data seja visível, mas sem competir visualmente com o título do curso - Pode ser combinada com font-style ou color para diferenciar ainda mais ========================================================= */ .course-date { opacity: 0.8; /* Suaviza a visibilidade para não competir com o nome do curso */ font-size: 16px; /* Mantém tamanho consistente com o título do curso */ } /* ========================================================= PRIMEIRO ITEM DA LISTA DE CURSOS (.course-list-item.first) --------------------------------------------------------- Adiciona espaçamento extra no topo apenas para o primeiro item da lista de cursos, garantindo consistência visual e evitando que fique colado ao container pai. Este bloco define: - margin-top: 12px → cria espaço acima do primeiro item IMPORTANTE: - Aplica-se somente ao item que possui a classe adicional .first - Mantém alinhamento e espaçamento uniforme na lista de cursos - Não afeta os demais itens da lista ========================================================= */ .course-list-item.first { margin-top: 12px; /* Espaçamento extra acima do primeiro item da lista */ } /* ========================================================= ÚLTIMO ITEM DA LISTA DE CURSOS (.course-list-item.last) --------------------------------------------------------- Adiciona espaçamento extra abaixo apenas para o último item da lista de cursos, garantindo consistência visual e evitando que fique colado ao container pai. Este bloco define: - margin-bottom: 12px → cria espaço abaixo do último item IMPORTANTE: - Aplica-se somente ao item que possui a classe adicional .last - Mantém alinhamento e espaçamento uniforme na lista de cursos - Não afeta os demais itens da lista ========================================================= */ .course-list-item.last { margin-bottom: 12px; /* Espaçamento extra abaixo do último item da lista */ } /* ========================================================= GRID DE CURSOS (.courses-grid) --------------------------------------------------------- Organiza cursos ou cards de forma responsiva utilizando CSS Grid, permitindo que se ajustem automaticamente ao tamanho do container. Este bloco define: - display: grid → ativa o layout em grade para os cursos - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) • auto-fill: cria quantas colunas couberem no container • minmax(220px, 1fr): cada coluna terá no mínimo 220px e crescerá até preencher igualmente o espaço disponível - gap: 16px → espaçamento uniforme entre linhas e colunas IMPORTANTE: - Grid responsivo que se adapta a diferentes larguras de tela - Ideal para exibir cards de cursos ou certificações ========================================================= */ .courses-grid { display: grid; /* Ativa o layout em grade */ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Colunas responsivas que se ajustam automaticamente */ gap: 16px; /* Espaçamento uniforme entre os itens da grid */ } /* ========================================================= ITEM DA GRID DE CURSOS (.course-grid-item) --------------------------------------------------------- Estiliza cada item dentro da grade de cursos, geralmente usado para cards ou mini-containers de curso/certificação. Este bloco define: - border: none → remove bordas padrões - background: none → remove fundo padrão - box-shadow: none → remove sombras padrão - display: flex → permite alinhar conteúdo internamente - justify-content: center → centraliza conteúdo horizontalmente - align-items: center → centraliza conteúdo verticalmente IMPORTANTE: - Mantém cada item limpo e pronto para receber conteúdo personalizado (ex: imagens, textos, links) - Pode ser combinado com padding, gap ou hover para estilização adicional ========================================================= */ .course-grid-item { border: none; /* Remove borda padrão do item */ background: none; /* Remove fundo padrão do item */ box-shadow: none; /* Remove sombra padrão do item */ display: flex; /* Ativa layout flexível para alinhar conteúdo */ justify-content: center; /* Centraliza conteúdo horizontalmente */ align-items: center; /* Centraliza conteúdo verticalmente */ } /* ========================================================= IMAGEM DENTRO DO ITEM DA GRID DE CURSOS (.course-grid-item img) --------------------------------------------------------- Estiliza imagens exibidas dentro de cada item da grade de cursos ou certificações, garantindo consistência visual e interatividade. Este bloco define: - border: 1px solid var(--fixed-header-section) → borda fina para destaque - border-radius: 6px → cantos arredondados para suavidade visual - padding: 2px → pequeno espaçamento interno entre a borda e a imagem - width: 240px → largura fixa do card/imagem - height: 170px → altura fixa do card/imagem - display: block → remove comportamentos inline e permite margens precisas - margin: 16px → espaçamento externo para separar dos outros itens - cursor: pointer → indica interatividade clicável - transition: transform 0.2s ease, box-shadow 0.2s ease → animação suave para efeitos de hover ou clique IMPORTANTE: - Mantém padrão uniforme para todas as imagens da grid - Facilita efeitos visuais ao interagir com a imagem ========================================================= */ .course-grid-item img { border: 1px solid var(--fixed-header-section); /* Borda fina para destacar a imagem */ border-radius: 6px; /* Cantos arredondados para suavidade visual */ padding: 2px; /* Espaço entre borda e imagem */ width: 240px; height: 170px; /* Dimensões fixas consistentes para todas as imagens */ display: block; /* Garante comportamento de bloco, evitando alinhamento inline */ margin: 16px; /* Espaçamento externo uniforme */ cursor: pointer; /* Indica que a imagem é clicável/interativa */ transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animações suaves para hover ou efeitos de foco */ } /* ========================================================= CLASSE DE OCULTAÇÃO (.hidden) --------------------------------------------------------- Permite esconder qualquer elemento do DOM sem removê-lo completamente, útil para toggles, modais ou animações. Este bloco define: - display: none → o elemento não será renderizado visualmente e não ocupará espaço na página IMPORTANTE: - O elemento continua presente no DOM e pode ser manipulado via JavaScript ou removido de forma condicional - Útil para controles de visibilidade, menus, pop-ups, etc. ========================================================= */ .hidden { display: none; /* Oculta completamente o elemento e libera espaço na página */ } /* ========================================================= BLOCO DE CURSOS (.course-block) --------------------------------------------------------- Define o espaçamento superior para containers ou seções que agrupam cursos, garantindo alinhamento com outros elementos da página. Este bloco define: - margin-top: 0px → remove qualquer espaço acima do bloco, alinhando-o diretamente com o elemento anterior IMPORTANTE: - Pode ser ajustado se for necessário criar mais espaçamento entre seções - Útil para controlar layout vertical de listas ou grids de cursos ========================================================= */ .course-block { margin-top: 0px; /* Remove espaçamento superior do bloco de cursos */ } /* ========================================================= PARÁGRAFOS DENTRO DO BLOCO DE CURSOS (.course-block p) --------------------------------------------------------- Estiliza o texto dentro de cada bloco de cursos ou seções de cursos em fluxo (flow), garantindo legibilidade e consistência visual. Este bloco define: - font-size: 16px → tamanho de fonte legível e uniforme - line-height: 1.8 → espaçamento entre linhas para melhor leitura - margin: 0 0 8px 16px → remove margem superior e lateral esquerda, adiciona margem inferior de 8px e margem esquerda de 16px para alinhamento - color: var(--courses-flow) → cor do texto consistente com o tema de cursos IMPORTANTE: - Mantém legibilidade e espaçamento coerente com outros elementos - Ajustar margin-left ou line-height afeta o layout visual do bloco ========================================================= */ .course-block p { font-size: 16px; /* Tamanho de fonte legível */ line-height: 1.8; /* Espaçamento entre linhas para melhor leitura */ margin: 0 0 8px 16px; /* Margem inferior e alinhamento à esquerda */ color: var(--courses-flow); /* Cor do texto consistente com o tema de cursos */ } /* ========================================================= LINKS DENTRO DO BLOCO DE CURSOS (.course-block a) --------------------------------------------------------- Estiliza links contidos em cada bloco de cursos, garantindo espaçamento consistente entre eles e melhor organização visual. Este bloco define: - margin: 8px 0 → adiciona espaçamento vertical acima e abaixo do link, separando-o de outros elementos do bloco IMPORTANTE: - Mantém consistência visual e evita que links fiquem muito próximos de parágrafos ou outros links - Pode ser combinado com hover, color ou text-decoration para indicar interatividade ========================================================= */ .course-block a { margin: 8px 0; /* Espaçamento vertical para separar o link de outros elementos */ } /* ========================================================= CONTEÚDO DO BLOCO DE CURSOS (.course-block-content) --------------------------------------------------------- Define a área interna de cada bloco de curso, que pode conter textos, links, imagens ou outros elementos. Suporta animações de entrada suave e layout vertical. Este bloco define: - position: relative → permite posicionamento interno de elementos com base no container - display: flex → ativa layout flexível para organizar elementos - flex-direction: column → organiza o conteúdo verticalmente - min-height: 432px → altura mínima do bloco, garantindo consistência de layout entre diferentes cursos - opacity: 0 → inicialmente invisível, útil para animações - transform: translateY(8px) → deslocamento inicial para animação de entrada - transition: • opacity 0.4s ease → transição suave de transparência • transform 0.4s ease → transição suave de posição • height 0.4s ease → transição de altura para expansão gradual IMPORTANTE: - Ideal para blocos que aparecem ou se expandem ao interagir - Mantém consistência visual e suavidade na animação de entrada ========================================================= */ .course-block-content { position: relative; /* Permite posicionamento interno de elementos filhos */ display: flow-root; /* Layout flexível para organizar conteúdo */ flex-direction: column; /* Organiza conteúdo verticalmente */ min-height: 432px; /* Altura mínima para consistência entre blocos */ opacity: 0; /* Inicialmente invisível para animação de entrada */ transform: translateY(8px); /* Pequeno deslocamento inicial para efeito de movimento */ transition: opacity 0.4s ease, transform 0.4s ease, height 0.4s ease; /* Transições suaves para animação de entrada e expansão */ } /* ========================================================= BLOCO DE CURSOS VISÍVEL (.course-block-content.is-visible) --------------------------------------------------------- Controla o estado de visibilidade do conteúdo interno de cada bloco de curso, permitindo animações suaves ao exibir o conteúdo. Este bloco define: - opacity: 1 → torna o conteúdo totalmente visível - transform: translateY(0) → reposiciona o conteúdo para sua posição original, removendo o deslocamento inicial usado para animação de entrada IMPORTANTE: - Deve ser usado em conjunto com .course-block-content para criar animação de fade-in e movimento suave - A transição é controlada pelas propriedades definidas em .course-block-content (opacity, transform, height) ========================================================= */ .course-block-content.is-visible { opacity: 1; /* Torna o conteúdo visível */ transform: translateY(0); /* Move o conteúdo para a posição original */ } /* ========================================================= BLOCO DE CURSOS CARREGADO (.course-block-content.is-loaded) --------------------------------------------------------- Controla o estado do conteúdo interno do bloco de cursos quando este foi totalmente carregado ou expandido, permitindo que fique totalmente visível e com altura suficiente para exibir todo o conteúdo. Este bloco define: - max-height: 2000px → altura máxima expandida, permitindo que todo o conteúdo seja mostrado sem cortar elementos - opacity: 1 → garante que o conteúdo esteja totalmente visível IMPORTANTE: - Deve ser usado em conjunto com .course-block-content para animação de expansão - A transição suave é controlada pelas propriedades definidas em .course-block-content (opacity, transform, height) - O valor de max-height deve ser maior que o conteúdo esperado para evitar cortes ========================================================= */ .course-block-content.is-loaded { max-height: 2000px; /* Altura máxima expandida para exibir todo o conteúdo */ opacity: 1; /* Torna o conteúdo totalmente visível */ } /* ========================================================= LINKS DENTRO DO CONTEÚDO DO BLOCO DE CURSOS (.course-block-content a) --------------------------------------------------------- Define o espaçamento dos links contidos no conteúdo interno de cada bloco de cursos, garantindo consistência com o layout geral do bloco. Este bloco define: - margin: 0px → remove qualquer espaçamento padrão aplicado a links, permitindo controle total sobre posicionamento e alinhamento IMPORTANTE: - Útil quando os links estão dentro de elementos animados ou com padding/margem própria - Pode ser combinado com hover, text-decoration ou color para indicar interatividade ========================================================= */ .course-block-content a { margin: 0px; /* Remove margens externas padrão dos links */ } /* ========================================================= IMAGENS DENTRO DO CONTEÚDO DO BLOCO DE CURSOS (.course-block-content img) --------------------------------------------------------- Estiliza imagens exibidas dentro do conteúdo de cada bloco de curso, garantindo consistência visual, interatividade e suavidade nas transições de efeitos. Este bloco define: - border: 1px solid var(--fixed-header-section) → borda fina para destacar a imagem dentro do bloco - border-radius: 6px → cantos arredondados para suavidade visual - padding: 2px → espaçamento interno entre a borda e a imagem - width: 240px → largura fixa para padronização de cards - height: 170px → altura fixa para manter proporção consistente - display: block → remove comportamento inline e permite margens precisas - cursor: pointer → indica que a imagem é clicável/interativa - transition: transform 0.4s ease, box-shadow 0.4s ease → animação suave para efeitos de hover ou clique IMPORTANTE: - Mantém padrão uniforme para todas as imagens do bloco - Facilita efeitos visuais de destaque e interação ========================================================= */ .course-block-content img { border: 1px solid var(--fixed-header-section); /* Borda fina para destaque da imagem */ border-radius: 6px; /* Cantos arredondados para suavidade visual */ padding: 2px; /* Espaço entre borda e imagem */ width: 240px; height: 170px; /* Dimensões consistentes para todas as imagens */ display: block; /* Remove comportamento inline e permite margens precisas */ cursor: pointer; /* Indica que a imagem é clicável */ transition: transform 0.4s ease, box-shadow 0.4s ease; /* Animação suave para efeitos de hover e destaque */ } /* ========================================================= NAVEGAÇÃO DO BLOCO DE CURSOS (.course-block-nav) --------------------------------------------------------- Define o container responsável pelos controles de navegação dentro do bloco de cursos (ex: botões anterior/próximo, indicadores ou ações relacionadas). Este bloco define: - position: relative → permite posicionamento interno de elementos absolutos, se necessário - margin: 12px 0 → espaçamento vertical acima e abaixo da navegação - display: flex → ativa layout flexível para organizar os controles - justify-content: center → centraliza os itens horizontalmente - gap: 16px → espaçamento uniforme entre os controles IMPORTANTE: - Ideal para botões de navegação ou indicadores visuais - Pode ser combinado com botões estilizados ou ícones ========================================================= */ .course-block-nav { position: relative; /* Permite posicionamento interno relativo */ margin: 12px 0; /* Espaçamento vertical acima e abaixo do bloco de navegação */ display: flex; /* Ativa layout flexível */ justify-content: center; /* Centraliza os itens horizontalmente */ gap: 16px; /* Espaçamento uniforme entre os elementos de navegação */ } /* ========================================================= AÇÃO DE NAVEGAÇÃO DO BLOCO DE CURSOS (.course-nav-action) --------------------------------------------------------- Estiliza elementos interativos usados na navegação do bloco de cursos (ex: botões de avançar/voltar ou indicadores clicáveis). Este bloco define: - cursor: pointer → indica que o elemento é clicável - font-weight: 500 → peso médio da fonte para dar leve destaque - user-select: none → impede que o texto seja selecionado ao clicar repetidamente - transition: opacity 0.4s ease → suaviza alterações de opacidade (ex: hover, desativado, foco) IMPORTANTE: - Pode ser combinado com :hover ou .disabled para controle visual - user-select: none melhora experiência ao usar como botão textual ========================================================= */ .course-nav-action { cursor: pointer; /* Indica que o elemento é interativo */ font-weight: 500; /* Peso médio para leve destaque visual */ user-select: none; /* Impede seleção acidental do texto */ transition: opacity 0.4s ease; /* Transição suave ao alterar opacidade */ } /* ========================================================= HOVER NA AÇÃO DE NAVEGAÇÃO (.course-nav-action:hover) --------------------------------------------------------- Define o efeito visual quando o usuário passa o mouse sobre um elemento interativo de navegação do bloco de cursos. Este bloco define: - opacity: 0.8 → reduz levemente a opacidade para criar feedback visual sutil de interação IMPORTANTE: - Funciona em conjunto com transition: opacity 0.4s ease definido em .course-nav-action - Mantém efeito discreto e elegante sem alterar layout ========================================================= */ .course-nav-action:hover { opacity: 0.8; /* Reduz levemente a opacidade ao passar o mouse */ } /* ========================================================= INDICADOR DE NAVEGAÇÃO DO BLOCO DE CURSOS (.course-nav-indicator) --------------------------------------------------------- Estiliza o elemento responsável por indicar o estado atual da navegação (ex: "1 / 5", página atual ou item ativo). Este bloco define: - font-weight: bold → destaca visualmente o indicador - opacity: 0.8 → suaviza levemente o texto para manter equilíbrio visual com os botões de navegação IMPORTANTE: - Pode ser combinado com variações de cor para indicar estado ativo ou destaque adicional - Mantém consistência com outros elementos informativos ========================================================= */ .course-nav-indicator { font-weight: bold; /* Destaca o indicador visualmente */ opacity: 0.8; /* Suaviza levemente a intensidade visual */ } /* ========================================================= ESTADO DESABILITADO DA AÇÃO DE NAVEGAÇÃO (.course-nav-action.disabled) --------------------------------------------------------- Define o comportamento visual e funcional quando uma ação de navegação (ex: botão anterior/próximo) está desabilitada. Este bloco define: - opacity: 0.4 → reduz significativamente a visibilidade, indicando que o elemento está inativo - cursor: default → remove o cursor de ponteiro, sinalizando que não é clicável - pointer-events: none → impede qualquer interação (cliques, hover, etc.) IMPORTANTE: - Garante feedback visual claro de estado inativo - pointer-events: none evita disparos acidentais de eventos - Funciona em conjunto com a transição de opacidade definida em .course-nav-action ========================================================= */ .course-nav-action.disabled { opacity: 0.4; /* Indica visualmente que o botão está desativado */ cursor: default; /* Remove o cursor de clique */ pointer-events: none; /* Bloqueia qualquer interação do usuário */ } /* ========================================================= CONTAINER PRINCIPAL DO BLOCO DE CURSOS (#course-block) --------------------------------------------------------- Define o comportamento estrutural do container principal que envolve todo o bloco de cursos. Este bloco define: - position: relative → permite posicionamento absoluto de elementos filhos com base neste container - height: auto → altura ajustada automaticamente conforme o conteúdo interno - overflow: visible → permite que elementos internos ultrapassem os limites do container, se necessário IMPORTANTE: - position: relative é útil para elementos internos com position: absolute (ex: indicadores, overlays) - overflow: visible evita cortes visuais durante animações ou expansões de conteúdo ========================================================= */ #course-block { position: relative; /* Define o container como referência para posicionamento interno */ height: auto; /* Ajusta altura automaticamente conforme conteúdo */ overflow: visible; /* Permite que conteúdo expandido ultrapasse os limites */ } /* ========================================================= CONTAINER DE CURSOS EM FLUXO (.courses-flow) --------------------------------------------------------- Define o comportamento de margem do container que organiza cursos em formato de fluxo (flow layout), garantindo que não haja espaçamento externo indesejado. Este bloco define: - margin: 0px → remove qualquer margem externa aplicada ao container IMPORTANTE: - Útil para manter alinhamento preciso dentro do layout - Pode ser combinado com padding interno se necessário para controlar espaçamento sem afetar o fluxo externo ========================================================= */ .courses-flow { margin: 0px; /* Remove margens externas do container */ } /* ========================================================= PARÁGRAFOS EM CURSOS NO FORMATO FLOW (.courses-flow p) --------------------------------------------------------- Estiliza os textos exibidos dentro do container de cursos em fluxo, garantindo legibilidade, espaçamento adequado e consistência visual com o tema. Este bloco define: - font-size: 16px → tamanho de fonte confortável para leitura - line-height: 1.8 → espaçamento entre linhas para melhor fluidez - margin: 0 0 8px 16px → remove margem superior, adiciona margem inferior de 8px e recuo à esquerda de 16px - color: var(--courses-flow) → aplica cor temática específica para textos de cursos IMPORTANTE: - Mantém padrão consistente com outros blocos de texto - O recuo à esquerda ajuda na organização visual do conteúdo ========================================================= */ .courses-flow p { font-size: 16px; /* Tamanho de fonte legível e uniforme */ line-height: 1.8; /* Espaçamento entre linhas para melhor leitura */ margin: 0 0 8px 16px; /* Espaçamento inferior e recuo à esquerda */ color: var(--courses-flow); /* Cor temática aplicada ao texto */ } /* ========================================================= LINKS EM CURSOS NO FORMATO FLOW (.courses-flow a) --------------------------------------------------------- Define o espaçamento aplicado aos links dentro do container de cursos exibidos em formato de fluxo. Este bloco define: - margin: 8px → adiciona espaçamento uniforme ao redor do link (superior, inferior, esquerda e direita) IMPORTANTE: - Garante separação visual entre links e outros elementos - Pode ser combinado com hover ou estilos adicionais para reforçar interatividade ========================================================= */ .courses-flow a { margin: 8px; /* Espaçamento uniforme ao redor do link */ } /* ========================================================= MINIATURA DE CERTIFICADO EM CURSOS FLOW (.courses-flow .cert-thumb) --------------------------------------------------------- Estiliza a imagem de miniatura (thumbnail) de certificados dentro do container de cursos em formato de fluxo. Este bloco define: - border: 1px solid var(--fixed-header-section) → borda fina para destacar visualmente a miniatura - border-radius: 6px → cantos arredondados para suavidade - padding: 2px → pequeno espaçamento interno entre borda e imagem - width: 240px → largura fixa padronizada - height: 170px → altura fixa padronizada - display: block → remove comportamento inline - margin: 20px 16px → espaçamento externo vertical e horizontal - cursor: pointer → indica que a miniatura é clicável - transition: transform 0.2s ease, box-shadow 0.2s ease → animação suave para interações (hover/destaque) - align-self: flex-start → alinha a miniatura ao início do eixo cruzado dentro de um container flex IMPORTANTE: - Mantém consistência visual com outras imagens de cursos - align-self garante alinhamento adequado dentro do layout flex - Facilita aplicação de efeitos como zoom ou sombra no hover ========================================================= */ .courses-flow .cert-thumb { border: 1px solid var(--fixed-header-section); /* Borda fina para destaque visual */ border-radius: 6px; /* Cantos arredondados */ padding: 2px; /* Espaço interno entre borda e imagem */ width: 240px; height: 170px; /* Dimensões padronizadas */ display: block; /* Garante comportamento de bloco */ margin: 20px 16px; /* Espaçamento externo */ cursor: pointer; /* Indica interatividade */ transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transição suave para efeitos visuais */ align-self: flex-start; /* Alinha a miniatura ao início dentro de container flex */ } /* ========================================================= ITEM INDIVIDUAL EM CURSOS FLOW (.course-flow-item) --------------------------------------------------------- Define o comportamento estrutural de cada item individual dentro do container de cursos no formato flow. Este bloco define: - display: block → o item ocupa toda a largura disponível e se comporta como elemento de bloco - flex-direction: column → indica organização vertical (aplicável apenas se o display for flex) - overflow: visible → permite que conteúdo interno ultrapasse os limites do container, se necessário IMPORTANTE: - flex-direction só terá efeito se o display for alterado para flex em algum momento - overflow: visible evita cortes durante animações ou exibição de elementos internos maiores ========================================================= */ .course-flow-item { display: block; /* Elemento se comporta como bloco */ flex-direction: column; /* Organização vertical (ativo apenas se display for flex) */ overflow: visible; /* Permite que conteúdo interno ultrapasse limites */ } /* ========================================================= LINKS DENTRO DO ITEM DE CURSO FLOW (.course-flow-item a) --------------------------------------------------------- Define o espaçamento vertical dos links contidos dentro de cada item individual do formato flow. Este bloco define: - margin: 8px 0 → adiciona espaçamento acima e abaixo do link, mantendo alinhamento lateral IMPORTANTE: - Garante separação visual entre links e outros elementos como parágrafos ou imagens - Mantém consistência com padrões já usados em outros blocos ========================================================= */ .course-flow-item a { margin: 8px 0; /* Espaçamento vertical uniforme para links */ } /* ========================================================= TRANSIÇÃO DE VISUALIZAÇÃO (.view-transition) --------------------------------------------------------- Define um estado inicial invisível para elementos que participarão de uma transição suave de entrada (fade-in). Este bloco define: - opacity: 0 → elemento inicia completamente invisível - transition: opacity 0.8s ease-in-out → cria animação suave de entrada e saída baseada na opacidade IMPORTANTE: - Deve ser combinado com uma classe adicional (ex: .visible) que altere a opacidade para 1 - ease-in-out cria aceleração suave no início e no fim da animação - Ideal para transições entre views, seções ou páginas ========================================================= */ .view-transition { opacity: 0; /* Estado inicial invisível */ transition: opacity 0.8s ease-in-out; /* Transição suave de opacidade */ } /* ========================================================= ESTADO ATIVO DA TRANSIÇÃO DE VISUALIZAÇÃO (.view-transition.is-active) --------------------------------------------------------- Define o estado visível de elementos que utilizam a classe .view-transition para animação de fade-in. Este bloco define: - opacity: 1 → torna o elemento totalmente visível IMPORTANTE: - Funciona em conjunto com: .view-transition { opacity: 0; transition: opacity 0.8s ease-in-out; } - A troca de classes (ex: via JavaScript) dispara a animação suave de aparecimento - Ideal para alternância entre views ou seções ========================================================= */ .view-transition.is-active { opacity: 1; /* Torna o elemento visível com animação suave */ } /* ========================================================= BOTÃO DE COPIAR (.copiar-btn) --------------------------------------------------------- Estiliza o botão utilizado para ações de cópia (ex: copiar e-mail, link ou texto), mantendo visual limpo e integrado ao layout. Este bloco define: - background: none → remove fundo padrão do botão - border: none → remove borda padrão - cursor: pointer → indica que o botão é clicável - margin-left: 8px → adiciona espaçamento à esquerda para separar do texto associado - font-size: 1.2em → aumenta levemente o tamanho para melhor visibilidade (ex: ícone) IMPORTANTE: - Ideal para botões com ícones (ex: 📋) - Pode ser combinado com hover ou animação para feedback visual adicional ========================================================= */ .copiar-btn { background: none; /* Remove fundo padrão */ border: none; /* Remove borda padrão */ cursor: pointer; /* Indica interatividade */ margin-left: 8px; /* Espaçamento à esquerda */ font-size: 1.2em; /* Leve aumento de tamanho para destaque */ } /* ========================================================= VARIAÇÃO COMPACTA DO BOTÃO DE COPIAR (.copiar-btn--compact) --------------------------------------------------------- Define uma variação do botão de copiar com ajuste específico de espaçamento, geralmente utilizada em contextos onde é necessário maior separação lateral. Este bloco define: - margin-left: 12px → aumenta o espaçamento à esquerda em relação ao botão padrão (.copiar-btn) IMPORTANTE: - Funciona como modificador (padrão BEM) - Deve ser utilizado em conjunto com .copiar-btn - Permite ajustes visuais sem alterar o estilo base ========================================================= */ .copiar-btn--compact { margin-left: 12px; /* Espaçamento maior à esquerda em relação ao padrão */ } /* ========================================================= TRANSIÇÃO DE ÍCONE E SUBTÍTULO DO PORTFÓLIO (.portfolio-icon, .portfolio-subtitle) --------------------------------------------------------- Define animações suaves para elementos visuais do portfólio, como ícones e subtítulos, permitindo efeitos elegantes de entrada, saída ou movimento. Este bloco define: - transition: • opacity 0.4s ease → animação suave de transparência • transform 0.4s ease → animação suave de movimento (ex: translate, scale, rotate) IMPORTANTE: - Deve ser combinado com estados que alterem opacity ou transform (ex: .hidden, .is-active, etc.) - ease cria aceleração natural na animação - Mantém consistência visual entre ícones e textos ========================================================= */ .portfolio-icon, .portfolio-subtitle { transition: opacity 0.4s ease, transform 0.4s ease; /* Transições suaves para opacidade e transformação */ } /* ========================================================= ESTADO DE SAÍDA DO SUBTÍTULO DO PORTFÓLIO (.portfolio-exit .portfolio-subtitle) --------------------------------------------------------- Define o comportamento visual do subtítulo quando o portfólio entra em estado de saída (ex: transição de página ou troca de seção). Este bloco define: - opacity: 0 → torna o subtítulo invisível - transform: translateX(64px) → desloca o subtítulo 64px para a direita, criando efeito de saída lateral - transition-delay: 0s → remove qualquer atraso na transição para que a animação inicie imediatamente IMPORTANTE: - Funciona em conjunto com as transições definidas em: .portfolio-icon, .portfolio-subtitle - Ideal para animações de saída suaves e coordenadas - Pode ser sincronizado com outros elementos para criar efeito de transição encadeada ========================================================= */ .portfolio-exit .portfolio-subtitle { opacity: 0; /* Torna o subtítulo invisível */ transform: translateX(64px); /* Desloca o subtítulo para a direita */ transition-delay: 0s; /* Inicia a transição imediatamente */ } /* ========================================================= ESTADO DE SAÍDA DO ÍCONE DO PORTFÓLIO (.portfolio-exit .portfolio-icon) --------------------------------------------------------- Define o comportamento visual do ícone quando o portfólio entra em estado de saída (ex: transição de página ou seção). Este bloco define: - opacity: 0 → torna o ícone invisível - transform: translateX(64px) → desloca o ícone 64px para a direita, criando efeito de saída lateral - transition-delay: 0.16s → adiciona pequeno atraso para criar efeito encadeado (stagger) IMPORTANTE: - Funciona em conjunto com: .portfolio-icon, .portfolio-subtitle - O delay cria animação sequencial: 1️⃣ Subtítulo sai primeiro 2️⃣ Ícone sai logo depois - Produz efeito mais refinado e profissional ========================================================= */ .portfolio-exit .portfolio-icon { opacity: 0; /* Torna o ícone invisível */ transform: translateX(64px); /* Desloca o ícone para a direita */ transition-delay: 0.16s; /* Pequeno atraso para efeito encadeado */ } /* ========================================================= ESTADO PRÉ-ENTRADA DO ÍCONE E SUBTÍTULO (.portfolio-pre-enter .portfolio-icon, .portfolio-pre-enter .portfolio-subtitle) --------------------------------------------------------- Define o estado inicial antes da animação de entrada do portfólio. Os elementos começam invisíveis e deslocados, preparando o efeito de transição suave. Este bloco define: - opacity: 0 → elementos iniciam invisíveis - transform: translateX(64px) → desloca os elementos 64px para a direita, criando ponto inicial da animação IMPORTANTE: - Deve ser combinado com a remoção da classe .portfolio-pre-enter para disparar a animação - Funciona junto com as transições definidas em: .portfolio-icon, .portfolio-subtitle - Permite efeito elegante de slide-in lateral ========================================================= */ .portfolio-pre-enter .portfolio-icon, .portfolio-pre-enter .portfolio-subtitle { opacity: 0; /* Estado inicial invisível */ transform: translateX(64px); /* Deslocamento inicial para animação de entrada */ } /* ========================================================= ESTADO DE ENTRADA DO ÍCONE DO PORTFÓLIO (.portfolio-enter .portfolio-icon) --------------------------------------------------------- Define o comportamento do ícone durante a animação de entrada do portfólio. Este bloco define: - opacity: 1 → torna o ícone totalmente visível - transform: translateX(0) → reposiciona o ícone para sua posição original - transition-delay: 0s → inicia a animação imediatamente ao entrar IMPORTANTE: - Funciona em conjunto com: .portfolio-pre-enter (estado inicial) .portfolio-icon (transições definidas) - Remove o deslocamento aplicado anteriormente - Mantém fluidez na sequência de entrada ========================================================= */ .portfolio-enter .portfolio-icon { opacity: 1; /* Torna o ícone visível */ transform: translateX(0); /* Retorna o ícone à posição original */ transition-delay: 0s; /* Inicia a animação imediatamente */ } /* ========================================================= ESTADO DE ENTRADA DO SUBTÍTULO DO PORTFÓLIO (.portfolio-enter .portfolio-subtitle) --------------------------------------------------------- Define o comportamento do subtítulo durante a animação de entrada do portfólio, criando efeito encadeado (stagger) em relação ao ícone. Este bloco define: - opacity: 1 → torna o subtítulo totalmente visível - transform: translateX(0) → retorna o subtítulo para sua posição original - transition-delay: 0.16s → adiciona pequeno atraso para criar sequência animada elegante IMPORTANTE: - Funciona em conjunto com: .portfolio-pre-enter (estado inicial) .portfolio-subtitle (transições base) - O delay cria entrada sequencial: 1️⃣ Ícone entra primeiro 2️⃣ Subtítulo entra logo depois - Gera efeito mais refinado e profissional ========================================================= */ .portfolio-enter .portfolio-subtitle { opacity: 1; /* Torna o subtítulo visível */ transform: translateX(0); /* Retorna o subtítulo à posição original */ transition-delay: 0.16s; /* Pequeno atraso para efeito encadeado */ } /* ========================================================= TRANSIÇÃO DE CATEGORIA (.category-fade) --------------------------------------------------------- Define uma animação suave baseada em opacidade, geralmente utilizada para troca ou filtragem de categorias dentro do portfólio. Este bloco define: - transition: opacity 0.2s ease → cria transição rápida e suave ao alterar a opacidade do elemento IMPORTANTE: - Deve ser combinado com estados que alterem opacity (ex: 0 para esconder, 1 para mostrar) - Duração curta (0.2s) mantém a interface ágil - Ideal para filtros de categorias ou alternância de conteúdo ========================================================= */ .category-fade { transition: opacity 0.2s ease; /* Transição rápida e suave de opacidade */ } /* ========================================================= ESTADO DE DESAPARECIMENTO DA CATEGORIA (.category-fade.is-fading) --------------------------------------------------------- Define o estado visual quando um elemento de categoria está em processo de ocultação (fade-out). Este bloco define: - opacity: 0 → torna o elemento invisível IMPORTANTE: - Funciona em conjunto com: .category-fade { transition: opacity 0.2s ease; } - Ao adicionar a classe .is-fading, o elemento desaparece suavemente - Ideal para filtros de categorias e transições rápidas ========================================================= */ .category-fade.is-fading { opacity: 0; /* Torna o elemento invisível com transição suave */ } /* ========================================================= TÍTULO DA CATEGORIA (.title-category) --------------------------------------------------------- Define o comportamento estrutural e alinhamento do título associado a uma categoria dentro do portfólio. Este bloco define: - display: inline-flex → permite alinhamento flexível mantendo o elemento em fluxo inline - align-items: center → centraliza verticalmente os elementos internos (ex: ícone + texto) - margin-left: 8px → adiciona pequeno espaçamento à esquerda para separação visual IMPORTANTE: - inline-flex permite alinhamento preciso sem quebrar linha - Ideal para combinações como: [ícone] + [texto da categoria] - Mantém consistência visual com outros títulos do layout ========================================================= */ .title-category { display: inline-flex; /* Permite alinhamento flex mantendo fluxo inline */ align-items: center; /* Centraliza verticalmente elementos internos */ margin-left: 8px; /* Espaçamento à esquerda */ } /* ========================================================= ESTADO DE FADE DO TÍTULO DA CATEGORIA (.title-category.is-fading) --------------------------------------------------------- Define o comportamento visual quando o título da categoria está em processo de transição ou ocultação. Este bloco define: - opacity: 0 → torna o título invisível IMPORTANTE: - Deve ser usado em conjunto com uma transição definida anteriormente (ex: transition: opacity) - Ideal para animações suaves durante troca ou filtragem de categorias - Não altera layout, apenas visibilidade ========================================================= */ .title-category.is-fading { opacity: 0; /* Torna o título invisível com efeito de fade */ } /* ========================================================= ESTADO OCULTO DO TÍTULO DA CATEGORIA (.title-category.hidden) --------------------------------------------------------- Define o comportamento quando o título da categoria precisa ser completamente removido do layout. Este bloco define: - display: none → remove o elemento do fluxo do documento, ocultando-o totalmente e eliminando seu espaço DIFERENÇA IMPORTANTE: - opacity: 0 → apenas torna invisível, mas mantém espaço - display: none → remove completamente do layout USO RECOMENDADO: - Após animação de fade-out finalizar - Quando a categoria não deve ocupar espaço algum ========================================================= */ .title-category.hidden { display: none; /* Remove completamente do layout */ } /* ========================================================= SEPARADOR (PIPE) NO TÍTULO DA CATEGORIA (.title-category .pipe) --------------------------------------------------------- Estiliza o elemento separador visual (ex: "|") utilizado dentro do título da categoria. Este bloco define: - color: var(--category-pipe) → aplica cor temática específica para o separador - margin: 0px 12px 0px 0px → adiciona espaçamento apenas à direita, separando visualmente do texto IMPORTANTE: - Mantém o separador visualmente discreto - O espaçamento evita que o pipe fique colado ao conteúdo seguinte - Pode ser ajustado para alinhar com diferentes layouts ========================================================= */ .title-category .pipe { color: var(--category-pipe); /* Cor temática do separador */ margin: 0px 12px 0px 0px; /* Espaçamento à direita para separação visual */ } /* ========================================================= NOME DA CATEGORIA NO TÍTULO (.title-category .category-name) --------------------------------------------------------- Estiliza especificamente o texto que representa o nome da categoria dentro do título. Este bloco define: - color: var(--category-name) → aplica cor temática específica para o nome da categoria - font-weight: 500 → peso médio para dar leve destaque sem ficar excessivamente forte IMPORTANTE: - Mantém separação visual clara entre: • Separador (.pipe) • Nome da categoria (.category-name) - Facilita personalização de cores por tema - Pode ser combinado com transições ou estados como .is-fading ========================================================= */ .title-category .category-name { color: var(--category-name); /* Cor temática do nome da categoria */ font-weight: 500; /* Leve destaque sem exagero */ } /* ========================================================= ESTADO INICIAL (PRÉ-ENTRADA) DO PIPE E NOME DA CATEGORIA (.title-category .pipe, .title-category .category-name) --------------------------------------------------------- Define o estado inicial invisível e deslocado dos elementos internos do título da categoria, preparando a animação de entrada suave. Este bloco define: - opacity: 0 → torna os elementos invisíveis - transform: translateX(64px) → desloca os elementos 64px para a direita, criando ponto inicial da animação IMPORTANTE: - Deve ser combinado com uma transição previamente definida (opacity + transform) - Permite efeito de slide-in lateral elegante - Pode ser utilizado antes da aplicação de uma classe de entrada (ex: .is-active) ========================================================= */ .title-category .pipe, .title-category .category-name { opacity: 0; /* Estado inicial invisível */ transform: translateX(64px); /* Deslocamento inicial para animação de entrada */ } /* ========================================================= ENTRADA DO PIPE DA CATEGORIA (.title-category.category-enter .pipe) --------------------------------------------------------- Define a animação de entrada do separador visual (pipe) dentro do título da categoria. Este bloco define: - opacity: 1 → torna o pipe totalmente visível - transform: translateX(0) → retorna à posição original - transition: opacity 0.4s ease, transform 0.4s ease → animação suave de fade + movimento lateral - transition-delay: 0s → inicia imediatamente IMPORTANTE: - Funciona em conjunto com o estado inicial: .title-category .pipe { opacity: 0; transform: translateX(64px); } - Cria efeito de slide-in elegante - Pode ser combinado com delay diferente no .category-name para efeito encadeado (stagger) ========================================================= */ .title-category.category-enter .pipe { opacity: 1; /* Torna o pipe visível */ transform: translateX(0); /* Retorna à posição original */ transition: opacity 0.4s ease, transform 0.4s ease; /* Animação suave de entrada */ transition-delay: 0s; /* Inicia imediatamente */ } /* ========================================================= ENTRADA DO NOME DA CATEGORIA (.title-category.category-enter .category-name) --------------------------------------------------------- Define a animação de entrada do texto que representa o nome da categoria, criando efeito encadeado em relação ao pipe. Este bloco define: - opacity: 1 → torna o nome totalmente visível - transform: translateX(0) → retorna à posição original - transition: opacity 0.4s ease, transform 0.4s ease → animação suave de fade + movimento lateral - transition-delay: 0.16s → adiciona pequeno atraso para efeito sequencial (stagger) IMPORTANTE: - Funciona em conjunto com o estado inicial: .title-category .category-name { opacity: 0; transform: translateX(64px); } - Cria sequência animada: 1️⃣ Pipe entra primeiro 2️⃣ Nome entra logo depois - Mantém consistência com o padrão de animação usado no portfólio ========================================================= */ .title-category.category-enter .category-name { opacity: 1; /* Torna o nome visível */ transform: translateX(0); /* Retorna à posição original */ transition: opacity 0.4s ease, transform 0.4s ease; /* Animação suave de entrada */ transition-delay: 0.16s; /* Pequeno atraso para efeito encadeado */ } /* ========================================================= SAÍDA DO NOME DA CATEGORIA (.title-category.category-exit .category-name) --------------------------------------------------------- Define a animação de saída do texto que representa o nome da categoria, aplicando efeito de fade-out com deslocamento lateral. Este bloco define: - opacity: 0 → torna o nome invisível - transform: translateX(64px) → desloca o nome 64px para a direita - transition: opacity 0.4s ease, transform 0.4s ease → animação suave de saída - transition-delay: 0s → inicia imediatamente IMPORTANTE: - Funciona como contraponto ao estado: .title-category.category-enter .category-name - Pode ser combinado com delay no .pipe para criar saída encadeada - Mantém consistência com o padrão global de animação horizontal (64px) ========================================================= */ .title-category.category-exit .category-name { opacity: 0; /* Torna o nome invisível */ transform: translateX(64px); /* Desloca para a direita criando efeito de saída */ transition: opacity 0.4s ease, transform 0.4s ease; /* Animação suave de saída */ transition-delay: 0s; /* Inicia imediatamente */ } /* ========================================================= SAÍDA DO PIPE DA CATEGORIA (.title-category.category-exit .pipe) --------------------------------------------------------- Define a animação de saída do separador visual (pipe) dentro do título da categoria, criando efeito encadeado em relação ao nome. Este bloco define: - opacity: 0 → torna o pipe invisível - transform: translateX(64px) → desloca o pipe 64px para a direita - transition: opacity 0.4s ease, transform 0.4s ease → animação suave de saída - transition-delay: 0.16s → adiciona pequeno atraso para efeito sequencial (stagger) IMPORTANTE: - Funciona como contraponto ao estado: .title-category.category-enter .pipe - Cria sequência animada na saída: 1️⃣ Nome sai primeiro 2️⃣ Pipe sai logo depois - Mantém consistência com o padrão global de animação horizontal (64px) ========================================================= */ .title-category.category-exit .pipe { opacity: 0; /* Torna o pipe invisível */ transform: translateX(64px); /* Desloca para a direita criando efeito de saída */ transition: opacity 0.4s ease, transform 0.4s ease; /* Animação suave de saída */ transition-delay: 0.16s; /* Pequeno atraso para efeito encadeado */ } /* ========================================================= ESTADO BASE (INICIAL) DOS ELEMENTOS DA CATEGORIA (.title-category .pipe, .title-category .category-name) --------------------------------------------------------- Define o estado inicial dos dois elementos internos do título da categoria antes das animações de entrada. Este bloco aplica: - opacity: 0 → elementos começam invisíveis - transform: translateX(64px) → posiciona os elementos 64px à direita do estado final FUNÇÃO ARQUITETURAL: - Serve como ponto de partida para: .category-enter .category-exit - Garante consistência visual no padrão de animação horizontal do projeto - Evita “saltos visuais” ao ativar classes dinamicamente via JavaScript FLUXO DE ANIMAÇÃO: 1️⃣ Estado base (invisível + deslocado) 2️⃣ .category-enter → move para 0 + fade-in 3️⃣ .category-exit → retorna ao estado deslocado IMPORTANTE: - Não possui transition aqui de propósito. - A transição é definida apenas nos estados de entrada e saída para maior controle. ========================================================= */ .title-category .pipe, .title-category .category-name { opacity: 0; /* Começam invisíveis */ transform: translateX(64px); /* Começam deslocados para a direita */ } /* ========================================================= ESTADO BASE DO BOTÃO DE VISUALIZAÇÃO (.view-btn) --------------------------------------------------------- Define o estado inicial do botão responsável pela ação de visualização dentro do fluxo de interação da interface. Este bloco aplica: - opacity: 0 → botão inicia invisível - transform: translateX(-32px) → inicia deslocado 32px à esquerda do estado final - transition → define suavização padrão para opacity e transform (0.4s ease) - pointer-events: none → impede qualquer interação enquanto estiver invisível FUNÇÃO ARQUITETURAL: - Garante que o botão não seja clicável antes da ativação visual - Mantém coerência com o padrão de animações horizontais do projeto - Evita interações prematuras durante transições de estado controladas via JS FLUXO DE ANIMAÇÃO: 1️⃣ Estado base (invisível + deslocado à esquerda) 2️⃣ Classe de ativação → opacity 1 + translateX(0) 3️⃣ Botão torna-se visível e interativo IMPORTANTE: - pointer-events: none é essencial para impedir cliques invisíveis - A transição já está declarada neste estado base por se tratar de um elemento com ativação direta e isolada ========================================================= */ .view-btn { opacity: 0; transform: translateX(-32px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } /* ========================================================= ESTADO DE ENTRADA DO BOTÃO DE VISUALIZAÇÃO (.view-btn.vm-enter) --------------------------------------------------------- Define o estado ativo do botão de visualização após a aplicação da classe de entrada. Este bloco aplica: - opacity: 1 → torna o botão visível - transform: translateX(0) → retorna ao posicionamento original - pointer-events: auto → reativa a interação do usuário FUNÇÃO ARQUITETURAL: - Representa o estado final da animação iniciada a partir do estado base (.view-btn) - Restaura a interatividade somente após a conclusão visual da transição - Mantém coerência com o padrão de animações horizontais do projeto FLUXO DE ANIMAÇÃO: 1️⃣ Estado base (.view-btn) → invisível + deslocado à esquerda 2️⃣ Aplicação de .vm-enter → fade-in + movimento para posição 0 3️⃣ Botão torna-se visível e clicável IMPORTANTE: - A transição não é redefinida aqui, pois já foi declarada no estado base - pointer-events: auto só deve existir no estado ativo para evitar cliques durante fases invisíveis ========================================================= */ .view-btn.vm-enter { opacity: 1; transform: translateX(0); pointer-events: auto; } /* ========================================================= ESTADO DE SAÍDA DO BOTÃO DE VISUALIZAÇÃO (.view-btn.vm-exit) --------------------------------------------------------- Define o estado de retorno do botão de visualização quando a interface exige sua remoção visual. Este bloco aplica: - opacity: 0 → torna o botão invisível - transform: translateX(-32px) → desloca novamente 32px para a esquerda - pointer-events: none → desativa qualquer interação durante a saída FUNÇÃO ARQUITETURAL: - Representa o estado de retração do botão - Mantém simetria com o estado base - Garante consistência no padrão de animação horizontal do projeto - Evita cliques durante o processo de transição visual FLUXO DE ANIMAÇÃO: 1️⃣ Estado ativo (.vm-enter) → visível + posição original 2️⃣ Aplicação de .vm-exit → fade-out + deslocamento à esquerda 3️⃣ Retorno ao estado invisível e inativo IMPORTANTE: - A transição permanece controlada pelo estado base (.view-btn) - O deslocamento espelha exatamente o valor definido no estado inicial, garantindo coerência visual ========================================================= */ .view-btn.vm-exit { opacity: 0; transform: translateX(-32px); pointer-events: none; } /* ========================================================= ESTADO OCULTO FORÇADO DO BOTÃO DE VISUALIZAÇÃO (.view-btn.vm-hidden) --------------------------------------------------------- Define um estado de ocultação estática do botão, utilizado para garantir que o elemento permaneça invisível e inativo independentemente do fluxo de animação. Este bloco aplica: - opacity: 0 → mantém o botão invisível - transform: translateX(-32px) → mantém o deslocamento padrão à esquerda - pointer-events: none → impede qualquer tipo de interação FUNÇÃO ARQUITETURAL: - Atua como estado de segurança visual - Garante previsibilidade quando o botão não deve participar do fluxo de entrada/saída - Pode ser usado para reset estrutural antes da aplicação de novas classes - Evita conflitos entre .vm-enter e .vm-exit DIFERENÇA CONCEITUAL: - .vm-exit → participa do fluxo animado - .vm-hidden → estado oculto fixo/forçado, independente de transição IMPORTANTE: - Mantém os mesmos valores do estado base para preservar consistência horizontal - Não redefine transition, pois esta já está declarada no seletor principal ========================================================= */ .view-btn.vm-hidden { opacity: 0; transform: translateX(-32px); pointer-events: none; } /* ========================================================= BASE PARA TOOLTIP VIA ATRIBUTO aria-label (.view-btn, toggles, copiar-btn, ícones e links) --------------------------------------------------------- Define o contexto de posicionamento necessário para exibição de tooltips personalizados baseados no atributo aria-label. Este bloco aplica: - position: relative → estabelece o elemento como referência para posicionamento absoluto de pseudo-elementos (::before / ::after) ELEMENTOS ABRANGIDOS: - .view-btn - #theme-toggle-home - #theme-toggle-portfolio - .copiar-btn - #header-home-icon - .footer a FUNÇÃO ARQUITETURAL: - Permite a criação de tooltips sem alterar a estrutura HTML - Garante que qualquer pseudo-elemento absoluto seja posicionado em relação ao próprio elemento interativo - Mantém encapsulamento visual e evita dependência de containers externos PADRÃO UTILIZADO: - O conteúdo do tooltip é derivado do atributo aria-label - Reforça acessibilidade ao mesmo tempo em que fornece feedback visual IMPORTANTE: - Não altera layout externo - Não interfere no fluxo normal do documento - Atua apenas como base estrutural para renderização de camadas adicionais ========================================================= */ .view-btn[aria-label], #theme-toggle-home[aria-label], #theme-toggle-portfolio[aria-label], .copiar-btn[aria-label], #header-home-icon[aria-label], .footer a[aria-label] { position: relative; } /* ========================================================= TOOLTIP VISUAL (PSEUDO-ELEMENTO ::after) (Elementos com aria-label) --------------------------------------------------------- Cria o tooltip visual dinâmico utilizando o valor do atributo aria-label como conteúdo. Este bloco aplica: - content: attr(aria-label) → injeta automaticamente o texto do atributo - position: absolute → posicionamento relativo ao elemento pai (position: relative) - bottom: -28px → posiciona abaixo do elemento - left: 50% + translateX(-50%) → centraliza horizontalmente - translateY(4px) → pequeno deslocamento inicial para animação suave ESTILIZAÇÃO VISUAL: - background: rgba(0,0,0,0.75) → fundo escuro translúcido - color: #fff → contraste de leitura - font-size: 0.7rem → tamanho discreto - padding: 4px 8px → área de respiro - border-radius: 4px → bordas suavizadas - white-space: nowrap → impede quebra de linha CONTROLE DE VISIBILIDADE: - opacity: 0 → inicia invisível - pointer-events: none → impede interferência - transition → anima opacity e transform (0.15s ease) - z-index: 1000 → garante sobreposição adequada FUNÇÃO ARQUITETURAL: - Implementa sistema de tooltip sem JS - Mantém acessibilidade via aria-label - Centraliza padrão visual para múltiplos elementos interativos do projeto - Garante microanimação consistente com identidade visual da interface FLUXO DE INTERAÇÃO: 1️⃣ Estado base → invisível + levemente deslocado 2️⃣ :hover ou classe ativa → opacity 1 + translateY(0) 3️⃣ Tooltip aparece suavemente centralizado IMPORTANTE: - Depende de position: relative no elemento pai - Não altera fluxo do layout - Utiliza apenas CSS puro para controle visual e transição ========================================================= */ .view-btn[aria-label]::after, #theme-toggle-home[aria-label]::after, #theme-toggle-portfolio[aria-label]::after, .copiar-btn[aria-label]::after, #header-home-icon[aria-label]::after { content: attr(aria-label); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 1000; } /* ========================================================= TOOLTIP SUPERIOR PARA LINKS DO FOOTER (.footer a[aria-label]::after) --------------------------------------------------------- Cria a variação de tooltip específica para links localizados no footer, ajustando o posicionamento vertical para exibição acima do elemento. Este bloco aplica: - content: attr(aria-label) → utiliza o texto do atributo como conteúdo - position: absolute → relativo ao link (que possui position: relative) - bottom: 28px → posiciona acima do link - left: 50% + translateX(-50%) → centralização horizontal - translateY(4px) → leve deslocamento inicial para microanimação de entrada ESTILIZAÇÃO VISUAL: - background escuro translúcido - color: #fff → alto contraste - font-size: 0.7rem → padrão discreto - padding: 4px 8px → área confortável - border-radius: 4px → suavização visual - white-space: nowrap → impede quebra de linha CONTROLE DE VISIBILIDADE: - opacity: 0 → inicia invisível - pointer-events: none → evita interferência - transition (0.15s ease) → suaviza opacity e transform - z-index: 1000 → garante sobreposição FUNÇÃO ARQUITETURAL: - Mantém consistência com o sistema global de tooltips - Ajusta direção de exibição para evitar conflito com o limite inferior da viewport - Preserva acessibilidade via aria-label - Evita necessidade de JavaScript DIFERENCIAL EM RELAÇÃO AO PADRÃO: - Exibição acima do elemento (ao invés de abaixo) - Adequado para elementos posicionados na borda inferior da interface IMPORTANTE: - Depende de position: relative no link - Não altera o fluxo do layout - Mantém microanimação coerente com o restante do projeto ========================================================= */ .footer a[aria-label]::after { content: attr(aria-label); position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 1000; } /* ========================================================= ESTADO DE EXIBIÇÃO DO TOOLTIP (HOVER) (Elementos com aria-label) --------------------------------------------------------- Define o momento de ativação visual do tooltip quando o usuário interage com o elemento via hover. Este bloco aplica: - opacity: 1 → torna o tooltip visível - transform: translateX(-50%) translateY(0) → remove o deslocamento vertical inicial, concluindo a microanimação FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado no estado base (::after) - Cria efeito de fade-in + leve subida - Mantém consistência entre todos os elementos interativos que utilizam aria-label - Centraliza o comportamento de exibição em um único padrão reutilizável FLUXO DE INTERAÇÃO: 1️⃣ Estado base (::after) → opacity: 0 → translateY(4px) 2️⃣ :hover → opacity: 1 → translateY(0) 3️⃣ Saída do hover → retorna suavemente ao estado inicial IMPORTANTE: - Não redefine transições (já declaradas no base) - Mantém translateX(-50%) para preservar alinhamento horizontal centralizado - Funciona exclusivamente via CSS, sem dependência de JavaScript ========================================================= */ .view-btn[aria-label]:hover::after, #theme-toggle-home[aria-label]:hover::after, #theme-toggle-portfolio[aria-label]:hover::after, .copiar-btn[aria-label]:hover::after, #header-home-icon[aria-label]:hover::after, .footer a[aria-label]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================= ESTADO BASE DO PAINEL LATERAL DO PORTFÓLIO (.side-portfolio) --------------------------------------------------------- Define o estado estrutural inicial do painel lateral do portfólio antes de qualquer ativação dinâmica via JavaScript. Este bloco aplica: - display: none → remove completamente o elemento do fluxo do layout FUNÇÃO ARQUITETURAL: - Garante que o painel não ocupe espaço nem influencie o layout inicial - Evita renderização prematura antes da lógica de controle de estado - Permite ativação controlada por classe específica ou manipulação via JS DIFERENÇA CONCEITUAL: - display: none → remove do fluxo e impede qualquer interação - Diferente de opacity: 0 → que apenas oculta visualmente mantendo espaço FLUXO DE ATIVAÇÃO: 1️⃣ Estado base → não renderizado 2️⃣ Classe de ativação aplicada → display alterado (ex: flex/block) 3️⃣ Painel passa a integrar o layout IMPORTANTE: - Elementos com display: none não permitem transições diretas - Caso haja animação de entrada, ela deve ocorrer após a reativação do display via classe específica ========================================================= */ .side-portfolio { display: none; } /* ========================================================= ESTADO DE SAÍDA DO NOME NO HEADER (.header-exit .header-name) --------------------------------------------------------- Define o comportamento de saída do elemento que representa o nome no cabeçalho quando a classe estrutural .header-exit é ativada. Este bloco aplica: - opacity: 0 → torna o nome invisível - transform: translateX(64px) → desloca 64px para a direita (padrão horizontal do projeto) - transition-delay: 0s → garante início imediato da animação de saída FUNÇÃO ARQUITETURAL: - Representa o estado de retração visual do nome no header - Mantém coerência com o padrão global de animações horizontais (+64px à direita) - Permite sincronização precisa com outros elementos do header durante transição de modo FLUXO DE ANIMAÇÃO: 1️⃣ Estado ativo → visível + posição original 2️⃣ Aplicação de .header-exit → fade-out + deslocamento à direita 3️⃣ Elemento preparado para possível reentrada futura (.header-enter) IMPORTANTE: - transition-delay: 0s evita defasagem indesejada na saída - O valor 64px mantém consistência com outros componentes do sistema - Depende de transition previamente declarada no estado base ========================================================= */ .header-exit .header-name { opacity: 0; transform: translateX(64px); transition-delay: 0s; } /* ========================================================= ESTADO DE SAÍDA DA INFORMAÇÃO "LAST UPDATE" (.header-exit .last-update) --------------------------------------------------------- Define o comportamento de saída do elemento que exibe a última atualização no header quando a classe estrutural .header-exit é ativada. Este bloco aplica: - opacity: 0 → torna o elemento invisível - transform: translateX(64px) → desloca 64px para a direita (padrão horizontal) - transition-delay: 0.16s → cria atraso controlado na animação de saída FUNÇÃO ARQUITETURAL: - Permite animação escalonada (stagger) em relação a outros elementos do header - Mantém coerência com o padrão de deslocamento horizontal do projeto - Contribui para fluidez e hierarquia visual durante a transição de modo FLUXO DE ANIMAÇÃO: 1️⃣ .header-name inicia saída (delay 0s) 2️⃣ .last-update inicia após 0.16s 3️⃣ Cria efeito sequencial organizado IMPORTANTE: - O transition-delay garante ritmo e evita saída simultânea abrupta - O valor 64px mantém alinhamento com demais animações horizontais - Depende de transition declarada previamente no estado base ========================================================= */ .header-exit .last-update { opacity: 0; transform: translateX(64px); transition-delay: 0.16s; } /* ========================================================= ESTADO PRÉ-ENTRADA DO HEADER (.header-pre-enter) --------------------------------------------------------- Define o estado preparatório dos elementos internos do header antes da aplicação da animação oficial de entrada. Este bloco aplica: - opacity: 0 → mantém os elementos invisíveis - transform: translateX(64px) → posiciona 64px à direita do estado final ELEMENTOS AFETADOS: - .header-name - .last-update FUNÇÃO ARQUITETURAL: - Prepara visualmente os elementos para a animação de entrada subsequente - Garante que não haja “salto visual” ao remover .header-exit - Mantém consistência com o padrão horizontal adotado no projeto DIFERENÇA CONCEITUAL: - .header-exit → estado animado de saída - .header-pre-enter → estado estático preparatório antes da entrada FLUXO DE ANIMAÇÃO: 1️⃣ .header-exit removido 2️⃣ .header-pre-enter aplicado → elementos invisíveis + deslocados 3️⃣ Classe de entrada aplicada → fade-in + translateX(0) IMPORTANTE: - Não define transition aqui, permitindo controle total no estado oficial de entrada - O valor 64px preserva o padrão estrutural de animação horizontal ========================================================= */ .header-pre-enter .header-name, .header-pre-enter .last-update { opacity: 0; transform: translateX(64px); } /* ========================================================= ESTADO DE ENTRADA DO NOME NO HEADER (.header-enter .header-name) --------------------------------------------------------- Define o comportamento de entrada do elemento que representa o nome no cabeçalho quando a classe estrutural .header-enter é ativada. Este bloco aplica: - opacity: 1 → torna o elemento visível - transform: translateX(0) → posiciona no estado final (sem deslocamento) - transition-delay: 0s → inicia a animação imediatamente FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado em .header-pre-enter - Mantém coerência com o padrão horizontal do projeto (64px → 0) - Permite sincronização precisa com outros elementos do header FLUXO DE ANIMAÇÃO: 1️⃣ .header-pre-enter → invisível + deslocado à direita 2️⃣ Aplicação de .header-enter → fade-in + movimento para posição 0 3️⃣ Elemento totalmente visível e estabilizado IMPORTANTE: - transition deve estar declarada no estado base do elemento - transition-delay: 0s garante que este elemento lidere a sequência caso exista animação escalonada ========================================================= */ .header-enter .header-name { opacity: 1; transform: translateX(0); transition-delay: 0s; } /* ========================================================= ESTADO DE ENTRADA DA INFORMAÇÃO "LAST UPDATE" (.header-enter .last-update) --------------------------------------------------------- Define o comportamento de entrada do elemento que exibe a última atualização no header quando a classe estrutural .header-enter é ativada. Este bloco aplica: - opacity: 1 → torna o elemento visível - transform: translateX(0) → retorna ao posicionamento original - transition-delay: 0.16s → cria atraso intencional na animação de entrada FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado em .header-pre-enter - Implementa efeito escalonado (stagger) em relação a .header-name - Reforça hierarquia visual e ritmo na transição do header FLUXO DE ANIMAÇÃO: 1️⃣ .header-name entra primeiro (delay 0s) 2️⃣ .last-update inicia após 0.16s 3️⃣ Sequência visual organizada e fluida IMPORTANTE: - transition deve estar declarada no estado base do elemento - O delay mantém coerência com o padrão aplicado no estado de saída - O deslocamento 64px → 0 segue o padrão horizontal do projeto ========================================================= */ .header-enter .last-update { opacity: 1; transform: translateX(0); transition-delay: 0.16s; } /* ========================================================= TRANSIÇÃO PADRÃO DOS ELEMENTOS DO HEADER DO PORTFÓLIO (.header-portfolio) --------------------------------------------------------- Define as propriedades de transição para os elementos internos do header do portfólio, garantindo animação suave durante mudanças de estado. Este bloco aplica: - transition → controla a animação de: • opacity 0.4s ease → suaviza aparecimento/desaparecimento • transform 0.4s ease → suaviza movimentos horizontais/verticais ELEMENTOS AFETADOS: - .header-photo → imagem do header - .header-name → nome do usuário ou título - .last-update → informação de última atualização FUNÇÃO ARQUITETURAL: - Garante uniformidade visual entre os elementos do header do portfólio - Facilita aplicação de classes de entrada (.header-enter) ou saída (.header-exit) - Centraliza configuração de animação evitando declarações repetidas IMPORTANTE: - Apenas define o efeito de transição, não altera estados de opacity ou transform - Mantém consistência com o padrão horizontal de animação adotado no projeto ========================================================= */ .header-portfolio .header-photo, .header-portfolio .header-name, .header-portfolio .last-update { transition: opacity 0.4s ease, transform 0.4s ease; } /* ========================================================= ESTADO DE SAÍDA DO NOME NO PORTFÓLIO (.portfolio-exit .header-name) --------------------------------------------------------- Define o comportamento de saída do elemento que representa o nome dentro do header do portfólio quando a classe estrutural .portfolio-exit é ativada. Este bloco aplica: - opacity: 0 → torna o elemento invisível - transform: translateX(64px) → desloca 64px para a direita (padrão horizontal do projeto) - transition-delay: 0s → inicia a animação imediatamente FUNÇÃO ARQUITETURAL: - Representa o estado de retração visual do nome no portfólio - Mantém coerência com o padrão horizontal adotado no header principal - Permite sincronização precisa com outros elementos do portfólio durante a transição FLUXO DE ANIMAÇÃO: 1️⃣ Estado ativo → visível + posição original 2️⃣ Aplicação de .portfolio-exit → fade-out + deslocamento à direita 3️⃣ Elemento preparado para possível reentrada futura (.portfolio-enter) IMPORTANTE: - transition-delay: 0s garante que este elemento inicie a saída antes de outros elementos escalonados - Depende de transition declarada previamente no estado base ========================================================= */ .portfolio-exit .header-name { opacity: 0; transform: translateX(64px); transition-delay: 0s; } /* ========================================================= ESTADO DE SAÍDA DA INFORMAÇÃO "LAST UPDATE" NO PORTFÓLIO (.portfolio-exit .last-update) --------------------------------------------------------- Define o comportamento de saída do elemento que exibe a última atualização dentro do header do portfólio quando a classe .portfolio-exit é ativada. Este bloco aplica: - opacity: 0 → torna o elemento invisível - transform: translateX(64px) → desloca 64px para a direita - transition-delay: 0.12s → cria atraso controlado para saída escalonada FUNÇÃO ARQUITETURAL: - Permite animação escalonada em relação ao .header-name do portfólio - Mantém coerência visual com o padrão horizontal do projeto - Contribui para fluidez e hierarquia visual durante a transição de saída FLUXO DE ANIMAÇÃO: 1️⃣ .header-name inicia saída (delay 0s) 2️⃣ .last-update inicia após 0.12s 3️⃣ Sequência visual organizada e fluida IMPORTANTE: - O transition-delay garante ritmo e evita saída simultânea abrupta - O deslocamento 64px → 0 deve ser mantido no estado de entrada para consistência - Depende de transition declarada previamente no estado base ========================================================= */ .portfolio-exit .last-update { opacity: 0; transform: translateX(64px); transition-delay: 0.12s; } /* ========================================================= ESTADO DE SAÍDA DA FOTO NO HEADER DO PORTFÓLIO (.portfolio-exit .header-photo) --------------------------------------------------------- Define o comportamento de saída do elemento que exibe a foto no header do portfólio quando a classe estrutural .portfolio-exit é ativada. Este bloco aplica: - opacity: 0 → torna a foto invisível - transform: translateX(64px) → desloca 64px para a direita - transition-delay: 0.24s → cria atraso controlado, escalonando a saída em relação aos outros elementos do header FUNÇÃO ARQUITETURAL: - Permite animação sequencial do header do portfólio, criando hierarquia visual - Mantém coerência com o padrão horizontal de animação adotado no projeto - Garante fluidez e organização durante a transição de saída FLUXO DE ANIMAÇÃO: 1️⃣ .header-name inicia saída (delay 0s) 2️⃣ .last-update inicia após 0.12s 3️⃣ .header-photo inicia após 0.24s 4️⃣ Elementos totalmente retraídos e prontos para possível reentrada IMPORTANTE: - O transition-delay escalonado reforça ritmo e legibilidade da transição - O deslocamento 64px → 0 deve ser mantido no estado de entrada para consistência - Depende de transition declarada previamente no estado base ========================================================= */ .portfolio-exit .header-photo { opacity: 0; transform: translateX(64px); transition-delay: 0.24s; } /* ========================================================= ESTADO PRÉ-ENTRADA DO HEADER DO PORTFÓLIO (.portfolio-pre-enter) --------------------------------------------------------- Define o estado inicial preparatório dos elementos internos do header do portfólio antes da aplicação da animação oficial de entrada. Este bloco aplica: - opacity: 0 → elementos iniciam invisíveis - transform: translateX(64px) → posiciona 64px à direita do estado final ELEMENTOS AFETADOS: - .header-photo → imagem do portfólio - .header-name → nome/título do portfólio - .last-update → informação de última atualização FUNÇÃO ARQUITETURAL: - Garante que os elementos estejam preparados para a animação de entrada sem saltos visuais - Mantém coerência com o padrão horizontal adotado para todas as transições - Permite que a classe de entrada subsequente (.portfolio-enter) execute fade-in e deslocamento de forma suave DIFERENÇA CONCEITUAL: - .portfolio-exit → animação de saída - .portfolio-pre-enter → estado estático inicial antes da entrada IMPORTANTE: - Não define transition aqui, permitindo controle total no estado de entrada - O valor de 64px garante consistência com o padrão de animação horizontal ========================================================= */ .portfolio-pre-enter .header-photo, .portfolio-pre-enter .header-name, .portfolio-pre-enter .last-update { opacity: 0; transform: translateX(64px); } /* ========================================================= ESTADO DE ENTRADA DA FOTO NO HEADER DO PORTFÓLIO (.portfolio-enter .header-photo) --------------------------------------------------------- Define o comportamento de entrada do elemento que exibe a foto no header do portfólio quando a classe estrutural .portfolio-enter é ativada. Este bloco aplica: - opacity: 1 → torna a foto visível - transform: translateX(0) → posiciona no estado final - transition-delay: 0s → inicia a animação imediatamente FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado em .portfolio-pre-enter - Mantém coerência com o padrão horizontal de 64px → 0 adotado no projeto - Permite sincronização escalonada com outros elementos do header do portfólio FLUXO DE ANIMAÇÃO: 1️⃣ .portfolio-pre-enter → invisível + deslocado à direita 2️⃣ Aplicação de .portfolio-enter → fade-in + movimento para posição 0 3️⃣ Elemento totalmente visível e estabilizado IMPORTANTE: - Transition deve estar declarada previamente no estado base - Transition-delay: 0s garante que a foto lidere a sequência de entrada ========================================================= */ .portfolio-enter .header-photo { opacity: 1; transform: translateX(0); transition-delay: 0s; } /* ========================================================= ESTADO DE ENTRADA DO NOME NO HEADER DO PORTFÓLIO (.portfolio-enter .header-name) --------------------------------------------------------- Define o comportamento de entrada do elemento que representa o nome/título no header do portfólio quando a classe estrutural .portfolio-enter é ativada. Este bloco aplica: - opacity: 1 → torna o elemento visível - transform: translateX(0) → posiciona no estado final - transition-delay: 0.12s → cria atraso controlado para entrada escalonada FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado em .portfolio-pre-enter - Mantém coerência com o padrão horizontal de 64px → 0 adotado no projeto - Implementa efeito escalonado (stagger) em relação à foto do portfólio - Reforça hierarquia visual e ritmo na transição de entrada FLUXO DE ANIMAÇÃO: 1️⃣ .header-photo entra primeiro (delay 0s) 2️⃣ .header-name entra após 0.12s 3️⃣ Sequência visual organizada e fluida IMPORTANTE: - Transition deve estar declarada previamente no estado base - Delay escalonado garante consistência com animação de saída ========================================================= */ .portfolio-enter .header-name { opacity: 1; transform: translateX(0); transition-delay: 0.12s; } /* ========================================================= ESTADO DE ENTRADA DA INFORMAÇÃO "LAST UPDATE" NO PORTFÓLIO (.portfolio-enter .last-update) --------------------------------------------------------- Define o comportamento de entrada do elemento que exibe a última atualização no header do portfólio quando a classe estrutural .portfolio-enter é ativada. Este bloco aplica: - opacity: 1 → torna o elemento visível - transform: translateX(0) → posiciona no estado final - transition-delay: 0.24s → cria atraso controlado para entrada escalonada FUNÇÃO ARQUITETURAL: - Conclui o ciclo iniciado em .portfolio-pre-enter - Mantém coerência com o padrão horizontal de 64px → 0 adotado no projeto - Implementa efeito escalonado em relação à foto e ao nome do header - Contribui para fluidez e hierarquia visual durante a transição de entrada FLUXO DE ANIMAÇÃO: 1️⃣ .header-photo inicia entrada (delay 0s) 2️⃣ .header-name inicia entrada (delay 0.12s) 3️⃣ .last-update inicia entrada (delay 0.24s) 4️⃣ Elementos totalmente visíveis e estabilizados IMPORTANTE: - Transition deve estar declarada previamente no estado base - O delay escalonado reforça ritmo e legibilidade da animação - Mantém consistência com animações de saída ========================================================= */ .portfolio-enter .last-update { opacity: 1; transform: translateX(0); transition-delay: 0.24s; } /* ========================================================= ESTADO BASE DA FOTO DO HEADER (.header-photo) --------------------------------------------------------- Define o estado inicial do elemento que exibe a foto no header antes de qualquer animação de entrada ou saída. Este bloco aplica: - opacity: 0 → foto inicia invisível - transform: translateX(64px) → desloca 64px para a direita, alinhado com o padrão horizontal do projeto - transition → suaviza alterações de: • opacity 0.4s ease • transform 0.4s ease FUNÇÃO ARQUITETURAL: - Serve como ponto de partida para animações de entrada (.header-enter) e saída (.header-exit) - Garante consistência visual e evita “saltos” ao ativar classes dinamicamente - Permite sincronização com outros elementos do header em transições escalonadas IMPORTANTE: - O valor 64px no transform deve ser mantido para consistência (adicionar 'px' se necessário) - Transition está declarada aqui para aplicar em todas as alterações futuras ========================================================= */ .header-photo { opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; transform: translateX(64px); } /* ========================================================= ESTADO DE FOTO CARREGADA NO HEADER (.header-photo.loaded) --------------------------------------------------------- Define o comportamento do elemento de foto do header quando a imagem é carregada e a classe .loaded é aplicada. Este bloco aplica: - opacity: 1 → torna a foto visível - transform: translateX(0) → posiciona a foto no estado final, removendo deslocamento horizontal FUNÇÃO ARQUITETURAL: - Finaliza a animação iniciada no estado base (.header-photo) - Garante transição suave de invisível para visível - Mantém coerência com o padrão horizontal de animação do projeto - Permite sincronização visual com outros elementos do header que possuem animações escalonadas FLUXO DE ANIMAÇÃO: 1️⃣ .header-photo inicia no estado base → invisível + deslocada 2️⃣ Aplicação de .loaded → fade-in + movimento para posição 0 3️⃣ Foto totalmente visível e estabilizada IMPORTANTE: - Transition deve estar definida no estado base para que a animação ocorra suavemente - Mantém consistência com os outros elementos animados do header ========================================================= */ .header-photo.loaded { opacity: 1; transform: translateX(0); } /* ========================================================= ESTADO DE SAÍDA DA FOTO NO HEADER DO PORTFÓLIO (.portfolio-exit .header-photo) --------------------------------------------------------- Define o comportamento de saída do elemento que exibe a foto no header do portfólio quando a classe estrutural .portfolio-exit é aplicada. Este bloco aplica: - opacity: 0 → torna a foto invisível - transform: translateX(64px) → desloca 64px para a direita, seguindo o padrão horizontal de animação do projeto FUNÇÃO ARQUITETURAL: - Implementa o efeito de retração visual da foto durante a saída do portfólio - Mantém coerência com outros elementos do header em animações escalonadas - Prepara o elemento para possível reentrada futura (.portfolio-enter) FLUXO DE ANIMAÇÃO: 1️⃣ Estado ativo → foto visível + posição original 2️⃣ Aplicação de .portfolio-exit → fade-out + deslocamento horizontal 3️⃣ Elemento invisível e deslocado, pronto para reentrada IMPORTANTE: - Depende de transition declarada no estado base - O deslocamento 64px → 0 deve ser mantido nos estados de entrada para consistência ========================================================= */ .portfolio-exit .header-photo { opacity: 0; transform: translateX(64px); } /* ========================================================= ESTADO OCULTO DA FOTO DO HEADER (.header-photo.photo-hidden) --------------------------------------------------------- Define o comportamento do elemento de foto do header quando a classe .photo-hidden é aplicada, removendo interatividade e tornando-o invisível. Este bloco aplica: - opacity: 0 → torna a foto invisível - transform: translateX(64px) → desloca 64px para a direita, mantendo consistência com animações horizontais do projeto - pointer-events: none → impede qualquer interação do usuário com a foto FUNÇÃO ARQUITETURAL: - Permite esconder a foto de forma controlada sem removê-la do DOM - Mantém coerência visual com padrões de animação já existentes - Útil para alternar estados do header sem afetar layout ou interatividade de outros elementos IMPORTANTE: - Transition deve estar declarada no estado base para animações suaves - O deslocamento 64px → 0 deve ser mantido nos estados de entrada/saída ========================================================= */ .header-photo.photo-hidden { opacity: 0; transform: translateX(64px); pointer-events: none; } /* ========================================================= ESTADO COMPACTO DA FOTO NO HEADER HOME (.header-home .header-photo) --------------------------------------------------------- Define o estado inicial da foto no header da página home quando o elemento precisa estar oculto ou minimizado sem removê-lo do DOM. Este bloco aplica: - width: 0 → remove a largura visível - margin: 0 → remove margens externas - padding: 0 → remove preenchimento interno - gap: 0 → elimina espaçamento entre elementos filhos - overflow: hidden → evita exibição de conteúdo excedente FUNÇÃO ARQUITETURAL: - Permite esconder visualmente a foto mantendo o elemento no fluxo do DOM - Garante que não ocupe espaço no layout - Facilita animações de expansão ou transição para estados visíveis posteriormente IMPORTANTE: - Transition pode ser aplicada posteriormente para animar largura, padding ou margem - Mantém consistência de layout ao alternar entre estados visível e oculto ========================================================= */ .header-home .header-photo { width: 0; margin: 0; padding: 0; gap: 0; overflow: hidden; } /* ========================================================= ESTADO PADRÃO DA FOTO NO HEADER DO PORTFÓLIO (.header-portfolio .header-photo) --------------------------------------------------------- Define o estado visual e espaçamento da foto dentro do header do portfólio quando o elemento está ativo e visível. Este bloco aplica: - width: auto → a foto assume sua largura natural - margin-right: 12px → cria espaçamento à direita, separando a foto de elementos adjacentes FUNÇÃO ARQUITETURAL: - Permite alinhamento correto com o nome e a última atualização do portfólio - Mantém consistência visual com o padrão horizontal do layout - Facilita transições suaves quando alternado entre diferentes estados do header IMPORTANTE: - Transições de largura ou margens podem ser aplicadas caso necessário para animação - Mantém coerência com padrões de espaçamento do restante do projeto ========================================================= */ .header-portfolio .header-photo { width: auto; margin-right: 12px; } /* ========================================================= EXIBIÇÃO DA FOTO DE INTRODUÇÃO NA HOME (body[data-mode="home"] .intro-photo) --------------------------------------------------------- Define a visibilidade do elemento de foto de introdução quando o modo da página é "home". Este bloco aplica: - display: flex → torna o elemento visível e habilita comportamento de container flexível FUNÇÃO ARQUITETURAL: - Garante que a foto de introdução só seja exibida no contexto da página home - Permite alinhamento e distribuição interna de filhos usando flexbox - Mantém consistência visual com outros elementos do layout da home IMPORTANTE: - Depende do atributo data-mode="home" no body para ativação - Pode ser combinado com transições ou animações adicionais, se necessário ========================================================= */ body[data-mode="home"] .intro-photo { display: flex; } /* ========================================================= OCULTAÇÃO DO PAINEL LATERAL NA HOME (body[data-mode="home"] .side-portfolio) --------------------------------------------------------- Define o estado de visibilidade do painel lateral do portfólio quando o modo da página é "home". Este bloco aplica: - display: none → remove o painel do fluxo do layout, tornando-o invisível e não interativo FUNÇÃO ARQUITETURAL: - Garante que o side-portfolio não apareça na página home, evitando interferência no layout principal - Permite controle dinâmico de exibição via JavaScript ou mudança de modo - Mantém consistência visual entre páginas com diferentes modos IMPORTANTE: - Elementos com display: none não permitem animações diretas até que sejam reativados com display diferente - Use classes ou scripts para ativar o painel em outros modos, se necessário ========================================================= */ body[data-mode="home"] .side-portfolio { display: none; } /* ========================================================= OCULTAÇÃO DA FOTO DE INTRODUÇÃO NO MODO PORTFÓLIO (body[data-mode="portfolio"] .intro-photo) --------------------------------------------------------- Define o estado de visibilidade do elemento de foto de introdução quando o modo da página é "portfolio". Este bloco aplica: - display: none → remove a foto do fluxo do layout, tornando-a invisível e não interativa FUNÇÃO ARQUITETURAL: - Garante que a intro-photo não seja exibida no contexto do portfólio, mantendo foco nos elementos relevantes do layout - Permite alternância dinâmica entre modos de página via atributo data-mode no body - Mantém consistência visual e hierarquia entre diferentes modos de exibição IMPORTANTE: - Elementos com display: none não permitem transições diretas até serem ativados novamente - Use classes ou scripts para exibir o elemento quando retornar ao modo home ========================================================= */ body[data-mode="portfolio"] .intro-photo { display: none; } /* ========================================================= EXIBIÇÃO DO PAINEL LATERAL NO MODO PORTFÓLIO (body[data-mode="portfolio"] .side-portfolio) --------------------------------------------------------- Define o estado de visibilidade do painel lateral do portfólio quando o modo da página é "portfolio". Este bloco aplica: - display: flex → torna o painel visível e habilita comportamento de container flexível FUNÇÃO ARQUITETURAL: - Permite que o side-portfolio seja exibido apenas no contexto do portfólio - Mantém coerência visual com outros elementos do layout - Facilita alinhamento e distribuição interna de elementos filhos via flexbox IMPORTANTE: - Depende do atributo data-mode="portfolio" no body para ativação - Pode ser combinado com transições ou animações adicionais, se necessário ========================================================= */ body[data-mode="portfolio"] .side-portfolio { display: flex; } /* ========================================================= OTIMIZAÇÃO DE RENDERIZAÇÃO PARA ELEMENTOS ANIMADOS (.intro-photo, .side-portfolio) --------------------------------------------------------- Indica ao navegador que determinados elementos terão alterações frequentes em transform e opacity, permitindo otimizações de performance. Este bloco aplica: - will-change: transform, opacity → sinaliza mudanças esperadas para renderização antecipada ELEMENTOS AFETADOS: - .intro-photo → foto de introdução na home - .side-portfolio → painel lateral do portfólio FUNÇÃO ARQUITETURAL: - Melhora desempenho de animações e transições aplicadas a esses elementos - Reduz “jank” ou atrasos durante alterações de estado (entrada, saída, hover, etc.) - Indica ao navegador para criar camadas compostas separadas, otimizando repintura IMPORTANTE: - Use com parcimônia, pois excesso de will-change pode aumentar consumo de memória - Ideal para elementos que sofrerão transform, translate, scale ou alteração de opacity ========================================================= */ .intro-photo, .side-portfolio { will-change: transform, opacity; } /* ========================================================= ANIMAÇÃO DE SAÍDA DA FRASE DE ASSINATURA (.intro-photo.is-leaving .signature-phrase) --------------------------------------------------------- Define a animação aplicada à frase de assinatura dentro da foto de introdução quando o container recebe a classe .is-leaving. Este bloco aplica: - animation: introOut 0.4s ease forwards → executa a animação nomeada introOut durante 0.4s com easing suave e mantém o estado final após o término FUNÇÃO ARQUITETURAL: - Cria efeito visual de saída da frase de assinatura durante transições da intro-photo - Mantém consistência com o padrão de animações do projeto - Permite sincronização com outras animações do container .intro-photo FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-leaving 2️⃣ .signature-phrase executa introOut 3️⃣ Estado final da animação mantido via forwards IMPORTANTE: - A duração e easing podem ser ajustados conforme necessário - A animação introOut deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-leaving .signature-phrase { animation: introOut 0.4s ease forwards; } /* ========================================================= ANIMAÇÃO DE SAÍDA DO TERCEIRO BOTÃO DE PROJETOS (.intro-photo.is-leaving .btn-projetos:nth-of-type(3)) --------------------------------------------------------- Define a animação aplicada ao terceiro botão de projetos dentro da intro-photo quando o container recebe a classe .is-leaving. Este bloco aplica: - animation: introOut 0.4s ease forwards 0.16s → executa a animação introOut durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.16s FUNÇÃO ARQUITETURAL: - Cria efeito escalonado na saída dos botões de projetos - Mantém coerência com o padrão de animações de entrada/saída do projeto - Permite que elementos internos saiam de forma organizada e visualmente agradável FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-leaving 2️⃣ Primeiro e segundo botões podem iniciar animações antes deste terceiro botão (delay 0s ou 0.08s) 3️⃣ Terceiro botão inicia introOut após 0.16s 4️⃣ Estado final mantido via forwards IMPORTANTE: - Delay escalonado reforça ritmo visual - A animação introOut deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-leaving .btn-projetos:nth-of-type(3) { animation: introOut 0.4s ease forwards 0.16s; } /* ========================================================= ANIMAÇÃO DE SAÍDA DO SEGUNDO BOTÃO DE PROJETOS (.intro-photo.is-leaving .btn-projetos:nth-of-type(2)) --------------------------------------------------------- Define a animação aplicada ao segundo botão de projetos dentro da intro-photo quando o container recebe a classe .is-leaving. Este bloco aplica: - animation: introOut 0.4s ease forwards 0.32s → executa a animação introOut durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.32s FUNÇÃO ARQUITETURAL: - Cria efeito escalonado na saída dos botões de projetos, permitindo sequência visual organizada - Mantém coerência com o padrão de animações do projeto - Permite sincronização harmoniosa com outros elementos da intro-photo FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-leaving 2️⃣ Primeiro botão inicia animação (possível delay menor) 3️⃣ Segundo botão inicia introOut após 0.32s 4️⃣ Terceiro botão inicia após 0.16s (se aplicável) 5️⃣ Estado final mantido via forwards IMPORTANTE: - O delay escalonado reforça o ritmo visual - A animação introOut deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-leaving .btn-projetos:nth-of-type(2) { animation: introOut 0.4s ease forwards 0.32s; } /* ========================================================= ANIMAÇÃO DE SAÍDA DO PRIMEIRO BOTÃO DE PROJETOS (.intro-photo.is-leaving .btn-projetos:nth-of-type(1)) --------------------------------------------------------- Define a animação aplicada ao primeiro botão de projetos dentro da intro-photo quando o container recebe a classe .is-leaving. Este bloco aplica: - animation: introOut 0.4s ease forwards 0.48s → executa a animação introOut durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.48s FUNÇÃO ARQUITETURAL: - Finaliza a sequência escalonada de saída dos botões de projetos - Mantém coerência com o padrão de animações do projeto - Garante que os elementos saiam de forma organizada e visualmente agradável FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-leaving 2️⃣ Terceiro botão inicia animação (delay 0.16s) 3️⃣ Segundo botão inicia animação (delay 0.32s) 4️⃣ Primeiro botão inicia introOut após 0.48s 5️⃣ Estado final mantido via forwards IMPORTANTE: - O delay escalonado reforça ritmo e legibilidade da animação - A animação introOut deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-leaving .btn-projetos:nth-of-type(1) { animation: introOut 0.4s ease forwards 0.48s; } /* ========================================================= ANIMAÇÃO DE SAÍDA DA IMAGEM DE INTRODUÇÃO (.intro-photo.is-leaving img) --------------------------------------------------------- Define a animação aplicada à imagem dentro do container intro-photo quando este recebe a classe .is-leaving. Este bloco aplica: - animation: introOut 0.4s ease forwards 0.64s → executa a animação introOut durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.64s FUNÇÃO ARQUITETURAL: - Finaliza a sequência escalonada de saída dos elementos da intro-photo - Mantém coerência com o padrão de animações do projeto - Permite que a imagem saia de forma organizada após os botões e frase de assinatura FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-leaving 2️⃣ Botões e frase de assinatura iniciam animação escalonada (delays 0.16s, 0.32s, 0.48s) 3️⃣ Imagem inicia introOut após 0.64s 4️⃣ Elemento totalmente oculto e estado final mantido IMPORTANTE: - O delay escalonado reforça ritmo e hierarquia visual - A animação introOut deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-leaving img { animation: introOut 0.4s ease forwards 0.64s; } /* ========================================================= ESTADO PRÉ-ENTRADA DOS ELEMENTOS DA INTRO PHOTO (.intro-photo.is-entering img, .btn-projetos, .signature-phrase) --------------------------------------------------------- Define o estado inicial preparatório dos elementos internos da intro-photo antes da aplicação da animação de entrada quando a classe .is-entering é aplicada. Este bloco aplica: - opacity: 0 → elementos iniciam invisíveis - transform: translateY(64px) → desloca os elementos 64px para baixo em relação ao estado final ELEMENTOS AFETADOS: - img → imagem de introdução - .btn-projetos:nth-of-type(1,2,3) → botões de projetos - .signature-phrase → frase de assinatura FUNÇÃO ARQUITETURAL: - Prepara os elementos para animação de entrada suave (fade-in + movimento vertical) - Mantém coerência com o padrão de animação adotado no projeto - Evita “saltos visuais” ao ativar a animação dinamicamente IMPORTANTE: - Não define transition ou animation aqui, permitindo controle completo na classe de entrada - O deslocamento vertical de 64px garante consistência visual entre elementos ========================================================= */ .intro-photo.is-entering img, .intro-photo.is-entering .btn-projetos:nth-of-type(1), .intro-photo.is-entering .btn-projetos:nth-of-type(2), .intro-photo.is-entering .btn-projetos:nth-of-type(3), .intro-photo.is-entering .signature-phrase { opacity: 0; transform: translateY(64px); } /* ========================================================= ANIMAÇÃO DE ENTRADA DA IMAGEM DE INTRODUÇÃO (.intro-photo.is-entering img) --------------------------------------------------------- Define a animação aplicada à imagem dentro do container intro-photo quando este recebe a classe .is-entering. Este bloco aplica: - animation: introIn 0.4s ease forwards → executa a animação introIn durante 0.4s, com easing suave, mantendo o estado final após o término FUNÇÃO ARQUITETURAL: - Permite que a imagem entre de forma suave após o estado pré-entrada (opacity 0, translateY 64px) - Mantém coerência com o padrão de animações verticais adotado no projeto - Sincroniza a entrada da imagem com outros elementos da intro-photo (botões e frase) FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-entering 2️⃣ Imagem inicia a animação introIn 3️⃣ Elemento transita de invisível + deslocado para visível + posição final IMPORTANTE: - A animação introIn deve estar previamente definida em keyframes - Duração e easing podem ser ajustados conforme necessidade do design ========================================================= */ .intro-photo.is-entering img { animation: introIn 0.4s ease forwards; } /* ========================================================= ANIMAÇÃO DE ENTRADA DO PRIMEIRO BOTÃO DE PROJETOS (.intro-photo.is-entering .btn-projetos:nth-of-type(1)) --------------------------------------------------------- Define a animação aplicada ao primeiro botão de projetos dentro da intro-photo quando o container recebe a classe .is-entering. Este bloco aplica: - animation: introIn 0.4s ease forwards 0.16s → executa a animação introIn durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.16s FUNÇÃO ARQUITETURAL: - Cria efeito escalonado na entrada dos botões de projetos - Mantém coerência com o padrão de animações verticais do projeto - Permite sequência visual organizada e sincronizada com outros elementos da intro-photo FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-entering 2️⃣ Imagem inicia introIn (delay 0s) 3️⃣ Primeiro botão inicia introIn após 0.16s 4️⃣ Elemento transita de invisível + deslocado para visível + posição final IMPORTANTE: - O delay escalonado reforça ritmo e legibilidade da animação - A animação introIn deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-entering .btn-projetos:nth-of-type(1) { animation: introIn 0.4s ease forwards 0.16s; } /* ========================================================= ANIMAÇÃO DE ENTRADA DO SEGUNDO BOTÃO DE PROJETOS (.intro-photo.is-entering .btn-projetos:nth-of-type(2)) --------------------------------------------------------- Define a animação aplicada ao segundo botão de projetos dentro da intro-photo quando o container recebe a classe .is-entering. Este bloco aplica: - animation: introIn 0.4s ease forwards 0.32s → executa a animação introIn durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.32s FUNÇÃO ARQUITETURAL: - Mantém efeito escalonado na entrada dos botões de projetos - Garante sequência visual organizada e coerente com o padrão vertical do projeto - Permite sincronização harmoniosa com outros elementos da intro-photo FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-entering 2️⃣ Imagem inicia introIn (delay 0s) 3️⃣ Primeiro botão inicia introIn (delay 0.16s) 4️⃣ Segundo botão inicia introIn após 0.32s 5️⃣ Elemento transita de invisível + deslocado para visível + posição final IMPORTANTE: - O delay escalonado reforça ritmo e hierarquia visual - A animação introIn deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-entering .btn-projetos:nth-of-type(2) { animation: introIn 0.4s ease forwards 0.32s; } /* ========================================================= ANIMAÇÃO DE ENTRADA DO TERCEIRO BOTÃO DE PROJETOS (.intro-photo.is-entering .btn-projetos:nth-of-type(3)) --------------------------------------------------------- Define a animação aplicada ao terceiro botão de projetos dentro da intro-photo quando o container recebe a classe .is-entering. Este bloco aplica: - animation: introIn 0.4s ease forwards 0.48s → executa a animação introIn durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.48s FUNÇÃO ARQUITETURAL: - Finaliza a sequência escalonada de entrada dos botões de projetos - Mantém coerência com o padrão de animações verticais do projeto - Permite que os elementos internos apareçam de forma organizada e visualmente agradável FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-entering 2️⃣ Imagem inicia introIn (delay 0s) 3️⃣ Primeiro botão inicia (delay 0.16s) 4️⃣ Segundo botão inicia (delay 0.32s) 5️⃣ Terceiro botão inicia introIn após 0.48s 6️⃣ Elementos totalmente visíveis e posição final IMPORTANTE: - O delay escalonado reforça ritmo e hierarquia visual - A animação introIn deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-entering .btn-projetos:nth-of-type(3) { animation: introIn 0.4s ease forwards 0.48s; } /* ========================================================= ANIMAÇÃO DE ENTRADA DA FRASE DE ASSINATURA (.intro-photo.is-entering .signature-phrase) --------------------------------------------------------- Define a animação aplicada à frase de assinatura dentro do container intro-photo quando este recebe a classe .is-entering. Este bloco aplica: - animation: introIn 0.4s ease forwards 0.64s → executa a animação introIn durante 0.4s, com easing suave, mantendo o estado final após o término e iniciando com atraso de 0.64s FUNÇÃO ARQUITETURAL: - Conclui a sequência escalonada de entrada dos elementos da intro-photo - Mantém coerência com o padrão de animações verticais do projeto - Permite que a frase de assinatura apareça de forma harmoniosa após botões e imagem FLUXO DE ANIMAÇÃO: 1️⃣ .intro-photo recebe .is-entering 2️⃣ Imagem inicia introIn (delay 0s) 3️⃣ Botões de projetos iniciam escalonados (0.16s, 0.32s, 0.48s) 4️⃣ Frase de assinatura inicia introIn após 0.64s 5️⃣ Elementos totalmente visíveis e posição final IMPORTANTE: - O delay escalonado reforça ritmo e hierarquia visual - A animação introIn deve estar previamente definida em keyframes ========================================================= */ .intro-photo.is-entering .signature-phrase { animation: introIn 0.4s ease forwards 0.64s; } /* ========================================================= KEYFRAMES DE ANIMAÇÃO DE ENTRADA (@keyframes introIn) --------------------------------------------------------- Define os keyframes da animação introIn, usada para elementos dentro de .intro-photo ao entrar no viewport ou quando a classe .is-entering é aplicada. Este bloco aplica: - from → estado inicial: • opacity: 0 → invisível • transform: translateY(64px) → deslocado 64px para baixo - to → estado final: • opacity: 1 → totalmente visível • transform: translateY(0) → posição final FUNÇÃO ARQUITETURAL: - Proporciona efeito de fade-in combinado com deslocamento vertical suave - Mantém coerência com o padrão de animação escalonada e vertical do projeto - Usada em elementos como: • img • .btn-projetos • .signature-phrase IMPORTANTE: - Deve ser chamada via propriedade animation nos elementos desejados - Duração, easing e delay são definidos na regra de animation do elemento ========================================================= */ @keyframes introIn { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= KEYFRAMES DE ANIMAÇÃO DE SAÍDA (@keyframes introOut) --------------------------------------------------------- Define os keyframes da animação introOut, usada para elementos dentro de .intro-photo ao sair do viewport ou quando a classe .is-leaving é aplicada. Este bloco aplica: - from → estado inicial: • opacity: 1 → totalmente visível • transform: translateY(0) → posição original - to → estado final: • opacity: 0 → invisível • transform: translateY(64px) → deslocado 64px para baixo FUNÇÃO ARQUITETURAL: - Cria efeito de fade-out combinado com deslocamento vertical suave - Mantém coerência com o padrão de animação escalonada e vertical do projeto - Usada em elementos como: • img • .btn-projetos • .signature-phrase IMPORTANTE: - Deve ser chamada via propriedade animation nos elementos desejados - Duração, easing e delay são definidos na regra de animation do elemento ========================================================= */ @keyframes introOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(64px); } } /* ========================================================= ESTADO DE ENTRADA DO PAINEL LATERAL DO PORTFÓLIO (.side-portfolio.is-entering) --------------------------------------------------------- Define o estado inicial e animação de entrada do side-portfolio quando a classe .is-entering é aplicada. Este bloco aplica: - opacity: 0 → começa invisível - transform: translateY(64px) → deslocado 64px para baixo - animation: sideMenuIn 0.4s ease forwards → executa a animação sideMenuIn durante 0.4s, com easing suave, mantendo o estado final após o término FUNÇÃO ARQUITETURAL: - Permite que o painel lateral apareça de forma suave ao entrar no modo portfólio - Mantém coerência com o padrão de animações verticais do projeto - Evita saltos visuais e garante sincronização com outros elementos da página IMPORTANTE: - A animação sideMenuIn deve estar previamente definida em keyframes - Duração e easing podem ser ajustados conforme necessidade do design ========================================================= */ .side-portfolio.is-entering { opacity: 0; transform: translateY(64px); animation: sideMenuIn 0.4s ease forwards; } /* ========================================================= ESTADO DE SAÍDA DO PAINEL LATERAL DO PORTFÓLIO (.side-portfolio.is-leaving) --------------------------------------------------------- Define o estado inicial e animação de saída do side-portfolio quando a classe .is-leaving é aplicada. Este bloco aplica: - opacity: 1 → começa totalmente visível - transform: translateY(0) → posição original - animation: sideMenuOut 0.4s ease forwards → executa a animação sideMenuOut durante 0.4s, com easing suave, mantendo o estado final após o término FUNÇÃO ARQUITETURAL: - Permite que o painel lateral desapareça de forma suave ao sair do modo portfólio - Mantém coerência com o padrão de animações verticais do projeto - Evita saltos visuais e garante sincronização com outros elementos da página IMPORTANTE: - A animação sideMenuOut deve estar previamente definida em keyframes - Duração e easing podem ser ajustados conforme necessidade do design ========================================================= */ .side-portfolio.is-leaving { opacity: 1; transform: translateY(0); animation: sideMenuOut 0.4s ease forwards; } /* ========================================================= KEYFRAMES DE ANIMAÇÃO DE ENTRADA DO PAINEL LATERAL (@keyframes sideMenuIn) --------------------------------------------------------- Define os keyframes da animação sideMenuIn, usada para o side-portfolio ao entrar no viewport ou quando a classe .is-entering é aplicada. Este bloco aplica: - from → estado inicial: • opacity: 0 → invisível • transform: translateY(64px) → deslocado 64px para baixo - to → estado final: • opacity: 1 → totalmente visível • transform: translateY(0) → posição original FUNÇÃO ARQUITETURAL: - Proporciona efeito de fade-in combinado com movimento vertical suave - Mantém coerência com o padrão de animação do projeto - Usada em elementos do side-portfolio ao entrar na página IMPORTANTE: - Deve ser chamada via propriedade animation nos elementos desejados - Duração, easing e delay são definidos na regra de animation do elemento ========================================================= */ @keyframes sideMenuIn { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= KEYFRAMES DE ANIMAÇÃO DE SAÍDA DO PAINEL LATERAL (@keyframes sideMenuOut) --------------------------------------------------------- Define os keyframes da animação sideMenuOut, usada para o side-portfolio ao sair do viewport ou quando a classe .is-leaving é aplicada. Este bloco aplica: - from → estado inicial: • opacity: 1 → totalmente visível • transform: translateY(0) → posição original - to → estado final: • opacity: 0 → invisível • transform: translateY(64px) → deslocado 64px para baixo FUNÇÃO ARQUITETURAL: - Proporciona efeito de fade-out combinado com movimento vertical suave - Mantém coerência com o padrão de animação do projeto - Usada em elementos do side-portfolio ao sair da página IMPORTANTE: - Deve ser chamada via propriedade animation nos elementos desejados - Duração, easing e delay são definidos na regra de animation do elemento ========================================================= */ @keyframes sideMenuOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(64px); } } /* ========================================================= ESTILO BASE DO ÍCONE DE HOME NO HEADER (#header-home-icon) --------------------------------------------------------- Define o estado inicial e propriedades visuais do ícone de home localizado no header. Este bloco aplica: - background: transparent → sem cor de fundo - border: none → sem borda - cursor: pointer → indica interatividade - font-size: 28px → tamanho do ícone - color: var(--header-name) → cor definida pela variável de tema do header - transform: scale(1) → tamanho padrão, sem escala - opacity: 0 → inicia invisível - pointer-events: none → não interativo inicialmente - display: inline-flex → permite alinhamento flexível - transition: • opacity 0.4s ease • transform 0.4s ease • color 0.4s ease → suaviza alterações visuais FUNÇÃO ARQUITETURAL: - Define aparência e comportamento base antes da ativação dinâmica via JavaScript ou interação do usuário - Suporta efeitos de fade, escala e alteração de cor de forma suave - Evita interação do usuário até que o elemento esteja visível e ativo IMPORTANTE: - Alterações de estado (entrada, hover, click) devem ser controladas via classes ou scripts - Transitions garantem animações suaves sem saltos ========================================================= */ #header-home-icon { background: transparent; border: none; cursor: pointer; font-size: 28px; color: var(--header-name); transform: scale(1); opacity: 0; pointer-events: none; display: inline-flex; transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease; } /* ========================================================= ESTADO VISÍVEL DO ÍCONE DE HOME NO HEADER (#header-home-icon.is-visible) --------------------------------------------------------- Define as propriedades do ícone de home quando ele deve estar visível e interativo. Este bloco aplica: - opacity: 1 → torna o ícone totalmente visível - pointer-events: auto → habilita interação do usuário FUNÇÃO ARQUITETURAL: - Permite que o ícone seja clicável apenas após estar visível - Suporta transições suaves definidas no estilo base (#header-home-icon) - Mantém consistência visual e funcional com animações de entrada/saída do header IMPORTANTE: - A visibilidade é controlada via classe dinâmica .is-visible adicionada por JavaScript - Outras propriedades (como transform ou color) permanecem definidas pelo estado base ========================================================= */ #header-home-icon.is-visible { opacity: 1; pointer-events: auto; } /* ========================================================= EFEITO DE HOVER DO ÍCONE DE HOME NO HEADER (#header-home-icon:hover) --------------------------------------------------------- Define a alteração de cor do ícone de home quando o usuário passa o cursor sobre ele. Este bloco aplica: - color: var(--accent-color) → muda a cor do ícone para a cor de destaque definida pela variável de tema do projeto FUNÇÃO ARQUITETURAL: - Fornece feedback visual de interatividade - Mantém coerência com a paleta de cores do projeto - Complementa as transições definidas no estado base (#header-home-icon), garantindo animação suave IMPORTANTE: - O efeito de hover só é perceptível se o ícone estiver visível (opacity: 1) e interativo (pointer-events: auto) ========================================================= */ #header-home-icon:hover { color: var(--accent-color); } /* ========================================================= VARIÁVEIS DE TEMA GLOBAL (:root) --------------------------------------------------------- Define as variáveis CSS utilizadas em todo o projeto para cores, sombras, tipografia e destaques visuais. VARIÁVEIS DE COR E FUNDO: - --bg-color-header → fundo do header - --bg-color-page → fundo da página - --bg-color-footer → fundo do footer - --bg-color-button → fundo dos botões - --bg-color-button-hover → fundo dos botões ao passar o mouse - --fixed-header-section → cor de seções fixas do header - --intro-text → cor do texto de introdução - --curriculo-text → cor do texto de currículo - --curriculo-list → cor das listas do currículo - --curriculo-text-strong → cor de textos fortes do currículo - --exp-period → cor do período de experiência - --exp-role → cor da função/posição na experiência - --exp-toggle → cor dos toggles de experiência - --exp-details → cor dos detalhes da experiência - --exp-details-h4 → cor dos títulos h4 dos detalhes - --tech-title → cor do título de tecnologia - --tech-desc → cor da descrição de tecnologia - --courses-flow → cor do fluxo de cursos - --signature-phrase → cor da frase de assinatura - --category-pipe → cor da linha do título de categoria - --category-name → cor do nome da categoria - --experience-border → cor das bordas de experiência - --linha-proj → cor das linhas de projeto - --link-cert → cor dos links de certificados - --text-color → cor principal do texto - --card-bg → fundo dos cards - --accent-color → cor de destaque do projeto VARIÁVEIS DE SOMBRA: - --box-shadow-header → sombra do header - --box-shadow-side-menu → sombra do menu lateral - --box-shadow-footer → sombra do footer - --box-shadow-button → sombra dos botões - --box-shadow-link-cert → sombra dos links de certificado TEMA DARK ([data-theme="dark"]): - Substitui as variáveis de cor e sombra para modo escuro - Mantém coerência visual e contraste adequado - Ex.: --bg-color-header: #101010; --accent-color: #8bb9ff; FUNÇÃO ARQUITETURAL: - Centraliza todas as cores e sombras em variáveis - Facilita manutenção e alternância de temas - Permite consistência visual em todo o projeto IMPORTANTE: - Alterações no tema devem ser feitas alterando as variáveis correspondentes - Uso de var(--nome-da-variavel) garante flexibilidade e adaptação automática ao tema ativo ========================================================= */ :root { --bg-color-header: #0A3C5C; --bg-color-page: #F8F8F8; --bg-color-footer: #0A3C5C; --bg-color-button: #0A3C5C; --bg-color-button-hover: #224F6C; --fixed-header-section: #080808; --intro-text: #4C4C4C; --curriculo-text: #4C4C4C; --curriculo-list: #4C4C4C; --curriculo-text-strong: #080808; --box-shadow-header: 0 6px 16px rgba(0,0,0,0.2); --box-shadow-side-menu: 0 0 16px rgba(0,0,0,0.2); --box-shadow-footer: 0 -6px 16px rgba(0,0,0,0.2); --box-shadow-button: 0 0 16px rgba(0,0,0,0.2); --exp-period: #264653; --exp-role: #080808; --exp-toggle: #080808; --exp-details: #4C4C4C; --exp-details-h4: #080808; --tech-title: #080808; --tech-desc: #4C4C4C; --courses-flow: #4C4C4C; --signature-phrase: #4C4C4C; --category-pipe: #282828; --category-name: #282828; --experience-border: #4C4C4C; --linha-proj: #4C4C4C; --link-cert: #0A3C5C; --box-shadow-link-cert: 0 0 8px rgba(0,0,0,0.2); --text-color: #181818; --card-bg: #f5f5f5; --accent-color: #4e73df; } /* ========================================================= VARIÁVEIS DE TEMA DARK ([data-theme="dark"]) --------------------------------------------------------- Sobrescreve as variáveis globais para o tema escuro, mantendo coerência visual e contraste adequado. ========================================================= */ [data-theme="dark"] { --bg-color-header: #101010; --bg-color-page: #1C1C1C; --bg-color-footer: #101010; --bg-color-button: #101010; --bg-color-button-hover: #181818; --fixed-header-section: #808080; --intro-text: #EAEAEA; --curriculo-text: #EAEAEA; --curriculo-list: #EAEAEA; --curriculo-text-strong: #808080; --box-shadow-header: 0 6px 16px rgba(255,255,255,0.2); --box-shadow-side-menu: 0 0 16px rgba(255,255,255,0.2); --box-shadow-footer: 0 -6px 16px rgba(255,255,255,0.2); --box-shadow-button: 0 0 16px rgba(255,255,255,0.2); --exp-period: #547888; --exp-role: #808080; --exp-toggle: #808080; --exp-details: #EAEAEA; --exp-details-h4: #808080; --tech-title: #808080; --tech-desc: #EAEAEA; --courses-flow: #EAEAEA; --signature-phrase: #EAEAEA; --category-pipe: #C0C0C0; --category-name: #C0C0C0; --experience-border: #EAEAEA; --linha-proj: #EAEAEA; --link-cert: #476C83; --box-shadow-link-cert: 0 0 8px rgba(255,255,255,0.2); --text-color: #EAEAEA; --card-bg: #1e1e1e; --accent-color: #8bb9ff; }