/* ======================================== VARIÁVEIS DE COR Definem a paleta do tema claro (padrão). Trocando essas variáveis, todo o site muda de cor. ======================================== */ :root { --cor-fundo: #ffffff; --cor-fundo-alt: #f4f6f7; --cor-texto: #1f2933; --cor-destaque: #0f766e; --cor-borda: #e2e8f0; } /* Tema escuro: as mesmas variáveis, com valores diferentes. É ativado quando a tag recebe data-theme="dark" (isso é feito pelo script.js). */ [data-theme="dark"] { --cor-fundo: #111827; --cor-fundo-alt: #1f2937; --cor-texto: #e5e7eb; --cor-destaque: #0f766e; --cor-borda: #374151; } /* ======================================== RESET BÁSICO Remove margens/preenchimentos padrão do navegador e deixa o cálculo de tamanho (box-sizing) previsível. ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Faz a página rolar suavemente até a seção-alvo quando clicamos em um link do menu (ex: #sobre). */ scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6; /* Compensa a altura do cabeçalho fixo, para o conteúdo não começar escondido atrás dele. */ padding-top: 70px; } a { color: var(--cor-destaque); } /* ======================================== CABEÇALHO FIXO Fica sempre visível no topo, mesmo rolando a página. ======================================== */ .cabecalho { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); z-index: 100; } .cabecalho-conteudo { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: relative; } .logo { font-weight: bold; } /* ======================================== MENU DE NAVEGAÇÃO (desktop) Os links ficam lado a lado, em linha. ======================================== */ .menu { display: flex; gap: 1.5rem; } .menu-link { text-decoration: none; color: var(--cor-texto); font-weight: 500; } .menu-link:hover { color: var(--cor-destaque); } .cabecalho-acoes { display: flex; align-items: center; gap: 1rem; } /* Botão que alterna entre tema claro e escuro (a troca em si é feita pelo script.js; aqui só cuidamos da aparência). */ .botao-tema { background: none; border: 1px solid var(--cor-borda); border-radius: 999px; width: 2.25rem; height: 2.25rem; cursor: pointer; font-size: 1rem; } /* Botão que alterna o idioma do site (PT/EN). O texto do botão mostra o idioma para o qual ele vai trocar ao ser clicado (lógica no script.js). */ .botao-idioma { background: none; border: 1px solid var(--cor-borda); border-radius: 999px; padding: 0 0.75rem; height: 2.25rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--cor-texto); } /* ======================================== BOTÃO HAMBÚRGUER (três risquinhos) Escondido no desktop; aparece só no mobile (ver media query). Cada é um dos três traços do ícone. ======================================== */ .botao-menu { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; } .botao-menu span { display: block; height: 2px; width: 100%; background-color: var(--cor-texto); } /* ======================================== HERO (topo da página) Seção de destaque com nome, frase e botão de contato. ======================================== */ .hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem 1.5rem; gap: 1rem; } /* Foto de perfil: recorte circular, com a imagem preenchendo o círculo (object-fit: cover) sem distorcer. */ .foto-perfil { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor-destaque); } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); } .tagline { color: var(--cor-destaque); font-size: 1.1rem; } .botao-cta { display: inline-block; margin-top: 0.5rem; padding: 0.75rem 1.75rem; background-color: var(--cor-destaque); color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600; } /* ======================================== SEÇÕES GERAIS (Sobre, Projetos, Contato) ======================================== */ .secao { max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem; } .secao h2 { margin-bottom: 1.5rem; font-size: 1.75rem; } .secao p { margin-bottom: 1rem; } /* Logo da empresa (Daflora), na seção "Empresa". Largura limitada para não ficar gigante, mantendo a proporção. */ .logo-empresa { max-width: 280px; width: 100%; height: auto; margin: 1rem 0; } /* ======================================== CARTÕES DE PROJETOS Layout em grade: 3 colunas no desktop, 1 no mobile. ======================================== */ .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: 8px; padding: 1.5rem; } .cartao h3 { margin-bottom: 0.5rem; } .cartao a { display: inline-block; margin-top: 0.75rem; font-weight: 600; } /* ======================================== RODAPÉ ======================================== */ .rodape { text-align: center; padding: 2rem 1.5rem; border-top: 1px solid var(--cor-borda); color: var(--cor-texto); opacity: 0.7; } /* ======================================== RESPONSIVO (telas até 768px) Transforma o menu horizontal em menu mobile: os links viram uma coluna que abre/fecha com o ícone de três risquinhos (a classe .menu-aberto é ligada/desligada pelo script.js quando o botão é clicado). ======================================== */ @media (max-width: 768px) { .botao-menu { display: flex; } .menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); flex-direction: column; align-items: center; gap: 0; /* Começa escondido (altura zero); .menu-aberto revela o menu. */ max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .menu.menu-aberto { max-height: 300px; } .menu-link { padding: 1rem; width: 100%; text-align: center; border-top: 1px solid var(--cor-borda); } .cartoes { grid-template-columns: 1fr; } }