/* ========================================================== VARIÁVEIS DE COR (tema claro) Guardamos as cores em variáveis para poder trocá-las todas de uma vez quando o tema escuro for ativado. ========================================================== */ :root { --cor-fundo: #ffffff; --cor-fundo-alt: #f2f6fb; /* fundo levemente diferente para alternar seções */ --cor-texto: #1a1f29; --cor-texto-suave: #4b5563; --cor-primaria: #1d4ed8; /* azul principal (botões, links, destaques) */ --cor-primaria-escura: #1e3a8a; --cor-borda: #dbe3ef; --cor-cartao: #ffffff; --cor-sombra: rgba(15, 23, 42, 0.08); --cor-header-fundo: rgba(255, 255, 255, 0.9); } /* Tema escuro: mesma lista de variáveis, valores diferentes. Ativado quando a tag recebe o atributo data-theme="dark". */ [data-theme="dark"] { --cor-fundo: #0f172a; --cor-fundo-alt: #111c30; --cor-texto: #e5e9f0; --cor-texto-suave: #a9b4c4; --cor-primaria: #60a5fa; --cor-primaria-escura: #93c5fd; --cor-borda: #24304a; --cor-cartao: #16223a; --cor-sombra: rgba(0, 0, 0, 0.35); --cor-header-fundo: rgba(15, 23, 42, 0.9); } /* ========================================================== RESET BÁSICO E ESTILOS GERAIS ========================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { /* rolagem suave ao clicar em links âncora (ex: menu -> #contato) */ scroll-behavior: smooth; } body { font-family: "Segoe UI", Arial, Helvetica, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6; /* a troca de tema muda cor de fundo/texto suavemente */ transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--cor-primaria); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; } /* ========================================================== CABEÇALHO E MENU DE NAVEGAÇÃO ========================================================== */ .header { position: sticky; top: 0; z-index: 100; background-color: var(--cor-header-fundo); backdrop-filter: blur(6px); border-bottom: 1px solid var(--cor-borda); } .navbar { max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .logo { font-weight: 700; font-size: 1.1rem; } .nav-links { list-style: none; display: flex; align-items: center; gap: 1.5rem; } .nav-links a { color: var(--cor-texto); font-weight: 500; } .nav-links a:hover { color: var(--cor-primaria); text-decoration: none; } /* Botão de alternar tema (sol/lua) */ .theme-toggle { background: none; border: 1px solid var(--cor-borda); border-radius: 50%; width: 2.2rem; height: 2.2rem; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cor-texto); } .theme-toggle:hover { border-color: var(--cor-primaria); } /* Botão de alternar idioma (PT/EN), com o mesmo visual do botão de tema */ .lang-toggle { background: none; border: 1px solid var(--cor-borda); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--cor-texto); } .lang-toggle:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); } /* Botão "hamburguer" (três risquinhos): escondido no desktop, só aparece quando a tela é estreita (ver media query abaixo) */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; } .menu-toggle span { display: block; height: 3px; width: 100%; background-color: var(--cor-texto); border-radius: 2px; } /* ========================================================== SEÇÃO HERO (TOPO) ========================================================== */ .hero { max-width: 1000px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; } /* Foto de perfil redonda, exibida acima do nome */ .hero-foto { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--cor-primaria); box-shadow: 0 4px 14px var(--cor-sombra); margin-bottom: 1.5rem; } .hero h1 { font-size: 2.4rem; margin-bottom: 0.5rem; } .hero-subtitle { font-size: 1.1rem; color: var(--cor-primaria); font-weight: 600; margin-bottom: 1rem; } .hero-tagline { font-size: 1.15rem; color: var(--cor-texto-suave); max-width: 560px; margin: 0 auto 2rem; } .btn-primary { display: inline-block; background-color: var(--cor-primaria); color: #ffffff; padding: 0.75rem 1.8rem; border-radius: 999px; font-weight: 600; } .btn-primary:hover { background-color: var(--cor-primaria-escura); text-decoration: none; } /* ========================================================== SEÇÕES GERAIS (Sobre, Cursos, Contato) ========================================================== */ .section { max-width: 1000px; margin: 0 auto; padding: 4rem 1.5rem; } /* Seção com fundo levemente diferente, para criar contraste visual */ .section-alt { max-width: 100%; background-color: var(--cor-fundo-alt); } .section-alt > * { max-width: 1000px; margin-left: auto; margin-right: auto; } .section h2 { font-size: 1.8rem; margin-bottom: 1.5rem; text-align: center; } .about-content p { margin-bottom: 1rem; color: var(--cor-texto-suave); max-width: 720px; margin-left: auto; margin-right: auto; } /* ========================================================== CARTÕES DE PROJETOS/CURSOS ========================================================== */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .card { background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.75rem; box-shadow: 0 4px 12px var(--cor-sombra); display: flex; flex-direction: column; } .card h3 { margin-bottom: 0.75rem; color: var(--cor-primaria); } .card p { color: var(--cor-texto-suave); flex-grow: 1; margin-bottom: 1rem; } .card-link { font-weight: 600; align-self: flex-start; } /* ========================================================== SEÇÃO CONTATO ========================================================== */ .contact-content { text-align: center; } .contact-content p { margin-bottom: 0.75rem; font-size: 1.05rem; } /* ========================================================== RODAPÉ ========================================================== */ .footer { text-align: center; padding: 2rem 1.5rem; color: var(--cor-texto-suave); font-size: 0.9rem; border-top: 1px solid var(--cor-borda); } /* ========================================================== LAYOUT RESPONSIVO (CELULAR) Abaixo de 768px: os cartões viram uma coluna só e o menu normal é escondido, dando lugar ao botão "hamburguer". ========================================================== */ @media (max-width: 768px) { .cards { grid-template-columns: 1fr; } .menu-toggle { display: flex; } .nav-links { /* Menu escondido por padrão no celular: posicionado fora da tela e revelado com JavaScript ao clicar no botão hamburguer */ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-links.aberto { max-height: 300px; } .nav-links li { width: 100%; padding: 0.85rem 1.5rem; border-top: 1px solid var(--cor-borda); } }