/* ===================================================================== estilo.css — A tela "Haga clic en una opción de pago" --------------------------------------------------------------------- Só esta página. É o mesmo desenho das páginas de país (chile/, mexico/, colombia/, peru/), reescrito à mão: aquelas vieram do Webflow e carregam um CSS de 200 KB com o estilo do site inteiro. Aqui são 180 linhas, sem nada que a tela não use. O FUNDO É ESCURO DE PROPÓSITO, e é o do , não o da tela. Esta página quase sempre redireciona. Entre o HTML chegar e o redirect acontecer há uma fração de segundo em que algo aparece — e o que aparece tem de ser um fundo escuro, não um branco piscando. A TELA NASCE COM hidden NO HTML. Quem a revela é o ui-escolha.js, e só na janela do pitch, e só para quem é dos quatro países. Ninguém que vá ser redirecionado chega a vê-la. CUIDADO AO EDITAR: um caractere solto ANTES da primeira regra faz o navegador ler "aquele caractere + o seletor" como um seletor único, inválido, e DESCARTAR a regra inteira em silêncio. ===================================================================== */ /* ---- Base ----------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background-color: #0d0202; /* O degradê é EXATAMENTE o da tela de referência (pasta exemplo/): 121° partindo de #680e00 para preto. Foi lido do valor computado no navegador, não estimado à vista. */ background-image: linear-gradient(121deg, #680e00, #000); background-attachment: fixed; color: #fff; font-family: Montserrat, "Segoe UI", system-ui, sans-serif; } /* O de reserva para quem está sem JavaScript. Fica discreto no canto: com JavaScript ninguém o vê, porque a página já saiu. */ .reserva { display: block; padding: 16px; color: #e4ae5f; font-size: 14px; text-align: center; } /* ---- A espera ------------------------------------------------------- O que o visitante vê enquanto a página pergunta o país por IP. Sem isto o intervalo é uma tela preta vazia — e numa VPN lenta ela dura o suficiente para parecer que o site caiu. */ .espera { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; text-align: center; } /* O ui-escolha.js põe [hidden] aqui ao revelar a tela dos botões. */ .espera[hidden] { display: none !important; } .espera__logo { width: 237px; max-width: 60%; height: auto; } .espera__texto { margin: 40px 0 0; color: #ffffffb0; font-size: 16px; /* Pisca de leve: parado demais também parece travado. */ animation: espera-pulso 1.4s ease-in-out infinite; } @keyframes espera-pulso { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* A SAÍDA MANUAL SÓ APARECE DEPOIS DE 6 SEGUNDOS. Mostrá-la de cara convidaria a clicar antes de a página decidir — e no caso normal ela decide em menos de meio segundo. Só se algo travar é que ela entra, e aí é a diferença entre uma saída e uma tela morta. É animação, não JavaScript: funciona mesmo que um script tenha falhado, que é justamente quando ela é necessária. */ .espera__saida { margin: 28px 0 0; padding: 12px 28px; border-radius: 8px; background-color: #ff5d00; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; opacity: 0; visibility: hidden; animation: espera-saida 0s linear 6s forwards; } @keyframes espera-saida { to { opacity: 1; visibility: visible; } } /* ---- A tela --------------------------------------------------------- */ .tela { display: flex; flex-direction: column; align-items: center; min-height: 100vh; /* 33px no topo: é a margem da logo na tela de referência. */ padding: 33px 20px 24px; text-align: center; } /* [hidden] tem de vencer o display:flex acima, senão a tela apareceria o tempo todo — inclusive para quem vai ser redirecionado. */ .tela[hidden] { display: none !important; } .tela__logo { /* 237 × 116 é o tamanho natural da Arte.svg, e o da tela de referência. Antes estava 240, que a esticava 1,3%. */ width: 237px; max-width: 60%; height: auto; } /* Os três espaçamentos abaixo (102 · 40 · 170) foram medidos na tela de referência, não estimados. São eles que davam o ar mais respirado dela — o resto (botões, cores, cantos) já era idêntico. */ .tela__titulo { margin: 102px 0 0; font-size: 40px; font-weight: 700; line-height: 1.2; @media (max-width: 767px) { margin-top: 48px; font-size: 26px; } } /* ---- As duas colunas ------------------------------------------------ */ .tela__opcoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 150px; width: 100%; max-width: 960px; /* 170px é a distância entre o título e os botões na tela de referência. */ margin: 170px auto 0; @media (max-width: 767px) { gap: 32px; margin-top: 56px; } } .opcao { display: flex; flex-direction: column; align-items: center; flex: 0 1 320px; } .opcao[hidden] { display: none !important; } .opcao__btn { width: 320px; max-width: 100%; height: 60px; border: 0; border-radius: 8px; color: #fff; font-family: inherit; font-size: 19px; font-weight: 700; cursor: pointer; transition: filter .15s ease, transform .15s ease; &:hover { filter: brightness(1.08); } &:active { transform: translateY(1px); } &:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 767px) { font-size: 17px; } } /* As duas cores vêm do config (campo "cor" de cada opção) e entram como classe, não como estilo em linha — assim o visual se muda aqui. */ .opcao__btn--laranja { background-color: #ff5d00; } .opcao__btn--azul { background-color: #3898ec; } .opcao__nota { max-width: 270px; margin: 21px 0 0; font-size: 14px; font-weight: 700; line-height: 1.43; } /* ---- Rodapé ---------------------------------------------------------- */ .rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 80px; width: 100%; max-width: 900px; margin-top: auto; padding-top: 80px; @media (max-width: 767px) { gap: 28px; padding-top: 56px; } } .rodape__legal { font-size: 18px; line-height: 1.9; } .rodape__link { color: #fff; text-decoration: none; &:hover { text-decoration: underline; } } .rodape__marca { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; } .rodape__logo { width: 130px; height: auto; }