/* ========================================================= VARIÁVEIS DE COR (tema claro) Definimos todas as cores aqui, em um só lugar, para poder trocar o visual do site inteiro sem procurar cor por cor no resto do arquivo. ========================================================= */ :root { --cor-fundo: #ffffff; --cor-fundo-alt: #f4f7f9; /* fundo levemente diferente, usado em seções alternadas */ --cor-texto: #1a1a1a; --cor-texto-suave: #4a5a63; /* texto secundário, um pouco mais claro */ --cor-borda: #e0e6ea; --cor-destaque: #0f6e8c; /* azul petróleo: cor principal do site */ --cor-destaque-escuro: #0b5268; --cor-destaque-texto: #ffffff; /* cor do texto sobre um fundo --cor-destaque */ --sombra-cartao: 0 2px 8px rgba(0, 0, 0, 0.08); } /* ========================================================= TEMA ESCURO Quando o JavaScript coloca data-theme="dark" na tag , estas variáveis substituem as de :root. O resto do CSS não muda nada, porque só usa var(--cor-...), nunca a cor direta. ========================================================= */ [data-theme="dark"] { --cor-fundo: #121212; --cor-fundo-alt: #1b1e20; --cor-texto: #f1f1f1; --cor-texto-suave: #b7c2c7; --cor-borda: #2c3134; --cor-destaque: #4fb3d9; --cor-destaque-escuro: #3a8fb0; --cor-destaque-texto: #0c1618; --sombra-cartao: 0 2px 10px rgba(0, 0, 0, 0.4); } /* ========================================================= RESET BÁSICO Remove espaçamentos padrão do navegador e deixa todo elemento usando box-sizing: border-box (largura/altura já incluem padding e borda, o que evita contas confusas). ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Faz a página rolar suavemente ao clicar em links como #sobre */ scroll-behavior: smooth; } body { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6; /* Anima a troca de cores ao alternar entre tema claro e escuro */ transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--cor-destaque); text-decoration: none; } img { max-width: 100%; } /* ========================================================= CABEÇALHO (header fixo no topo) ========================================================= */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); } .cabecalho__conteudo { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { font-size: 1.25rem; font-weight: 700; color: var(--cor-texto); } /* Lista de links do menu: em telas largas fica em linha, visível */ .menu__lista { display: flex; gap: 1.5rem; list-style: none; } .menu__link { color: var(--cor-texto); font-weight: 500; } .menu__link:hover { color: var(--cor-destaque); } .cabecalho__acoes { display: flex; align-items: center; gap: 0.75rem; } /* Botão de alternar tema: círculo simples com o emoji de lua/sol */ .botao-tema { background: none; border: 1px solid var(--cor-borda); border-radius: 50%; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Botão hambúrguer (três risquinhos): escondido em telas grandes */ .botao-menu { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; height: 2.25rem; background: none; border: none; cursor: pointer; } .botao-menu span { display: block; width: 100%; height: 2px; background-color: var(--cor-texto); border-radius: 2px; } /* ========================================================= BOTÕES REUTILIZÁVEIS ========================================================= */ .botao { display: inline-block; padding: 0.75rem 1.75rem; border-radius: 8px; font-weight: 600; border: 2px solid transparent; } .botao--primario { background-color: var(--cor-destaque); color: var(--cor-destaque-texto); } .botao--primario:hover { background-color: var(--cor-destaque-escuro); } /* ========================================================= SEÇÃO HERO (topo da página, apresentação) ========================================================= */ .hero { padding: 5rem 1.5rem; text-align: center; background-color: var(--cor-fundo-alt); } .hero__conteudo { max-width: 700px; margin: 0 auto; } .hero h1 { font-size: 2.5rem; margin-bottom: 0.75rem; } .hero__subtitulo { color: var(--cor-texto-suave); margin-bottom: 1rem; } .hero__frase { margin-bottom: 2rem; font-size: 1.1rem; } /* ========================================================= SEÇÕES GERAIS (Sobre, Projetos, Contato) ========================================================= */ .secao { max-width: 1100px; margin: 0 auto; padding: 4rem 1.5rem; } .secao h2 { font-size: 2rem; margin-bottom: 1.5rem; } .secao p { margin-bottom: 1rem; max-width: 700px; } /* Grade dos cartões de projeto: 3 colunas em telas largas */ .cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .cartao { background-color: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; box-shadow: var(--sombra-cartao); display: flex; flex-direction: column; } .cartao h3 { margin-bottom: 0.75rem; font-size: 1.15rem; } .cartao p { color: var(--cor-texto-suave); flex-grow: 1; } .cartao__link { margin-top: 1rem; font-weight: 600; } /* ========================================================= RODAPÉ ========================================================= */ .rodape { text-align: center; padding: 2rem 1.5rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); } /* ========================================================= RESPONSIVO — CELULAR (telas até 768px) Aqui o menu deixa de ficar em linha e passa a se comportar como um painel que abre/fecha, controlado pelo botão hambúrguer. ========================================================= */ @media (max-width: 768px) { .botao-menu { display: flex; } .menu { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } /* Classe adicionada pelo JavaScript quando o menu é aberto */ .menu--aberto { max-height: 300px; } .menu__lista { flex-direction: column; gap: 0; padding: 0.5rem 1.5rem 1rem; } .menu__lista li { padding: 0.6rem 0; border-bottom: 1px solid var(--cor-borda); } .cartoes { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } }