/* ========================================================= PAULO MARTINS — ESTILO DO SITE Organização do arquivo: 1. Cores e variáveis 2. Base 3. Botões 4. Topo 5. Hero 6. Seções 7. Cartões 8. Números 9. Faixas 10. Rodapé 11. Celular 12. Animações ========================================================= */ /* ---------- 1. CORES E VARIÁVEIS ---------- */ :root{ /* Paleta da campanha — trocar aqui muda o site inteiro */ --azul: #0662AD; --azul-escuro: #054E8A; --azul-profundo: #043B68; --amarelo: #F3C63D; --amarelo-forte: #E0AF1F; --verde: #1EA34C; --branco: #FFFFFF; --cinza-claro: #F2F5F9; --cinza-borda: #DCE3EC; --texto: #14243A; --texto-suave: #4B5C71; --largura: 1180px; --raio: 14px; --sombra: 0 18px 45px rgba(7, 48, 106, .12); --transicao: .25s ease; } /* ---------- 2. BASE ---------- */ *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--texto); background: var(--branco); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Impede o iPhone de aumentar a fonte sozinho quando o celular deita */ -webkit-text-size-adjust: 100%; /* Tira o quadrado cinza que aparece ao tocar em links no Android */ -webkit-tap-highlight-color: transparent; } /* O topo é fixo: sem isso, ao clicar num link do menu a seção fica escondida atrás dele. */ [id]{ scroll-margin-top: 92px; } img{ max-width: 100%; display: block; } /* Precisa vir depois do img{display:block}, senão o hidden não funciona */ [hidden]{ display: none !important; } a{ color: inherit; text-decoration: none; } h1, h2, h3{ margin: 0; line-height: 1.05; font-weight: 900; letter-spacing: -.02em; } p{ margin: 0 0 1rem; } ul{ margin: 0; padding: 0; list-style: none; } .container{ width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; } .pular-para-conteudo{ position: absolute; left: 0; top: 0; transform: translateY(-120%); background: var(--amarelo); color: var(--texto); padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 999; } .pular-para-conteudo:focus{ transform: none; } :focus-visible{ outline: 3px solid var(--amarelo); outline-offset: 3px; } /* Os dois estados do site, controlados pela classe do . pre-campanha → esconde número e logo com número, mostra só o nome escrito sem a classe → o contrário: entra a logo, some o texto provisório */ .pre-campanha .so-campanha{ display: none !important; } body:not(.pre-campanha) .so-pre-campanha{ display: none !important; } .etiqueta{ display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); margin-bottom: 14px; } .icone{ width: 22px; height: 22px; flex: none; } /* ---------- 3. BOTÕES ---------- */ .botao{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border: 2px solid transparent; border-radius: 999px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao); } .botao:hover{ transform: translateY(-2px); } .botao:active{ transform: translateY(0); } .botao--amarelo{ background: var(--amarelo); color: var(--azul-profundo); box-shadow: 0 10px 26px rgba(224,175,31,.35); } .botao--amarelo:hover{ background: var(--amarelo-forte); } .botao--azul{ background: var(--azul); color: var(--branco); box-shadow: 0 10px 26px rgba(6,98,173,.32); } .botao--azul:hover{ background: var(--azul-escuro); } .botao--branco{ background: var(--branco); color: var(--azul); } /* Verde do WhatsApp: na página de anúncio o botão precisa dizer para onde leva antes de a pessoa ler o texto. */ .botao--verde{ background: var(--verde); color: var(--branco); box-shadow: 0 10px 26px rgba(30,163,76,.38); } .botao--contorno{ border-color: rgba(255,255,255,.55); color: var(--branco); } .botao--contorno:hover{ background: rgba(255,255,255,.12); border-color: var(--branco); } .botao--contorno-azul{ border-color: var(--azul); color: var(--azul); background: var(--branco); } .botao--pequeno{ padding: 11px 22px; font-size: .92rem; } .botao--grande{ padding: 19px 40px; font-size: 1.08rem; } /* ---------- 4. TOPO ---------- */ .topo{ position: sticky; top: 0; z-index: 100; background: var(--azul); transition: box-shadow var(--transicao), background var(--transicao); } .topo--rolado{ background: var(--azul-escuro); box-shadow: 0 6px 24px rgba(4,59,104,.28); } .topo__interno{ display: flex; align-items: center; gap: 28px; height: 76px; } .topo__logo{ display: flex; align-items: center; min-height: 44px; } /* 54 e não 40: a logo tem duas linhas (nome grande + DEPUTADO FEDERAL pequeno) e a de baixo some se a imagem for baixa demais. */ .topo__logo img{ height: 54px; width: auto; } .topo__logo-texto{ color: var(--branco); font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; } .topo__nav{ display: flex; gap: 26px; margin-left: auto; } .topo__nav a{ color: rgba(255,255,255,.9); font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--transicao), border-color var(--transicao); } .topo__nav a:hover{ color: var(--branco); border-color: var(--amarelo); } /* ---------- 5. HERO ---------- */ .hero{ position: relative; background: var(--azul); color: var(--branco); overflow: hidden; } /* Brilho suave atrás da foto */ .hero::after{ content: ''; position: absolute; right: -10%; top: -20%; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 65%); pointer-events: none; } .hero__interno{ display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 40px; /* SEM min-height. Havia 640px fixos aqui, de quando a foto era um retrato de corpo inteiro que preenchia essa altura. Com a foto atual (busto, mais baixa) e o conteúdo alinhado embaixo, os 640px viravam uma faixa de azul vazio acima da cabeça — dava vontade de rolar a página para "consertar". Agora a altura é a do conteúdo. */ padding-top: 44px; } .hero__texto{ padding-bottom: 72px; position: relative; z-index: 2; } .hero__cargo{ font-size: .85rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 18px; } .hero__nome{ font-size: clamp(3.2rem, 7vw, 5.6rem); text-transform: uppercase; margin-bottom: 18px; } /* A arte oficial no lugar do nome digitado, no modo campanha. Largura em % da coluna (não em px) para acompanhar o hero em qualquer tela; o max-width segura o tamanho no monitor grande. */ .hero__marca{ display: block; width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 10px 24px rgba(4,59,104,.35)); } .hero__slogan{ font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; color: rgba(255,255,255,.92); max-width: 30ch; margin-bottom: 26px; } .hero__numero{ display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 32px; } .hero__numero-rotulo{ font-size: .95rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); } .hero__numero-digitos{ font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 900; line-height: .9; color: var(--amarelo); letter-spacing: -.02em; } .hero__botoes{ display: flex; flex-wrap: wrap; gap: 14px; } .hero__foto{ position: relative; z-index: 1; align-self: end; } .hero__foto img{ /* A foto é um retrato em pé (1100x1710). Sem o teto de altura ela estica o hero para ~880px e joga o nome para baixo da dobra num notebook. Com max-height, quem manda é a altura e a largura acompanha. */ width: auto; max-width: 100%; height: auto; max-height: 620px; display: block; margin-left: auto; margin-right: auto; filter: drop-shadow(0 30px 60px rgba(4,59,104,.45)); } /* Enquanto a foto não chega, o bloco SOME. O hero fica só com o texto, que é uma composição legítima — ninguém percebe que falta algo. Antes aqui havia uma moldura tracejada escrito "Coloque a foto em img/paulo.png". Era recado de desenvolvedor aparecendo para o eleitor no site publicado. Instrução para a equipe mora no LEIA-ME, não na tela. */ .hero__foto--vazia{ display: none; } /* ---------- 5b. MOLDURA DE APOIO ---------- */ .cabecalho-secao__texto{ margin: 12px 0 0; font-size: 1.05rem; color: var(--cinza-texto, #5A6473); } .moldura{ display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 38px; align-items: start; } .moldura__palco{ position: relative; } .moldura__palco canvas{ display: block; width: 100%; height: auto; border-radius: var(--raio); background: var(--azul); box-shadow: 0 18px 44px rgba(4,59,104,.22); touch-action: none; /* sem isto o dedo rola a página em vez de arrastar a foto */ cursor: grab; } .moldura--pronta .moldura__palco canvas{ cursor: move; } /* A área de escolher fica EM CIMA do canvas e desaparece quando a foto entra. Assim a pessoa vê desde o começo o formato final, com a moldura já ali. */ .moldura__area{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; border-radius: var(--raio); cursor: pointer; color: var(--branco); background: rgba(4,59,104,.55); border: 2px dashed rgba(255,255,255,.55); transition: background var(--transicao), border-color var(--transicao); } .moldura__area:hover, .moldura__area--sobre{ background: rgba(4,59,104,.7); border-color: var(--amarelo); } .moldura__area strong{ font-size: 1.05rem; } .moldura__area span{ font-size: .88rem; color: rgba(255,255,255,.8); } .moldura--pronta .moldura__area{ display: none; } .moldura__rotulo{ display: block; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-profundo); margin-bottom: 10px; } .moldura__zoom{ width: 100%; margin-bottom: 26px; accent-color: var(--azul); height: 28px; } .moldura__botoes{ display: flex; flex-direction: column; gap: 12px; } .moldura__aviso{ margin: 18px 0 0; font-size: .95rem; color: var(--azul-profundo); } .moldura__aviso--erro{ color: #C0392B; font-weight: 600; } .moldura__privacidade{ margin: 22px 0 0; padding: 16px 18px; background: #F4F7FB; border-left: 4px solid var(--verde); border-radius: 10px; font-size: .9rem; line-height: 1.5; color: #46505F; } /* Página /whatsapp. Usa o mesmo esqueleto da /apoio (topo, main, rodapé), porque quem chega de anúncio precisa reconhecer o site oficial na hora. */ /* Coluna centrada. A /whatsapp tem UMA coluna de conteúdo; encostada à esquerda de um contêiner de 1180px, sobravam 689px de tela vazia à direita e a página lia como desalinhada. A /apoio não tem esse problema porque é de duas colunas — por isso a classe extra no corpo, em vez de mexer nas duas. */ .pagina-zap .apoio-pagina__cabecalho{ max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } .pagina-zap .zap-pagina{ margin-left: auto; margin-right: auto; } /* display:flex, não inline-flex: margem automática não centra elemento em linha, e o botão ficava 140px fora do eixo enquanto o resto já centrava. */ .pagina-zap .zap-pagina .botao{ display: flex; margin-left: auto; margin-right: auto; } /* A lista fica alinhada à esquerda de propósito: item com marcador centrado fica difícil de ler. Ela é que se centra como bloco, não o texto dentro. */ .pagina-zap .zap-pagina__lista{ max-width: 420px; margin-left: auto; margin-right: auto; } @media (max-width: 640px){ /* "Entrar no grupo do WhatsApp" quebrava em duas linhas dentro dos 339px da tela, por causa dos 40px de respiro de cada lado somados ao ícone. */ .pagina-zap .zap-pagina .botao{ padding-left: 18px; padding-right: 18px; font-size: 1rem; } } .zap-pagina{ max-width: 560px; } .zap-pagina__lista{ display: grid; gap: 14px; margin: 0 0 30px; } .zap-pagina__lista li{ position: relative; padding-left: 30px; font-size: 1.02rem; line-height: 1.5; color: var(--texto-suave); } .zap-pagina__lista li::before{ content: ''; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } .zap-pagina .botao{ max-width: 420px; } /* Segunda oferta (o kit). Antes era um parágrafo solto 20px abaixo do botão verde: parecia legenda dele, e no navegador embutido do Instagram, onde o sublinhado do link não aparece, virava texto morto. Agora é um bloco com moldura e botão próprio — a estrutura sozinha já diz que ali tem uma segunda ação, sem depender de sublinhado nem de marcador desenhado. */ .zap-pagina__extra{ margin: 34px auto 0; max-width: 420px; padding: 20px; background: var(--cinza-claro); border: 1px solid var(--cinza-borda); border-radius: var(--raio); text-align: center; } .zap-pagina__extra p{ margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: var(--texto-suave); } /* Perde para .pagina-zap .zap-pagina .botao (3 classes) se ficar com 2: o botão do kit virava largura cheia e disputava atenção com o verde. */ .pagina-zap .zap-pagina__extra .botao{ display: inline-flex; margin-left: 0; margin-right: 0; max-width: none; } /* Precisa ficar DEPOIS das regras acima: mesma especificidade, ganha quem vem por último no arquivo. Num bloco de celular lá em cima estas linhas eram simplesmente ignoradas. */ @media (max-width: 640px){ .zap-pagina__lista{ margin-bottom: 26px; } .zap-pagina__extra{ margin-top: 30px; padding: 18px 16px; } } /* Botão de sair do navegador embutido. Plano B: só aparece se a troca automática para o navegador do sistema não pegar. Sem cara de alerta — a pessoa não fez nada errado, é o aplicativo que atrapalha. */ .escapar{ margin-bottom: 24px; } .escapar .botao{ width: 100%; } @media (max-width: 700px){ .escapar{ margin-bottom: 18px; } } /* Imagem pronta para salvar com o dedo. Só aparece quando o download não pode acontecer — ver o comentário no js/twibbon.js. */ .moldura__salvar{ margin: 18px 0 0; padding: 16px; background: #FFF8E6; border: 2px solid var(--amarelo); border-radius: 12px; } .moldura__salvar p{ margin: 0 0 12px; font-size: .92rem; color: #5A4200; line-height: 1.5; } .moldura__salvar img{ width: 100%; height: auto; border-radius: 8px; display: block; /* deixa o navegador oferecer o menu de salvar ao segurar o dedo */ -webkit-touch-callout: default; } /* Convite para repassar o link. Parece um campo com o endereço dentro, não um botão comum: assim a pessoa entende que ali tem texto para levar embora. */ .moldura__convite{ margin: 18px 0 0; } .moldura__convite p{ margin: 0 0 8px; font-size: .9rem; color: #46505F; } .moldura__copiar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 14px; background: var(--branco); border: 2px dashed #C9D4E2; border-radius: 10px; font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--azul); cursor: pointer; text-align: left; transition: all var(--transicao); } .moldura__copiar:hover, .moldura__copiar:focus-visible{ border-color: var(--azul); background: #F4F8FD; } .moldura__copiar-acao{ flex: none; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7A8699; } .moldura__copiar--feito{ border-color: var(--verde); border-style: solid; background: #EFFAF3; } .moldura__copiar--feito .moldura__copiar-acao{ color: var(--verde); } @media (max-width: 860px){ .moldura{ grid-template-columns: 1fr; gap: 20px; } /* O quadrado deixa de mandar na altura. Antes ele ocupava a largura toda e empurrava a barra de aproximar e os botões para fora da tela — a pessoa editava sem ver que dava para aproximar. O 46svh amarra o tamanho à ALTURA da janela, não à largura: em celular baixo a peça encolhe sozinha e o controle continua à vista. svh, e não vh, porque vh no celular conta a tela sem a barra do navegador e volta a estourar. */ .moldura__palco{ max-width: min(100%, 34svh, 420px); margin: 0 auto; } /* Controles mais compactos, pelo mesmo motivo: cada pixel aqui é pixel a menos de rolagem entre a foto e o botão de baixar. */ .moldura__rotulo{ margin-bottom: 6px; } .moldura__zoom{ margin-bottom: 16px; } .moldura__botoes{ flex-direction: row; gap: 10px; } /* Lado a lado e em UMA linha: com o rótulo quebrando em duas, o par de botões ficava com 89px de altura e caía abaixo da dobra. */ .moldura__botoes .botao{ flex: 1 1 0; min-width: 0; padding: 14px 10px; font-size: .95rem; white-space: nowrap; } .moldura__aviso{ margin-top: 12px; } .moldura__privacidade{ margin-top: 16px; } } /* Navegador sem svh (versões mais antigas) usa vh como aproximação. */ @supports not (height: 1svh){ @media (max-width: 860px){ .moldura__palco{ max-width: min(100%, 32vh, 420px); } } } @media (max-width: 420px){ /* Em tela estreita o endereço inteiro não cabe ao lado da palavra "copiar" */ .moldura__copiar{ flex-direction: column; align-items: flex-start; gap: 6px; font-size: .88rem; } } /* Chamada para /apoio na home. Substituiu a ferramenta inteira, que agora mora em página própria — link de bio de Instagram não sobrevive a âncora. */ .chamada-apoio{ display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: var(--cinza-claro); border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 34px 36px; } .chamada-apoio h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; } .chamada-apoio p{ margin: 0; color: var(--texto-suave); max-width: 52ch; } .chamada-apoio .botao{ flex: none; } /* Página /apoio: a ferramenta é o conteúdo, não uma seção de algo maior. Os respiros são generosos de propósito. A primeira versão usava 54px no topo e 30px entre o texto e a ferramenta — no papel parece suficiente, na tela o título grande encosta na faixa azul e a página inteira lê como apertada. Título grande precisa de mais ar em volta, não do mesmo. */ .apoio-pagina{ padding: 88px 0 96px; } /* Dois seletores de propósito: .cabecalho-secao--curto define 30px mais adiante no arquivo e, com a mesma especificidade, quem vem depois ganha. */ .apoio-pagina .apoio-pagina__cabecalho{ margin-bottom: 48px; } .apoio-pagina__cabecalho h1{ font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom: 16px; } .apoio-pagina__cabecalho .cabecalho-secao__texto{ margin-bottom: 0; } .apoio-pagina__voltar{ margin: 0 0 26px; } .apoio-pagina__voltar a{ color: var(--amarelo); font-weight: 700; text-decoration: underline; } /* O rodapé desta página carrega duas linhas (o link e a identificação), então precisa de mais altura que o rodapé curto padrão. */ .pagina-apoio .rodape--curto{ padding: 40px 0 44px; } @media (max-width: 700px){ .chamada-apoio{ padding: 26px 22px; gap: 20px; } .chamada-apoio .botao{ width: 100%; } /* Enxuto de propósito no celular: cada pixel acima do quadrado é um pixel que empurra a barra de aproximar para fora da tela. A pessoa precisa ver a foto E o controle ao mesmo tempo, senão edita sem saber que pode. */ .apoio-pagina{ padding: 26px 0 48px; } .apoio-pagina .apoio-pagina__cabecalho{ margin-bottom: 20px; } .apoio-pagina__cabecalho h1{ font-size: 1.55rem; margin-bottom: 8px; } .apoio-pagina__cabecalho .cabecalho-secao__texto{ font-size: .95rem; } } /* ---------- 6. SEÇÕES ---------- */ .secao{ padding: 96px 0; } .secao--clara{ background: var(--branco); } .secao--azul{ background: var(--azul-profundo); color: var(--branco); } .secao--kit{ background: var(--cinza-claro); } .cabecalho-secao{ max-width: 640px; margin-bottom: 54px; } .cabecalho-secao h2{ font-size: clamp(2rem, 4vw, 2.9rem); } /* Quando o título é só uma palavra e o texto vem logo abaixo */ .cabecalho-secao--curto{ margin-bottom: 30px; } .cabecalho-secao--claro .etiqueta{ color: var(--amarelo); } .quem-e__texto{ max-width: 780px; } .quem-e__texto p{ font-size: 1.1rem; color: var(--texto-suave); } .quem-e__texto strong{ color: var(--texto); } /* ---------- 7. CARTÕES ---------- */ .cartoes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 26px; } .cartao{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio); padding: 34px 30px; transition: transform var(--transicao), background var(--transicao), border-color var(--transicao); } .cartao:hover{ transform: translateY(-6px); background: rgba(255,255,255,.1); border-color: var(--amarelo); } /* Sem ícone: um traço amarelo faz o papel de marcar o começo do cartão */ .cartao h3{ font-size: 1.3rem; margin-bottom: 18px; padding-top: 20px; position: relative; } .cartao h3::before{ content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 5px; border-radius: 3px; background: var(--amarelo); } .cartao li{ position: relative; padding-left: 20px; margin-bottom: 11px; color: rgba(255,255,255,.82); font-size: .98rem; } .cartao li::before{ content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); } .cartao li strong{ color: var(--branco); } /* ---------- 8. NÚMEROS (guardado) ---------- A seção de realizações foi retirada da página. Este estilo fica aqui pronto caso ela volte. */ .numeros{ display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 24px; } .numero{ background: var(--cinza-claro); border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 32px 26px; border-top: 5px solid var(--azul); } .numero strong{ display: block; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; line-height: 1; color: var(--azul); margin-bottom: 12px; } .numero p{ margin: 0 0 10px; font-weight: 600; color: var(--texto); } .numero__fonte{ font-size: .78rem; color: var(--texto-suave); } /* ---------- 9. FAIXAS ---------- */ .faixa{ padding: 72px 0; } .faixa--whatsapp{ background: var(--verde); color: var(--branco); } .faixa__interno{ display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .faixa__interno h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 8px; } .faixa__interno p{ margin: 0; color: rgba(255,255,255,.9); font-size: 1.05rem; } .kit{ text-align: center; max-width: 620px; margin: 0 auto; } .kit h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 16px; } .kit p{ color: var(--texto-suave); font-size: 1.1rem; margin-bottom: 28px; } /* ---------- 10. RODAPÉ ---------- */ .rodape{ background: var(--azul-profundo); color: rgba(255,255,255,.85); padding: 70px 0 0; } .rodape__interno{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 50px; } .rodape__marca img{ height: 62px; width: auto; margin-bottom: 14px; } .rodape__marca p{ margin: 0; font-size: .95rem; color: rgba(255,255,255,.7); } .rodape__titulo{ font-weight: 800; color: var(--branco); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } /* Faixa do modo de teste do formulário. Feia de propósito: ninguém pode confundir uma página de teste com a página de verdade. */ .aviso-teste{ background: #FFF3CD; border: 2px solid #E0AF1F; color: #5A4200; padding: 14px 18px; border-radius: 10px; margin-bottom: 24px; font-size: .95rem; line-height: 1.5; } .aviso-teste code{ background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 4px; } /* Campo que ainda não foi preenchido pela equipe. Fica visível de propósito: é mais fácil alguém reparar num [colchete] do que num dado errado. */ .rodape__pendente{ display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: .97rem; color: rgba(255,255,255,.45); } .rodape__redes a, .rodape__contato a{ display: flex; align-items: center; min-height: 44px; /* alvo de toque confortável no dedo */ padding: 4px 0; font-size: .97rem; color: rgba(255,255,255,.8); transition: color var(--transicao); } .rodape__redes a:hover, .rodape__contato a:hover{ color: var(--amarelo); } .rodape__legal{ border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; padding-bottom: 26px; } /* Identificação da campanha: logo do partido + CNPJ, lado a lado. No celular a logo vai para cima do texto — 194px de largura original não sobrevive a dividir espaço com uma linha de CNPJ em tela estreita. */ .rodape__identificacao{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rodape__partido{ flex: none; height: 26px; width: auto; opacity: .85; } .rodape__identificacao p{ margin: 0; } @media (max-width: 520px){ .rodape__identificacao{ gap: 10px; } .rodape__partido{ height: 22px; } } .rodape__legal p{ margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); } /* ---------- 11. BARRA DO CELULAR ---------- */ .barra-celular{ display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--cinza-borda); box-shadow: 0 -6px 24px rgba(4,59,104,.12); } .barra-celular .botao{ flex: 1; padding: 14px 10px; font-size: .95rem; } /* ---------- 11b. FORMULÁRIO ---------- */ .pagina-simples{ background: var(--cinza-claro); } .formulario-pagina{ padding: 54px 0 80px; } .container--estreito{ max-width: 720px; } .formulario-cabecalho{ margin-bottom: 32px; } .formulario-cabecalho h1{ font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 12px; } .formulario-cabecalho p{ color: var(--texto-suave); font-size: 1.05rem; margin: 0; } .formulario{ background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 34px 30px; box-shadow: var(--sombra); } .formulario-subtitulo{ font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--azul); margin: 34px 0 18px; padding-top: 24px; border-top: 1px solid var(--cinza-borda); } .campo{ margin-bottom: 20px; } .campo label{ display: block; margin-bottom: 7px; font-weight: 700; font-size: .93rem; } .opcional{ font-weight: 500; color: var(--texto-suave); } .campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo input[type="password"], .campo input[type="date"], .campo select{ width: 100%; padding: 14px 15px; border: 2px solid var(--cinza-borda); border-radius: 10px; /* 16px é obrigatório: abaixo disso o iPhone dá zoom sozinho no campo */ font-size: 16px; font-family: inherit; color: var(--texto); background: var(--branco); transition: border-color var(--transicao), box-shadow var(--transicao); } .campo input:focus, .campo select:focus{ outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(6,98,173,.14); } .campo--erro input, .campo--erro select{ border-color: #C0392B; } .campo__erro{ display: block; margin-top: 6px; font-size: .86rem; font-weight: 700; color: #C0392B; } .campo__dica{ display: block; margin-top: 6px; font-size: .86rem; color: var(--texto-suave); } .campo__dica--erro{ color: #C0392B; font-weight: 700; } .campo-linha{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .campo-linha--cep{ grid-template-columns: 200px 1fr; } .campo-linha--tres{ grid-template-columns: 120px 1fr 1fr; } .campo--consentimento{ margin-top: 26px; } .consentimento{ display: flex; align-items: flex-start; gap: 12px; font-weight: 500; font-size: .93rem; line-height: 1.5; color: var(--texto-suave); cursor: pointer; } .consentimento input{ width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--azul); } .consentimento--opcional{ margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--cinza-borda); } .consentimento a{ color: var(--azul); text-decoration: underline; } .botao--largo{ width: 100%; margin-top: 8px; } /* Campo caça-robô: sai da tela sem usar display:none, que alguns robôs detectam */ .armadilha{ position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } .recado{ border-radius: var(--raio); padding: 26px 28px; margin-bottom: 26px; } .recado--erro{ background: #FDECEA; border-left: 5px solid #C0392B; } .recado--erro p{ margin: 8px 0 0; } /* Convite para o grupo na tela de sucesso do kit. Verde para dizer para onde leva antes de a pessoa ler, e destacado do resto porque é o próximo passo, não um detalhe do recibo. */ .sucesso-zap{ margin: 26px 0 22px; padding: 20px 22px; background: #EFFAF3; border: 2px solid #BFE7CD; border-radius: 12px; text-align: left; } .sucesso-zap p{ margin: 0 0 16px; font-size: .98rem; line-height: 1.55; color: #16202B; } .sucesso-zap .botao{ max-width: 380px; } /* Segunda saída, em texto: o grupo continua ali para quem não quiser mandar mensagem, sem virar um segundo botão verde disputando com o primeiro. */ .sucesso-zap__contagem{ margin: 12px 0 0 !important; font-size: .9rem; color: #3D4D5C; text-align: center; } .sucesso-zap__contagem strong{ color: var(--verde); font-variant-numeric: tabular-nums; } /* Segunda saída. Antes era uma frase azul e negrito encostada no botão, o que dava a ela o mesmo peso visual da ação principal e ainda por cima desalinhada dele. Agora vem separada por um fio, centrada com o botão e em peso menor: continua clicável e evidente, sem disputar. */ .sucesso-zap__ou{ margin: 18px 0 0 !important; padding-top: 15px; border-top: 1px solid #C9E6D5; text-align: center; font-size: .9rem; line-height: 1.5; color: #46586B; } .sucesso-zap__ou a{ color: var(--azul-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .sucesso-zap__ou a:hover{ color: var(--azul); } /* Botão de apoio da página da moldura. Aparece só depois que a imagem foi entregue — ver o comentário em js/twibbon.js. */ .moldura__zap{ margin: 16px 0 0; max-width: 420px; } /* Base legal do dado sensível, antes das caixas de consentimento. Cinza e pequeno, mas legível: é explicação obrigatória, não letra miúda para esconder. */ /* Confirmacao do endereco que o CEP achou. Substitui tres campos na tela, entao precisa dizer com todas as letras o que foi preenchido — e dar o caminho de volta. Sem o "corrigir", quem mora em rua que o ViaCEP erra fica sem saida. */ .endereco-achado{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: -6px 0 18px; padding: 11px 14px; background: #EFF4FA; border: 1px solid var(--cinza-borda); border-radius: 10px; font-size: .92rem; line-height: 1.45; color: var(--texto); } .endereco-achado__editar{ border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; } .endereco-achado__editar:hover{ color: var(--azul-escuro); } .consentimento__aviso{ margin: 0 0 14px; font-size: .88rem; line-height: 1.5; color: #4B5C71; } .consentimento__saida{ margin: 14px 0 0; font-size: .85rem; line-height: 1.5; color: #4B5C71; } .consentimento__saida a{ color: var(--azul); font-weight: 600; text-decoration: underline; } /* Edição do limite direto na linha da tabela de grupos. Campo curto e botão discreto: é ajuste raro, não pode competir com Ativar e Encerrar. */ .painel__limite{ display: flex; gap: 6px; align-items: center; margin-top: 8px; } .painel__limite input{ width: 84px; padding: 6px 8px; font: inherit; font-size: .85rem; border: 1px solid var(--cinza-borda); border-radius: 8px; color: var(--texto); } .painel__limite .botao{ padding: 6px 12px; font-size: .8rem; } @media (max-width: 640px){ /* Dentro do cartão verde sobram uns 280px de linha; com o respiro padrão de 40px de cada lado o rótulo quebrava em duas linhas. */ .sucesso-zap .botao{ padding-left: 16px; padding-right: 16px; font-size: .98rem; } } .recado--sucesso{ background: var(--branco); border: 1px solid var(--cinza-borda); border-left: 6px solid var(--verde); box-shadow: var(--sombra); padding: 44px 36px; } .recado--sucesso h1{ font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 14px; } .recado--sucesso p{ color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 26px; } .texto-legal{ background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 34px 30px; box-shadow: var(--sombra); } .texto-legal h2{ font-size: 1.15rem; margin: 30px 0 12px; color: var(--azul); } .texto-legal h2:first-child{ margin-top: 0; } .texto-legal p{ color: var(--texto-suave); } .texto-legal ul{ list-style: disc; padding-left: 22px; margin-bottom: 16px; color: var(--texto-suave); } .texto-legal li{ margin-bottom: 7px; } .texto-legal__data{ margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--cinza-borda); font-size: .88rem; } .rodape--curto{ padding: 26px 0; } .rodape--curto p{ margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); } /* ---------- 11b-bis. PÁGINA DE ANÚNCIO (/whatsapp) ---------- Uma tela só, centrada, sem menu e sem rodapé de navegação. Quem chega aqui veio de anúncio e tem uma decisão a tomar: entrar ou não. Tudo que não ajuda nessa decisão foi tirado de propósito. */ .pagina-anuncio{ background: var(--azul); color: var(--branco); } .anuncio{ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 32px 22px calc(24px + env(safe-area-inset-bottom)); text-align: center; } .anuncio__caixa{ width: 100%; max-width: 520px; } .anuncio__marca{ width: 100%; max-width: 380px; height: auto; margin: 0 auto 30px; display: block; } .anuncio__titulo{ font-size: clamp(1.7rem, 5.5vw, 2.4rem); line-height: 1.1; margin-bottom: 14px; } .anuncio__texto{ font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.9); margin-bottom: 28px; } .anuncio__secundario{ margin: 22px 0 0; font-size: .95rem; color: rgba(255,255,255,.75); } .anuncio__secundario a{ color: var(--amarelo); text-decoration: underline; } .anuncio__legal{ margin: 0; font-size: .78rem; color: rgba(255,255,255,.55); max-width: 520px; } @media (max-width: 620px){ .anuncio__marca{ max-width: 300px; margin-bottom: 24px; } } /* Botão de excluir apoiador: discreto de propósito. É ação sem desfazer e fica ao lado de dezenas de linhas — não pode competir por atenção com o que o operador vem fazer aqui. Só ganha cor quando o dedo chega perto. */ .painel__excluir{ border: 1px solid #E3E8EF; background: transparent; color: #7A8699; border-radius: 8px; padding: 6px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease; white-space: nowrap; } .painel__excluir:hover, .painel__excluir:focus-visible{ background: #FDECEA; border-color: #E5B4AE; color: #C0392B; } /* ---------- 11c. PAINEL ---------- */ .painel{ background: var(--cinza-claro); } .painel__container{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 22px; } .painel__topo{ background: var(--azul-profundo); color: var(--branco); position: sticky; top: 0; z-index: 50; } .painel__topo-interno{ display: flex; align-items: center; gap: 26px; min-height: 62px; flex-wrap: wrap; } .painel__marca{ font-weight: 900; letter-spacing: -.01em; } .painel__marca span{ font-weight: 500; opacity: .6; } .painel__menu{ display: flex; gap: 20px; margin-left: 10px; } .painel__menu a{ color: rgba(255,255,255,.82); font-weight: 700; font-size: .93rem; padding: 6px 0; border-bottom: 3px solid transparent; } .painel__menu a:hover{ color: var(--branco); } .painel__menu a.ativo{ color: var(--amarelo); border-color: var(--amarelo); } .painel__usuario{ margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: .88rem; } .painel__usuario small{ display: block; opacity: .6; font-size: .78rem; } .painel__sair{ color: var(--amarelo); font-weight: 700; } .painel__conteudo{ padding: 30px 0 70px; } .painel__titulo{ font-size: 1.7rem; margin-bottom: 22px; } .painel__subtitulo{ font-size: 1.15rem; margin: 38px 0 16px; } .painel__numeros{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; } .painel__numero{ background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 18px 20px; border-top: 4px solid var(--azul); } .painel__numero strong{ display: block; font-size: 1.9rem; line-height: 1; color: var(--azul); } .painel__numero span{ font-size: .84rem; color: var(--texto-suave); } .painel__numero--destaque{ border-top-color: var(--amarelo); } .painel__numero--destaque strong{ color: var(--amarelo-forte); } .painel__filtros{ background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; } .painel__filtros .campo{ margin-bottom: 0; } .painel__filtros input, .painel__filtros select{ padding: 10px 12px; font-size: 15px; } .campo--checkbox label{ display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: .88rem; } .campo--checkbox input{ width: 19px; height: 19px; accent-color: var(--azul); } .painel__filtros-botoes{ display: flex; gap: 10px; } .painel__acoes{ display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .painel__contagem{ margin: 0; color: var(--texto-suave); font-size: .93rem; } .painel__acoes-botoes{ display: flex; gap: 10px; flex-wrap: wrap; } .painel__exportar{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .painel__exportar label{ font-size: .82rem; font-weight: 800; color: var(--texto-suave); } .painel__exportar select{ width: auto; min-width: 140px; padding: 10px 34px 10px 12px; } .painel__tabela-caixa{ background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; overflow-x: auto; /* tabela larga rola dentro da caixa */ } .painel__tabela{ width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 780px; } .painel__tabela th{ text-align: left; padding: 13px 16px; background: var(--cinza-claro); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); border-bottom: 1px solid var(--cinza-borda); white-space: nowrap; } .painel__tabela td{ padding: 13px 16px; border-bottom: 1px solid var(--cinza-borda); vertical-align: top; } .painel__tabela tr:last-child td{ border-bottom: none; } .painel__tabela small{ color: var(--texto-suave); } .painel__tabela--miuda{ min-width: 620px; font-size: .86rem; } .painel__vazio{ text-align: center; color: var(--texto-suave); padding: 34px !important; } .painel__link{ max-width: 280px; word-break: break-all; } .linha--apagada{ opacity: .5; } .painel__botoes-linha{ display: flex; gap: 8px; white-space: nowrap; } .painel__botoes-linha form{ margin: 0; } .etiqueta-sim, .etiqueta-nao, .etiqueta-fila{ display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .etiqueta-sim{ background: #DFF3E6; color: #15733A; } .etiqueta-nao{ background: #F0F2F5; color: #6B7A8D; } .etiqueta-fila{ background: #FFF3D1; color: #96700C; } .barra{ display: block; height: 5px; border-radius: 3px; background: var(--cinza-borda); margin-top: 6px; overflow: hidden; } .barra__cheia{ display: block; height: 100%; background: var(--azul); } .painel__aviso{ border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: .93rem; } .painel__aviso--ok{ background: #DFF3E6; border-left: 4px solid var(--verde); } .painel__aviso--erro{ background: #FDECEA; border-left: 4px solid #C0392B; } .painel__aviso--atencao{ background: #FFF6D8; border-left: 4px solid var(--amarelo); } .painel__explicacao{ background: var(--branco); border: 1px solid var(--cinza-borda); border-left: 4px solid var(--azul); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; font-size: .9rem; } .painel__explicacao p{ margin: 0 0 8px; color: var(--texto-suave); } .painel__explicacao p:last-child{ margin-bottom: 0; } .painel__paginas{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; } .painel__paginas a{ padding: 8px 13px; border-radius: 8px; background: var(--branco); border: 1px solid var(--cinza-borda); font-weight: 700; font-size: .88rem; } .painel__paginas a.ativo{ background: var(--azul); color: var(--branco); border-color: var(--azul); } .formulario--painel{ box-shadow: none; padding: 24px 22px; } .container--login{ max-width: 430px; margin: 0 auto; } .pagina-login .formulario-cabecalho{ text-align: center; } @media (max-width: 720px){ .painel__topo-interno{ padding: 12px 0; } .painel__usuario{ width: 100%; margin-left: 0; justify-content: space-between; } .painel__filtros{ grid-template-columns: 1fr; } .painel__acoes-botoes .botao{ flex: 1; } } /* ---------- 12. ANIMAÇÕES ---------- */ .revelar{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .revelar--visivel{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .revelar{ opacity: 1; transform: none; transition: none; } .botao:hover, .cartao:hover{ transform: none; } } /* ---------- RESPONSIVO ---------- */ @media (max-width: 960px){ .hero__interno{ grid-template-columns: 1fr; min-height: auto; padding-top: 54px; } .hero__texto{ padding-bottom: 40px; } .hero__foto{ max-width: 420px; margin: 0 auto; } .rodape__interno{ grid-template-columns: 1fr 1fr; } .topo__nav{ display: none; } .topo__cta{ margin-left: auto; } } @media (max-width: 620px){ .secao{ padding: 60px 0; } .faixa{ padding: 52px 0; } .container{ padding: 0 18px; } .rodape__interno{ grid-template-columns: 1fr; gap: 26px; } /* Topo mais baixo sobra mais tela para o conteúdo */ .topo__interno{ height: 62px; } .topo__logo img{ height: 40px; } .topo__logo-texto{ font-size: 1rem; } [id]{ scroll-margin-top: 76px; } .hero__interno{ padding-top: 40px; gap: 26px; } .hero__texto{ padding-bottom: 26px; } .hero__cargo{ font-size: .74rem; letter-spacing: .14em; margin-bottom: 14px; } .hero__botoes{ gap: 12px; } .hero__botoes .botao{ width: 100%; } .cabecalho-secao{ margin-bottom: 34px; } .cartoes{ gap: 18px; } .cartao{ padding: 26px 22px; } .faixa__interno{ gap: 22px; } .faixa__interno .botao{ width: 100%; } .kit .botao{ width: 100%; } /* Espaço para a barra fixa não cobrir o fim da página */ .barra-celular{ display: flex; } body{ padding-bottom: 96px; } .pagina-simples{ padding-bottom: 0; } /* a página do formulário não tem barra fixa */ /* Formulário: uma coisa embaixo da outra, sem campo espremido */ .formulario{ padding: 24px 20px; border-radius: 12px; } .formulario-pagina{ padding: 32px 0 54px; } .campo-linha, .campo-linha--cep, .campo-linha--tres{ grid-template-columns: 1fr; gap: 0; } .recado--sucesso{ padding: 32px 24px; } .recado--sucesso .botao{ width: 100%; } } /* Telas bem estreitas (iPhone SE e similares) */ @media (max-width: 360px){ .container{ padding: 0 15px; } .hero__nome{ font-size: 2.85rem; } .topo__cta{ padding: 10px 16px; font-size: .85rem; } .barra-celular .botao{ font-size: .88rem; padding: 13px 6px; } } /* Recursos de captacao comecam escondidos e so sao revelados quando o interruptor do servidor esta ativo. */ [data-captacao][hidden] { display: none !important; } /* ---------- 11b-ter. OFERTA DO KIT ---------- Quem cai nesta página veio de anúncio: clicou em "receba material de campanha" e a página antiga respondia com nove campos vazios. Esta faixa existe para responder ao anúncio antes de pedir endereço — mostra a peça, diz que não custa nada e só então entrega o formulário. Fica colada no .topo de propósito: azul-profundo embaixo do azul da barra lê como uma testeira só que escurece, não como duas faixas empilhadas. */ .oferta{ background: var(--azul-profundo); color: var(--branco); padding: 50px 0 0; /* 0 embaixo: quem fecha a faixa é a barra da bandeira */ } /* Mesma barra que fecha a arte do anúncio. Vai de ponta a ponta e corta o azul — a faixa termina, não desbota. */ .oferta__bandeira{ height: 9px; margin-top: 44px; background: linear-gradient(90deg, var(--amarelo-forte) 0%, var(--amarelo) 42%, var(--verde) 100%); } /* Caixa alta, entrelinha curta e escala grande: é a pergunta do criativo remontada em texto. O tamanho não é exagero — é a única coisa na primeira tela, e precisa ser reconhecida como a mesma frase da imagem antes de a pessoa ler. */ .oferta__titulo{ text-transform: uppercase; font-size: clamp(2.3rem, 9.4vw, 3.7rem); line-height: .93; letter-spacing: -.025em; font-weight: 900; margin: 0 0 18px; text-wrap: balance; } /* As duas partes da MESMA frase, quebrada como na arte: a pergunta começa branca e miúda e estoura em amarelo no que interessa. e não são rótulo e título — ler os dois em seguida dá a frase inteira. */ .oferta__titulo span{ display: block; font-size: .6em; letter-spacing: -.01em; color: var(--branco); } .oferta__titulo em{ display: block; font-style: normal; color: var(--amarelo); } .oferta__linha{ font-size: 1.06rem; line-height: 1.5; color: #B7D2EA; margin: 0; max-width: 36ch; } .oferta__rotulo{ font-size: .92rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--amarelo); margin: 36px 0 16px; } /* Empilhadas, não em duas colunas: as duas peças têm proporções que não convivem lado a lado (retrato 5:7 contra faixa 2,8:1). Cada linha ganha o arranjo que a forma dela pede. */ .oferta__pecas{ list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } .peca{ margin: 0; } /* Retrato: a arte é alta, então fica ao lado do texto e não por cima dele — empilhada ocuparia meia tela de celular sozinha. */ .peca--retrato{ display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: center; } /* Faixa: a arte é larga e baixa. Ocupa a linha inteira e o texto vai embaixo, que é como o adesivo existe no mundo — uma tira comprida. */ .peca--faixa .peca__texto{ margin-top: 14px; } /* A placa é só moldura: cantos, sombra e recorte. O branco só aparece se a imagem faltar — arte impressa sobre azul precisa de borda de papel. */ .peca__placa{ background: var(--branco); border-radius: 12px; overflow: hidden; /* O fio claro de 1px não é enfeite: as duas artes são azuis e a faixa atrás também é azul. Sem uma borda, o adesivo derrete no fundo. */ box-shadow: 0 0 0 1px rgba(255,255,255,.26), 0 16px 34px rgba(0,0,0,.36); animation: peca-entra .7s cubic-bezier(.16,1,.3,1) both; } .peca:nth-child(2) .peca__placa{ animation-delay: .09s; } /* height:auto e não 100%: quem manda na altura é a proporção do arquivo. */ .peca__placa img{ width: 100%; height: auto; display: block; } @keyframes peca-entra{ from{ transform: translateY(14px) scale(.985); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.2); } to { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.26), 0 16px 34px rgba(0,0,0,.36); } } .peca__nome{ font-size: 1.12rem; font-weight: 900; margin: 0 0 4px; } .peca__uso{ font-size: .92rem; line-height: 1.45; color: #B7D2EA; margin: 0; } /* Enquanto a arte real não chega, a placa mostra o nome da peça em vez de ícone de imagem quebrada. Some sozinho quando o arquivo existir. */ .peca__falta{ display: grid; place-items: center; padding: 16px; text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.35; color: var(--texto-suave); background: repeating-linear-gradient(-45deg, #EDF2F8 0 10px, #F6F9FC 10px 20px); } /* Sem a imagem não há o que dar altura à placa, então a proporção de cada arte fica declarada aqui — a falta ocupa exatamente o buraco que a peça ocuparia, e o resto da página não se mexe quando o arquivo volta. */ .peca--retrato .peca__falta{ aspect-ratio: 760 / 1064; } .peca--faixa .peca__falta{ aspect-ratio: 1160 / 412; } /* Tira de objeções: as três coisas que a pessoa quer saber antes de digitar o endereço. Sem moldura — é transição para o formulário, não um bloco. */ .garantias{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } .garantias li{ display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 900; color: var(--azul-profundo); text-transform: uppercase; letter-spacing: .06em; } .garantias svg{ width: 22px; height: 22px; flex: none; color: var(--azul); } @media (max-width: 620px){ .oferta{ padding: 36px 0 0; } .oferta__bandeira{ margin-top: 34px; height: 8px; } .oferta__rotulo{ margin: 30px 0 14px; } .oferta__pecas{ gap: 20px; } .peca--retrato{ grid-template-columns: 132px 1fr; gap: 16px; } .peca__nome{ font-size: 1.04rem; } .peca__uso{ font-size: .87rem; } .garantias{ gap: 9px 18px; } } @media (prefers-reduced-motion: reduce){ .peca__placa{ animation: none; } } /* ---------- 11b-quater. CONTRASTE DO FORMULÁRIO DO KIT ---------- Escopo em .formulario-pagina--kit, NUNCA no .campo solto: as mesmas classes vestem o login do painel, o criar-admin e os filtros da administração. Contraste alto é o que esta página precisa; nas telas de administração seria só barulho. O motivo: logo acima o visitante levou uma faixa azul-profundo com título em caixa alta amarela. Cair disso num cartão branco sobre cinza quase branco, com campos de borda #DCE3EC, faz o formulário parecer desligado — a página perde a voz exatamente onde precisa da ação. */ /* O fundo escurece um pouco para o cartão branco ter de onde se destacar. */ .formulario-pagina--kit{ background: #E4EBF3; } .formulario-pagina--kit .formulario{ border-color: #C2D0E0; box-shadow: 0 22px 50px rgba(7, 48, 106, .17); } /* Rótulo em azul-profundo e maior: é a pergunta, tem que ser lida antes do campo, não junto com ele. */ .formulario-pagina--kit .campo label{ color: var(--azul-profundo); font-size: .97rem; } /* Campo com fundo levemente frio e borda escura: vira uma fenda visível, em vez de branco sobre branco com um contorno que some no celular. */ .formulario-pagina--kit .campo input[type="text"], .formulario-pagina--kit .campo input[type="tel"], .formulario-pagina--kit .campo input[type="email"], .formulario-pagina--kit .campo select{ /* #748FAE e não um cinza-azul mais claro: borda de campo é controle, e o piso de contraste para controle é 3:1. O tom anterior dava 2,13:1 — bonito na minha tela, invisível num celular no sol. Este dá 3,34:1. */ border-color: #748FAE; background: #F7FAFD; } /* Placeholder tem o mesmo piso de texto normal, 4,5:1. O tom anterior dava 3,01:1: a dica do formato do telefone sumia justo para quem mais precisa dela. Este dá 4,8:1 e continua mais claro que o texto digitado. */ .formulario-pagina--kit .campo input::placeholder{ color: #5B7189; } /* O foco precisa gritar mais do que a borda já escura, senão some. */ .formulario-pagina--kit .campo input:focus, .formulario-pagina--kit .campo select:focus{ border-color: var(--azul); background: var(--branco); box-shadow: 0 0 0 4px rgba(6, 98, 173, .22); } /* Subtítulo de seção com filete mais firme, para separar "seus dados" de "para onde enviamos" sem precisar de mais espaço. */ .formulario-pagina--kit .formulario-subtitulo{ border-top-color: #C2D0E0; } /* As caixas de consentimento eram o trecho mais apagado da página inteira, e são obrigatórias para o pedido sair. Texto mais escuro e caixa maior. */ .formulario-pagina--kit .consentimento{ color: #2F4763; } .formulario-pagina--kit .consentimento input{ width: 24px; height: 24px; } .formulario-pagina--kit .consentimento--opcional{ border-top-color: #C2D0E0; } /* ---------- Faixa da oferta no celular ---------- Media a 375px antes de mexer: a faixa tinha 710px e empurrava o primeiro campo para 1,15 tela. Quem chega de anuncio nao rola uma tela inteira para descobrir que existe formulario. Nada foi removido — as duas artes, a pergunta do criativo e as garantias continuam la. O que mudou foi o respiro entre elas e o tamanho da arte em retrato, que sozinha ocupava um terco da faixa. */ @media (max-width: 640px){ .oferta{ padding-top: 26px; } .oferta__titulo{ font-size: clamp(1.95rem, 8.6vw, 3.7rem); margin-bottom: 12px; } .oferta__linha{ font-size: .98rem; } .oferta__rotulo{ margin: 20px 0 10px; } .oferta__pecas{ gap: 14px; } .peca--retrato{ grid-template-columns: 112px 1fr; gap: 14px; } .peca--faixa .peca__texto{ margin-top: 10px; } .oferta__bandeira{ margin-top: 24px; } .garantias{ margin-top: 18px; } /* As artes sao a parte mais alta da faixa: 343px dos 613. Limitar a largura limita a altura, porque a proporcao do arquivo manda. O adesivo nao perde nada em 250px — ele e uma faixa larga e baixa. */ .peca--faixa .peca__placa{ max-width: 250px; } .peca--retrato{ grid-template-columns: 96px 1fr; } /* 56px de respiro puro entre o fim da faixa e o primeiro rotulo. Metade disso basta: a faixa colorida ja separa as duas partes sozinha. */ .formulario-pagina--kit{ padding-top: 16px; } .formulario-pagina--kit .formulario{ padding-top: 14px; } } /* Kit: oferta compacta e formulario visivel desde a primeira tela. Todas as regras novas ficam restritas a esta pagina. */ .pagina-kit .topo { background: #07306A; } .kit-hero { background: radial-gradient(ellipse at 76% 56%, #175699 0, #07306A 56%, #052652 100%); color: #fff; padding: 30px 0 44px; overflow: hidden; } .kit-hero > .container { position: relative; padding-right: 300px; min-height: 280px; } .kit-hero__etiqueta { display: inline-block; margin: 0 0 14px; padding: 6px 10px; border: 1px solid #6287AC; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; } .kit-hero h1 { margin: 0; font-size: 2.4rem; line-height: 1.02; font-weight: 900; letter-spacing: -.04em; } .kit-hero h1 em { font-style: normal; color: var(--amarelo); } .kit-hero__descricao { max-width: 32ch; margin: 14px 0 18px; color: #D8E8F8; font-size: .95rem; line-height: 1.45; } .kit-hero__material { position: absolute; top: 8px; right: 28px; width: 235px; height: 260px; } .kit-hero__santinho { position: absolute; top: 0; left: 30px; width: 145px; height: auto; transform: rotate(-9deg); border-radius: 7px; box-shadow: 0 14px 26px #00193680; border: 1px solid #ffffff80; } .kit-hero__adesivo { position: absolute; top: 159px; left: 0; width: 235px; height: auto; transform: rotate(5deg); border-radius: 5px; box-shadow: 0 12px 22px #00193690; border: 1px solid #ffffff90; } .kit-hero__legenda { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: .72rem; font-weight: 700; color: #D8E8F8; } .kit-hero__garantias { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; font-size: .8rem; font-weight: 700; } .kit-hero__garantias span { color: var(--amarelo); margin-right: 4px; } .pagina-kit .formulario-pagina--kit { padding-top: 0; } .pagina-kit .formulario-pagina--kit .formulario { position: relative; margin-top: -20px; border-top: 4px solid var(--amarelo); } .kit-form-intro { margin-bottom: 22px; } .kit-form-intro__etiqueta { margin: 0 0 4px; color: var(--azul); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .kit-form-intro h2 { margin: 0 0 6px; font-size: 1.65rem; line-height: 1.15; font-weight: 900; color: var(--azul-profundo); } .kit-form-intro > p:last-child { margin: 0; color: #4B5C71; font-size: .9rem; line-height: 1.45; } @media (max-width: 640px) { .pagina-kit .topo__interno { height: 54px; } .pagina-kit .topo__logo img { height: 34px; } .kit-hero { padding: 18px 0 40px; } .kit-hero > .container { padding-right: 15px; min-height: 0; } .kit-hero__etiqueta { margin-bottom: 10px; font-size: .66rem; } .kit-hero h1 { font-size: clamp(1.85rem, 8vw, 2.6rem); } .kit-hero__descricao { max-width: 34ch; margin: 10px 0 0; font-size: .87rem; } .kit-hero__material { position: relative; top: auto; right: auto; margin: 14px auto 12px; width: 245px; height: 146px; } .kit-hero__santinho { width: 87px; left: 29px; } .kit-hero__adesivo { top: 66px; left: 84px; width: 160px; } .kit-hero__legenda { bottom: 0; } .kit-hero__garantias { justify-content: center; font-size: .75rem; gap: 14px; } .pagina-kit .formulario-pagina--kit .formulario { padding: 18px; } .kit-form-intro { margin-bottom: 18px; } .kit-form-intro h2 { font-size: 1.45rem; } .pagina-kit .campo-linha--cep { grid-template-columns: 1fr .72fr; gap: 12px; } } /* Kit v32.1: o formulario vem antes da apresentacao detalhada das pecas. */ .kit-hero { padding-bottom: 42px; } .kit-hero > .container { padding-right: 24px; min-height: 0; } .kit-hero__descricao { max-width: 46ch; } .kit-conteudo { padding: 50px 0 0; text-align: center; } .kit-conteudo__etiqueta { margin: 0 0 6px; color: var(--azul); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .kit-conteudo h2 { margin: 0 0 28px; color: var(--azul-profundo); font-size: clamp(1.55rem, 5vw, 2rem); line-height: 1.15; } .kit-conteudo__pecas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; text-align: left; } .kit-conteudo figure { margin: 0; } .kit-conteudo figure img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 16px 34px rgba(7,48,106,.2); } .kit-conteudo figcaption { display: grid; gap: 4px; margin-top: 14px; color: var(--azul-profundo); } .kit-conteudo figcaption strong { font-size: 1rem; } .kit-conteudo figcaption span { color: #4B5C71; font-size: .86rem; line-height: 1.4; } @media (max-width: 640px) { .kit-hero { padding: 18px 0 38px; } .kit-hero > .container { padding-right: 15px; } .kit-hero__descricao { margin-bottom: 14px; } .kit-conteudo { padding-top: 38px; } .kit-conteudo h2 { margin-bottom: 22px; } .kit-conteudo__pecas { display: block; } .kit-conteudo__santinho { max-width: 210px; margin: 0 auto 30px !important; } .kit-conteudo__adesivo { margin-bottom: 8px !important; } } /* Miniatura lateral: ilustra a oferta sem criar outra faixa antes do pedido. */ .kit-hero__chamada { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 20px; align-items: center; } .kit-hero__miniatura { position: relative; height: 190px; } .kit-hero__miniatura img { position: absolute; display: block; height: auto; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 10px 20px rgba(0,15,40,.4); } .kit-miniatura__santinho { width: 119px; left: 17px; top: 5px; border-radius: 6px; transform: rotate(-11deg); } .kit-miniatura__adesivo { width: 168px; right: 0; top: 130px; border-radius: 4px; transform: rotate(7deg); } @media (max-width: 640px) { .kit-hero__chamada { grid-template-columns: minmax(0, 1fr) 124px; gap: 10px; } .kit-hero__chamada h1 { font-size: clamp(1.4rem, 6.5vw, 2.1rem); line-height: 1.06; } .kit-hero__miniatura { height: 146px; } .kit-miniatura__santinho { width: 89px; left: 12px; top: 5px; } .kit-miniatura__adesivo { width: 122px; top: 99px; } }