/* economizecupom — folha única, sem build. Mobile-first. * * CLARO, e só. `color-scheme: light` trava o tema mesmo com o sistema no * escuro: site de cupom vive de parecer confiável, e fundo escuro lê como * spam nesse nicho. Não é preferência de gosto, é o padrão do mercado * (Cuponomia, Pelando, Promobit, Méliuz — todos claros). * * Cupom COM código é uma LISTA de linhas, não um grid de cards. Quem procura * cupom varre a página atrás do maior desconto: linha de altura uniforme com * o número sempre na mesma coluna faz essa varredura acontecer no reflexo. * A identidade visual é o TICKET: picote tracejado, furos nas bordas e o * canhoto com o número — o objeto físico "cupom" traduzido pra interface. * * Oferta SEM código é outra coisa: um PRODUTO com foto e preço, não um * ticket pra copiar. Essas viram um GRID de cards (ver `.cupons-grid` / * `.cupom-grid`) — estante de produto, não fileira de linhas. */ :root { color-scheme: light; --bg: #f6f8f7; --superficie: #ffffff; --superficie-2:#f0f4f2; --borda: #e2e8e4; --borda-forte: #c6d2ca; --texto: #0c1b17; --texto-fraco: #56675f; --tinta: #0d2a4f; /* navy da marca (a metade azul da etiqueta): rodapé, modal, contrastes */ --verde: #00994f; --verde-forte: #007a3f; --verde-escuro:#045c33; --verde-luz: #e3f6ec; --lima: #c8f169; /* acento elétrico: grifos, marquee, detalhes */ --lima-tinta: #3c5a00; --vermelho: #d92d20; --ouro: #8a5a00; --ouro-luz: #ffefc2; /* Fallback pra loja sem plataforma conhecida. */ --loja-cor: #64748b; --loja-tinta: #475569; --loja-suave: #f1f5f9; --loja-chip-texto: #ffffff; --fonte-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --raio: 16px; --sombra: 0 1px 2px rgba(12, 27, 23, .05); --sombra-alta: 0 2px 6px rgba(12, 27, 23, .06), 0 18px 36px -16px rgba(12, 27, 23, .28); /* Sombras do card de cupom: presença clara no repouso, e a versão alta pro * cupom apontado por deep link (`.cupom:target`) — o hover não mexe mais * no card, ver `.cupom`. * SÓ difusa, sem camada de contato: a sombra de contato desenha uma linha * escura colada na borda de baixo, que passa por trás da boca dos furos do * picote e suja o recorte. A difusa (offset alto, blur grande, spread * negativo) cai bem abaixo da borda e o furo fica limpo. */ --cupom-sombra: 0 12px 24px -14px rgba(12, 27, 23, .20); --cupom-sombra-alta: 0 22px 40px -18px rgba(12, 27, 23, .32); } /* ---- cores das lojas ---- * NÃO existe classe por loja aqui de propósito. Com dezenas de lojas, * `.loja--magalu { ... }` significaria um deploy por loja nova. As quatro * variáveis chegam num atributo `style` inline, calculadas em PHP a partir * de `lojas.cor` e `lojas.cor_texto` (ver Html::estiloDaLoja). * O que está no :root é só o fallback de loja sem cor cadastrada. */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--texto); font: 16px/1.55 var(--fonte-corpo); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } a { color: var(--verde-forte); } .wrap { width: min(1060px, 100% - 2rem); margin-inline: auto; } /* Seção que sangra até as bordas da tela mesmo dentro de um .wrap * (o main é .wrap; hero e marquee pintam a faixa inteira). */ .sangra { margin-inline: calc(50% - 50vw); } /* Trava lateral. O `clip` no body sozinho não segura: quem manda na rolagem é * o viewport, e ele só recebe o overflow do ELEMENTO RAIZ — no celular a * página continuava deslizando de lado sobre o que o marquee (rotate+scale) e * o `50vw` do .sangra estouram. * * `hidden` no html de propósito, e não `clip`: a propagação de `hidden` pro * viewport é antiga e universal, enquanto a de `clip` é recente e é * justamente a que falha em Safari mais velho. Como o valor propaga, o html * NÃO vira container de rolagem — o `position: sticky` do topo continua * grudando na tela. O `clip` no body fica como segunda camada: corta a * pintura sem criar rolagem (`hidden` no body, esse sim, mataria o sticky). */ html { overflow-x: hidden; } body { overflow-x: clip; } .pular { position: absolute; left: -9999px; } .pular:focus { left: 1rem; top: .5rem; z-index: 100; background: var(--superficie); padding: .5rem .75rem; border-radius: 8px; } :focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; } /* Entrada suave dos cards. O estado "escondido" só existe com JS ativo * (html.js), senão a página sem JS nasceria invisível. * * Tudo em :where() (especificidade zero): sem isso, `html.js .surge--visto` * ganha de qualquer `.card:hover { transform }` e mata o lift de hover de * todo card que entra animado — e o shorthand `transition` daqui atropela as * transições próprias do card. Em troca, cada card .surge precisa incluir * opacity/transform na PRÓPRIA lista de transition pra entrada animar. */ html:where(.js) :where(.surge) { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); } html:where(.js) :where(.surge--visto) { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .surge { opacity: 1; transform: none; transition: none; } } /* ============ topo ============ */ .topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--borda); transition: box-shadow .25s; } /* Estado "rolado" (classe posta pelo app.js): ganha sombra pra descolar do * conteúdo que passa por baixo. */ .topo--rolado { box-shadow: 0 10px 30px -18px rgba(12, 27, 23, .35); } .topo__linha { display: flex; align-items: center; gap: .85rem; padding: .62rem 0; } .marca { display: inline-flex; align-items: center; gap: .6rem; flex: none; font-family: var(--fonte-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; color: var(--texto); } .marca strong { color: var(--verde); font-weight: 800; } /* A marca é a arte real (etiqueta navy + cupom verde), não um ícone colorível: * é raster porque o desenho tem volume e sombra que um SVG chapado perderia. * O srcset 2x cobre retina; width/height reservam o espaço antes de carregar. */ .marca__mark { width: 47px; height: 38px; flex: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); } .marca:hover .marca__mark { transform: rotate(-8deg) scale(1.06); } /* Tagline embaixo do nome: transforma o logo em promessa. */ .marca__texto { display: inline-block; line-height: 1.05; } .marca__tag { display: block; font-family: var(--fonte-corpo); font-size: .62rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); margin-top: .2rem; } .topo__busca-principal { flex: 1 1 380px; min-width: 240px; max-width: 560px; margin-inline: auto; } .menu { display: flex; gap: .25rem; flex: none; align-items: center; } .menu__item { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 650; text-decoration: none; color: var(--texto-fraco); border: 1px solid transparent; background: transparent; transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s; } /* Ícones do WhatsApp/Telegram ao lado de "Grupos" no menu — cor da PRÓPRIA marca (não currentColor: o link muda de cinza pra branco pra preto conforme hover/atual, e os ícones precisam continuar reconhecíveis nos três estados, não sumir junto). */ .menu__icones { display: inline-flex; align-items: center; gap: .3rem; } .menu__icones .btn-grupo__icone { width: .92rem; height: .92rem; } .menu__icones .btn-grupo__icone:first-child { color: #25d366; } .menu__icones .btn-grupo__icone:last-child { color: #29a9eb; } /* Ponto na cor da loja: identifica a marca sem precisar carregar logo. Continua aqui porque o admin ainda usa; no site quem manda é .marca-loja. */ .menu__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--loja-cor); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--loja-cor) 18%, transparent); transition: box-shadow .15s; } /* No hover o chip veste a própria loja: fundo pálido e tinta da marca — * as variáveis já chegam inline em cada item (Html::estiloDaLoja). */ .menu__item:hover { background: var(--verde-luz); color: var(--verde-escuro); border-color: color-mix(in srgb, var(--verde) 18%, transparent); transform: translateY(-1px); box-shadow: var(--sombra); } .menu__item:hover .menu__ponto { box-shadow: 0 0 0 4px color-mix(in srgb, var(--loja-cor) 28%, transparent); } /* Navy da marca, não o quase-preto de texto: o item ativo é a única peça * escura do topo, e vestindo a mesma tinta do rodapé ele fecha a página em * vez de parecer um botão de outro sistema. */ .menu__item--atual { background: var(--tinta); color: #fff; border-color: var(--tinta); } .menu__item--atual:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); transform: none; box-shadow: none; } /* ---- topo no celular: navegação em cima, busca embaixo ---- */ @media (max-width: 719px) { .topo__linha { flex-wrap: wrap; gap: .55rem; padding: .55rem 0 .65rem; align-items: center; } .marca { font-size: 1.15rem; } .marca__mark { width: 40px; height: 32px; } .topo__busca-principal { order: 3; flex: none; width: 100%; min-width: 0; max-width: none; margin: 0; } .menu { order: 2; width: 100%; margin-left: 0; flex-wrap: nowrap; gap: .2rem; background: var(--superficie-2); border-radius: 12px; padding: .22rem; overflow: visible; } .menu__item { flex: 1 1 0; justify-content: center; padding: .48rem .3rem; border-radius: 9px; font-size: .84rem; } .menu__item:hover { transform: none; box-shadow: none; } } @media (max-width: 380px) { .marca { gap: .45rem; font-size: 1.05rem; } .marca__tag { display: none; } .menu__item { padding-inline: .45rem; } } /* ============ marca da loja (logo ou monograma) ============ */ /* Emitido por Html::marcaDaLoja(). A logo real vive num quadro BRANCO, sempre: * logo de loja é desenhada pra fundo claro e muitas têm texto escuro — sobre a * própria cor da marca, metade delas sumiria. O quadro também é o que mantém a * linha uniforme quando as logos têm proporções diferentes (a da Amazon é * larga, a do ML é quadrada): o `contain` encaixa dentro da mesma caixa. */ .marca-loja { --h: 26px; display: inline-grid; place-items: center; flex: none; width: var(--h); height: var(--h); border-radius: 7px; overflow: hidden; background: #fff; border: 1px solid var(--borda); } .marca-loja__img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 2px; } /* Sem logo cadastrada: iniciais na cor da própria loja. */ .marca-loja--mono { background: var(--loja-cor); color: var(--loja-chip-texto); border-color: transparent; font-family: var(--fonte-display); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-size: .72rem; } /* Sobre superfície já colorida (o ticket do hero), o monograma inverte: fundo branco e as iniciais na tinta escura da marca. */ .marca-loja--claro.marca-loja--mono { background: #fff; color: var(--loja-tinta); } .marca-loja--xs { --h: 20px; border-radius: 6px; } .marca-loja--xs.marca-loja--mono { font-size: .58rem; } /* Meio-termo pro tile compacto: o --md ocupa altura demais quando a marca fica AO LADO do nome em vez de acima dele. */ .marca-loja--sm { --h: 28px; border-radius: 8px; } .marca-loja--sm.marca-loja--mono { font-size: .74rem; } .marca-loja--md { --h: 38px; border-radius: 10px; } .marca-loja--md.marca-loja--mono { font-size: 1rem; } .marca-loja--lg { --h: 60px; border-radius: 14px; } .marca-loja--lg.marca-loja--mono { font-size: 1.6rem; } .marca-loja--lg .marca-loja__img { padding: 6px; } /* --- placa do tiquete do hero --- * Aqui a logo substitui o nome, então ela não pode ser um quadradinho de 20px: * wordmark deitado espremido em quadrado vira borrão. A caixa fixa só a ALTURA * e solta a largura, e mantém o fundo branco — o tiquete é pintado com a cor da * marca, e sobre ela as logos de tinta escura (Amazon, C&A) sumiriam. */ /* flex e não o inline-grid herdado: em grid a imagem é esticada pela faixa da * coluna em vez de seguir a própria proporção. A placa não tem largura * própria — quem manda é a imagem, e ela se ajusta. */ .marca-loja--tiquete { --h: 34px; display: flex; align-items: center; justify-content: center; width: auto; height: var(--h); min-width: 0; padding-inline: .3rem; border-radius: 8px; border-color: transparent; } /* A ALTURA é o valor fixo e a largura vem da proporção; o contrário (altura * automática limitada por max-height) fica circular dentro de uma placa cuja * largura depende justamente da imagem, e o navegador resolve o impasse * espremendo a logo — a de 300x69 saía com 40px de largura. * * min/max-width são os batentes: o teto é a metade do tiquete (212px de * largura mínima, ~80px por coluna depois do padding e do vão do picote) e o * piso reserva espaço antes de a logo chegar do CDN, pra placa não nascer * colapsada. Com `object-fit: contain` os dois só acrescentam margem em volta * da logo, nunca a deformam. */ .marca-loja--tiquete .marca-loja__img { flex: none; height: calc(var(--h) - 8px); width: auto; min-width: 44px; max-width: 70px; padding: 0; } /* --- faixa: altura fixa, largura livre --- * Logo de loja no mundo real é wordmark deitado (a da Amazon é 3,3:1, a do * Magalu 2,6:1). Espremida num quadrado de 20px vira borrão ilegível — medido, * não suposto. Então onde a marca é o assunto (tile e topo da loja) a caixa * solta a largura e some: sem moldura, sem fundo, a logo deitada no card. * * O monograma NÃO acompanha: sem logo, o quadrado colorido continua sendo a * melhor forma, então ele reconquista largura e fundo logo abaixo. */ /* Nada de dimensão fixa aqui: a logo é limitada por max-height E max-width, * com width/height em auto. Assim o navegador encaixa a imagem inteira na * proporção dela — wordmark largo bate no limite de largura e perde altura * sozinho, em vez de estourar a caixa e ser cortado pelo overflow. */ .marca-loja--faixa { --larg: 150px; width: auto; height: auto; max-width: var(--larg); /* Reserva a altura antes da imagem chegar: sem isso a caixa nasce com zero de altura e o tile pula quando a logo carrega. */ min-height: var(--h); overflow: visible; background: none; border: 0; border-radius: 0; justify-items: start; align-items: center; } /* max-width em px e não em %: o pai tem largura automática (depende deste filho), e uma porcentagem contra largura indefinida colapsa a imagem a 0. */ .marca-loja--faixa .marca-loja__img { width: auto; height: auto; max-height: var(--h); max-width: var(--larg); padding: 0; } /* Sem logo, o monograma retoma o quadrado: é a melhor forma pra duas letras. */ .marca-loja--faixa.marca-loja--mono { width: var(--h); height: var(--h); background: var(--loja-cor); border-radius: 10px; justify-items: center; } .marca-loja--lg.marca-loja--faixa { --larg: 210px; } .marca-loja--lg.marca-loja--faixa.marca-loja--mono { border-radius: 14px; } .marca-loja--lg.marca-loja--faixa.marca-loja--mono { width: 60px; border-radius: 14px; } /* ============ marca da categoria (emoji) ============ */ /* Emitido por Html::categoryMark(). Sem logo pra cair de volta como as lojas * têm — o emoji É a marca, então não carrega caixa nem fundo: só o glifo, * do tamanho que o contexto pedir. */ .marca-categoria { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; } .marca-categoria--xs { font-size: 1rem; } .marca-categoria--sm { font-size: 1.35rem; } .marca-categoria--md { font-size: 1.75rem; } .marca-categoria--lg { font-size: 2.75rem; } /* ============ hero ============ */ /* O hero sai do .wrap pra pintar a faixa inteira: gradientes suaves de menta * e lima sobre o claro — vivo sem virar "dark spam". */ .hero-faixa { position: relative; overflow: clip; background: radial-gradient(560px 320px at 12% -10%, color-mix(in srgb, var(--lima) 34%, transparent), transparent 70%), radial-gradient(640px 400px at 88% 0%, color-mix(in srgb, var(--verde) 14%, transparent), transparent 72%), radial-gradient(520px 360px at 55% 110%, color-mix(in srgb, var(--ouro-luz) 55%, transparent), transparent 70%), var(--bg); } /* Pontilhado de fundo: textura de "papel picotado", quase subliminar. */ .hero-faixa::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--texto) 9%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 75%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 75%); } .hero { position: relative; display: grid; gap: 2rem; padding: 3rem 0 2.4rem; } @media (min-width: 880px) { .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; padding: 4.2rem 0 3.2rem; } } /* Mesma composição, ~30% menos altura — pra uma página como /grupos-de- -promocoes/, onde o cabeçalho é só contexto e o conteúdo (os cards) que importa vem logo abaixo. Escala padding e o tamanho do h1 juntos; o resto (olho, chips, texto) já era modesto o bastante pra não precisar encolher. */ /* Sem .hero__arte (não tem ilustração pra por do lado), então cancela a segunda coluna do .hero base — sem isso, o grid de 2 colunas reserva ~40% de espaço morto à direita, vazio, só porque o hero base espera uma coluna de arte que aqui nunca existe. */ .hero--compacto { padding: 2.1rem 0 1.7rem; gap: 1.4rem; grid-template-columns: 1fr; } @media (min-width: 880px) { .hero--compacto { padding: 2.9rem 0 2.2rem; grid-template-columns: 1fr; } } /* Especificidade dobrada (.hero.hero--compacto, não só .hero--compacto): a regra genérica `.hero h1` vem DEPOIS desta no arquivo e tem a mesma especificidade de uma classe + elemento — sem o reforço aqui, ela vencia no empate por ordem de origem e o h1 "compacto" saía do tamanho do hero normal (maior), estourando a margem direita em telas estreitas. */ .hero.hero--compacto h1 { margin-bottom: .56rem; font-size: clamp(1.7rem, 5.3vw, 2.9rem); } .hero--compacto .hero__texto { max-width: 62ch; } .hero__atalhos { grid-column: 1 / -1; position: relative; z-index: 2; } @media (min-width: 880px) { .hero__atalhos { margin-top: .3rem; } } .hero__olho { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; margin: 0 0 1.1rem; padding: .34rem .8rem .34rem .6rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; box-shadow: var(--sombra); font-size: .78rem; font-weight: 750; color: var(--verde-escuro); text-transform: uppercase; letter-spacing: .06em; } /* Bolinha pulsando: sinal de "vivo hoje", que é a objeção nº1 de site de cupom. */ .pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent); animation: pulsa 2.2s ease-out infinite; } @keyframes pulsa { 70% { box-shadow: 0 0 0 7px rgba(0, 153, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 153, 79, 0); } } @media (prefers-reduced-motion: reduce) { .pulso { animation: none; } } .hero h1 { margin: 0 0 .8rem; font-family: var(--fonte-display); font-size: clamp(2.4rem, 7.5vw, 4.1rem); line-height: .98; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; } /* Grifo de marca-texto lima, levemente torto — o "carimbo" do site. */ .hero h1 em { font-style: normal; position: relative; display: inline-block; padding-inline: .08em; z-index: 0; color: var(--verde-escuro); } .hero h1 em::before { content: ""; position: absolute; inset: .12em -.06em -.02em; background: var(--lima); border-radius: .18em; transform: rotate(-1.6deg); z-index: -1; } .hero__texto { margin: 0; color: var(--texto-fraco); font-size: 1.08rem; max-width: 54ch; } /* Negrito estratégico (ver /grupos-de-promocoes/): cor volta pro texto forte também, não só o peso — sem isso o ficava cinza-claro em negrito, que lê como "mais grosso", não como "mais importante". */ .hero__texto strong { color: var(--texto); font-weight: 800; } .hero__acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; } .btn-hero { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; background: var(--verde); color: #fff; text-decoration: none; font-family: var(--fonte-display); font-weight: 750; font-size: 1.02rem; letter-spacing: -.01em; box-shadow: 0 3px 0 var(--verde-escuro), 0 14px 26px -12px rgba(0, 153, 79, .55); transition: transform .15s, box-shadow .15s, background .15s; } .btn-hero:hover { background: var(--verde-forte); transform: translateY(-2px); } .btn-hero:active { transform: translateY(2px); box-shadow: 0 0 0 var(--verde-escuro); } .btn-hero--fantasma { background: var(--superficie); color: var(--texto); box-shadow: none; border: 1px solid var(--borda-forte); } .btn-hero--fantasma:hover { background: var(--superficie); border-color: var(--texto); } .hero__chips { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: 1rem; } .hero__chips-label { color: var(--texto-fraco); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-right: .15rem; } .hero__chip { display: inline-flex; align-items: center; min-height: 36px; padding: .38rem .75rem; border: 1px solid var(--borda); border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--texto); text-decoration: none; font-size: .9rem; font-weight: 650; box-shadow: var(--sombra); transition: background .15s, border-color .15s, color .15s, transform .15s; } .hero__chip:hover { background: var(--verde-luz); border-color: color-mix(in srgb, var(--verde) 30%, var(--borda)); color: var(--verde-escuro); transform: translateY(-1px); } /* --- a pilha de tickets decorativa --- */ .hero__arte { position: relative; min-height: 300px; display: none; } @media (min-width: 880px) { .hero__arte { display: block; } } /* Duas metades em volta do picote, como um ingresso de verdade: a marca de um * lado, o número do outro. As colunas são 1fr 1fr porque o picote é desenhado * fixo em 50% — com colunas de larguras diferentes o tracejado cairia em cima * do conteúdo em vez de separar as duas metades. */ .tiquete { position: absolute; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; min-width: 212px; padding: .9rem 1.1rem; background: var(--loja-cor); color: var(--loja-chip-texto); border-radius: 14px; /* drop-shadow e não box-shadow: o filtro roda DEPOIS da máscara, então a * sombra contorna os furos em vez de ser cortada por eles. */ filter: drop-shadow(0 16px 20px color-mix(in srgb, var(--loja-cor) 45%, rgba(12, 27, 23, .3))); /* Furos de ticket nas laterais: a máscara divide o ticket em duas metades * e cava um semicírculo na borda externa de cada uma. */ -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; animation: flutua 7s ease-in-out infinite; } /* Metade esquerda: só a marca, centralizada na sua própria coluna. Sem logo * cadastrada, o par monograma + nome empilha aqui — duas iniciais sozinhas não * dizem que loja é. */ .tiquete__marca { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; } .tiquete__loja { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.15; opacity: .85; } /* Metade direita: o número é o argumento, então ele fica grande e a unidade * vira legenda embaixo. */ .tiquete__valor { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; } .tiquete__numero { font-family: var(--fonte-display); font-size: 2.1rem; font-weight: 800; line-height: .9; letter-spacing: -.03em; } .tiquete__unidade { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } .tiquete__picote { position: absolute; inset: .55rem auto .55rem 50%; border-left: 2px dashed color-mix(in srgb, var(--loja-chip-texto) 45%, transparent); } .tiquete--1 { top: 4%; right: 34%; transform: rotate(-7deg); animation-delay: 0s; } .tiquete--2 { top: 34%; right: 2%; transform: rotate(4deg); animation-delay: -2.3s; } .tiquete--3 { top: 62%; right: 40%; transform: rotate(-3deg); animation-delay: -4.1s; } /* Sem 4ª loja no destaque, os três respiram; com ela, encaixa no vão. */ .tiquete--4 { top: 82%; right: 6%; transform: rotate(6deg); animation-delay: -5.2s; scale: .85; } @keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @media (prefers-reduced-motion: reduce) { .tiquete { animation: none; } } /* Tesourinha seguindo o picote — puro enfeite. */ .hero__tesoura { position: absolute; top: 20%; right: 26%; font-size: 1.5rem; transform: rotate(90deg); filter: grayscale(1) opacity(.4); } /* --- números reais do banco, em faixa --- */ .hero__numeros { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 2.6rem; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-alta); position: relative; z-index: 1; } .numero-hero { flex: 1 1 33%; min-width: 130px; padding: 1.05rem 1.3rem; border-right: 1px solid var(--borda); } .numero-hero:last-child { border-right: 0; } .numero-hero dt { font-size: .72rem; font-weight: 650; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .07em; } .numero-hero dd { margin: .15rem 0 0; font-family: var(--fonte-display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .numero-hero--destaque dd { color: var(--verde-forte); } /* No celular o `min-width: 130px` não cabia três vezes em 343px: dois números * ficavam lado a lado e o terceiro caía sozinho ocupando a faixa inteira — * uma barra visivelmente torta. Três colunas iguais mantêm a faixa retangular. * (Depois das regras de dt/dd de propósito: @media não muda especificidade, * então quem vem por último é quem vale.) */ @media (max-width: 599px) { .hero__numeros { display: grid; grid-template-columns: repeat(3, 1fr); } .numero-hero { min-width: 0; padding: .85rem .7rem; } /* Duas linhas reservadas no rótulo: "cupons no ar" quebra em duas e "lojas" não — sem a altura fixa os três números caem em alturas diferentes. */ .numero-hero dt { font-size: .64rem; letter-spacing: .04em; line-height: 1.3; min-height: 2.6em; } .numero-hero dd { font-size: 1.6rem; } } /* ============ marquee ============ */ /* Letreiro contínuo — energia de "promoção rolando agora". O conteúdo é * duplicado no HTML (aria-hidden na cópia) pro loop fechar sem buraco. */ .marquee { overflow: hidden; white-space: nowrap; background: var(--tinta); color: var(--lima); border-block: 3px solid var(--lima); transform: rotate(-1deg) scale(1.02); margin-block: .4rem 2.2rem; } .marquee__trilho { display: inline-flex; align-items: center; padding-block: .55rem; /* --marquee-duracao vem do HTML, proporcional à quantidade de itens. */ animation: desfila var(--marquee-duracao, 55s) linear infinite; } .marquee:hover .marquee__trilho { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: 1.4rem; padding-inline: .7rem; font-family: var(--fonte-display); font-size: .95rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .marquee__item::after { content: "✦"; font-size: .8em; opacity: .7; } @keyframes desfila { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__trilho { animation: none; } .marquee { transform: none; } } /* ---- cabeçalho de seção ---- */ .secao-cabecalho { display: flex; align-items: center; gap: .7rem; margin: 2.6rem 0 1.1rem; } .secao-cabecalho .secao-titulo { margin: 0; } /* "Ver todas →" encostado na direita: com só os destaques na home, o índice completo precisa de uma porta visível em cada seção. */ .secao-link { margin-left: auto; flex: none; font-size: .85rem; font-weight: 750; color: var(--verde-forte); text-decoration: none; } .secao-link:hover { text-decoration: underline; } .secao-navegacao + .secao-navegacao .secao-cabecalho { margin-top: 2rem; } .secao-contagem { font-size: .75rem; font-weight: 750; color: var(--verde-escuro); background: var(--verde-luz); border: 1px solid color-mix(in srgb, var(--verde) 35%, transparent); padding: .12rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .secao-titulo { font-family: var(--fonte-display); font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -.025em; margin: 2.6rem 0 1.1rem; } .migalhas { font-size: .84rem; color: var(--texto-fraco); padding-top: 1rem; } .migalhas a { color: var(--texto-fraco); } /* ---- cabeçalho da página de loja ---- */ .loja-topo { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: .8rem 0 .5rem; padding: 1.6rem 1.6rem 1.6rem 1.9rem; background: radial-gradient(420px 220px at 90% -30%, color-mix(in srgb, var(--loja-cor) 16%, transparent), transparent 70%), var(--loja-suave); border: 1px solid color-mix(in srgb, var(--loja-cor) 35%, transparent); border-radius: calc(var(--raio) + 4px); } .loja-topo__faixa { position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--loja-cor); } /* A marca fica centrada na altura do bloco, não colada na base como o resto. */ .loja-topo .marca-loja { align-self: center; box-shadow: var(--sombra); } .loja-topo .marca-categoria { align-self: center; } .loja-topo__texto { flex: 1 1 320px; min-width: 0; } .loja-topo__chip { display: inline-block; margin-bottom: .55rem; background: var(--loja-cor); color: var(--loja-chip-texto); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: .24rem .65rem; border-radius: 6px; } .loja-topo h1 { margin: 0 0 .35rem; font-family: var(--fonte-display); font-size: clamp(1.6rem, 4.5vw, 2.3rem); letter-spacing: -.03em; font-weight: 800; line-height: 1.08; } .loja-topo__resumo { margin: 0; color: var(--texto-fraco); font-size: .95rem; } .loja-topo__numeros { display: flex; gap: 1.6rem; margin: 0; } .loja-topo__numeros dt { font-size: .68rem; font-weight: 650; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; } .loja-topo__numeros dd { margin: .05rem 0 0; font-family: var(--fonte-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--loja-tinta); font-variant-numeric: tabular-nums; } .loja-topo__numeros .numero--data { font-size: 1.2rem; } /* No celular o padding de 1.9rem à esquerda jogava o título para 48px da borda * enquanto a migalha ao lado começava em 16px — dois recuos diferentes na * mesma coluna. Aqui o bloco encolhe e volta a alinhar com o resto da página. */ @media (max-width: 719px) { .loja-topo { gap: .7rem; padding: 1.15rem 1.1rem 1.15rem 1.35rem; border-radius: var(--raio); } .loja-topo__faixa { width: 6px; } .loja-topo .marca-loja--lg { --h: 46px; } .loja-topo .marca-loja--lg.marca-loja--faixa.marca-loja--mono { width: 46px; border-radius: 12px; font-size: 1.25rem; } .loja-topo .marca-categoria--lg { font-size: 2.1rem; } .loja-topo__chip { margin-bottom: .4rem; } .loja-topo__numeros { gap: 1.4rem; } .loja-topo__numeros dd { font-size: 1.45rem; } } .vazio { background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 2.25rem 1.5rem; color: var(--texto-fraco); text-align: center; line-height: 1.7; } .vazio strong { color: var(--texto); } /* ============ grade de lojas ============ */ .lojas-grid { display: grid; gap: .9rem; margin: 0 0 .5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); position: relative; z-index: 1; } .loja-tile { position: relative; overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.2rem 1.25rem 1.1rem 1.5rem; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .2rem; /* opacity/transform = entrada do .surge; o lift de hover usa translate/rotate * (propriedades independentes) pra não brigar com o transform da entrada. */ transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1), translate .18s cubic-bezier(.2, .8, .3, 1.2), rotate .18s cubic-bezier(.2, .8, .3, 1.2), box-shadow .18s, border-color .18s; } /* Faixa grossa da cor da loja: identifica a marca de relance, sem logo. */ .loja-tile__faixa { position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--loja-cor); } /* Glow da própria marca no canto — cada tile já "veste" a loja. */ .loja-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--loja-cor) 16%, transparent), transparent); pointer-events: none; } .loja-tile:hover { translate: 0 -4px; rotate: -.4deg; border-color: color-mix(in srgb, var(--loja-cor) 55%, var(--borda)); box-shadow: var(--sombra-alta); } /* A marca ocupa a própria linha: com logo deitada não sobra largura pro nome ao lado, e empilhado o tile fica igual pra logo e pra monograma. */ .loja-tile__cabeca { display: flex; align-items: center; margin-bottom: .6rem; } .loja-tile__nome { font-family: var(--fonte-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; } /* A logo levanta junto com o card — reforça que o tile inteiro é um alvo. */ .loja-tile .marca-loja { transition: transform .18s cubic-bezier(.2, .8, .3, 1.4); } .loja-tile:hover .marca-loja { transform: rotate(-4deg) scale(1.08); } .loja-tile__total { font-size: .87rem; color: var(--texto-fraco); } .loja-tile__total strong { color: var(--loja-tinta); font-weight: 800; } .loja-tile__seta { margin-top: .65rem; font-size: .83rem; font-weight: 750; color: var(--verde-forte); transition: translate .18s; } .loja-tile:hover .loja-tile__seta { translate: 4px 0; } /* Loja sem cupom vigente: fica na lista (o link pode estar num post antigo), mas visualmente recuada pra não competir com quem tem cupom. */ .loja-tile--vazia { opacity: .62; box-shadow: none; } .loja-tile--vazia .loja-tile__total { font-style: italic; } /* ---- variante categoria ---- O emoji fica ao LADO do nome em vez de acima — sem a marca empilhada, o card fica bem mais baixo, e a grade cabe mais colunas por linha (ver .lojas-grid--categorias). Mesma ideia de .loja-tile--compacto, mas pra grade cheia de /categorias/. */ .loja-tile--categoria { flex-direction: row; align-items: center; gap: .8rem; padding: .85rem 1.1rem .85rem 1.3rem; } .loja-tile--categoria .loja-tile__corpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .loja-tile--categoria .loja-tile__nome { overflow-wrap: anywhere; } .loja-tile--categoria .marca-categoria { transition: transform .18s cubic-bezier(.2, .8, .3, 1.4); } .loja-tile--categoria:hover .marca-categoria { transform: scale(1.14) rotate(-6deg); } /* Home compact grid combines both: a bit tighter still so the emoji row doesn't grow taller than the store tiles sharing the same grid. */ .loja-tile--compacto.loja-tile--categoria { padding: .65rem .85rem .65rem 1rem; gap: .6rem; } .loja-tile--compacto.loja-tile--categoria .loja-tile__nome { font-size: .95rem; } .loja-tile--compacto.loja-tile--categoria .loja-tile__total { font-size: .78rem; } /* ---- variante compacta ---- A home mostra DUAS grades (categoria e loja). No tamanho cheio, a segunda nasceria abaixo da dobra e ninguém saberia que existe. Aqui a marca vai ao LADO do nome em vez de acima, o que corta a altura quase pela metade e deixa caber cinco por linha em vez de três. */ .lojas-grid--compacta { gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } .loja-tile--compacto { padding: .7rem .8rem .75rem 1.05rem; gap: .1rem; } .loja-tile--compacto .loja-tile__faixa { width: 5px; } .loja-tile--compacto .loja-tile__cabeca { flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: .3rem; min-width: 0; } .loja-tile--compacto .loja-tile__nome { font-size: .95rem; line-height: 1.2; /* Nome longo ("Casa e Cozinha", "Mercado Livre") não pode empurrar a largura do grid — quebra em duas linhas e o card acompanha. */ min-width: 0; overflow-wrap: anywhere; } .loja-tile--compacto .loja-tile__total { font-size: .78rem; } /* O glow acompanha o card menor, senão vaza pela borda. */ .loja-tile--compacto::after { width: 88px; height: 88px; right: -28px; top: -28px; } /* Sem "Ver cupons →": num card deste tamanho é ruído, e o card inteiro já é o alvo de clique. */ .loja-tile--compacto .loja-tile__seta { display: none; } @media (max-width: 520px) { .lojas-grid--compacta { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* Grade cheia de /categorias/: o card de categoria é mais baixo que o de loja (emoji ao lado, não empilhado), então cabe coluna mais estreita — mais células visíveis de uma vez sem precisar rolar. */ .lojas-grid--categorias { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; } @media (max-width: 520px) { .lojas-grid--categorias { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ============ índice de lojas (/lojas/) ============ */ /* Aqui a LOGO é o conteúdo, não um crachá ao lado do conteúdo. * * Nas outras telas a marca identifica outra coisa (um cupom, uma linha de * menu) e cabe num chip de 20-38px. Nesta a loja é o assunto, então ela ganha * uma PLACA branca própria — larga o suficiente pra um wordmark deitar na * proporção real — e a cor da marca pinta o card inteiro em vez de se * esconder numa faixa de 7px. A grade uniforme antiga fazia o contrário: * marca de 38px num card de 180px, que é de onde vinham as duas queixas * (logo pequena e espaço vazio). * * A placa é BRANCA em todos os níveis pelo mesmo motivo de .marca-loja: logo * de loja é desenhada pra fundo claro e muita delas tem tinta escura — sobre * a própria cor da marca, metade sumiria. * * Três níveis, porque o catálogo tem três (ver App\StoreShowcase): * .vitrine — as poucas lojas que carregam quase todo o estoque * .marcas-grid — a cauda longa, de 1 a 5 cupons * .marcas-fila — as sem cupom vigente, que só precisam continuar linkadas */ /* ---- placa: a logo ocupa a caixa inteira ---- * Diferente de --faixa (que fixa a ALTURA e solta a largura), aqui quem manda * é o container: a placa tem tamanho próprio e a logo se encaixa dentro dela * inteira, em qualquer proporção. É o que deixa a logo da Amazon (3,3:1) e a * do ML (quase quadrada) parecerem do mesmo tamanho na mesma linha. * * A imagem é limitada por max-width/max-height com width/height em AUTO, e a * placa é flex — nunca grid com place-items:center. Feito em grid, a linha é * dimensionada pelo conteúdo, então `height: 100%` no filho é circular e o * navegador resolve como `auto`: a logo volta à altura natural e vaza. Com * `overflow: hidden` na placa isso não aparece como estouro, aparece como * logo CORTADA — a do Kabum (4096x4096) renderizava 270x270 dentro de uma * placa de 86px de altura. Em flex, `align-items: stretch` dá ao filho a * altura definida da placa, e aí a porcentagem tem contra o que resolver. */ .marca-loja--placa { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: auto; min-width: 0; min-height: 0; background: none; border: 0; border-radius: 0; overflow: visible; } .marca-loja--placa .marca-loja__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; padding: 0; } /* Sem logo cadastrada a placa inverte: em vez de duas letrinhas perdidas num retângulo branco, o retângulo inteiro vira a cor da marca. */ .marca-loja--placa.marca-loja--mono { width: 100%; align-self: stretch; background: var(--loja-cor); color: var(--loja-chip-texto); border-radius: 0; font-size: clamp(1.3rem, 5vw, 2rem); } /* ---- nível 1: vitrine ---- */ .vitrine { display: grid; gap: 1rem; margin: .4rem 0 .5rem; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } .vitrine-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; padding: 1rem; text-decoration: none; color: var(--texto); border-radius: calc(var(--raio) + 4px); border: 1px solid color-mix(in srgb, var(--loja-cor) 30%, var(--borda)); /* O card VESTE a loja: o pálido da marca como fundo e um brilho da cor cheia no canto superior — é o que faz a grade inteira ler como uma estante de marcas em vez de uma tabela de nomes. */ background: radial-gradient(320px 200px at 100% 0%, color-mix(in srgb, var(--loja-cor) 22%, transparent), transparent 72%), var(--loja-suave); box-shadow: var(--sombra); /* opacity/transform pagam a entrada do .surge (ver a regra lá em cima); o lift de hover anda em translate, que é propriedade independente. */ transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1), translate .18s cubic-bezier(.2, .8, .3, 1.2), box-shadow .18s, border-color .18s; } .vitrine-card:hover { translate: 0 -5px; border-color: var(--loja-cor); box-shadow: var(--sombra-alta); } .vitrine-card__placa { display: flex; align-items: stretch; justify-content: center; height: 88px; padding: .85rem 1.15rem; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--loja-cor) 18%, var(--borda)); box-shadow: 0 1px 2px rgba(12, 27, 23, .04); } /* A logo cresce um tico no hover, sem girar: no tamanho de placa, a rotação que funciona num chip de 38px vira um solavanco. */ .vitrine-card__placa .marca-loja { transition: transform .2s cubic-bezier(.2, .8, .3, 1.3); } .vitrine-card:hover .vitrine-card__placa .marca-loja { transform: scale(1.05); } .vitrine-card__corpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } /* Nome e selo dividem a linha, o selo ancorado à direita. * `baseline` e não `center`: o selo é texto ao lado de texto, e alinhar as * duas linhas de base é o que faz a pastilha parecer parte da linha do * título em vez de um adesivo flutuando ao lado dela. Com nome comprido, a * base usada é a da PRIMEIRA linha — o selo fica no alto, junto do começo do * nome, que é onde o olho já está. */ .vitrine-card__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; min-width: 0; } .vitrine-card__nome { font-family: var(--fonte-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.028em; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; } .vitrine-card__numeros { font-size: .85rem; color: var(--texto-fraco); } .vitrine-card__numeros strong { color: var(--loja-tinta); font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; } .vitrine-card__quebra { display: block; font-size: .77rem; } /* Prateleira: a mercadoria da própria loja. Só marketplace tem foto de produto, então só marketplace ganha esta faixa — as lojas de código caem no bloco de desconto logo abaixo, que é a única promessa que elas podem fazer. */ /* `margin-top: auto` nos TRÊS blocos de manchete (aqui e no __desconto * abaixo): a grade estica todos os cards de uma linha até a mesma altura, e * sem isso a sobra cai no fim do card — o buraco do layout antigo de volta. * Empurrada pra cima, a sobra fica entre o nome e a manchete, e as manchetes * de uma linha se alinham por baixo mesmo quando são coisas diferentes * (prateleira num card, número em outro). */ .vitrine-card__prateleira { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; } .vitrine-card__foto { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--loja-cor) 15%, var(--borda)); } /* `contain`, não `cover`: as fotos vêm do anúncio da loja e chegam em proporções que não controlamos. `cover` preenche o quadrado mais bonito, mas corta as bordas — num anúncio de produto isso é cortar o produto, e uma foto cortada lê como bug. Sobre o fundo branco da moldura, o letterbox do `contain` é invisível quando a foto já é quadrada, que é o caso da maioria vinda de marketplace. */ .vitrine-card__foto img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 3px; } .vitrine-card__desconto { margin-top: auto; display: flex; align-items: baseline; gap: .4rem; padding: .55rem .9rem; border-radius: 12px; background: #fff; border: 1px dashed color-mix(in srgb, var(--loja-cor) 45%, transparent); } .vitrine-card__desconto strong { font-family: var(--fonte-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.05em; line-height: 1; color: var(--loja-tinta); font-variant-numeric: tabular-nums; } .vitrine-card__desconto span { font-size: .78rem; font-weight: 800; letter-spacing: .09em; color: var(--loja-tinta); } /* Variante 3 do bloco de manchete (ver a view): a contagem no lugar do desconto, pra loja cujos cupons não registram valor nenhum. Sólida em vez de tracejada — o tracejado é a linguagem de "cupom", e aqui não há cupom específico sendo prometido, só quantidade. */ .vitrine-card__desconto--total { border-style: solid; border-color: color-mix(in srgb, var(--loja-cor) 26%, var(--borda)); } .vitrine-card__desconto--total span { letter-spacing: 0; text-transform: none; font-weight: 750; } /* `flex: none` porque a pastilha é a metade que NÃO pode encolher: entre "Mercado Livre" e "até 67% OFF", quem quebra linha é o nome. */ .vitrine-card__selo { flex: none; background: var(--loja-cor); color: var(--loja-chip-texto); font-size: .75rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; } /* ---- nível 2: cauda longa ---- Mesma ideia da vitrine em escala menor: placa branca sobre o pálido da marca. O fundo pálido é o que faz a placa existir — placa branca sobre card branco não é placa nenhuma. */ .marcas-grid { display: grid; gap: .75rem; margin: 0 0 .5rem; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); } .marca-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem; padding: .75rem; text-decoration: none; color: var(--texto); background: var(--loja-suave); border: 1px solid color-mix(in srgb, var(--loja-cor) 24%, var(--borda)); border-radius: var(--raio); transition: translate .18s cubic-bezier(.2, .8, .3, 1.2), box-shadow .18s, border-color .18s; } .marca-card:hover { translate: 0 -3px; border-color: var(--loja-cor); box-shadow: var(--sombra-alta); } .marca-card__placa { display: flex; align-items: stretch; justify-content: center; height: 64px; padding: .5rem .7rem; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--loja-cor) 16%, var(--borda)); } .marca-card__nome { font-family: var(--fonte-display); font-weight: 800; font-size: .95rem; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; } .marca-card__total { margin-top: auto; font-size: .78rem; color: var(--texto-fraco); } .marca-card__total strong { color: var(--loja-tinta); font-weight: 800; font-variant-numeric: tabular-nums; } .marca-card__ate { display: block; font-weight: 750; color: var(--loja-tinta); } /* ---- nível 3: sem cupom vigente ---- Continuam linkadas (a página da loja guarda o texto de SEO, e link antigo ainda aponta pra lá), mas como pastilha e não como card: em tamanho de card, nove "sem cupom no momento" eram o maior bloco de vazio da página. */ .secao-titulo--quieto { font-size: 1.05rem; color: var(--texto-fraco); margin-top: 2.4rem; margin-bottom: .8rem; } .marcas-fila { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; } .marca-pastilha { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .45rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; text-decoration: none; color: var(--texto-fraco); font-size: .84rem; font-weight: 650; transition: border-color .18s, color .18s; } .marca-pastilha:hover { border-color: var(--loja-cor); color: var(--texto); } .marca-pastilha .marca-loja--faixa { --larg: 74px; } @media (max-width: 620px) { .vitrine { gap: .8rem; } .vitrine-card__placa { height: 74px; } .marcas-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .6rem; } .marca-card__placa { height: 52px; } } /* ============ LISTA de cupons ============ */ .cupons-lista { display: flex; flex-direction: column; gap: .85rem; } .cupom { position: relative; z-index: 0; /* segura o ::before (z-index -1) dentro do card */ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .35rem 1.1rem; align-items: center; /* O 6px extra à esquerda paga a faixa da loja, que mora no ::before. */ padding: 1.05rem 1.15rem 1.05rem calc(1.15rem + 6px); border-radius: var(--raio); /* O deep link #c-slug é COMO o tráfego do Telegram chega. O valor fixo de * 96px era menor que o header sticky real (198px no celular) e o cupom * apontado nascia escondido atrás dele. --topo-h é medida e publicada pelo * app.js; o 96px vira só o fallback de antes do JS rodar. */ scroll-margin-top: calc(var(--topo-h, 96px) + .75rem); /* Só a entrada do .surge (ver lá o porquê). `translate` e `box-shadow` * estavam nesta lista pelo lift de hover, que não existe mais — animar * propriedade que nada muda é só custo. */ transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); /* Borda e sombra REAIS, no próprio card. A versão anterior desenhava o * contorno com drop-shadows de 1px pra acompanhar furos recortados por * máscara — frágil e quase invisível. Os furos foram embora; o picote * tracejado (que é o que lê como ticket) ficou. */ --cupom-linha: var(--borda-forte); background: var(--superficie); border: 1px solid var(--cupom-linha); box-shadow: var(--cupom-sombra); } /* A faixa da loja: pseudo colado na borda esquerda, por baixo do conteúdo. * border-left num pseudo de altura cheia (e não no .cupom) pros modificadores * de borda (--top dourado, :target verde) não engolirem a cor da loja. */ .cupom::before { content: ""; position: absolute; inset: 0; z-index: -1; border-left: 6px solid var(--loja-cor); border-radius: inherit; } /* O card NÃO reage ao mouse — de propósito, e isto já foi o contrário. * * A linha inteira levantava 3px no hover, com sombra e contorno mudando * junto. Numa lista que existe pra ser varrida, isso vira a página se * mexendo debaixo do cursor: o card não é clicável (o alvo é o CTA), então * a elevação prometia um clique que não existe naquela área e ainda * empurrava o olho pra fora do lugar onde ele estava lendo. * * Quem responde ao mouse é o botão, que é o que de fato se clica — ver * `.cupom__cta:hover`. */ /* Cupom apontado por um link específico (Telegram/WhatsApp/"copiar link") — * TRÊS canais ligados ao mesmo tempo, porque nenhum um deles isolado se lê * contra dez cards igualmente sombreados na mesma lista: anel OPACO (não o * `--verde-luz` pastel de antes, que sobre `--superficie` branca é quase * invisível), fundo tingido, e uma sombra que só este card tem. Isto já * existia como só a sombra + um anel pastel de 3px — pouco demais pra * chamar atenção de verdade. * * `.cupom--destaque` é a classe que o SERVIDOR decide * (Controller\Site::highlightedCoupon, a partir de `?c=`) — ele sabe quando * o cupom expirou ou nunca pertenceu a esta página, o que `:target` sozinho * não sabe, e não se perde se a pessoa clicar em outra âncora da página. * `:target` continua aqui como rede de segurança pra um link antigo com só * `#c-slug`, sem `?c=`. */ .cupom:target, .cupom--destaque { --cupom-linha: var(--verde); background: var(--verde-luz); box-shadow: inset 0 0 0 3px var(--verde), var(--cupom-sombra-alta); /* Só na CHEGADA: um pulso curto que puxa o olho pro card certo assim que a * página carrega. O estado acima fica pra sempre — isto toca uma vez e * assenta de volta nele (a animação não tem `forwards` porque o valor de * repouso já é exatamente o `box-shadow` estático desta regra). */ animation: cupom-destaque-chegada 1.4s ease-out 1; } @keyframes cupom-destaque-chegada { 0%, 100% { box-shadow: inset 0 0 0 3px var(--verde), var(--cupom-sombra-alta); } 35% { box-shadow: inset 0 0 0 6px var(--verde), 0 0 0 10px var(--verde-luz), var(--cupom-sombra-alta); } } @media (prefers-reduced-motion: reduce) { .cupom:target, .cupom--destaque { animation: none; } } .cupom--top { --cupom-linha: #ecc94b; } .cupom__faixa { /* A faixa é larga o bastante pra alcançar a costura do picote. Sem o * z-index ela perde pro .cupom__picote (que vem depois no HTML) e o * tracejado atravessa o selo. */ position: absolute; z-index: 1; top: -.65rem; left: calc(1.1rem + 6px); background: linear-gradient(100deg, #ffe9a8, var(--ouro-luz)); color: var(--ouro); font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding: .16rem .6rem; border-radius: 999px; border: 1px solid #ecc94b; box-shadow: 0 3px 8px -3px rgba(138, 90, 0, .4); } /* O picote do ticket: linha tracejada vertical entre o canhoto e o corpo. * Só no desktop — no celular a linha cruzaria o CTA, que ocupa a base. */ .cupom__picote { display: none; } @media (min-width: 720px) { .cupom { /* Costura, medida do miolo do card (dentro da borda): faixa da loja * (6px) + padding (1.15rem) + canhoto (96px) + meia-calha (.6rem). */ --picote-x: calc(6px + 1.15rem + 96px + .6rem); } /* Os furos do picote: dois meio-círculos DESENHADOS (não recortados) nas * bordas de cima e de baixo, na cor do fundo da página com um aro na cor * da borda do card. O pseudo cobre o card inteiro e o gradiente pinta só * o que cai dentro dele — vira meia-lua sozinho, sem máscara. O aro usa * --cupom-linha, então acompanha o dourado do --top, o verde do :target e * o escurecer do hover de graça. Pintar (em vez de recortar por máscara) * é o que permite borda e box-shadow reais no card. */ /* inset -1px: o pseudo cresce por cima da borda de 1px do card, senão ela * atravessa a boca do furo como um fio. O +1px no X compensa a origem * deslocada e mantém o furo centrado no tracejado. */ .cupom::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: radial-gradient(circle 12px at calc(var(--picote-x) + 1px) 0, var(--bg) 9px, var(--cupom-linha) 10px 11px, transparent 12px), radial-gradient(circle 12px at calc(var(--picote-x) + 1px) 100%, var(--bg) 9px, var(--cupom-linha) 10px 11px, transparent 12px); pointer-events: none; } /* Tracejado por gradiente, não `border dashed`: o dashed nativo estica os * traços pra fechar a caixa e o ritmo muda de card pra card conforme a * altura. Aqui o passo é fixo (5px traço / 6px vão) e sempre igual. */ .cupom__picote { display: block; position: absolute; left: calc(var(--picote-x) - 1px); /* -1px = metade do tracejado, pra centrar */ /* Começa depois do furo (12px) com um respiro, senão a linha invade. */ top: 17px; bottom: 17px; width: 2px; border-radius: 1px; /* Um degrau mais escuro que a --borda-forte: com o cinza-claro puro a * linha sumia no fundo branco e o picote deixava de existir na prática. */ background: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--borda-forte) 55%, var(--texto-fraco)) 0 5px, transparent 5px 11px ); pointer-events: none; } } /* --- coluna 1: o número. Sempre no mesmo lugar em toda a lista. --- */ .cupom__selo { /* Encosta no topo da linha em vez de boiar no meio dela: o `align-items: * center` do grid centrava o selo (72px) contra o corpo (~190px no celular) * e abria ~59px de vão morto acima do número. Alinhado no topo, o desconto * fica na altura do chip da loja e do título — que é o par que o olho lê. */ align-self: start; background: var(--loja-suave); border: 1px solid color-mix(in srgb, var(--loja-cor) 35%, transparent); border-radius: 12px; min-height: 72px; padding: .5rem .3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .1rem; } .cupom__selo-valor { font-family: var(--fonte-display); font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--loja-tinta); overflow-wrap: anywhere; } .cupom__selo-rotulo { font-size: .64rem; font-weight: 800; letter-spacing: .1em; color: var(--loja-tinta); opacity: .75; } /* --- coluna 1, versão PRODUTO: a foto no lugar do canhoto --- Promoção sem código não é um ticket pra copiar, é um PRODUTO com preço. Onde dá pra mostrar a foto que o coletor leu do anúncio, ela ocupa a coluna do selo e o desconto vem numa tarja por cima — o olho lê mercadoria, não um cupom que esqueceu o código. A largura é a MESMA do selo (92px no celular, 96px no desktop) de propósito: é o que mantém título, preço e CTA alinhados entre um card e outro numa lista que mistura os dois tipos. */ .cupom__foto { align-self: start; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; /* Branco fixo, não var(--superficie): foto de e-commerce já vem recortada sobre branco. Amarrar a moldura à variável faria o dia em que ela mudar abrir um halo branco em volta de cada produto da lista. */ background: #fff; border: 1px solid var(--borda); } .cupom__foto-img { width: 100%; height: 100%; /* `contain`, não `cover`: recortar corta justamente a peça que a pessoa quer reconhecer. Sobra do lado é o branco do anúncio, que ninguém percebe. */ object-fit: contain; /* O respiro embaixo é a altura da tarja — sem ele o desconto tapa o produto. */ padding: .3rem .3rem 1.15rem; } /* A tarja do desconto: atravessa a base da foto, na cor da loja. É o equivalente do .cupom__selo aqui — o desconto continua sendo a primeira coisa que o olho pega na linha. */ .cupom__foto-selo { position: absolute; inset: auto 0 0 0; background: var(--loja-cor); color: var(--loja-chip-texto); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-align: center; padding: .2rem .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* O picote e os furos somem no card de produto: o recorte de ticket é o que diz "cupom", e aqui a promessa é outra. */ .cupom--produto .cupom__picote { display: none; } .cupom--produto::after { display: none; } /* --- coluna 2: conteúdo --- */ .cupom__corpo { min-width: 0; } .cupom__linha-topo { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; } .cupom__loja { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; background: var(--loja-cor); color: var(--loja-chip-texto); padding: .17rem .55rem; border-radius: 6px; } .cupom__tipo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); } /* Título e regras com clamp: é o que mantém TODAS as linhas na mesma altura. * O `min-height` de 2 linhas (2 × line-height 1.3) fecha o outro lado: sem ele * um título curto encolhe a linha e a lista fica serrilhada. */ .cupom__titulo { margin: 0 0 .2rem; font-size: 1.04rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .cupom__regras { margin: 0 0 .4rem; font-size: .83rem; color: var(--texto-fraco); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Nota do produto — só aparece quando a origem trouxe uma (não é obrigatória, mesma regra do preço logo abaixo). Sem altura reservada: é a mesma escolha que o preço já faz quando falta, não uma nova. */ .cupom__nota { margin: 0 0 .3rem; display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--ouro); } .cupom__nota-max { font-size: .74rem; font-weight: 600; color: var(--texto-fraco); } /* A linha de preço. Uma linha só, e quebra por item (não no meio do número): "R$ 1.234,90" partido ao meio é ilegível justo no dado que a pessoa veio conferir. `center`, não `baseline`: os três têm tamanhos e caixas diferentes (texto miúdo, número grande, pílula com borda), e alinhar pelo pé da letra jogava a etiqueta ~2px abaixo do meio do preço — pouco, e ainda assim visível porque a pílula tem contorno próprio. Centrados, os três sentam na mesma linha do olho. */ .cupom__preco { margin: 0 0 .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; } .cupom__preco-de { font-size: .78rem; color: var(--texto-fraco); white-space: nowrap; } .cupom__preco-por { font-family: var(--fonte-display); font-size: 1.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--texto); white-space: nowrap; } /* O quanto cai, em reais. Vende mais que a porcentagem — "economize R$ 149,90" é dinheiro, "50% OFF" é conta. Os dois convivem: a tarja da foto tem a porcentagem, esta etiqueta tem o valor. */ .cupom__preco-economia { font-size: .73rem; font-weight: 800; letter-spacing: .01em; color: var(--verde-forte); background: var(--verde-luz); border: 1px solid color-mix(in srgb, var(--verde) 25%, transparent); padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; } /* No celular as 4 provas são um GRID 2×2 ocupando a LARGURA INTEIRA do card. * Dentro da coluna do corpo (só ~190px num iPhone) cada prova quebrava em duas * linhas e o bloco ia a 83px — o card a 314px, ou seja 2,3 cupons por tela. * Atravessando o card sobram ~146px por coluna e a prova mais longa ("Sem * prazo definido", 112px) cabe numa linha só. As colunas ainda alinham as * provas de um cupom com as do outro, que é o ponto da lista. */ .cupom__provas { grid-column: 1 / -1; list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; font-size: .77rem; color: var(--texto-fraco); } @media (min-width: 720px) { /* No desktop sobra largura: as provas voltam pra baixo do corpo, em linha. */ .cupom__provas { grid-column: 2; display: flex; flex-wrap: wrap; margin-top: .1rem; } } .prova strong { color: var(--texto); } .prova--ok { color: var(--verde-forte); } .prova--ok strong { color: var(--verde-forte); } .prova--urgente { color: var(--vermelho); font-weight: 700; } /* --- o CTA. No celular ocupa a linha inteira (alvo de toque máximo); no desktop vira a terceira coluna, sempre na mesma posição. --- */ .cupom__acao { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; margin-top: .65rem; } @media (min-width: 720px) { .cupom { grid-template-columns: 96px minmax(0, 1fr) 240px; gap: 0 1.2rem; } /* No desktop a linha é baixa (o corpo cabe em ~118px) e selo e CTA voltam a ficar centrados nas DUAS linhas (corpo + provas) — o vão morto do celular não existe aqui, e é o que mantém as três colunas na mesma altura. */ .cupom__selo { grid-row: 1 / span 2; align-self: center; } /* A foto ocupa as duas linhas e fica CENTRADA nelas, igualzinho ao selo: os dois tipos de card convivem na mesma lista, e a foto ancorada no topo deixava o produto num degrau acima do desconto do card vizinho. O `center` não estica nada — o `aspect-ratio: 1` já fixou o tamanho, isto só decide onde ele senta na linha. */ .cupom__foto { grid-row: 1 / span 2; align-self: center; } .cupom__acao { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; } } /* --- o botão: um alvo só, o elemento mais pesado da linha --- */ .cupom__cta { position: relative; display: flex; align-items: stretch; width: 100%; font: inherit; cursor: pointer; text-align: left; text-decoration: none; border: 0; border-radius: 12px; overflow: hidden; background: var(--verde); box-shadow: 0 3px 0 var(--verde-escuro); transition: background .15s, transform .15s cubic-bezier(.2, .8, .3, 1.3), box-shadow .15s; } /* O botão levanta e ganha sombra própria. Com o card parado, esta é a ÚNICA * coisa que se move na linha — que é exatamente o recado: o alvo do clique * é aqui. */ .cupom__cta:hover { background: var(--verde-forte); transform: translateY(-1px); box-shadow: 0 4px 0 var(--verde-escuro), 0 12px 20px -10px rgba(0, 122, 63, .6); } .cupom__cta:active { transform: translateY(3px); box-shadow: none; } /* Brilho que varre o botão. Disparava no hover do CARD inteiro, pra quem * passasse pela linha ver o CTA acenar de longe — e era metade do problema: * o brilho acendia sozinho quando o cursor só atravessava a lista. Agora sai * do hover do próprio botão, junto com o resto da resposta dele. */ .cupom__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; } .cupom__cta:hover::after { transition: transform .55s ease; transform: translateX(110%); } @media (prefers-reduced-motion: reduce) { .cupom__cta::after { display: none; } } .cupom__cta-texto { flex: 1; padding: .8rem .95rem; color: #fff; font-weight: 800; font-size: .97rem; letter-spacing: -.01em; display: flex; align-items: center; white-space: nowrap; } /* O "espia": 2 primeiras letras e pontos. Prova que existe código de verdade * — que é o que faz clicar — sem entregar o código. */ .cupom__cta-codigo { display: flex; align-items: center; justify-content: center; min-width: 88px; padding: .8rem .6rem; background: rgba(255, 255, 255, .2); border-left: 2px dashed rgba(255, 255, 255, .6); color: #fff; font-weight: 800; font-size: .92rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; white-space: nowrap; transition: background .2s, letter-spacing .2s; } /* O espia clareia e abre as letras junto com o hover do botão: o código * "se mostra" um pouco mais — reforço do que o clique vai entregar. */ .cupom__cta:hover .cupom__cta-codigo { background: rgba(255, 255, 255, .32); letter-spacing: .09em; } /* Ticket revelado dentro do modal de cupons aplicáveis (ver app.js * `revelarNoTicket`): o botão vira um alvo só de copiar — ícone de * clipboard fixo à esquerda, código por inteiro ocupando o resto — em vez * do "Ver cupom" + espia tracejado, que é o que fazia o texto colidir com o * código quando os dois cabiam na mesma largura de sempre. */ .cupom__cta--revelado .cupom__cta-texto { flex: 0 0 auto; padding: .8rem 0 .8rem .95rem; font-size: 1.05rem; } .cupom__cta--revelado .cupom__cta-codigo { flex: 1; justify-content: flex-start; min-width: 0; padding: .8rem .95rem .8rem .5rem; background: transparent; border-left: 0; font-size: .92rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; } .cupom__cta--revelado:hover .cupom__cta-codigo { background: transparent; letter-spacing: .04em; } /* Confirmação rápida de "copiado" — mesmo verde do hover, sem esperar o * ícone voltar a virar clipboard (ver o setTimeout em app.js). */ .cupom__cta--copiado { background: var(--verde-forte); } /* O padding é o alvo de toque: sem ele o link tinha ~14px de altura, longe do mínimo confortável no dedo. O texto continua discreto. */ .cupom__compartilhar { align-self: center; font-size: .74rem; color: var(--texto-fraco); text-decoration: none; padding: .45rem .8rem; margin: -.15rem 0; } .cupom__compartilhar:hover { color: var(--texto); text-decoration: underline; } /* ============ Abas Cupons / Ofertas (loja + categoria) ============ * * Controle segmentado grande: duas "gavetas" com badge de contagem. Ativo * ganha superfície branca + sombra — o mesmo idioma visual do admin * (`.abas`), mas com escala de página pública. */ .cupom-abas { margin: 1.6rem 0 0; } .cupom-abas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 1.25rem; padding: 4px; background: linear-gradient(180deg, var(--superficie-2), color-mix(in srgb, var(--superficie-2) 70%, var(--borda))); border: 1px solid var(--borda); border-radius: calc(var(--raio) + 2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); } .cupom-abas__aba { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.85rem; padding: .6rem .85rem; border: 0; border-radius: calc(var(--raio) - 2px); background: transparent; color: var(--texto-fraco); font: inherit; font-family: var(--fonte-display); font-size: clamp(.92rem, 2.4vw, 1.05rem); font-weight: 750; letter-spacing: -.015em; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .cupom-abas__aba:hover { color: var(--texto); background: rgba(255, 255, 255, .55); } .cupom-abas__aba--atual { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(12, 27, 23, .06), 0 8px 18px -10px rgba(12, 27, 23, .22); font-weight: 800; } .cupom-abas__aba--atual:hover { background: var(--superficie); color: var(--texto); } .cupom-abas__icone { display: inline-flex; flex: none; color: currentColor; opacity: .7; } .cupom-abas__aba--atual .cupom-abas__icone { opacity: 1; color: var(--verde-forte); } .cupom-abas__rotulo { min-width: 0; line-height: 1.15; text-align: left; } .cupom-abas__badge { flex: none; min-width: 1.55rem; height: 1.4rem; padding: 0 .42rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: var(--fonte-corpo); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; background: color-mix(in srgb, var(--borda) 80%, var(--superficie)); color: var(--texto-fraco); border: 1px solid var(--borda); } .cupom-abas__aba--atual .cupom-abas__badge { background: var(--verde-luz); color: var(--verde-escuro); border-color: color-mix(in srgb, var(--verde) 35%, transparent); } /* Com JS: painel inativo some. Sem JS (sem html.js): os dois painéis ficam * empilhados — o `hidden` do servidor é ignorado pra ninguém perder ofertas. */ html.js .cupom-abas__painel[hidden] { display: none !important; } html:not(.js) .cupom-abas__painel[hidden] { display: block !important; margin-top: 2rem; } html:not(.js) .cupom-abas__lista { pointer-events: none; } /* No celular o rótulo "Ofertas imperdíveis" aperta: quebra em duas linhas. */ @media (max-width: 420px) { .cupom-abas__aba { flex-wrap: wrap; gap: .3rem .4rem; padding: .55rem .5rem; min-height: 3.1rem; } .cupom-abas__rotulo { flex: 1 1 100%; order: 3; font-size: .88rem; text-align: center; } .cupom-abas__icone { order: 1; } .cupom-abas__badge { order: 2; margin-left: auto; } } /* ============ cupons aplicáveis (produto sem código → cupons da mesma loja) ============ * * Uma promoção sem código pode ter cupons PUROS (sem foto/preço próprios) da * MESMA loja que se aplicam em cima dela * (Repo\Coupon::eligibleByStores/applicableToPrice) — este é o "X cupons * disponíveis". O botão em si é compartilhado pelo ticket (.cupom) e pelo * tile de grade (.cupom-grid); a LISTA mora num