/* ============================================================================= Easypeasy Pay — landing Hierarquia e ritmo inspirados numa referência que o cliente trouxe: menos seções e mais fortes, rótulo em versalete espaçado abrindo cada bloco, e o "como funciona" como uma TRILHA vertical que acende conforme a página desce. As cores e a informação são nossas (packages/ui/tokens.js). A folha é escrita à mão, com variáveis no :root — a versão anterior era exportada de um projeto React que não vive neste repositório, e editar markup gerado é conserto que a próxima exportação apaga. ============================================================================= */ @import url("fontes/poppins.css"); :root { /* Espelham packages/ui/tokens.js. Mudou lá, muda aqui. */ --bg: #0a0c15; --card: #191b25; --card-suave: #15171f; --linha: #2a2c38; --acento: #f8395a; --acento-forte: #e11d48; --branco: #ffffff; --dim: #8a8d9c; --dim-2: #5d6070; --fonte: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Mono do SISTEMA, nunca baixada: ela aparece em rótulos e legendas curtas, e mais um arquivo de fonte no caminho crítico não se paga por isso. */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* O halo rosa. Ele vem da vitrine do login do admin, onde os cartões de foto rosa lançam essa luz contra o preto. Hoje ele vale só nos DEGRAUS, onde acompanha a trilha; nos outros retângulos quem faz esse papel é a luz que roda na borda, mais abaixo. `-24px` de espalhamento negativo mantém a luz COLADA na caixa: sem isso ela vira uma nuvem larga e as caixas vizinhas se contaminam. */ --halo: 0 24px 64px -24px rgba(248, 57, 90, 0.42), 0 0 0 1px rgba(248, 57, 90, 0.07); --halo-forte: 0 28px 80px -22px rgba(248, 57, 90, 0.55), 0 0 0 1px rgba(248, 57, 90, 0.12); --largura: 1120px; --gutter: 20px; --raio: 16px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--branco); font-family: var(--fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* `clip` no elemento raiz, e não só `overflow-x: hidden` no body: hidden no body não impede o de rolar, e foi assim que a rolagem horizontal sobreviveu à primeira tentativa. `clip` também não cria contexto de rolagem, então o `position: sticky` do cabeçalho continua valendo. */ html { overflow-x: clip; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* Foco visível em tudo que se alcança pelo teclado: o fundo é escuro e o contorno padrão do navegador some nele. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; } .envoltorio { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); } /* Pular para o conteúdo — primeiro elemento focável da página. */ .pular { position: absolute; left: -9999px; top: 0; background: var(--acento); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600; z-index: 100; } .pular:focus { left: 0; } /* ============================================================ tipografia base */ .rotulo { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acento); margin: 0 0 18px; } .titulo { font-size: clamp(30px, 6.2vw, 52px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 20px; text-wrap: balance; } .apoio { color: var(--dim); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; margin: 0; max-width: 58ch; text-wrap: pretty; } .secao { padding: clamp(72px, 12vw, 132px) 0; } /* A trilha já termina com a fala respirando; somar o padding cheio da seção deixava quase uma tela de preto entre ela e "O resultado". */ #como-funciona { padding-bottom: clamp(40px, 6vw, 64px); } .secao--centro { text-align: center; } .secao--centro .apoio { margin-inline: auto; } /* ================================================================= cabeçalho */ .cabecalho { position: sticky; top: 0; z-index: 50; /* 94%, não 82%: com a foto de acento da trilha passando por baixo, o vidro leve deixava o rosa vazar por cima do logo e do menu. */ background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .cabecalho.rolou { border-bottom-color: var(--linha); } .cabecalho__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; } .marca { display: flex; align-items: center; gap: 10px; } .marca img { height: 32px; width: auto; } .navegacao { display: none; gap: 30px; } .navegacao a { color: var(--dim); font-size: 14px; font-weight: 500; transition: color 0.18s ease; } .navegacao a:hover { color: var(--branco); } .cabecalho__acoes { display: flex; align-items: center; gap: 10px; } /* O botão do menu só existe no mobile — no desktop a navegação está à vista. */ .menu-botao { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; } .menu-botao span { display: block; height: 2px; background: var(--branco); border-radius: 2px; transition: transform 0.22s ease, opacity 0.18s ease; } .menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menu { display: none; border-top: 1px solid var(--linha); padding: 8px 0 20px; } .menu.aberto { display: block; } .menu a { display: block; padding: 14px var(--gutter); color: var(--dim); font-size: 17px; font-weight: 500; } .menu a:hover { color: var(--branco); } /* ===================================================================== botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; } .botao:hover { background: var(--acento-forte); } .botao:active { transform: translateY(1px); } /* `nowrap` porque "Solicitar demo" quebrava em duas linhas num iPhone de 390px e o botão dobrava de altura, empurrando o cabeçalho inteiro. */ .botao--grande { padding: 17px 34px; font-size: 16px; box-shadow: var(--halo-forte); } .botao--pequeno { padding: 10px 18px; font-size: 14px; white-space: nowrap; } @media (max-width: 400px) { .botao--pequeno { padding: 9px 14px; font-size: 13px; } } .botao--fantasma { background: transparent; color: var(--branco); border: 1px solid var(--linha); } .botao--fantasma:hover { background: var(--card); border-color: var(--dim-2); } @media (prefers-reduced-motion: reduce) { .botao, .botao:active { transition: none; transform: none; } } /* ======================================================================= hero */ .hero { padding: clamp(84px, 14vw, 150px) 0 clamp(76px, 11vw, 120px); text-align: center; position: relative; overflow: hidden; } /* ------------------------------------------------ o vídeo de fundo do hero */ .hero__fundo { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero__fundo video { width: 100%; height: 100%; object-fit: cover; /* Dessaturado e escurecido na origem: o moodboard é colorido, e o título branco por cima dele sem tratamento fica ilegível em metade dos quadros. */ filter: grayscale(0.35) brightness(0.42) contrast(1.08); } /* O véu é o que garante a leitura INDEPENDENTE do quadro que estiver passando. Mais denso em cima e embaixo, onde ficam o cabeçalho e a emenda com a seção seguinte; o `radial` puxa o acento da marca para o centro. */ .hero__veu { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(248, 57, 90, 0.20), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(10, 12, 21, 0.55) 30%, rgba(10, 12, 21, 0.72) 70%, var(--bg) 100%); } /* Um brilho de acento atrás do título. `pointer-events: none` porque ele passa por cima do texto na pilha e engoliria o clique do botão. */ .hero::before { content: ""; position: absolute; /* `left`, não `right`: com `right: 50%` mais `translateX(-50%)` o elemento nascia deslocado E vazava pela esquerda, criando rolagem horizontal num viewport de 390px. E o teto é 100vw — decoração não inventa largura de página. */ top: -10%; left: 50%; width: min(760px, 100vw); height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(248, 57, 90, 0.16), transparent 68%); pointer-events: none; z-index: 0; } /* O ALVO É NOMEADO, e não `.hero > *`. Aquele seletor tem a MESMA especificidade de `.hero__fundo` e, vindo depois, transformava o fundo do vídeo em `position: relative` — ele entrava no fluxo e empurrava o título para BAIXO de si. Mesma armadilha da trilha, duas vezes na mesma folha: depender da ordem de declaração é o que falha. Aqui só o invólucro do conteúdo precisa subir na pilha. */ .hero > .envoltorio { position: relative; z-index: 1; } .hero__titulo { font-size: clamp(32px, 8.4vw, 76px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; margin: 0 auto 22px; max-width: 16ch; text-wrap: balance; } .hero__apoio { font-family: var(--mono); font-size: clamp(14px, 2.4vw, 17px); line-height: 1.75; color: var(--dim); max-width: 46ch; margin: 0 auto 34px; } /* ================================================== faixa de tipos de evento */ .faixa { padding: clamp(36px, 6vw, 56px) 0; border-block: 1px solid var(--linha); } .faixa .rotulo { text-align: center; margin-bottom: 26px; } .tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; } .tipos li { padding: 9px 16px; border: 1px solid var(--linha); border-radius: 999px; color: var(--dim); font-size: 14px; font-weight: 500; white-space: nowrap; } /* ====================================================== TRILHA (como funciona) É a peça central. Duas linhas sobrepostas: o TRILHO, cinza, do topo ao fim, e o BRILHO, de acento, cuja altura acompanha o scroll. Quem escreve a altura é o JS, numa variável (--progresso, 0..1) lida aqui. Sem JS a linha nasce inteira acesa: a decoração some, a estrutura fica. */ /* O `padding-bottom` fecha a trilha logo depois da última fala. Sem ele, o vão até a seção seguinte somava o respiro da trilha com os ~132px da `.secao`, e sobrava quase uma tela inteira de preto. */ .trilha { position: relative; max-width: 720px; margin: 0 auto; padding: 10px 0 0; } /* O conteúdo sobe acima das linhas — e as duas LINHAS ficam de fora por nome, não pela ordem das regras. `.trilha > *` e `.trilha__brilho` têm a mesma especificidade, então quem estivesse declarado por último venceria: foi assim que a barra de progresso passou a existir no DOM com 0px de altura (`height: 100%` dentro de pai de altura automática resolve em zero) enquanto os números acendiam normalmente. O `:not()` sobrevive a qualquer reordenação da folha. */ .trilha > :not(.trilha__trilho):not(.trilha__brilho) { position: relative; z-index: 1; } .trilha__trilho, .trilha__brilho { position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%); border-radius: 2px; z-index: 0; } .trilha__trilho { height: 100%; background: var(--linha); } .trilha__brilho { height: 100%; /* sem JS: acesa inteira */ background: linear-gradient(180deg, var(--acento-forte), var(--acento)); box-shadow: 0 0 14px rgba(248, 57, 90, 0.55); } html.js .trilha__brilho { height: calc(var(--progresso, 0) * 100%); } /* As duas falas que abrem e fecham a trilha — o antes e o depois. */ .fala { text-align: center; position: relative; font-size: clamp(19px, 4vw, 26px); line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto; padding: 26px 0; text-wrap: balance; } .fala span { color: var(--acento); } .trilha__ponta { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); margin: 0 auto; box-shadow: 0 0 12px rgba(248, 57, 90, 0.8); } /* ------------------------------------------------------------------- degraus */ .degrau { padding: 34px 0 10px; text-align: center; } .degrau__numero { width: 74px; height: 74px; margin: 0 auto 26px; border-radius: 50%; border: 2px solid var(--linha); background: var(--bg); display: grid; place-items: center; font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--dim-2); transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .degrau.aceso .degrau__numero { border-color: var(--acento); color: var(--acento); box-shadow: 0 0 22px rgba(248, 57, 90, 0.45), inset 0 0 14px rgba(248, 57, 90, 0.12); } .degrau__figura { margin: 0 0 24px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--card-suave); position: relative; box-shadow: var(--halo); } /* O halo ACOMPANHA a trilha: forte no degrau da vez, discreto nos outros. É a mesma informação que o número e a linha já dão, dita por uma terceira via. */ .degrau.aceso .degrau__figura { box-shadow: var(--halo-forte); } .degrau__figura { transition: box-shadow 0.45s ease; } .degrau__figura img { width: 100%; height: clamp(200px, 46vw, 320px); object-fit: cover; /* Ancorada no TOPO: com o padrão (`center`) a faixa comia a parte de cima das quatro fotos — o céu do palco, as mãos com a pulseira —, e sobrava o meio de um enquadramento que foi feito para começar em cima. */ object-position: top; /* A referência tinge as fotos na cor da marca. Aqui a tinta é o nosso acento, e ela some quando o degrau acende — a foto "ganha vida" na vez dela, que é o que a trilha está contando. */ filter: grayscale(0.55) contrast(1.05); transition: filter 0.45s ease; } .degrau.aceso .degrau__figura img { filter: grayscale(0) contrast(1); } .degrau__figura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 21, 0.85)); pointer-events: none; } /* O fundo aqui não é decoração: ele OCULTA a linha da trilha, que passa por trás. Sem isso o traço de acento cortava o título e o parágrafo ao meio — na referência a linha só aparece nos vãos entre os blocos. Mesma cor da página, então não se vê nada além do que ele esconde. */ .degrau__titulo, .degrau__texto, .fala { background: var(--bg); padding-inline: 14px; } .degrau__titulo { font-size: clamp(22px, 4.6vw, 30px); line-height: 1.16; letter-spacing: -0.025em; font-weight: 700; color: var(--acento); /* O respiro é PADDING, não margem: com margem, os 12px entre o título e o parágrafo eram um vão sem fundo, e a linha da trilha reaparecia ali como um tracinho solto. Em padding os dois fundos se encostam. */ margin: 0 auto; padding-bottom: 12px; max-width: 16ch; text-wrap: balance; } .degrau__texto { color: var(--dim); font-size: clamp(14px, 2.2vw, 16px); line-height: 1.6; margin: 0 auto; max-width: 34ch; padding-bottom: 30px; text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .degrau__numero, .degrau__figura, .degrau__figura img { transition: none; } } /* ==================================================== a luz que roda na borda O efeito que os cartões do painel do admin têm: uma luz que percorre a BORDA do retângulo, em volta. Vale nos retângulos de conteúdo (resultados, colunas, garantias, FAQ e a chamada final); o halo rosa PARADO ficou onde ele diz alguma coisa, que é no degrau da vez da trilha. O anel é um `::before` do tamanho da caixa pintado com um `conic-gradient` e recortado por máscara — a caixa inteira menos o `content-box` deixa exatamente a moldura de 1px. O que gira é o ÂNGULO do gradiente, nunca o elemento: rodar o `::before` rodaria junto o retângulo arredondado, e o anel sairia de cima da borda a cada quarto de volta. `@property` não é enfeite aqui — sem ele o navegador não sabe interpolar um ângulo e a animação não sai do lugar. E onde ele não existe, `var(--luz-giro)` não resolve, a `background` inteira cai por inválida e o retângulo fica só com a borda cinza: degradação limpa, sem arco parado num canto. */ @property --luz-giro { syntax: ""; initial-value: 0deg; inherits: false; } .resultado, .coluna, .garantia, .faq details, .chamada { position: relative; } .resultado::before, .coluna::before, .garantia::before, .faq details::before, .chamada::before { content: ""; position: absolute; /* `-1px` põe o anel EM CIMA da borda que já existe, em vez de somar um traço por dentro dela. Por isso nenhum destes retângulos pode ter `overflow: hidden`: o recorte comeria justamente o pixel em que o anel vive — foi o que tirou o `overflow` do `
` do FAQ. */ inset: -1px; border-radius: inherit; /* 1,5px porque o anel é LUZ: no fio de 1px ele vira um risco, e o que o `drop-shadow` faz é o brilho vazar da borda para o preto em volta — sem ele o efeito se lê como uma borda que troca de cor, não como uma luz que passa. O filtro vai no `::before` e não na caixa, senão o texto do cartão brilharia junto. */ padding: 1.5px; filter: drop-shadow(0 0 6px rgba(248, 57, 90, 0.55)); background: conic-gradient( from var(--luz-giro), transparent 0deg, transparent 186deg, rgba(248, 57, 90, 0.35) 244deg, var(--acento) 286deg, rgba(248, 57, 90, 0.35) 328deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: luz-giro 7s linear infinite; pointer-events: none; } /* Cada caixa parte de um ponto diferente da volta: com todas em fase a página inteira pulsa junta, que é discoteca e não acabamento. */ .resultado:nth-child(2n)::before, .garantia:nth-child(2n)::before, .faq details:nth-child(2n)::before { animation-delay: -2.4s; } .resultado:nth-child(3n)::before, .garantia:nth-child(3n)::before, .faq details:nth-child(3n)::before { animation-delay: -4.7s; } .coluna:nth-child(2n)::before { animation-delay: -3.5s; } @keyframes luz-giro { to { --luz-giro: 360deg; } } /* Quem pede menos movimento fica com o halo parado dos degraus: o retângulo não perde o acento, perde a volta. */ @media (prefers-reduced-motion: reduce) { .resultado::before, .coluna::before, .garantia::before, .faq details::before, .chamada::before { display: none; } .resultado, .coluna, .garantia, .faq details { box-shadow: var(--halo); } .chamada { box-shadow: var(--halo-forte); } } /* ================================================================= resultados */ /* O número grande da seção. A referência ancora o bloco inteiro num dado, e é o que faz a seção parar de ser uma lista de adjetivos. As palavras "potencial" e "até" ficam SEPARADAS do número de propósito: elas são o que torna a frase uma projeção, e some-las deixaria um número cravado que a gente teria de provar. */ .destaque { margin: 44px auto 0; max-width: 34ch; } .destaque__numero { display: block; font-size: clamp(64px, 17vw, 132px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; color: var(--acento); } .destaque__texto { display: block; margin-top: 14px; color: var(--dim); font-size: clamp(15px, 2.4vw, 18px); line-height: 1.55; text-wrap: balance; } .resultados { display: grid; gap: 18px; margin-top: 48px; text-align: left; } .resultado { padding: 26px 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card-suave); } .resultado h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .resultado p { color: var(--dim); font-size: 15px; line-height: 1.55; margin: 0; } .resultado__marca { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--acento); display: block; margin-bottom: 14px; } /* =========================================================== duas colunas */ .colunas { display: grid; gap: 22px; margin-top: 48px; text-align: left; } .coluna { padding: 30px 26px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card-suave); } .coluna h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; } .coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .coluna li { display: flex; align-items: flex-start; gap: 10px; color: var(--dim); font-size: 15px; line-height: 1.45; } /* O marcador é um traço de acento, não um bullet: a lista é longa e o ponto redondo some no meio dela. */ .coluna li::before { content: ""; flex: none; width: 10px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--acento); } /* ================================================================== garantias */ .garantias { display: grid; gap: 14px; margin-top: 44px; text-align: left; } .garantia { padding: 22px 22px; border: 1px solid var(--linha); border-radius: 12px; background: var(--card-suave); } .garantia dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim-2); margin-bottom: 8px; } .garantia dd { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; } /* ======================================================================= FAQ `
`/`` de verdade: abre sem JS, é focável pelo teclado e o navegador já anuncia o estado. A versão anterior desta landing tinha as seis perguntas, os sinais de "+" e nenhuma resposta no documento — acordeão que não abria nada. */ .faq { display: grid; gap: 12px; margin-top: 44px; text-align: left; } .faq details { border: 1px solid var(--linha); border-radius: 12px; background: var(--card-suave); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border: 1px solid var(--linha); border-radius: 8px; /* O "+" é desenhado com dois gradientes: sem glifo, ele gira sem tremer e não depende da fonte ter o caractere no peso certo. */ background: linear-gradient(var(--acento), var(--acento)) center / 13px 2px no-repeat, linear-gradient(var(--acento), var(--acento)) center / 2px 13px no-repeat; transition: transform 0.22s ease, border-color 0.22s ease; } .faq details[open] summary::after { transform: rotate(45deg); border-color: var(--acento); } .faq .resposta { padding: 0 22px 24px; color: var(--dim); font-size: 15px; line-height: 1.65; margin: 0; max-width: 62ch; } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } /* ================================================================= chamada */ .chamada { border: 1px solid var(--acento); border-radius: 24px; padding: clamp(40px, 8vw, 72px) clamp(24px, 5vw, 56px); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(248, 57, 90, 0.14), transparent 62%), var(--card-suave); } .chamada__marca { height: 40px; width: auto; margin: 0 auto 26px; } .chamada__apoio { font-family: var(--mono); font-size: clamp(14px, 2.2vw, 16px); line-height: 1.7; color: var(--dim); max-width: 42ch; margin: 0 auto 32px; } /* ===================================================================== rodapé */ .rodape { border-top: 1px solid var(--linha); padding: clamp(56px, 9vw, 88px) 0 40px; } /* Era a palavra "Easypeasy" em texto; virou o logo. `height` fixa com `width: auto` mantém a proporção venha qual vier o arquivo. */ .rodape__marca { height: clamp(38px, 9vw, 58px); width: auto; margin: 0 auto 14px; } .rodape__assinatura { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--dim-2); text-align: center; margin: 0 0 56px; } .rodape__blocos { display: grid; gap: 40px; text-align: center; } .rodape h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; } .rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rodape__lista a, .rodape__lista span { color: var(--dim); font-size: 15px; } .rodape__lista a:hover { color: var(--branco); } .rodape__fim { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linha); text-align: center; color: var(--dim-2); font-size: 13px; line-height: 1.7; } /* ================================================================== desktop */ @media (min-width: 720px) { .resultados { grid-template-columns: repeat(2, 1fr); gap: 20px; } .colunas { grid-template-columns: repeat(2, 1fr); } .garantias { grid-template-columns: repeat(2, 1fr); } .rodape__blocos { grid-template-columns: repeat(3, 1fr); text-align: left; } } @media (min-width: 900px) { .navegacao { display: flex; } .menu-botao { display: none; } .menu { display: none !important; } .garantias { grid-template-columns: repeat(4, 1fr); } .degrau { padding-top: 48px; } } /* ============================================================== inscrição A folha que abre nos botões "Seu rolê mais easy". É um `` nativo — ver o comentário no HTML — então aqui só resta a aparência. */ .inscricao { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(26px, 5vw, 38px); border: 1px solid var(--acento); border-radius: 22px; background: radial-gradient(ellipse at 50% 0%, rgba(248, 57, 90, 0.16), transparent 60%), var(--card-suave); color: var(--branco); box-shadow: var(--halo-forte); overflow: auto; } /* O `::backdrop` NÃO herda as variáveis do :root — ele não é filho do elemento na árvore do documento —, então a cor vai literal aqui. */ .inscricao::backdrop { background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .inscricao__topo { display: flex; justify-content: flex-end; margin: -8px -8px 6px 0; } .inscricao__fechar { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); font-size: 26px; line-height: 1; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; } .inscricao__fechar:hover { color: var(--branco); background: var(--card); } .inscricao__titulo { font-size: clamp(26px, 6vw, 34px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 12px; } .inscricao__apoio { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 0 0 26px; } .inscricao__form { display: grid; gap: 18px; } .campo { display: grid; gap: 7px; text-align: left; } .campo__rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim-2); } .campo__entrada { width: 100%; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--bg); color: var(--branco); font-family: var(--fonte); /* 16px, nunca menos: abaixo disso o iOS DÁ ZOOM sozinho ao focar o campo e reenquadra a página — é a mesma regra que vale nos três apps. */ font-size: 16px; outline: none; transition: border-color 0.18s ease; } .campo__entrada::placeholder { color: var(--dim-2); } .campo__entrada:focus { border-color: var(--acento); } .campo__entrada[aria-invalid="true"] { border-color: var(--acento-forte); } .campo__erro { color: var(--acento); font-size: 13px; line-height: 1.4; min-height: 0; } /* `:empty` para a linha não reservar altura quando não há erro: com espaço fixo o formulário "pula" toda vez que um aviso aparece ou some. */ .campo__erro:empty { display: none; } .inscricao__enviar { width: 100%; margin-top: 4px; } .inscricao__nota { color: var(--dim-2); font-size: 12.5px; line-height: 1.5; margin: 0; text-align: center; } @media (prefers-reduced-motion: reduce) { .inscricao__fechar, .campo__entrada { transition: none; } }