/* Comunidade do Desconto --------------------------------------------------------------- Escuro por padrão: o produto é um feed de preço, e fundo escuro faz número e gráfico saltarem. Verde só no que é ação ou economia; violeta só no que é dado. Se tudo brilha, nada brilha. */ :root { /* Diz ao navegador que a página é escura, e não só que ela pinta escuro. Sem isto o Safari desenha em claro tudo que é dele e não nosso: barra de rolagem, controles de formulário e a faixa de rubber-band que aparece ao puxar além do fim da página. */ color-scheme: dark; --fundo: #08090c; --fundo-2: #0e1015; --superficie: #14171e; --superficie-alta: #1b1f28; --borda: #242936; --borda-clara: #333a4a; --texto: #f2f4f8; --texto-2: #a8b0c0; --texto-3: #6b7385; --verde: #22c55e; --verde-claro: #4ade80; --verde-fundo: rgba(34, 197, 94, 0.12); --violeta: #8b5cf6; --violeta-claro: #a78bfa; --ambar: #fbbf24; --vermelho: #f43f5e; --raio: 16px; --raio-g: 24px; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .7); --largura: 1120px; --transicao: 180ms cubic-bezier(.2, .7, .3, 1); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } *, *::before, *::after { box-sizing: border-box; } /* Guarda contra rolagem horizontal acidental: `clip` corta sem virar contêiner de rolagem, então não quebra o `position: sticky` do cabeçalho como `overflow: hidden` faria. */ html { overflow-x: clip; } /* Sem `overflow-x: hidden` aqui, de propósito. Ele faz o `overflow-y` virar `auto`, o body vira contêiner de rolagem, e todo `position: sticky` da página passa a se resolver contra o body em vez da janela — ou seja, para de grudar. Quem contém a rolagem horizontal é o `overflow-x: clip` no , que não cria contêiner. */ body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, .fonte-titulo { font-family: Sora, Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0; } a { color: inherit; } .container { width: min(100% - 40px, var(--largura)); margin-inline: auto; } /* ---------- topo ---------- */ /* O cabeçalho ocupa a largura toda para a borda ir de ponta a ponta; quem limita a largura é o conteúdo dentro dele. Fazer o contrário — barra estreita com pseudo-elemento em `-100vw` — cria rolagem horizontal na página inteira. */ .topo { position: sticky; top: 0; z-index: 50; padding: 16px 0; background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); } .topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 40px, var(--largura)); margin-inline: auto; } .marca { display: flex; align-items: center; gap: 10px; font-family: Sora, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -.02em; text-decoration: none; } .marca strong { color: var(--verde-claro); font-weight: 800; margin-left: 4px; } .marca-selo { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(145deg, var(--verde) 0%, #0ea5e9 55%, var(--violeta) 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 18px -6px var(--verde); } .topo-nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; } .topo-nav a { color: var(--texto-2); text-decoration: none; transition: color var(--transicao); } .topo-nav a:hover { color: var(--texto); } @media (max-width: 720px) { .topo-nav a:not(.botao) { display: none; } } /* ---------- botões ---------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer; background: var(--verde); color: #04140a; font: 600 15.5px/1 Inter, sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 26px -10px var(--verde); transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao); } .botao:hover { background: var(--verde-claro); transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--verde); } .botao:active { transform: translateY(0); } .botao-mini { padding: 10px 18px; font-size: 14px; } /* Chamada de frase inteira: com o `nowrap` do .botao ela passaria de 400px e vazaria a tela do celular. Aqui ela quebra em duas linhas e centraliza. */ .botao-frase { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; } .botao-fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borda-clara); box-shadow: none; } .botao-fantasma:hover { background: var(--superficie-alta); border-color: var(--texto-3); } .botao[disabled], .botao-desativado { background: var(--superficie-alta); color: var(--texto-3); box-shadow: none; cursor: not-allowed; pointer-events: none; } /* ---------- avisos ---------- */ .avisos { width: min(100% - 40px, var(--largura)); margin: 16px auto 0; } .aviso { margin: 0 0 8px; padding: 13px 18px; border-radius: 12px; font-size: 14.5px; border: 1px solid var(--borda); background: var(--superficie); } .aviso-success { border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: var(--verde-fundo); } .aviso-error { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); } /* ---------- hero ---------- */ .hero { position: relative; padding: 72px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; z-index: -1; top: -340px; left: 50%; translate: -50% 0; width: 1100px; height: 760px; background: radial-gradient(closest-side, rgba(34, 197, 94, .22), transparent 72%), radial-gradient(closest-side, rgba(139, 92, 246, .18), transparent 70%); background-position: 22% 40%, 78% 30%; background-size: 62% 78%, 58% 72%; background-repeat: no-repeat; filter: blur(28px); } .hero-grid { display: grid; gap: 56px; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .selo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 9px; margin-bottom: 24px; border: 1px solid var(--borda-clara); border-radius: 999px; background: var(--superficie); font-size: 13.5px; color: var(--texto-2); } .selo b { color: var(--texto); font-weight: 600; } .pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; box-shadow: 0 0 0 0 var(--verde); animation: pulso 2.4s infinite; } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.05rem); } .hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--verde-claro), #38bdf8 55%, var(--violeta-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-texto { margin: 24px 0 34px; max-width: 30em; font-size: clamp(1.02rem, 2.1vw, 1.16rem); color: var(--texto-2); } .hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-nota { margin: 20px 0 0; font-size: 13.5px; color: var(--texto-3); } /* ---------- cartão do gráfico ---------- */ .painel { position: relative; padding: 24px; border: 1px solid var(--borda); border-radius: var(--raio-g); background: linear-gradient(165deg, var(--superficie), var(--fundo-2)); box-shadow: var(--sombra); } .painel-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 4px; } .painel-rotulo { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); } .painel-produto { margin: 2px 0 18px; font-size: 15px; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .grafico { display: block; width: 100%; height: auto; } .grafico-linha { fill: none; stroke: url(#gradLinha); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .grafico-area { fill: url(#gradArea); } .grafico-mediana { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 5 5; } .grafico-marca { fill: var(--verde); stroke: var(--fundo); stroke-width: 3; } .grafico-texto { font: 500 11px Inter, sans-serif; fill: var(--texto-3); } .grafico-legenda { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borda); } .legenda-item { display: flex; flex-direction: column; gap: 3px; } .legenda-rotulo { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); } .legenda-valor { font-family: Sora, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; } .legenda-valor.verde { color: var(--verde-claro); } .legenda-valor.risco { color: var(--texto-3); text-decoration: line-through; font-weight: 600; } /* ---------- números ---------- */ .numeros { padding: 8px 0 72px; } .numeros-grid { display: grid; gap: 1px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--borda); } .numero { padding: 30px 26px; background: var(--fundo-2); } .numero-valor { font-family: Sora, sans-serif; font-weight: 800; letter-spacing: -.035em; font-size: clamp(1.9rem, 4.2vw, 2.5rem); line-height: 1; } .numero-rotulo { margin-top: 10px; font-size: 13.5px; color: var(--texto-2); } /* ---------- seções ---------- */ .secao { padding: 76px 0; } .secao-cabeca { max-width: 44em; margin-bottom: 44px; } .secao-etiqueta { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--verde-claro); } .secao h2 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); } .secao-texto { margin: 18px 0 0; color: var(--texto-2); font-size: 1.04rem; } /* ---------- como funciona ---------- */ .passos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .passo { position: relative; padding: 28px 26px 30px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); transition: border-color var(--transicao), transform var(--transicao); } .passo:hover { border-color: var(--borda-clara); transform: translateY(-3px); } .passo-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 10px; background: var(--verde-fundo); color: var(--verde-claro); font-family: Sora, sans-serif; font-weight: 700; font-size: 15px; } .passo h3 { font-size: 1.12rem; margin-bottom: 10px; } .passo p { margin: 0; color: var(--texto-2); font-size: 14.8px; } /* ---------- ofertas ---------- */ .ofertas-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .oferta { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .oferta:hover { border-color: var(--borda-clara); transform: translateY(-4px); box-shadow: var(--sombra); } .oferta-foto { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; overflow: hidden; } .oferta-foto img { width: 100%; height: 100%; object-fit: contain; padding: 14px; } .oferta-vazia { color: #9aa2b1; font-size: 13px; } .etiqueta-desconto { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 8px; background: var(--verde); color: #04140a; font: 700 13px/1 Sora, sans-serif; letter-spacing: -.01em; } .etiqueta-minimo { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 8px; background: var(--violeta); color: #fff; font: 600 11.5px/1 Inter, sans-serif; } .oferta-corpo { display: flex; flex-direction: column; flex: 1; padding: 18px; } .oferta-titulo { margin: 0 0 14px; font-size: 14.6px; line-height: 1.45; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oferta-precos { margin-top: auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .oferta-preco { font-family: Sora, sans-serif; font-weight: 700; font-size: 1.42rem; letter-spacing: -.03em; } .oferta-media { font-size: 13px; color: var(--texto-3); } .oferta-media s { color: var(--texto-3); } .oferta-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-3); } .oferta-ver { color: var(--verde-claro); font-weight: 600; } /* ---------- grupos ---------- */ .grupos-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grupo { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); } .grupo-lotado { opacity: .62; } .grupo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .grupo h3 { font-size: 1.15rem; } .grupo-tag { padding: 5px 11px; border-radius: 999px; flex: none; border: 1px solid var(--borda-clara); background: var(--superficie); font-size: 11.5px; color: var(--texto-2); } .grupo-barra { position: relative; height: 7px; margin: 20px 0 10px; border-radius: 99px; background: var(--superficie-alta); overflow: hidden; } .grupo-preenchido { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--verde), var(--verde-claro)); } .grupo-preenchido.cheio { background: linear-gradient(90deg, #9f1239, var(--vermelho)); } .grupo-vagas { font-size: 13px; color: var(--texto-2); margin: 0 0 20px; } .grupo-vagas b { color: var(--texto); } .grupo .botao { width: 100%; } /* ---------- captura ---------- */ .captura { display: grid; gap: 30px; align-items: center; padding: 44px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid var(--borda); border-radius: var(--raio-g); background: radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, .1), transparent 58%), var(--fundo-2); } @media (max-width: 820px) { .captura { grid-template-columns: 1fr; padding: 30px; } } .captura h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); } .captura p { color: var(--texto-2); margin: 14px 0 0; } .captura-form { display: flex; gap: 10px; flex-wrap: wrap; } .captura-form input { flex: 1 1 210px; padding: 15px 18px; border: 1px solid var(--borda-clara); border-radius: 999px; background: var(--fundo); color: var(--texto); font: 400 15px Inter, sans-serif; } .captura-form input::placeholder { color: var(--texto-3); } .captura-form input:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-color: transparent; } /* Campo-isca do formulário: existe para robô achar e pessoa não. Tirado da tela por posição, e não com `display: none` — parte dos robôs de spam ignora campo com display none, e a armadilha depende de ele preencher. `!important` no flex porque a regra de cima manda em todo input do formulário, e a isca não pode ocupar coluna ao lado do e-mail. */ .isca-caixa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .captura-form .isca-caixa input { flex: 0 0 1px !important; padding: 0; } /* ---------- perguntas ---------- */ .perguntas { display: grid; gap: 12px; max-width: 62em; } .pergunta { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); overflow: hidden; } .pergunta summary { padding: 20px 24px; cursor: pointer; list-style: none; font-family: Sora, sans-serif; font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pergunta summary::-webkit-details-marker { display: none; } .pergunta summary::after { content: "+"; color: var(--verde-claro); font-size: 22px; line-height: 1; flex: none; transition: rotate var(--transicao); } .pergunta[open] summary::after { rotate: 45deg; } .pergunta p { margin: 0; padding: 0 24px 22px; color: var(--texto-2); font-size: 15px; } /* ---------- página da oferta ---------- */ .oferta-detalhe { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); padding: 44px 0 20px; } @media (max-width: 940px) { .oferta-detalhe { grid-template-columns: 1fr; } } .detalhe-foto { display: grid; place-items: center; padding: 26px; border: 1px solid var(--borda); border-radius: var(--raio-g); background: #fff; } .detalhe-foto img { width: 100%; height: auto; max-height: 420px; object-fit: contain; } .detalhe h1 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); margin-bottom: 20px; } .detalhe-preco { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .detalhe-valor { font-family: Sora, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 5vw, 2.9rem); letter-spacing: -.035em; color: var(--verde-claro); } .detalhe-lista { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; } .detalhe-lista li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-2); font-size: 15px; } .detalhe-lista svg { flex: none; margin-top: 3px; color: var(--verde); } .voltar { display: inline-block; margin: 26px 0 0; color: var(--texto-3); font-size: 14px; text-decoration: none; } .voltar:hover { color: var(--texto); } /* ---------- rodapé ---------- */ .rodape { margin-top: 40px; padding: 56px 0 40px; border-top: 1px solid var(--borda); background: var(--fundo-2); } .rodape-grid { width: min(100% - 40px, var(--largura)); margin-inline: auto; display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .rodape-marca, .rodape-titulo { font-family: Sora, sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 12px; } .rodape-marca strong { color: var(--verde-claro); margin-left: 4px; } .rodape-texto { margin: 0; color: var(--texto-2); font-size: 14px; max-width: 40em; } .rodape-fim { width: min(100% - 40px, var(--largura)); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 12.5px; } /* Não há modo claro, e é decisão, não esquecimento. Havia aqui uma consulta de mídia de tema claro sob o seletor `:root:not([data-theme="dark"])`. O `base.html` fixa `data-theme="dark"` no , então o seletor nunca casava: o bloco era código morto que dava a impressão de haver tema claro suportado. A página é escura por construção — o filme do topo é escuro com texto branco por cima, e trocar só os tokens deixaria o hero inconsistente com o resto. Para ligar tema claro de verdade: tire o `data-theme="dark"` do base.html, redefina os tokens aqui e confira o Scroll Cinema, que é a parte que não segue token. */ /* =============================================================== SCROLL Progressivo por princípio: sem `animation-timeline` e sem JS o conteúdo aparece normal. Nada nasce em opacity:0 sem que alguém tenha confirmado que sabe trazer de volta. =============================================================== */ /* ---------- barra de progresso ---------- */ .progresso { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violeta), var(--verde-claro)); } @supports (animation-timeline: scroll()) { .progresso { animation: encher linear both; animation-timeline: scroll(root block); } } @keyframes encher { to { transform: scaleX(1); } } /* ---------- revelar ---------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { [data-revelar] { animation: surgir linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; } } } @keyframes surgir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Caminho do JavaScript: a classe no é o gatilho. */ .js-revelar [data-revelar] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .js-revelar [data-revelar].visivel { opacity: 1; transform: none; } /* ---------- esteira de produtos ---------- */ .esteira { position: relative; padding: 26px 0 6px; /* A trilha é mais larga que a tela de propósito; sem isto a página inteira ganha barra de rolagem horizontal. */ overflow: hidden; /* Some nas bordas em vez de cortar seco. */ mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .esteira-trilha { display: flex; gap: 16px; width: max-content; animation: correr 46s linear infinite; } .esteira:hover .esteira-trilha, .esteira:focus-within .esteira-trilha { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .esteira { overflow-x: auto; mask-image: none; } .esteira-trilha { animation: none; } } /* A trilha tem duas cópias da lista; -50% cai exatamente na emenda. */ @keyframes correr { to { transform: translateX(-50%); } } .pilula { display: flex; align-items: center; gap: 14px; flex: none; width: 292px; padding: 12px 18px 12px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo-2); text-decoration: none; transition: border-color var(--transicao), transform var(--transicao); } .pilula:hover { border-color: var(--verde); transform: translateY(-3px); } .pilula-foto { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #fff; object-fit: contain; padding: 5px; } .pilula-info { min-width: 0; } .pilula-nome { /* `display: block` não é enfeite: `overflow` e `text-overflow` não se aplicam a elemento inline não-substituído, e estes `span` vêm inline do gabarito. Sem isto as três declarações abaixo são inertes, o nome inteiro é pintado fora da pílula e invade a vizinha — 470px de texto numa pílula de 292px. Aparece só quando o mouse pausa a esteira, que é quando dá tempo de ler. */ display: block; margin: 0 0 3px; font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pilula-precos { display: flex; align-items: baseline; gap: 8px; } .pilula-preco { font-family: Sora, sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; } .pilula-corte { font-size: 12px; color: var(--texto-3); } .pilula-tag { margin-left: auto; flex: none; padding: 5px 9px; border-radius: 8px; background: var(--verde-fundo); color: var(--verde-claro); font: 700 12px/1 Sora, sans-serif; } /* ---------- palco fixado ---------- */ .palco { display: grid; gap: 56px; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } @media (max-width: 940px) { .palco { grid-template-columns: 1fr; gap: 0; } } /* A coluna precisa ser mais alta que o painel para ele conseguir grudar enquanto os três passos passam — a janela de fixação é a altura da coluna menos a do painel. Mas a altura vem do PASSO, não de padding: crescer com espaço vazio foi o que criou o buraco escuro antes. */ .palco-passos { display: grid; gap: clamp(52px, 9vh, 92px); padding: 4vh 0 6vh; } @media (max-width: 940px) { .palco-passos { gap: 40px; padding: 0 0 32px; } } .palco-passo { transition: opacity var(--transicao), filter var(--transicao); } @media (min-width: 941px) { .palco-passo { opacity: .3; filter: blur(1px); } .palco-passo.ativo { opacity: 1; filter: none; } } .palco-passo h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 16px; } .palco-passo p { margin: 0; color: var(--texto-2); font-size: 1.08rem; line-height: 1.75; max-width: 34em; } .palco-passo strong { color: var(--texto); } .palco-marca { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--verde-claro); } .palco-marca::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; } /* Sem altura mínima o painel encolhe para ~235px e fica boiando ao lado de uma coluna três vezes mais alta. */ /* Centrado na janela em vez de colado a 18vh do topo: assim a metade de cima e a de baixo da janela de fixação são aproveitadas, e o painel fica no campo de visão enquanto os três passos desfilam. */ .palco-visual { position: sticky; top: calc(50svh - var(--altura-painel) / 2); align-self: start; height: fit-content; --altura-painel: 400px; } .palco-visual .painel { display: grid; align-content: center; height: var(--altura-painel); } @media (max-width: 940px) { .palco-visual { display: none; } } .cena { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1); } .cena.ativa { position: relative; opacity: 1; pointer-events: auto; transform: none; } /* ---------- calendário da coleta (cena 1) ---------- */ .calendario { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 6px; } .dia { aspect-ratio: 1; border-radius: 5px; background: var(--superficie-alta); } .dia.tem { background: color-mix(in srgb, var(--verde) 55%, var(--superficie-alta)); } .dia.hoje { background: var(--verde); box-shadow: 0 0 0 2px var(--fundo-2), 0 0 0 4px var(--verde); } /* ---------- comparação mediana x de/por (cena 2) ---------- */ .comparacao { display: grid; gap: 14px; margin-top: 6px; } .barra-linha { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; font-size: 13px; } .barra-nome { color: var(--texto-3); } .barra-cano { height: 26px; border-radius: 7px; background: var(--superficie-alta); overflow: hidden; } .barra-fita { height: 100%; border-radius: 7px; } .barra-fita.falsa { background: linear-gradient(90deg, #7f1d1d, var(--vermelho)); } .barra-fita.real { background: linear-gradient(90deg, var(--verde), var(--verde-claro)); } .barra-valor { font-family: Sora, sans-serif; font-weight: 700; font-size: 14px; } /* ---------- prévia de mensagem (cena 3) ---------- */ .zap { display: grid; gap: 10px; margin-top: 6px; } .balao { max-width: 88%; padding: 12px 15px; border-radius: 14px 14px 14px 4px; background: var(--superficie-alta); font-size: 14px; line-height: 1.5; } .balao b { color: var(--verde-claro); } .balao-hora { display: block; margin-top: 6px; font-size: 11px; color: var(--texto-3); } .zap-silencio { padding: 13px 15px; border: 1px dashed var(--borda-clara); border-radius: 12px; color: var(--texto-3); font-size: 13.5px; text-align: center; } /* =============================================================== IMAGEM EM PRIMEIRO PLANO Foto de produto do ML vem recortada em fundo branco. Em página escura isso vira mancha; a saída é tratar como recorte flutuando sobre um brilho, não como retângulo colado. =============================================================== */ .palco-produto { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%; /* A linha vem do `aspect-ratio`, nunca do que está dentro. Foto do ML chega em qualquer proporção, e uma retrato esticava a linha para além do quadrado — o palco deixava de ser quadrado por causa do conteúdo. */ grid-template-rows: minmax(0, 1fr); } /* Brilho atrás do produto: dá volume sem precisar de sombra falsa. */ .palco-produto::before { content: ""; position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 197, 94, .34), transparent 70%); filter: blur(34px); } .palco-produto::after { content: ""; position: absolute; z-index: 0; bottom: 9%; width: 56%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .68), transparent 72%); filter: blur(11px); } .palco-produto img { position: relative; z-index: 1; width: 82%; height: 82%; object-fit: contain; /* Sombra que segue o contorno do recorte, não a caixa da imagem. */ filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .58)); } /* ---------- hero com produto ---------- */ .hero-produto { position: relative; } .hero-produto .palco-produto { max-width: 460px; margin-inline: auto; } /* Cartão de preço encostado na foto. */ .selo-preco { position: absolute; right: 0; bottom: 6%; z-index: 2; display: grid; gap: 2px; padding: 15px 20px; border: 1px solid var(--borda-clara); border-radius: 18px; background: color-mix(in srgb, var(--fundo-2) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--sombra); } .selo-preco-rotulo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); } .selo-preco-valor { font-family: Sora, sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: -.035em; color: var(--verde-claro); } .selo-preco-antes { font-size: 12.5px; color: var(--texto-3); } .selo-queda { position: absolute; left: 0; top: 10%; z-index: 2; padding: 10px 15px; border-radius: 14px; background: var(--verde); color: #04140a; font: 800 1.05rem/1 Sora, sans-serif; letter-spacing: -.02em; box-shadow: 0 12px 30px -12px var(--verde); } /* Flutuação leve: dá vida sem virar carrossel piscando. */ @media (prefers-reduced-motion: no-preference) { .hero-produto .palco-produto img { animation: flutuar 7s ease-in-out infinite; } .selo-preco { animation: flutuar 7s ease-in-out .8s infinite; } .selo-queda { animation: flutuar 7s ease-in-out 1.6s infinite; } } @keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } /* ---------- vitrine fixada (rola e troca de produto) ---------- */ /* Estado base: os produtos empilham, um embaixo do outro. É o que aparece sem JavaScript, em tela estreita, ou se o observador não subir — nunca sobra tela vazia nem produto escondido. O modo fixado só liga quando o script confirma que sabe trocar de cena. */ .vitrine { position: relative; padding: 40px 0; } .vitrine-quadro { display: grid; place-items: center; } .vitrine-palco { width: min(100% - 40px, var(--largura)); display: grid; gap: 60px; } .vitrine-item { display: grid; align-items: center; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 860px) { .vitrine-item { grid-template-columns: 1fr; gap: 18px; text-align: center; } } .vitrine-pontos { display: none; } .vitrine-marca { display: none; } .vitrine-item .palco-produto { max-width: 440px; margin-inline: auto; } .vitrine-texto h3 { font-size: clamp(1.5rem, 3.6vw, 2.35rem); margin-bottom: 18px; } .vitrine-precos { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .vitrine-preco { font-family: Sora, sans-serif; font-weight: 800; letter-spacing: -.035em; font-size: clamp(2rem, 5vw, 3rem); color: var(--verde-claro); } .vitrine-antes { font-size: 1rem; color: var(--texto-3); } .vitrine-mini { margin-top: 22px; } .vitrine-mini .grafico { max-width: 420px; } @media (max-width: 860px) { .vitrine-mini .grafico { margin-inline: auto; } } /* Modo fixado: só a partir de 861px e só com o script no ar. Duas medidas que precisam andar juntas: - o quadro é do tamanho do conteúdo, não da janela. Fixar 100vh num conteúdo de ~460px produz meia tela preta em volta; - a altura do marcador É a duração da cena, do mesmo jeito que a altura da seção é a duração do vídeo do topo. */ @media (min-width: 861px) { .js-vitrine .vitrine { padding: 0; } .js-vitrine .vitrine-quadro { position: sticky; top: 0; overflow: hidden; height: 100svh; /* Nunca mais alto que o conteúdo precisa. */ max-height: 920px; min-height: 560px; } .js-vitrine .vitrine-quadro { place-items: stretch; } /* Mais largo que o resto da página de propósito. Esta seção é o produto em tamanho grande; espremê-la na mesma medida de um bloco de texto desperdiça a única tela em que a foto e o filme são o argumento. */ .js-vitrine .vitrine-palco { position: relative; display: block; height: 100%; justify-self: center; width: min(100% - 48px, 1320px); } /* Sem `transition` aqui: o script escreve opacity e transform a cada quadro da rolagem. Deixar uma transição junto criaria duas fontes de verdade brigando, e o resultado é atraso e borracha em vez de resposta imediata ao dedo. `will-change` avisa o compositor antes. */ .js-vitrine .vitrine-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: opacity, transform; } /* O primeiro item nasce visível: se o script demorar um quadro, a seção não pisca vazia. */ .js-vitrine .vitrine-item:first-child { opacity: 1; visibility: visible; } .js-vitrine .vitrine-item { height: 100%; align-items: center; } /* Quadrado de verdade, com o lado saindo da largura da coluna. Antes vinham `height: 100%` e `max-width: 100%` na mesma regra: a altura era imposta pelo quadro, a largura era cortada pela coluna, e entre as duas o `aspect-ratio` não tinha o que decidir. O palco saía 502x603 e o filme dentro dele virava um recorte retrato de um vídeo deitado — cortava metade da cena para caber. Agora só a largura manda, e o `78svh` é o teto para tela baixa. */ .js-vitrine .vitrine-item .palco-produto { align-self: center; max-width: none; width: min(100%, 78svh); aspect-ratio: 1; /* A linha não pode crescer com o conteúdo. Foto do ML vem em qualquer proporção, e uma retrato de 393x500 esticava a linha para 459px num palco de 440 — o quadrado deixava de ser quadrado por causa do que estava dentro dele. Com `minmax(0, 1fr)` a altura vem do `aspect-ratio`, e é contra ela que o `height: 82%` da foto resolve. */ grid-template-rows: minmax(0, 1fr); margin-inline: auto; } .js-vitrine .vitrine-pontos { position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: 3; display: grid; gap: 10px; } /* A altura do marcador é a duração da cena. Já passou por três medidas: - 80svh, de quando a vitrine era foto parada. Com filme no lugar, o clipe inteiro cabia num passar de dedo. - 350svh, que dava ~580px de rolagem por segundo de vídeo — o filme obedecia o dedo com folga, mas a seção ocupava 11 telas e quase metade da página. Ficar 2500px preso no mesmo produto lê como página travada, não como cena. - 175svh, o valor atual: metade do curso, tudo no dobro da velocidade. Trocar de produto custa ~1900px em vez de ~3800px, e a seção cai para ~6 telas. O filme passa a correr a ~290px por segundo, então um giro de roda avança mais cena que antes — é o preço aceito por não deixar o visitante rolando dentro do mesmo produto. */ .js-vitrine .vitrine-marca { display: block; height: 175svh; } } .vitrine-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--borda-clara); transition: all var(--transicao); } .vitrine-ponto.ativo { background: var(--verde); height: 26px; border-radius: 99px; } /* ---------- filme do produto ---------- */ /* O vídeo cobre exatamente os mesmos 82% que a foto ocupa, sobreposto a ela. Duas razões para não deixá-lo maior: a troca foto → filme fica sem salto de tamanho, e o brilho de trás continua enquadrando o produto do mesmo jeito nos itens que só têm foto. `object-fit: cover` recorta o 16:9 num quadrado. É de propósito — o assunto está centrado nos dois filmes, e um 16:9 encaixotado num palco quadrado deixaria duas tarjas pretas onde deveria haver produto. */ /* Ocupa o palco inteiro, não os 82% da foto. A foto é recorte em fundo branco e precisa de ar em volta para não virar mancha; o filme tem cena própria, e o ar em volta dele é só quadro desperdiçado. */ .palco-filme { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; border: 1px solid var(--borda-clara); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .78); opacity: 0; transition: opacity 520ms ease; } .palco-com-filme img, .palco-com-filme::after { transition: opacity 520ms ease; } /* Uma classe só, no contêiner, comanda a troca inteira. Ela entra quando o arquivo já tem duração conhecida — antes disso o vídeo é um retângulo vazio, e revelá-lo apagaria a foto que está servindo de pôster. A foto sai porque um vídeo com fundo próprio deixa borda fantasma nos cantos arredondados quando há recorte aceso por trás. E o `::after`, que é a sombra de contato de um recorte flutuando, sai porque o filme não flutua: ele tem chão dentro do próprio quadro. */ .palco-com-filme.filme-pronto .palco-filme { opacity: 1; } .palco-com-filme.filme-pronto img { opacity: 0; } .palco-com-filme.filme-pronto::after { opacity: 0; } /* ---------- cartões de oferta com imagem dominante ---------- */ .oferta-foto { aspect-ratio: 1 / 1; background: linear-gradient(165deg, #fff, #eef1f5); } .oferta-foto img { padding: 18px; transition: transform 420ms cubic-bezier(.2, .7, .3, 1); } .oferta:hover .oferta-foto img { transform: scale(1.06); } /* =============================================================== TELAS PEQUENAS Os pontos de quebra saem do conteúdo, não de nomes de aparelho: 1120px é onde a grade encosta na largura máxima, 860px é onde a vitrine fixada deixa de caber, 640px é onde os cartões flutuando sobre a foto passam a cobrir mais do que revelam. =============================================================== */ /* ---------- notebook: a grade encosta nas bordas ---------- */ @media (max-width: 1120px) { .hero { padding: 56px 0 64px; } .secao { padding: 64px 0; } .captura { padding: 34px; } } /* ---------- tablet ---------- */ @media (max-width: 860px) { .secao { padding: 56px 0; } .secao-cabeca { margin-bottom: 32px; } /* Empilhada, o par foto+texto fica muito alto se a foto mantiver o tamanho de desktop. */ .vitrine-item .palco-produto { max-width: 340px; } .vitrine-precos { justify-content: center; } .vitrine-texto .secao-etiqueta { display: block; } } /* ---------- celular ---------- */ @media (max-width: 640px) { .hero { padding: 40px 0 52px; } .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .hero-texto { margin: 18px 0 26px; } .hero-acoes { gap: 10px; } .hero-acoes .botao { flex: 1 1 100%; } .secao { padding: 48px 0; } .secao h2 { font-size: clamp(1.55rem, 7vw, 2rem); } /* O cartão de preço deixa de flutuar: sobre uma foto de ~280px ele cobria mais produto do que mostrava. Vira uma faixa embaixo. */ .selo-preco { position: static; margin-top: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; } .selo-preco-rotulo { display: none; } .selo-queda { top: 0; left: 0; padding: 8px 12px; font-size: .95rem; } .hero-produto .palco-produto { max-width: 300px; } /* Flutuar duas coisas em telas pequenas rouba mais atenção do que dá. */ .hero-produto .palco-produto img, .selo-preco, .selo-queda { animation: none; } .painel { padding: 18px; border-radius: 18px; } .numero { padding: 22px 20px; } .grafico-legenda { gap: 14px; } .legenda-valor { font-size: 17px; } .pilula { width: 246px; padding: 10px 14px 10px 10px; } .pilula-foto { width: 44px; height: 44px; } .grupo { padding: 20px; } .captura { padding: 24px; border-radius: 18px; } .captura-form { flex-direction: column; } .captura-form input, .captura-form .botao { width: 100%; } .pergunta summary { padding: 16px 18px; font-size: .95rem; } .pergunta p { padding: 0 18px 18px; } .oferta-detalhe { padding: 26px 0 12px; gap: 24px; } .detalhe-foto { padding: 16px; border-radius: 18px; } .rodape { padding: 40px 0 32px; } } /* ---------- alvo de toque ---------- */ /* Ponteiro grosso: 44px é o mínimo confortável para o dedo, e vários controles aqui nasceram dimensionados para o cursor. */ @media (pointer: coarse) { .botao { min-height: 46px; } .pergunta summary { min-height: 46px; } .topo-nav a { padding-block: 6px; } } /* =============================================================== SCROLL CINEMA A seção é alta de propósito: a altura dela É o curso da animação. Dentro, um contêiner grudado de uma tela segura o vídeo parado enquanto o resto rola. O progresso de 0 a 1 sai dessa razão. =============================================================== */ .sc-hero { position: relative; height: 500vh; } /* Cena contida (não é o hero) pede curso menor. */ .sc-hero.sc-contida { height: 340vh; } .sc-grude { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #08080a; } .sc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; } .sc-video.pronto { opacity: 1; } /* Escurece o pé para o texto ter contraste sobre qualquer quadro. */ .sc-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,10,.72) 0%, transparent 26%, transparent 52%, rgba(8,8,10,.88) 100%); } .sc-carregando { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; gap: 16px; background: #08080a; transition: opacity .6s ease; } .sc-carregando.saiu { opacity: 0; pointer-events: none; } .sc-carregando p { margin: 0; color: var(--texto-3); font-size: 14px; letter-spacing: .04em; } .sc-girando { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borda-clara); border-top-color: var(--verde); animation: girar 900ms linear infinite; } @keyframes girar { to { rotate: 360deg; } } /* ---------- texto por cima ---------- */ .sc-conteudo { position: absolute; inset: 0; z-index: 2; display: grid; align-content: space-between; width: min(100% - 40px, var(--largura)); margin-inline: auto; padding: 96px 0 44px; pointer-events: none; } .sc-conteudo a, .sc-conteudo button { pointer-events: auto; } .sc-legendas { position: relative; min-height: 4.6em; } .sc-legenda { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1); } .sc-legenda.ativa { opacity: 1; transform: none; } .sc-legenda h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); max-width: 16em; text-shadow: 0 2px 30px rgba(0,0,0,.55); } .sc-legenda p { margin: 14px 0 0; max-width: 34em; color: #d7dce6; font-size: 1.05rem; text-shadow: 0 1px 18px rgba(0,0,0,.6); } .sc-pe { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .sc-medidor { display: grid; gap: 10px; min-width: 210px; } .sc-medidor-topo { display: flex; align-items: baseline; gap: 8px; } .sc-medidor-valor { font-family: Sora, sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: -.035em; color: var(--verde-claro); } .sc-medidor-rotulo { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); } .sc-trilha { height: 4px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; } .sc-barra { height: 100%; border-radius: 99px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violeta), var(--verde-claro)); } /* ---------- movimento reduzido ---------- */ /* A altura NÃO colapsa aqui de propósito. Zerar o curso faria o progresso travar em 0 e a página inteira parecer quebrada. Some só o que se move sozinho. */ @media (prefers-reduced-motion: reduce) { .sc-legenda { transition: none; } .sc-girando { animation: none; } } /* ---------- telas pequenas ---------- */ @media (max-width: 640px) { .sc-hero { height: 380vh; } .sc-hero.sc-contida { height: 280vh; } .sc-conteudo { padding: 84px 0 32px; } .sc-legenda h2 { font-size: clamp(1.5rem, 8vw, 2.1rem); } .sc-legenda p { font-size: .96rem; } .sc-legendas { min-height: 6.4em; } .sc-pe { gap: 16px; } .sc-medidor-valor { font-size: 1.6rem; } } /* =============================================================== MOVIMENTO CONTÍNUO NAS SEÇÕES DE BAIXO Cartão que só aparece e para volta a ficar estático. Aqui cada um segue a própria linha do tempo de rolagem, então nada congela: a página inteira responde ao dedo, igual ao vídeo do topo. =============================================================== */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* Cartões de oferta: sobem e assentam no percurso pela janela. */ .oferta { animation: cartao-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; } /* A coluna do meio entra um pouco depois, o que quebra a leitura em bloco e faz a grade parecer respirar em vez de piscar de uma vez. */ .ofertas-grid .oferta:nth-child(3n + 2) { animation-range: entry 0% cover 42%; } /* A foto do produto anda mais devagar que o cartão: paralaxe curta, só o suficiente para o olho perceber profundidade. */ .oferta-foto img { animation: foto-paralaxe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* Grupos e perguntas entram com o mesmo vocabulário. */ .grupo, .pergunta { animation: cartao-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; } /* O produto do hero flutua com a rolagem em vez de ficar preso. */ .hero-produto .palco-produto { animation: heroi-sobe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* Os números deslizam de baixo enquanto a faixa cruza a tela. */ .numero { animation: cartao-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } } } @keyframes cartao-entra { from { opacity: 0; transform: translate3d(0, 46px, 0) scale(.97); } to { opacity: 1; transform: none; } } @keyframes foto-paralaxe { from { transform: translate3d(0, 16px, 0) scale(1.04); } to { transform: translate3d(0, -16px, 0) scale(1.04); } } @keyframes heroi-sobe { from { transform: translate3d(0, 34px, 0); } to { transform: translate3d(0, -34px, 0); } } /* A paralaxe da foto substitui o zoom de hover; manter os dois faria um sobrescrever o outro no meio do movimento. */ @supports (animation-timeline: view()) { .oferta:hover .oferta-foto img { transform: translate3d(0, 0, 0) scale(1.08); } }