/* ========================================================================= VARIÁVEIS DE COR (CSS Custom Properties) ------------------------------------------------------------------------- Todas as cores do site ficam definidas aqui, em um só lugar. Para mudar a identidade visual inteira, basta alterar estes valores. ":root" representa o documento todo. ========================================================================= */ :root { /* Cores de base (tema claro) */ --cor-fundo: #f7f8fc; --cor-superficie: #ffffff; --cor-texto: #16181d; --cor-texto-suave: #5b6270; --cor-borda: #e6e8f0; /* Cores de marca — usadas em botões, links e destaques */ --cor-primaria: #6d28d9; /* roxo */ --cor-primaria-escura: #5b21b6; --cor-secundaria: #0ea5e9; /* azul-ciano */ --cor-acento: #ec4899; /* rosa */ /* Cores dos cartões de projeto (cada um tem a sua) */ --cor-roxo: #7c3aed; --cor-verde: #10b981; --cor-laranja: #f97316; /* Degradê do topo da página */ --degrade-topo: linear-gradient(135deg, #6d28d9 0%, #0ea5e9 60%, #ec4899 120%); --sombra: 0 10px 30px rgba(17, 12, 46, 0.08); --sombra-forte: 0 18px 40px rgba(17, 12, 46, 0.16); } /* ------------------------------------------------------------------------- TEMA ESCURO Quando o JavaScript coloca data-tema="escuro" na tag , estas variáveis substituem as de cima. O restante do CSS não muda, porque ele sempre usa as variáveis — nunca a cor "crua". ------------------------------------------------------------------------- */ [data-tema="escuro"] { --cor-fundo: #0d0f16; --cor-superficie: #161923; --cor-texto: #f2f3f7; --cor-texto-suave: #a2a9ba; --cor-borda: #262b3a; --cor-primaria: #a78bfa; --cor-primaria-escura: #8b5cf6; --cor-secundaria: #38bdf8; --cor-acento: #f472b6; --cor-roxo: #a78bfa; --cor-verde: #34d399; --cor-laranja: #fb923c; --degrade-topo: linear-gradient(135deg, #4c1d95 0%, #075985 60%, #9d174d 120%); --sombra: 0 10px 30px rgba(0, 0, 0, 0.45); --sombra-forte: 0 18px 40px rgba(0, 0, 0, 0.6); } /* ========================================================================= RESET BÁSICO Zera margens/paddings e faz o "box-sizing" contar a borda dentro da largura, evitando surpresas no cálculo de tamanho dos elementos. ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================= ESTILOS GERAIS "scroll-behavior: smooth" no deixa a rolagem suave também pelo teclado e histórico. Os links do menu reforçam isso no JavaScript. "scroll-padding-top" evita que o cabeçalho fixo cubra o título da seção. ========================================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.65; /* Transição suave ao trocar de tema */ transition: background-color 0.3s ease, color 0.3s ease; } /* Links usam a cor primária da marca */ a { color: var(--cor-primaria); } /* ========================================================================= CABEÇALHO E MENU O cabeçalho fica "grudado" no topo (position: sticky) ao rolar. O "backdrop-filter" dá um leve efeito de vidro fosco. ========================================================================= */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: color-mix(in srgb, var(--cor-superficie) 80%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cor-borda); } /* Caixa interna que limita a largura e centraliza o conteúdo */ .conteudo-cabecalho { max-width: 980px; margin: 0 auto; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; } /* Nome no canto esquerdo — pintado com o degradê da marca */ .marca { font-weight: 800; font-size: 1.15rem; text-decoration: none; background: var(--degrade-topo); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Lista de links (desktop: itens lado a lado) */ .menu { list-style: none; display: flex; align-items: center; gap: 1.5rem; } .menu a { text-decoration: none; color: var(--cor-texto); font-weight: 500; position: relative; } /* Sublinhado animado que cresce ao passar o mouse */ .menu a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--degrade-topo); transition: width 0.2s ease; } .menu a:hover::after { width: 100%; } /* ========================================================================= BOTÃO DE TEMA (sol / lua) ========================================================================= */ .botao-tema { background: none; border: 1px solid var(--cor-borda); border-radius: 50%; width: 2.3rem; height: 2.3rem; cursor: pointer; font-size: 1rem; color: var(--cor-texto); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, transform 0.2s ease; } .botao-tema:hover { border-color: var(--cor-primaria); transform: rotate(20deg); } /* ========================================================================= BOTÃO "TRÊS RISQUINHOS" (menu hambúrguer) Escondido no desktop; aparece no celular pela media query lá embaixo. ========================================================================= */ .botao-menu { display: none; flex-direction: column; justify-content: space-between; width: 1.6rem; height: 1.2rem; background: none; border: none; cursor: pointer; padding: 0; } /* Cada é um dos três risquinhos */ .botao-menu span { display: block; height: 2px; width: 100%; background-color: var(--cor-texto); border-radius: 2px; } /* ========================================================================= SEÇÕES DE CONTEÚDO ========================================================================= */ .conteudo-secao { max-width: 980px; margin: 0 auto; padding: 4.5rem 1rem; } /* Títulos e textos */ h1 { font-size: 2.8rem; line-height: 1.15; margin-bottom: 1rem; } h2 { font-size: 2rem; margin-bottom: 1.5rem; display: inline-block; } /* Linha colorida embaixo de cada título de seção */ h2::after { content: ""; display: block; width: 60%; height: 4px; margin-top: 0.5rem; border-radius: 2px; background: var(--degrade-topo); } h3 { font-size: 1.25rem; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; color: var(--cor-texto-suave); } /* ========================================================================= TOPO (seção de abertura) Fundo com degradê da marca e texto claro por cima. ========================================================================= */ .topo { background: var(--degrade-topo); color: #ffffff; } .topo .conteudo-secao { padding: 7rem 1rem; text-align: center; } /* No topo o título é branco (sem o degradê aplicado ao texto) */ .topo h1 { color: #ffffff; } .apresentacao { font-size: 1.25rem; max-width: 620px; margin: 0 auto 2rem; color: rgba(255, 255, 255, 0.9); } /* Botão de destaque que leva ao contato — branco sobre o degradê */ .botao-destaque { display: inline-block; background-color: #ffffff; color: var(--cor-primaria-escura); text-decoration: none; padding: 0.9rem 2rem; border-radius: 999px; font-weight: 700; box-shadow: var(--sombra-forte); transition: transform 0.2s ease, box-shadow 0.2s ease; } .botao-destaque:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3); } /* ========================================================================= PROJETOS Grid com colunas que se ajustam sozinhas: cada cartão tem no mínimo 260px; cabendo mais de um por linha, o grid preenche; senão, empilha. ========================================================================= */ .grade-projetos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem; } .cartao { position: relative; background-color: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 16px; padding: 1.75rem; box-shadow: var(--sombra); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Faixa colorida no topo de cada cartão. A cor vem da variável --cor-cartao, definida pelas classes abaixo. */ .cartao::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background-color: var(--cor-cartao, var(--cor-primaria)); } .cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); } /* Cada modificador define a cor daquele cartão */ .cartao--roxo { --cor-cartao: var(--cor-roxo); } .cartao--verde { --cor-cartao: var(--cor-verde); } .cartao--laranja { --cor-cartao: var(--cor-laranja); } /* Etiqueta pequena no topo do cartão (ex.: "NLP") */ .etiqueta { display: inline-block; margin-bottom: 0.75rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cor-cartao, var(--cor-primaria)); /* Fundo bem clarinho na mesma cor da etiqueta */ background-color: color-mix(in srgb, var(--cor-cartao, var(--cor-primaria)) 15%, transparent); } .cartao h3 { color: var(--cor-texto); } /* Link "Ver projeto" com uma setinha que anda ao passar o mouse */ .cartao a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; text-decoration: none; color: var(--cor-cartao, var(--cor-primaria)); } .cartao a::after { content: "→"; transition: transform 0.2s ease; } .cartao a:hover::after { transform: translateX(4px); } /* ========================================================================= PALESTRAS (galeria de fotos) Mesmo esquema de grid dos projetos: colunas que se ajustam sozinhas. Cada foto fica dentro de uma
com cantos arredondados e um leve zoom ao passar o mouse. ========================================================================= */ /* Vídeo da palestra: ocupa toda a largura da seção, com cantos arredondados no mesmo estilo das fotos. Tem áudio; o visitante controla o som pelos próprios controles do player. */ .video-palestra { width: 100%; margin-top: 2rem; border-radius: 16px; border: 1px solid var(--cor-borda); box-shadow: var(--sombra); display: block; background-color: #000; } .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 2rem; } .foto { margin: 0; border-radius: 16px; overflow: hidden; /* recorta a imagem no formato arredondado */ border: 1px solid var(--cor-borda); box-shadow: var(--sombra); aspect-ratio: 16 / 9; /* mantém todas as fotos no mesmo formato */ } .foto img { width: 100%; height: 100%; object-fit: cover; /* preenche o espaço sem distorcer */ display: block; transition: transform 0.3s ease; } .foto:hover img { transform: scale(1.05); } /* ========================================================================= CONTATO ========================================================================= */ .lista-contato { list-style: none; } .lista-contato li { margin-bottom: 0.75rem; color: var(--cor-texto-suave); } .lista-contato a { font-weight: 600; text-decoration: none; } .lista-contato a:hover { text-decoration: underline; } /* ========================================================================= RODAPÉ ========================================================================= */ .rodape { border-top: 1px solid var(--cor-borda); text-align: center; padding: 2rem 1rem; background-color: var(--cor-superficie); } .rodape p { margin-bottom: 0; font-size: 0.9rem; } /* ========================================================================= RESPONSIVIDADE (CELULAR) Estas regras valem quando a tela tem 720px ou menos. ========================================================================= */ @media (max-width: 720px) { /* Mostra o botão de três risquinhos */ .botao-menu { display: flex; } /* Esconde o menu por padrão. Ele vira uma coluna que aparece abaixo do cabeçalho quando o JavaScript adiciona a classe "aberto". */ .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background-color: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); padding: 1rem 1.25rem; gap: 1rem; } /* Classe que o JavaScript liga/desliga para abrir o menu */ .menu.aberto { display: flex; } h1 { font-size: 2.1rem; } .topo .conteudo-secao { padding: 5rem 1rem; } }