/* ========================================================================== 1. VARIÁVEIS DE COR (TEMA CLARO) -------------------------------------------------------------------------- Uma "variável CSS" é um apelido para um valor. Escrevemos a cor UMA vez aqui dentro e, no resto do arquivo, usamos var(--nome-da-variavel). Assim, para mudar a cor do site inteiro, basta mexer neste bloco. ":root" é o elemento , ou seja, o topo da página: tudo que está dentro dele (o site inteiro) enxerga estas variáveis. ========================================================================== */ :root { --cor-fundo: #f7f8fa; /* fundo geral da página */ --cor-superficie: #ffffff; /* fundo de caixas: cabeçalho, cartões */ --cor-texto: #1c2331; /* cor do texto principal */ --cor-texto-suave: #5a6478; /* textos secundários, menos importantes */ --cor-destaque: #2563eb; /* azul dos links e botões */ --cor-destaque-escura: #1d4ed8; /* mesmo azul, mais escuro, para o "hover" */ --cor-borda: #e2e6ee; /* linhas e contornos discretos */ --sombra: 0 1px 3px rgba(16, 24, 40, 0.08); /* Medidas reaproveitadas em vários lugares */ --largura-maxima: 1000px; /* até onde o conteúdo cresce em telas grandes */ --altura-cabecalho: 64px; --raio: 12px; /* arredondamento dos cantos */ } /* ========================================================================== 2. VARIÁVEIS DE COR (TEMA ESCURO) -------------------------------------------------------------------------- O tema escuro NÃO redefine o site inteiro: ele apenas troca os valores das mesmas variáveis. Por isso não existe nenhuma cor "solta" fora destes blocos. Precisamos de duas situações: (a) O visitante nunca clicou no botão de tema. Nesse caso obedecemos a preferência do sistema operacional dele, lida pela media query prefers-color-scheme. O :not([data-theme="light"]) evita passar por cima de quem escolheu o tema claro no botão. Isso é feito em CSS de propósito: como o CSS carrega antes do JavaScript, quem usa o computador no modo escuro já vê a página escura desde o primeiro instante, sem "piscar" branco. (b) O visitante clicou no botão. Aí o JavaScript escreve data-theme="dark" na tag e o segundo bloco entra em ação. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cor-fundo: #12161f; --cor-superficie: #1a2030; --cor-texto: #e8ecf4; --cor-texto-suave: #9aa5bb; --cor-destaque: #7aa2ff; --cor-destaque-escura: #a5c0ff; --cor-borda: #2a3346; --sombra: 0 1px 3px rgba(0, 0, 0, 0.4); } } [data-theme="dark"] { --cor-fundo: #12161f; --cor-superficie: #1a2030; --cor-texto: #e8ecf4; --cor-texto-suave: #9aa5bb; --cor-destaque: #7aa2ff; --cor-destaque-escura: #a5c0ff; --cor-borda: #2a3346; --sombra: 0 1px 3px rgba(0, 0, 0, 0.4); } /* ========================================================================== 3. AJUSTES BÁSICOS (UM "RESET" BEM PEQUENO) -------------------------------------------------------------------------- Cada navegador aplica margens e tamanhos próprios. Estas poucas regras deixam todos partindo do mesmo ponto. ========================================================================== */ /* box-sizing: border-box faz a largura declarada já incluir padding e borda. Sem isso, uma caixa de 100% com padding "estoura" para fora da tela. */ * { box-sizing: border-box; } html { /* A rolagem suave pedida no menu: o navegador desliza até a seção em vez de saltar. Vale para qualquer link que aponte para um #id. */ scroll-behavior: smooth; } body { margin: 0; /* Fontes do próprio sistema: não dependemos de nenhum arquivo externo, então o site abre rápido e funciona até sem internet. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.6; background-color: var(--cor-fundo); color: var(--cor-texto); /* A transição suaviza a troca de tema, evitando o "estalo" de cor. */ transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; } a { color: var(--cor-destaque); } /* "conteiner" centraliza o conteúdo e impede que as linhas de texto fiquem largas demais para ler em telas grandes. */ .conteiner { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; /* 0 em cima/baixo, "auto" nas laterais = centralizado */ padding: 0 20px; } /* ========================================================================== 4. CABEÇALHO FIXO E MENU ========================================================================== */ /* position: sticky mantém o cabeçalho colado no topo enquanto a página rola. z-index alto garante que ele fique POR CIMA do restante do conteúdo. */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); } /* display: flex coloca os filhos lado a lado na horizontal. justify-content: space-between empurra o primeiro para a esquerda e o último para a direita, distribuindo o espaço no meio. */ .cabecalho__interno { display: flex; align-items: center; /* alinha tudo pelo centro na vertical */ justify-content: space-between; gap: 16px; min-height: var(--altura-cabecalho); } .logo { font-weight: 700; text-decoration: none; color: var(--cor-texto); white-space: nowrap; /* nunca quebra o nome em duas linhas */ } .menu__lista { display: flex; gap: 24px; list-style: none; /* tira as bolinhas da lista */ margin: 0; padding: 0; } .menu__lista a { text-decoration: none; color: var(--cor-texto-suave); font-weight: 500; padding: 8px 0; } .menu__lista a:hover { color: var(--cor-destaque); } /* Botão de alternar tema (o do ícone de lua/sol) */ .botao-tema { background-color: transparent; border: 1px solid var(--cor-borda); border-radius: 50%; /* 50% em um quadrado resulta num círculo */ width: 40px; height: 40px; font-size: 18px; cursor: pointer; /* mostra a mãozinha ao passar o mouse */ line-height: 1; color: inherit; } .botao-tema:hover { border-color: var(--cor-destaque); } /* ========================================================================== 5. BOTÃO DE TRÊS RISQUINHOS (HAMBÚRGUER) -------------------------------------------------------------------------- Não usamos imagem nem ícone baixado: são três vazios, cada um virando um risquinho por causa da altura e da cor de fundo. Ele começa escondido e só aparece na tela pequena (seção 9). ========================================================================== */ .hamburguer { display: none; /* escondido no computador */ flex-direction: column; /* empilha os três riscos na vertical */ justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 8px; background-color: transparent; border: 1px solid var(--cor-borda); border-radius: 8px; cursor: pointer; } .hamburguer span { display: block; height: 2px; /* a espessura de cada risquinho */ width: 100%; background-color: var(--cor-texto); border-radius: 2px; } /* ========================================================================== 6. TOPO DA PÁGINA (APRESENTAÇÃO) ========================================================================== */ .topo { padding: 96px 0 72px; border-bottom: 1px solid var(--cor-borda); } .topo__profissao { margin: 0 0 8px; text-transform: uppercase; /* deixa o texto em MAIÚSCULAS */ letter-spacing: 0.12em; /* afasta levemente as letras */ font-size: 0.8rem; font-weight: 700; color: var(--cor-destaque); } .topo__nome { /* clamp(mínimo, ideal, máximo): o tamanho acompanha a largura da tela, mas nunca fica menor que 2rem nem maior que 3.5rem. */ font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 16px; } .topo__frase { font-size: 1.15rem; color: var(--cor-texto-suave); max-width: 620px; /* linha curta = leitura mais confortável */ margin: 0 0 32px; } .botao-principal { display: inline-block; /* permite aplicar padding em um link */ background-color: var(--cor-destaque); color: #ffffff; text-decoration: none; font-weight: 600; padding: 14px 28px; border-radius: var(--raio); transition: background-color 0.2s ease; } .botao-principal:hover { background-color: var(--cor-destaque-escura); } /* ========================================================================== 7. SEÇÕES INTERNAS (SOBRE, CURSOS, CONTATO) ========================================================================== */ .secao { padding: 72px 0; /* scroll-margin-top reserva um espaço no alto quando a página rola até esta seção. Sem isso, o cabeçalho fixo cobriria o título. */ scroll-margin-top: calc(var(--altura-cabecalho) + 16px); } .secao h2 { font-size: 1.75rem; margin-bottom: 24px; } .secao p { max-width: 680px; color: var(--cor-texto-suave); } /* --- Cartões dos cursos --- */ /* CSS Grid monta uma grade. auto-fit + minmax significa: "crie quantas colunas couberem, cada uma com no mínimo 260px". É isso que faz os três cartões ficarem lado a lado no computador e se empilharem sozinhos no celular, sem precisar de mais código. */ .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 8px; } .cartao { background-color: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; /* título, texto e link empilhados */ transition: transform 0.2s ease, border-color 0.2s ease; } .cartao:hover { transform: translateY(-4px); /* sobe 4px ao passar o mouse */ border-color: var(--cor-destaque); } .cartao h3 { font-size: 1.15rem; } .cartao p { color: var(--cor-texto-suave); /* flex-grow: 1 faz o parágrafo ocupar a sobra de espaço, empurrando o link para baixo. Assim os links dos três cartões ficam alinhados mesmo que um texto seja maior que o outro. */ flex-grow: 1; margin: 0 0 20px; } .cartao__link { font-weight: 600; text-decoration: none; align-self: flex-start; /* o link ocupa só a largura do texto */ } .cartao__link:hover { text-decoration: underline; } /* --- Contato --- */ .contato__lista { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; } .contato__rotulo { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-texto-suave); } .contato__lista a { font-size: 1.05rem; font-weight: 500; word-break: break-word; /* e-mail longo não estoura no celular */ } /* ========================================================================== 8. RODAPÉ ========================================================================== */ .rodape { border-top: 1px solid var(--cor-borda); padding: 32px 0; color: var(--cor-texto-suave); font-size: 0.9rem; } .rodape p { margin: 0; } /* ========================================================================== 9. TELAS PEQUENAS (CELULAR) -------------------------------------------------------------------------- Uma "media query" aplica regras só quando a condição é verdadeira. Aqui: quando a tela tiver 720px de largura ou menos. ========================================================================== */ @media (max-width: 720px) { /* Agora o botão de três risquinhos aparece... */ .hamburguer { display: flex; } /* ...e o menu deixa de ficar na linha do cabeçalho: ele passa a ser um painel que desce logo abaixo dele, ocupando a largura toda. Começa escondido (display: none). */ .menu { display: none; position: absolute; /* sai do fluxo normal e "flutua" */ top: 100%; /* encosta na base do cabeçalho */ left: 0; right: 0; background-color: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); padding: 8px 20px 16px; } /* Esta classe é adicionada e removida pelo JavaScript quando o visitante clica no botão. É ela que efetivamente mostra o menu. */ .menu.aberto { display: block; } .menu__lista { flex-direction: column; /* links empilhados, um por linha */ gap: 4px; } .menu__lista a { display: block; padding: 12px 0; /* área de toque maior para o dedo */ border-bottom: 1px solid var(--cor-borda); } /* O cabeçalho precisa ser "relative" para o menu absoluto se posicionar em relação a ele, e não em relação à página inteira. */ .cabecalho__interno { position: relative; } .topo { padding: 64px 0 48px; } .secao { padding: 56px 0; } } /* ========================================================================== 10. ACESSIBILIDADE: QUEM PREFERE MENOS MOVIMENTO -------------------------------------------------------------------------- Algumas pessoas configuram o sistema para reduzir animações (movimento pode causar enjoo ou desconforto). Respeitamos essa escolha desligando a rolagem suave e as transições. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* Contorno visível ao navegar pelo teclado (tecla Tab). Nunca remova isso sem colocar algo no lugar: é o que permite enxergar onde você está na página sem usar o mouse. */ :focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; border-radius: 4px; }