/* ============================================================================ * ClaqueteIA — CSS global consolidado. * Convertido de: app/globals.css + app/page.module.css + * components/{Headline,HeroVideo,Inclusos}.module.css * * Como o PHP não tem CSS Modules (escopo automático por arquivo), cada * conjunto de classes que antes vinha de um .module.css ganhou aqui um * prefixo fixo para não colidir with outras classes do site: * page.module.css -> .lp-* (landing page) * Headline.module.css -> .hl-* * HeroVideo.module.css -> .hv-* * Inclusos.module.css -> .inc-* * ========================================================================== */ /* ---------- globals.css original (tokens, reset, utilitários) ---------- */ /* ClaqueteIA — tokens do design system (paleta Tungstênio, tema escuro) */ :root { --bg: #0e0d0c; --surface: #171512; --surface-2: #201d18; --surface-3: #2a2620; --border: #302b24; --border-strong: #443d33; --text: #ede8df; --muted: #9b948a; --faint: #6e675e; --primary: #c9772f; --primary-hover: #dd8f45; --primary-tint: rgba(201, 119, 47, 0.14); --on-primary: #140d06; --accent: #5a97b0; --accent-tint: rgba(90, 151, 176, 0.15); --success: #5aa06e; --success-tint: rgba(90, 160, 110, 0.15); --warning: #d9a441; --warning-tint: rgba(217, 164, 65, 0.15); --danger: #ce5b4f; --danger-tint: rgba(206, 91, 79, 0.15); --r: 4px; /* ------------------------------------------------------------------ * Fontes — equivalente às 3 famílias que o Next.js auto-hospedava via * next/font/google (app/layout.tsx), expostas lá como variáveis CSS * (--font-display/--font-ui/--font-elegant) e carregadas aqui via * Google Fonts (ver includes/partials/head.php). * * ATENÇÃO: o CSS abaixo já referenciava var(--font-display) etc. em * vários seletores (títulos, botões, headline), mas essas variáveis * nunca tinham sido DEFINIDAS em lugar nenhum — só o do Google * Fonts existia, sem nada de CSS apontando pra ele. Resultado: toda * var(--font-*) resolvia pro fallback (Arial Black/sans-serif/Georgia), * e o site inteiro renderizava com a fonte padrão do sistema em vez das * fontes da marca. É essa lacuna que as 3 linhas abaixo fecham. * ------------------------------------------------------------------ */ --font-display: "Archivo Black", "Arial Black", sans-serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-elegant: "Instrument Serif", Georgia, serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); /* corpo do site inteiro em Inter (--font-ui), igual ao `style={{ fontFamily: "var(--font-ui), system-ui, sans-serif" }}` que o Next.js aplicava direto na tag do layout original */ font-family: var(--font-ui); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; /* rede de segurança: nada nunca deve fazer a página rolar pro lado */ overflow-x: hidden; max-width: 100%; } a { color: var(--primary); text-decoration: none; } button { font: inherit; cursor: pointer; border-radius: var(--r); border: 1px solid transparent; } input, select { font: inherit; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r); color: var(--text); padding: 9px 11px; width: 100%; } input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* utilitários usados nas telas */ .btn { background: var(--primary); color: var(--on-primary); font-weight: 700; padding: 10px 16px; letter-spacing: 0.02em; } .btn:hover { background: var(--primary-hover); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-sec { background: transparent; color: var(--text); border-color: var(--border-strong); padding: 9px 14px; } .btn-sec:hover { background: var(--surface-2); } .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); padding: 9px 14px; } .btn-danger:hover { background: var(--danger-tint); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 100px; border: 1px solid; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.ok { color: var(--success); border-color: var(--success); background: var(--success-tint); } .badge.warn { color: var(--warning); border-color: var(--warning); background: var(--warning-tint); } .badge.danger { color: var(--danger); border-color: var(--danger); background: var(--danger-tint); } .badge.info { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } .badge.mute { color: var(--muted); border-color: var(--border-strong); } /* reveal on scroll (usado pelo componente Reveal) */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal-visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- page.module.css original (landing), classes prefixadas lp- ---------- */ /* Landing ClaqueteIA — composição A (Archivo Black + itálico), paleta Tungstênio */ .lp-pagina { min-height: 100vh; overflow-x: hidden; } .lp-wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; } /* ---------- topo (sticky com blur ao rolar) ---------- */ .lp-topoFixo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .lp-topo { max-width: 920px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; } /* ---------- hero ---------- */ /* mora fora do container, então já nasce com a largura da tela: o vídeo de fundo preenche tudo e o conteúdo se centraliza por dentro */ .lp-heroFaixa { position: relative; width: 100%; overflow: hidden; } .lp-hero { position: relative; text-align: center; /* padding curto de propósito: encurta a faixa e o vídeo (object-fit: cover) corta em cima e embaixo, ficando mais retangular */ padding: 40px 20px 44px; max-width: 920px; margin: 0 auto; } /* luz quente de set, respirando devagar */ .lp-hero::before { content: ""; position: absolute; inset: -40px 0 0; background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(201, 119, 47, 0.15), transparent 70%); pointer-events: none; animation: respira 7s ease-in-out infinite; z-index: 1; } /* grão de filme por cima da luz — textura de cinema, quase subliminar */ .lp-hero::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: overlay; } @keyframes respira { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } /* blobs de luz desfocada vagando devagar (estilo Gamma, em cobre) */ .lp-blob { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; opacity: 0.55; } .lp-blobA { width: 380px; height: 380px; top: -60px; left: -100px; background: radial-gradient(circle, rgba(201, 119, 47, 0.28), transparent 70%); animation: vaga 13s ease-in-out infinite alternate; } .lp-blobB { width: 320px; height: 320px; bottom: -40px; right: -80px; background: radial-gradient(circle, rgba(142, 79, 25, 0.24), transparent 70%); animation: vaga 17s ease-in-out infinite alternate-reverse; } @keyframes vaga { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 34px) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .lp-blob { animation: none; } } .lp-heroConteudo { position: relative; z-index: 1; } /* entrada em cascata */ .lp-heroConteudo > * { animation: entra 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .lp-heroConteudo > *:nth-child(2) { animation-delay: 0.08s; } .lp-heroConteudo > *:nth-child(3) { animation-delay: 0.22s; } .lp-heroConteudo > *:nth-child(4) { animation-delay: 0.34s; } .lp-heroConteudo > *:nth-child(5) { animation-delay: 0.46s; } @keyframes entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lp-hero::before { animation: none; } .lp-heroConteudo > * { animation: none; } } .lp-eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin: 0 0 18px; } .lp-tituloA, .lp-tituloC { display: block; font-family: var(--font-display), "Arial Black", sans-serif; text-transform: uppercase; font-size: clamp(22px, 4.6vw, 42px); line-height: 0.92; letter-spacing: -0.01em; margin: 0; position: relative; z-index: 2; text-shadow: 0 0 18px var(--bg), 0 0 8px var(--bg); } .lp-tituloB { display: block; font-family: var(--font-elegant), Georgia, serif; font-style: italic; font-size: clamp(72px, 15vw, 150px); line-height: 0.75; color: var(--primary); margin: -0.06em 0 -0.1em; position: relative; z-index: 1; } .lp-heroSub { color: var(--muted); max-width: 46ch; margin: 26px auto 0; font-size: clamp(15px, 2.4vw, 17px); } .lp-heroSub b { color: var(--text); } .lp-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } .lp-ctaPrimario { position: relative; overflow: hidden; display: inline-block; background: linear-gradient(135deg, #8e4f19 0%, #c9772f 55%, #e9a961 100%); color: #140d06; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; padding: 14px 26px; border-radius: var(--r); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* brilho que varre o botão no hover */ .lp-ctaPrimario::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent); transform: skewX(-18deg); transition: left 0.5s ease; } .lp-ctaPrimario:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(201, 119, 47, 0.45); } .lp-ctaPrimario:hover::after { left: 125%; } .lp-ctaSecundario { display: inline-block; color: var(--text); border: 1px solid var(--border-strong); padding: 13px 22px; border-radius: var(--r); font-size: 14.5px; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .lp-ctaSecundario:hover { background: var(--surface-2); border-color: var(--primary); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .lp-ctaPrimario, .lp-ctaSecundario { transition: none; } .lp-ctaPrimario::after { display: none; } } /* ---------- letreiro (marquee) ---------- */ .lp-letreiro { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; padding: 13px 0; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lp-letreiroTrilho { display: flex; gap: 0; width: max-content; animation: letreiroRoda 26s linear infinite; } .lp-letreiro:hover .lp-letreiroTrilho { animation-play-state: paused; } .lp-letreiroBloco { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-display), "Arial Black", sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: 0.14em; color: var(--muted); } .lp-letreiroBloco i { font-style: normal; color: var(--primary); margin: 0 18px; } @keyframes letreiroRoda { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lp-letreiroTrilho { animation: none; } } /* ---------- seções ---------- */ .lp-secao { padding: 52px 0 0; } .lp-secaoTitulo { font-family: var(--font-display), "Arial Black", sans-serif; text-transform: uppercase; font-size: clamp(19px, 3.4vw, 27px); line-height: 1.05; margin: 0 0 8px; } .lp-secaoSub { color: var(--muted); margin: 0 0 22px; max-width: 60ch; } /* preço */ .lp-preco { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 6vw, 48px); flex-wrap: wrap; text-align: center; padding: 8px 0; } .lp-precoDe { color: var(--faint); } .lp-precoDe .lp-num { font-family: var(--font-display), sans-serif; font-size: clamp(30px, 6vw, 48px); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 3px; } .lp-precoSeta { font-size: clamp(22px, 4vw, 32px); color: var(--primary); } .lp-precoPor .lp-num { font-family: var(--font-display), sans-serif; font-size: clamp(46px, 9vw, 76px); color: var(--primary); line-height: 1; } .lp-precoLegenda { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .lp-precoPq { text-align: center; color: var(--muted); max-width: 52ch; margin: 18px auto 0; } .lp-precoPq b { color: var(--text); } /* dois andares */ .lp-andares { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .lp-andar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; } .lp-andarDestaque { border-color: var(--primary); background: linear-gradient(160deg, var(--surface) 0%, #1d1712 100%); } .lp-andarRotulo { font-family: var(--font-display), sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 12px; } .lp-andar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); font-size: 14.5px; } .lp-andar li b { color: var(--text); } .lp-andar li::before { content: "▸ "; color: var(--primary); } /* planos */ .lp-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; /* stretch (e não start): os cards ficam com a altura do mais alto, independente de quantos benefícios cada plano tem */ align-items: stretch; } .lp-plano { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 22px; /* flex-column em vez de grid: deixa o CTA descer com margin-top auto e os botões dos dois cards ficarem alinhados na mesma linha */ display: flex; flex-direction: column; gap: 14px; position: relative; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } /* empurra o botão pro rodapé do card, sobre o vão que a lista deixar */ .lp-plano > a:last-child { margin-top: auto; } .lp-plano:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6); } .lp-planoDestaque { border-color: var(--primary); background: linear-gradient(160deg, var(--surface) 0%, #1d1712 100%); box-shadow: 0 0 0 1px rgba(201, 119, 47, 0.25), 0 14px 44px -20px rgba(201, 119, 47, 0.35); } .lp-planoDestaque:hover { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(201, 119, 47, 0.4), 0 22px 54px -20px rgba(201, 119, 47, 0.45); } @media (prefers-reduced-motion: reduce) { .lp-plano { transition: none; } } .lp-planoBadge { position: absolute; top: -11px; left: 20px; background: linear-gradient(135deg, #8e4f19, #c9772f); color: #140d06; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; } .lp-planoNome { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 19px; margin: 0; } .lp-planoPreco { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .lp-planoValor { font-family: var(--font-display), sans-serif; font-size: 40px; line-height: 1; color: var(--primary); } .lp-planoValor small { font-size: 14px; color: var(--muted); font-family: var(--font-ui), sans-serif; } .lp-planoDe { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--danger); font-size: 16px; } .lp-planoDesc { margin: 0; color: var(--muted); font-size: 13.5px; } .lp-planoLista { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); font-size: 14px; } .lp-planoLista li::before { content: "▸ "; color: var(--primary); } /* transparência */ .lp-verdades { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .lp-verdade { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r); padding: 16px; font-size: 14px; color: var(--muted); transition: transform 0.2s ease, background 0.2s ease; } .lp-verdade:hover { transform: translateY(-3px); background: var(--surface-2); } .lp-verdade b { color: var(--text); display: block; margin-bottom: 4px; } /* passos */ .lp-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; counter-reset: passo; } .lp-passo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; counter-increment: passo; } .lp-passo::before { content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 14px; margin-bottom: 10px; } .lp-passo b { display: block; margin-bottom: 4px; } .lp-passo p { margin: 0; color: var(--muted); font-size: 13.5px; } /* FAQ */ .lp-faq { display: grid; gap: 8px; } .lp-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 0; } .lp-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 650; font-size: 14.5px; list-style: none; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::before { content: "+ "; color: var(--primary); font-weight: 800; display: inline-block; transition: transform 0.2s ease; } .lp-faq details[open] summary::before { content: "+ "; transform: rotate(45deg); } .lp-faq details { transition: border-color 0.2s ease; } .lp-faq details:hover { border-color: var(--border-strong); } .lp-faq details p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.6; animation: faqAbre 0.28s ease both; } @keyframes faqAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lp-faq details p { animation: none; } } .lp-faq details p b { color: var(--text); } /* CTA final */ .lp-final { text-align: center; padding: 60px 0; } /* footer */ .lp-rodape { border-top: 1px solid var(--border); margin-top: 24px; padding: 26px 0 40px; color: var(--faint); font-size: 12.5px; line-height: 1.7; } .lp-rodape a { color: var(--muted); } /* ---------- Headline.module.css original, classes prefixadas hl- ---------- */ .hl-titulo { margin: 0; /* o laranja do PSD. Trocar por var(--primary) deixa no cobre da marca. */ --headline-destaque: #ff9600; } .hl-arte { display: block; width: min(100%, 500px); height: auto; margin: 0 auto; /* leve sombra pro texto não sumir nas partes claras do vídeo de fundo */ filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.75)); } /* o h1 de verdade, invisível na tela mas presente pro leitor de tela e pro Google */ .hl-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- HeroVideo.module.css original, classes prefixadas hv- ---------- */ .hv-moldura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hv-video { width: 100%; height: 100%; object-fit: cover; /* mais claro que antes: o vídeo aparece de verdade. O véu abaixo continua segurando o contraste do texto. */ filter: saturate(0.9) brightness(0.82); } /* véu: escurece o topo e o pé pra emendar com o fundo da página, e alivia no meio, onde o vídeo é o assunto */ .hv-veu { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(201, 119, 47, 0.12), transparent 70%), linear-gradient(to bottom, rgba(14, 13, 12, 0.6) 0%, rgba(14, 13, 12, 0.3) 45%, rgba(14, 13, 12, 0.88) 100%); } /* quem prefere menos movimento fica só com o poster */ @media (prefers-reduced-motion: reduce) { .hv-video { display: none; } .hv-moldura { background-image: url("/assets/img/hero-poster.jpg"); background-size: cover; background-position: center; } } /* ---------- Inclusos.module.css original, classes prefixadas inc- ---------- */ .inc-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .inc-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 16px; display: grid; gap: 4px; justify-items: center; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease; } .inc-item:hover { transform: translateY(-3px); border-color: var(--border-strong); } .inc-itemForte { border-color: var(--primary); background: linear-gradient(160deg, var(--surface) 0%, #1d1712 100%); } .inc-itemForte .inc-icone { color: var(--primary); } .inc-icone { color: var(--muted); display: grid; place-items: center; margin-bottom: 4px; } .inc-nome { font-weight: 700; font-size: 14.5px; color: var(--text); } .inc-detalhe { font-size: 12.5px; color: var(--muted); line-height: 1.4; } @media (prefers-reduced-motion: reduce) { .inc-item { transition: none; } }