/* =========================================================== VARIÁVEIS DE COR (TEMA CLARO) Guardamos as cores em "variáveis CSS" (--nome-da-variavel). Assim, todo o site usa as mesmas cores a partir de um único lugar, e trocar o tema é só trocar o valor dessas variáveis. =========================================================== */ :root { --cor-fundo: #faf9fc; --cor-fundo-alt: #ffffff; --cor-texto: #2b2530; --cor-texto-suave: #5a5260; --cor-destaque: #7c3aed; /* roxo principal */ --cor-destaque-hover: #6d28d9; /* roxo mais escuro, usado no hover */ --cor-borda: #e5e0eb; --sombra: 0 4px 16px rgba(43, 37, 48, 0.08); } /* Tema escuro: sobrescreve as mesmas variáveis quando data-theme="dark" está no . O JavaScript é quem adiciona/remove esse atributo ao clicar no botão de tema. */ [data-theme="dark"] { --cor-fundo: #1c1720; --cor-fundo-alt: #262029; --cor-texto: #f2eef7; --cor-texto-suave: #c9c0d3; --cor-destaque: #a78bfa; --cor-destaque-hover: #c4b5fd; --cor-borda: #3a3340; --sombra: 0 4px 16px rgba(0, 0, 0, 0.35); } /* =========================================================== RESET BÁSICO Remove espaçamentos padrão do navegador e garante que padding/border entrem na largura do elemento (box-sizing). =========================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* rolagem suave ao clicar em links com # */ } body { font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--cor-destaque); text-decoration: none; } a:hover { color: var(--cor-destaque-hover); } /* =========================================================== CABEÇALHO E MENU =========================================================== */ .header { background-color: var(--cor-fundo-alt); border-bottom: 1px solid var(--cor-borda); } .nav { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem; } .logo { font-weight: 700; font-size: 1.1rem; } /* Lista de links do menu, alinhada em linha no desktop */ .nav-links { list-style: none; display: flex; align-items: center; gap: 1.5rem; } .nav-link { color: var(--cor-texto); font-weight: 500; } .nav-link:hover { color: var(--cor-destaque); } /* Botão de alternar tema (sol/lua) */ .theme-toggle { background: none; border: 1px solid var(--cor-borda); border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; } /* Botão "hambúrguer" (três risquinhos), escondido no desktop e mostrado apenas em telas pequenas (ver media query abaixo) */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 1.6rem; height: 1.1rem; background: none; border: none; cursor: pointer; } .menu-toggle span { display: block; height: 2px; width: 100%; background-color: var(--cor-texto); } /* =========================================================== HERO (área de apresentação no topo) =========================================================== */ .hero { max-width: 700px; margin: 0 auto; padding: 3rem 1.5rem 4rem; text-align: center; } .hero h1 { font-size: 2.2rem; margin-bottom: 0.75rem; } .tagline { color: var(--cor-texto-suave); margin-bottom: 1.75rem; font-size: 1.05rem; } .btn-cta { display: inline-block; background-color: var(--cor-destaque); color: #ffffff; padding: 0.75rem 1.75rem; border-radius: 999px; font-weight: 600; } .btn-cta:hover { background-color: var(--cor-destaque-hover); color: #ffffff; } /* =========================================================== SEÇÕES GERAIS (Sobre, Projetos, Contato) =========================================================== */ .section { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; } .section h2 { font-size: 1.6rem; margin-bottom: 1.25rem; color: var(--cor-destaque); } .section p { margin-bottom: 1rem; color: var(--cor-texto-suave); } /* =========================================================== CARTÕES DE PROJETOS Grid que se adapta sozinha: cada cartão tem no mínimo 220px e o navegador decide quantas colunas cabem na tela. =========================================================== */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .card { background-color: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; box-shadow: var(--sombra); display: flex; flex-direction: column; } .card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; } .card p { flex-grow: 1; font-size: 0.95rem; } .card-link { margin-top: 1rem; font-weight: 600; } /* =========================================================== RODAPÉ =========================================================== */ .footer { text-align: center; padding: 2rem 1.5rem; color: var(--cor-texto-suave); font-size: 0.85rem; border-top: 1px solid var(--cor-borda); } /* =========================================================== RESPONSIVIDADE (CELULAR) Abaixo de 768px de largura: o menu de links vira um painel escondido, e o botão de três risquinhos aparece para abri-lo. =========================================================== */ @media (max-width: 768px) { .menu-toggle { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background-color: var(--cor-fundo-alt); border-bottom: 1px solid var(--cor-borda); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* Classe adicionada pelo JavaScript quando o menu está aberto */ .nav-links.aberto { max-height: 300px; } .nav-links li { width: 100%; padding: 0.75rem 1.5rem; border-top: 1px solid var(--cor-borda); } .nav { position: relative; } }