/* ============================================================================= AJUSTES PRÓPRIOS DO SITE ----------------------------------------------------------------------------- Complementa o site.css (gerado pelo build). Aqui ficam apenas os poucos estilos que não existem lá: cabeçalho ao rolar, menu mobile e fallbacks. As CORES vêm do config.js e são injetadas como variáveis CSS pelo render.js. ========================================================================== */ html { -webkit-tap-highlight-color: transparent; } /* --- Gradientes ligados às cores do config.js ----------------------------- O site.css original tinha as cores "chumbadas" nesses gradientes. Aqui elas passam a seguir as variáveis, então mudar uma cor no config.js muda o logo, os títulos e as bordas também. */ .text-gradient { background-image: linear-gradient(135deg, var(--text-primary) 0%, var(--neon-blue) 45%, var(--gold) 100%); } .text-gradient-blue { background-image: linear-gradient(90deg, var(--tech-blue), var(--neon-blue), var(--tech-blue)); } .gradient-border { background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--tech-blue) 60%, transparent), color-mix(in srgb, var(--gold) 40%, transparent), color-mix(in srgb, var(--neon-blue) 60%, transparent)) border-box; background-size: 100% 100%, 300% 300%; } .card-shine::before { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 45%, color-mix(in srgb, var(--neon-blue) 6%, transparent) 50%, transparent 55%); } /* --- Cabeçalho: estado "rolado" ------------------------------------------ */ .site-header { transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background-color: color-mix(in srgb, var(--bg-primary) 82%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: var(--border); box-shadow: 0 8px 32px rgba(0, 0, 0, .40); } /* --- Menu mobile --------------------------------------------------------- */ .menu-mobile { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease, opacity .35s ease; opacity: 0; overflow: hidden; } .menu-mobile.is-open { grid-template-rows: 1fr; opacity: 1; } .menu-mobile > div { overflow: hidden; } /* --- Revelação ao rolar --------------------------------------------------- */ [data-reveal] { will-change: transform, opacity; } /* --- Acessibilidade: respeita quem prefere menos movimento ---------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* --- Foco visível --------------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 3px; border-radius: 6px; } /* --- Logo em imagem ------------------------------------------------------- */ .logo-img { display: block; width: auto; object-fit: contain; } /* --- Utilitários de segurança --------------------------------------------- Algumas classes do Tailwind não entraram no site.css porque não eram usadas no layout original. Ficam definidas aqui para que edições futuras no config.js ou no HTML não quebrem. */ .text-5xl { font-size: 3rem; line-height: 1; } .min-h-screen { min-height: 100vh; } @media (min-width: 768px) { .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-6xl { font-size: 3.75rem; line-height: 1; } } /* --- Etiquetas flutuantes do hero ----------------------------------------- Só aparecem em telas largas (≥1280px), onde há espaço nas laterais sem encostar no título. Abaixo disso viram "chips" embaixo dos botões. */ .etiqueta-flutuante { display: none; } .chips-etiquetas { display: flex; } @media (min-width: 1280px) { .etiqueta-flutuante { display: block; } .chips-etiquetas { display: none; } } /* ============================================================================= FORMULÁRIO DE QUALIFICAÇÃO (modal antes do WhatsApp) ----------------------------------------------------------------------------- Estilos próprios, sem depender do build do Tailwind. As cores seguem as variáveis do config.js. ========================================================================== */ .cap-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; } .cap-modal.is-open { display: flex; } body.cap-travado { overflow: hidden; } .cap-modal__fundo { position: absolute; inset: 0; background: rgba(3, 5, 10, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cap-aparece .25s ease; } .cap-modal__caixa { position: relative; width: 100%; max-width: 470px; max-height: 92vh; overflow-y: auto; padding: 34px 26px 26px; border-radius: 22px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-primary) 92%, #ffffff); box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 70px color-mix(in srgb, var(--tech-blue) 14%, transparent); animation: cap-sobe .3s cubic-bezier(.16, 1, .3, 1); } @keyframes cap-aparece { from { opacity: 0 } to { opacity: 1 } } @keyframes cap-sobe { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } } .cap-fechar { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; height: 34px; width: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .cap-fechar:hover { background: rgba(255, 255, 255, .07); color: var(--text-primary); } .cap-fechar svg { height: 20px; width: 20px; } .cap-cabecalho { margin-bottom: 20px; padding-right: 30px; } .cap-titulo { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--text-primary); } .cap-subtitulo { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); } .cap-form { display: flex; flex-direction: column; gap: 12px; } .cap-campo { display: flex; flex-direction: column; } .cap-selectbox { position: relative; } .cap-controle { width: 100%; padding: 14px 42px 14px 16px; font: inherit; font-size: .95rem; color: var(--text-primary); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 12px; appearance: none; -webkit-appearance: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .cap-controle::placeholder { color: var(--text-secondary); opacity: .9; } .cap-controle:hover { border-color: rgba(255, 255, 255, .18); } .cap-controle:focus { outline: none; border-color: color-mix(in srgb, var(--neon-blue) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-blue) 22%, transparent); background: rgba(255, 255, 255, .06); } /* a lista aberta do