/* ========================================================================== VARIÁVEIS DE COR (TEMA CLARO) Guardar as cores em variáveis facilita trocar o esquema de cores do site inteiro mudando só os valores aqui embaixo. ========================================================================== */ :root { --cor-primaria: #b565a7; /* lilás - usado em títulos e destaques */ --cor-secundaria: #ff6f9c; /* pink - usado em botões e links */ --cor-fundo: #ffffff; /* cor de fundo da página */ --cor-fundo-secao: #faf5fb; /* fundo levemente lilás das seções alternadas */ --cor-texto: #2b2233; /* cor principal do texto */ --cor-texto-suave: #5c4f66; /* cor de texto mais clara, para subtítulos */ --cor-borda: #e6d6ea; /* cor de bordas e linhas divisórias */ --sombra-cartao: 0 4px 12px rgba(181, 101, 167, 0.15); } /* ========================================================================== VARIÁVEIS DE COR (TEMA ESCURO) Quando o tem a classe "tema-escuro" (colocada pelo script.js), essas variáveis substituem as de cima automaticamente. ========================================================================== */ body.tema-escuro { --cor-primaria: #e29ad4; --cor-secundaria: #ff8fb3; --cor-fundo: #1e1522; --cor-fundo-secao: #291b2e; --cor-texto: #f2e9f4; --cor-texto-suave: #cbb8d1; --cor-borda: #3d2c43; --sombra-cartao: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ========================================================================== RESET BÁSICO Remove espaçamentos padrão do navegador para termos controle total do layout, e faz o box-sizing contar bordas/padding dentro da largura. ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* rolagem suave ao clicar em links com # */ } body { font-family: 'Segoe UI', Arial, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); transition: background-color 0.3s ease, color 0.3s ease; /* suaviza a troca de tema */ line-height: 1.6; } /* ========================================================================== CABEÇALHO E MENU ========================================================================== */ .cabecalho { background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); position: sticky; top: 0; z-index: 100; } .navbar { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .logo { font-weight: bold; font-size: 1.2rem; color: var(--cor-primaria); } .menu { display: flex; align-items: center; gap: 1.5rem; list-style: none; } .link-menu { text-decoration: none; color: var(--cor-texto); font-weight: 500; } .link-menu:hover { color: var(--cor-secundaria); } .botao-tema { background: none; border: 1px solid var(--cor-borda); border-radius: 50%; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; } /* Botão de "3 risquinhos" (hambúrguer): fica escondido no desktop */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; background: none; border: none; cursor: pointer; } .menu-toggle span { display: block; height: 3px; width: 100%; background-color: var(--cor-texto); border-radius: 2px; } /* ========================================================================== HERO (topo da página) ========================================================================== */ .hero { text-align: center; padding: 5rem 1.5rem; background: linear-gradient(135deg, var(--cor-fundo-secao), var(--cor-fundo)); } .hero h1 { font-size: 2.5rem; color: var(--cor-primaria); margin-bottom: 0.5rem; } .subtitulo { font-size: 1.2rem; color: var(--cor-texto-suave); margin-bottom: 1rem; } .frase-apresentacao { font-style: italic; max-width: 500px; margin: 0 auto 2rem; color: var(--cor-texto); } .botao-cta { display: inline-block; background-color: var(--cor-secundaria); color: #fff; padding: 0.8rem 2rem; border-radius: 999px; text-decoration: none; font-weight: bold; transition: transform 0.2s ease, opacity 0.2s ease; } .botao-cta:hover { transform: translateY(-2px); opacity: 0.9; } /* ========================================================================== SEÇÕES GERAIS ========================================================================== */ .secao { max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem; scroll-margin-top: 70px; /* evita que o título fique escondido atrás do cabeçalho fixo ao rolar até a seção */ } .secao h2 { color: var(--cor-primaria); margin-bottom: 1.5rem; font-size: 1.8rem; } .secao p { margin-bottom: 1rem; color: var(--cor-texto-suave); } /* ========================================================================== CARTÕES DE CURSOS ========================================================================== */ .cartoes { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */ gap: 1.5rem; } .cartao { background-color: var(--cor-fundo-secao); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; box-shadow: var(--sombra-cartao); } .cartao h3 { color: var(--cor-primaria); margin-bottom: 0.6rem; } .cartao p { font-size: 0.95rem; margin-bottom: 1rem; } .link-cartao { color: var(--cor-secundaria); text-decoration: none; font-weight: bold; } .link-cartao:hover { text-decoration: underline; } /* Trecho de código de exemplo dentro do card "Ferramentas para Testes" */ .codigo-exemplo { background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 0.8rem; margin-bottom: 1rem; overflow-x: auto; /* evita quebrar o layout se a linha de código for longa */ font-size: 0.8rem; line-height: 1.5; color: var(--cor-texto); } /* ========================================================================== CONTATO ========================================================================== */ .lista-contato { list-style: none; margin-top: 1rem; } .lista-contato li { margin-bottom: 0.8rem; } .lista-contato a { color: var(--cor-texto); text-decoration: none; } .lista-contato a:hover { color: var(--cor-secundaria); } /* ========================================================================== RODAPÉ ========================================================================== */ .rodape { text-align: center; padding: 1.5rem; border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: 0.9rem; } /* ========================================================================== RESPONSIVIDADE (CELULAR) Abaixo de 768px de largura: os cartões ficam empilhados e o menu normal é escondido, dando lugar ao botão de 3 risquinhos. ========================================================================== */ @media (max-width: 768px) { .cartoes { grid-template-columns: 1fr; /* uma coluna só no celular */ } .menu-toggle { display: flex; /* mostra o botão hambúrguer */ } .menu { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--cor-fundo); flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--cor-borda); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* Classe adicionada pelo JS quando o menu está aberto */ .menu.menu-aberto { max-height: 300px; } .menu li { width: 100%; padding: 0.8rem 1.5rem; border-top: 1px solid var(--cor-borda); } }