/* ========================================================= 1. VARIÁVEIS DE COR (TEMA CLARO) Uma variável CSS é um "apelido" para um valor. Escrevemos a cor uma vez aqui e usamos o apelido no resto do arquivo com var(--nome). Assim, para mudar o site inteiro basta mexer nestas linhas — e não em cem lugares espalhados. O seletor :root é o topo do documento (a tag ), então tudo que está dentro da página enxerga estas variáveis. ========================================================= */ :root { --cor-fundo: #faf8f5; /* fundo da página (creme suave) */ --cor-superficie: #ffffff; /* fundo de cartões e faixas */ --cor-texto: #1c1b19; /* texto principal */ --cor-texto-suave: #5f5b55; /* textos secundários */ --cor-destaque: #c2410c; /* terracota: links e botões */ --cor-destaque-alt: #9a3412; /* mesma cor, mais escura (hover)*/ --cor-borda: #e5e0d8; /* linhas finas */ /* Estas não são cores, mas seguem a mesma ideia: definir uma vez e reutilizar. Manter a medida em um só lugar evita um site com dez espaçamentos ligeiramente diferentes. */ --largura-maxima: 1080px; --raio-borda: 10px; --sombra: 0 1px 3px rgba(0, 0, 0, 0.06); } /* ========================================================= 2. TEMA ESCURO Repare no que NÃO acontece aqui: não reescrevemos nenhuma regra de layout. Só trocamos o valor das variáveis. Todo o resto do CSS continua idêntico e o site inteiro muda. O atributo data-tema="escuro" é colocado na tag pelo script.js quando o visitante clica no botão de tema. ========================================================= */ [data-tema="escuro"] { --cor-fundo: #16181c; --cor-superficie: #1e2126; --cor-texto: #eceae7; --cor-texto-suave: #a8a49e; --cor-destaque: #ff8a5c; --cor-destaque-alt: #ffa982; --cor-borda: #2e323a; --sombra: 0 1px 3px rgba(0, 0, 0, 0.4); } /* ========================================================= 3. RESET BÁSICO Cada navegador aplica margens e espaçamentos próprios por padrão. Zeramos isso para partir todos do mesmo ponto. box-sizing: border-box faz a largura declarada já incluir a borda e o preenchimento interno. Sem isso, um elemento com width:100% e padding estoura a tela. ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================= 4. ROLAGEM SUAVE Uma linha resolve o que muitos sites fazem com JavaScript: ao clicar num link de âncora (href="#sobre"), a página desliza até a seção em vez de saltar. O scroll-padding-top reserva o espaço do cabeçalho fixo — sem ele, o topo da seção ficaria escondido atrás dele. ========================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* ========================================================= 5. TIPOGRAFIA E CORPO DA PÁGINA A "pilha de fontes" lista alternativas: o navegador usa a primeira que existir no computador do visitante. Assim o site não depende de baixar nenhuma fonte da internet. A transição faz a troca de tema acontecer em 0,25s em vez de piscar de um estado para o outro. ========================================================= */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.05rem; line-height: 1.65; color: var(--cor-texto); background-color: var(--cor-fundo); transition: background-color 0.25s ease, color 0.25s ease; } /* Títulos com serifa: dão ao site um ar editorial, de quem escreve e ensina, em vez do visual padrão de aplicativo. */ h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.2; } /* clamp(mínimo, ideal, máximo) faz o texto crescer junto com a tela e parar nos limites. Evita escrever media queries só para ajustar tamanho de fonte. */ h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 1.5rem; } h3 { font-size: 1.25rem; margin-bottom: 0.6rem; } p { margin-bottom: 1rem; } a { color: var(--cor-destaque); } a:hover { color: var(--cor-destaque-alt); } /* ========================================================= 6. CONTÊINER Caixa central que limita a largura do conteúdo. Sem ela, em telas grandes as linhas de texto ficariam largas demais e cansativas de ler. margin: 0 auto centraliza horizontalmente. ========================================================= */ .container { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; padding: 0 1.5rem; } /* Versão mais estreita, para blocos de texto corrido. */ .container-estreito { max-width: 680px; } /* ========================================================= 7. CABEÇALHO FIXO position: sticky mantém o cabeçalho visível no topo quando a página rola. O z-index garante que ele fique por cima do conteúdo, e não atrás. ========================================================= */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); transition: background-color 0.25s ease; } /* display: flex coloca os filhos lado a lado. space-between empurra o primeiro para a esquerda e o último para a direita, com o espaço sobrando no meio. */ .cabecalho-conteudo { display: flex; align-items: center; justify-content: space-between; min-height: 70px; } .marca { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--cor-texto); text-decoration: none; } /* ========================================================= 8. MENU DE NAVEGAÇÃO (VERSÃO DESKTOP) Aqui descrevemos o menu como ele aparece em telas grandes. A versão do celular está na seção 15, dentro da media query. ========================================================= */ .menu { display: flex; align-items: center; gap: 1.8rem; } .menu a { color: var(--cor-texto); text-decoration: none; font-size: 0.98rem; padding: 0.3rem 0; /* A borda transparente já reserva o espaço da linha que aparece no hover. Sem isso, o texto "pularia" 2px. */ border-bottom: 2px solid transparent; } .menu a:hover { color: var(--cor-destaque); border-bottom-color: var(--cor-destaque); } /* ========================================================= 9. BOTÃO DE TEMA O ícone é um círculo desenhado só com CSS: sem imagem, sem biblioteca. No tema claro ele fica cheio (sol); no escuro, ganha um "corte" que o transforma em lua. ========================================================= */ .botao-tema { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; font: inherit; /* herda a fonte do body */ font-size: 0.9rem; color: var(--cor-texto); background: none; border: 1px solid var(--cor-borda); border-radius: 99px; /* valor alto = lados redondos */ cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .botao-tema:hover { color: var(--cor-destaque); border-color: var(--cor-destaque); } .icone-tema { width: 14px; height: 14px; border-radius: 50%; background-color: currentColor; /* mesma cor do texto do botão */ } /* No tema escuro, a sombra interna "morde" o círculo e ele vira uma lua crescente. */ [data-tema="escuro"] .icone-tema { background-color: transparent; box-shadow: inset -4px -1px 0 0 currentColor; } /* ========================================================= 10. BOTÃO DAS TRÊS RISQUINHAS Fica escondido em telas grandes (display: none) e só reaparece na media query da seção 15. ========================================================= */ .botao-menu { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; background: none; border: none; cursor: pointer; } /* Cada risquinha é um vazio virando uma barrinha. */ .botao-menu span { display: block; width: 24px; height: 2px; background-color: var(--cor-texto); transition: transform 0.25s ease, opacity 0.25s ease; } /* Quando o menu está aberto, o script.js adiciona a classe "ativo" e as três barras viram um X: a primeira gira 45° para baixo, a do meio some, a última gira 45° para cima. */ .botao-menu.ativo span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .botao-menu.ativo span:nth-child(2) { opacity: 0; } .botao-menu.ativo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= 11. TOPO DA PÁGINA (HERO) ========================================================= */ .hero { padding: clamp(4rem, 12vw, 8rem) 0; } .sobretitulo { font-size: 0.85rem; letter-spacing: 0.12em; /* espaço entre as letras */ text-transform: uppercase; color: var(--cor-destaque); margin-bottom: 0.8rem; } .frase { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--cor-texto-suave); max-width: 620px; margin: 1.2rem 0 2.2rem; } .botao-principal { display: inline-block; padding: 0.85rem 2rem; background-color: var(--cor-destaque); color: #ffffff; /* fixo: o fundo é sempre escuro */ text-decoration: none; font-weight: 600; border-radius: var(--raio-borda); transition: background-color 0.2s ease, transform 0.2s ease; } .botao-principal:hover { background-color: var(--cor-destaque-alt); color: #ffffff; transform: translateY(-2px); /* sobe 2px: sensação de clique */ } /* ========================================================= 12. SEÇÕES ========================================================= */ .secao { padding: clamp(3.5rem, 8vw, 5.5rem) 0; } /* Faixa com fundo diferente, para separar visualmente uma seção da outra sem precisar de linhas divisórias. */ .secao-alternada { background-color: var(--cor-superficie); border-top: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda); transition: background-color 0.25s ease; } /* ========================================================= 13. CARTÕES DOS CURSOS CSS Grid organiza em colunas. O auto-fit com minmax cria quantas colunas couberem, com no mínimo 260px cada — os cartões se reorganizam sozinhos conforme a largura da tela. ========================================================= */ .grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .cartao { display: flex; flex-direction: column; /* empilha título, texto e link */ padding: 1.8rem; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); box-shadow: var(--sombra); transition: transform 0.2s ease, border-color 0.2s ease; } .cartao:hover { transform: translateY(-4px); border-color: var(--cor-destaque); } /* flex-grow: 1 faz o parágrafo ocupar o espaço que sobra e empurra o link para baixo. Com isso os links de todos os cartões ficam alinhados, mesmo com textos de tamanhos diferentes. */ .cartao p { color: var(--cor-texto-suave); flex-grow: 1; } .link-cartao { font-weight: 600; text-decoration: none; } .link-cartao:hover { text-decoration: underline; } /* ========================================================= 14. CONTATO E RODAPÉ ========================================================= */ .lista-contato { list-style: none; /* remove as bolinhas da lista */ margin-top: 1.5rem; } .lista-contato li { padding: 1rem 0; border-bottom: 1px solid var(--cor-borda); } /* Rótulo pequeno acima de cada contato ("E-mail", "LinkedIn"). display: block força a quebra de linha depois dele. */ .rotulo-contato { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: 0.2rem; } .lista-contato a { font-size: 1.1rem; text-decoration: none; } .lista-contato a:hover { text-decoration: underline; } .rodape { padding: 2rem 0; border-top: 1px solid var(--cor-borda); font-size: 0.9rem; color: var(--cor-texto-suave); } .rodape p { margin-bottom: 0; } /* ========================================================= 15. TELAS PEQUENAS (ATÉ 768px) Uma media query é um bloco de regras que só vale quando a condição é verdadeira. Aqui: telas de até 768px de largura, ou seja, celulares e tablets em pé. Tudo escrito antes continua valendo; só sobrescrevemos o que precisa mudar. ========================================================= */ @media (max-width: 768px) { /* As três risquinhas aparecem... */ .botao-menu { display: flex; } /* ...e o menu sai do cabeçalho e vira um painel que desce por cima da página. Ele começa escondido: display: none. */ .menu { display: none; position: absolute; top: 100%; /* logo abaixo do cabeçalho */ left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 1rem 1.5rem 1.5rem; background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra); } /* O script.js adiciona a classe "aberto" no clique, e esta regra torna o menu visível. É a única coisa que o JavaScript precisa fazer: pôr e tirar uma classe. */ .menu.aberto { display: flex; } .menu a { width: 100%; padding: 0.8rem 0; border-bottom: 1px solid var(--cor-borda); } .menu a:hover { border-bottom-color: var(--cor-borda); } .botao-tema { margin-top: 1rem; } } /* ========================================================= 16. ACESSIBILIDADE: MOVIMENTO REDUZIDO Quem configurou o sistema para reduzir animações (por enjoo, vertigem ou preferência) recebe a página sem transições nem rolagem animada. ========================================================= */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }