/** * fancy-ui.css — camada de refino visual da loja. * * Carregado DEPOIS do style.css, de propósito: aqui moram as decisões de * design que sobrescrevem o desenho base, e ficar num arquivo separado * deixa claro o que é "estrutura" (style.css) e o que é "acabamento" * (este arquivo) — dá para reverter o acabamento inteiro removendo um * enqueue, sem tocar no layout. * * O problema que esta camada resolve: a loja tinha desenho competente mas * genérico, porque TUDO era o mesmo objeto — um retângulo branco com borda * de 1px, sombra suave e raio de 20px. Barra de benefícios, cartão de * produto, passo do "como funciona", kit, bloco de coleção: todos iguais, * empilhados, muitas vezes um dentro do outro. Sem diferença de peso * visual, o olho não sabe onde pousar e a página parece um template. * * As duas decisões centrais: * * 1. BORDA SAI, LUZ ENTRA. Nada de contorno de 1px para separar coisas. * A separação passa a vir de fundo, espaço e sombra — o que também * resolve o efeito "caixa dentro de caixa", já que caixas sem * contorno simplesmente deixam de ser lidas como caixas. * * 2. A ARTE É O PRODUTO. Numa loja de bottons o que vende é a imagem. * O cartão é moldura mínima: a arte ganha o topo inteiro e cresce * suavemente no hover; nome, preço e botão ficam abaixo dela, sempre * visíveis. * * HISTÓRICO — o que foi tentado e desfeito, para não ser reinventado: * * - Layouts diferentes por vitrine (bento no destaque, ranking numerado * nos favoritos, fita compacta nas novidades). A loja preferiu todas * as vitrines na mesma grade, com cards de tamanho igual lado a lado. * * - Botão de CTA sobreposto à imagem, aparecendo no hover. Além de * esconder a ação principal de quem usa toque, tinha um defeito de * posicionamento: `.card-actions` é irmão de `.card-image`, então o * absolute se ancorava no cartão e caía em cima do nome e do preço. */ /* ===================================================================== IDENTIDADE — FONTE DE TÍTULO ===================================================================== A OBO Star é a fonte que a loja usa nos títulos da identidade visual. O @font-face abaixo aponta para assets/fonts/ (ver LEIA-ME.txt ali). Se os arquivos não existirem, o navegador ignora este bloco em silêncio e cai na Poppins — a página continua correta, só sem o traço da marca. `font-display: swap` garante que o texto apareça imediatamente com a fonte de fallback e troque quando a da marca chegar, em vez de ficar invisível esperando o download. ===================================================================== */ @font-face { font-family: 'OBO Star'; /* O `?v=` não é decoração. Diferente do CSS e do JS, que o WordPress versiona com filemtime no enqueue, a URL de uma fonte dentro do CSS não tem versionamento nenhum — e esta URL passou meses respondendo 404, antes de o arquivo existir. Qualquer cache no caminho (o LiteSpeed guarda 404 por uma hora; proxies e navegadores podem guardar mais) fica preso na falha para sempre, porque a URL nunca muda. Trocar o número força uma busca nova em toda a cadeia. Ao substituir o arquivo, mude este valor também. */ src: url('../fonts/obo-star.woff?v=20260727') format('woff'); /* Peso 400 e NÃO a faixa `400 900` que estava aqui antes. A faixa é sintaxe de fonte VARIÁVEL — um arquivo só cobrindo vários pesos — e o arquivo que a loja tem é estático (tem tabela CFF, não tem fvar). Declarar a faixa mentia para o navegador: ele acreditava que a face cobria 800 nativamente e desenhava os contornos do regular sem engrossar, então os títulos, que pedem 800, saíam com peso de texto normal e ninguém entendia por quê. Com 400 declarado o navegador sabe que precisa fabricar o negrito. Se algum dia existir o arquivo do peso negrito, ele entra como um @font-face SEPARADO com `font-weight: 700` (ou 800) e mesma font-family — nunca como faixa num arquivo estático. */ font-weight: 400; font-style: normal; font-display: swap; } :root { /* Pilha de título: marca primeiro, Poppins como rede de segurança. */ --fancy-display: 'OBO Star', 'Poppins', system-ui, sans-serif; /* Sombras em camadas: uma difusa para o volume, uma curta e escura para o contato com a superfície. Uma sombra só sempre parece chapada. */ --fancy-elev-1: 0 1px 2px rgba(24, 6, 10, 0.04), 0 8px 24px -8px rgba(24, 6, 10, 0.10); --fancy-elev-2: 0 2px 4px rgba(24, 6, 10, 0.05), 0 18px 40px -12px rgba(168, 11, 30, 0.18); --fancy-elev-3: 0 4px 8px rgba(24, 6, 10, 0.06), 0 32px 64px -16px rgba(168, 11, 30, 0.28); --fancy-creme: #FFF8F5; --fancy-rosa-fundo: #FFF1F3; --fancy-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ===================================================================== TOQUE — sem o realce azul/cinza padrão do celular --------------------------------------------------------------------- No Chrome/Safari de celular, TODO elemento clicável pisca um retângulo translúcido ao ser tocado — é o feedback padrão do sistema, pensado para uma página sem nada mais. Aqui cada botão e cartão já tem o PRÓPRIO feedback de toque desenhado (a "tecla física" que desce e a sombra que encolhe no botão vermelho, a arte que sobe no card) — o retângulo do sistema só sobra por cima, quadrado, sem seguir o raio da borda do elemento, e é isso que "estraga" o visual: ele não combina com nada que já foi desenhado. Duas correções pontuais desse mesmo problema já existiam (a barra de navegação e a busca do celular, mais abaixo neste arquivo/no style.css) — alguém bateu nisso antes, mas só nesses dois lugares. Esta regra cobre o site inteiro de uma vez; as duas antigas viraram redundantes e saíram. `html`, não `*`: é o padrão usado por praticamente todo mundo para esta propriedade especificamente — nas duas correções pontuais que já existiam funcionava assim (aplicada no próprio elemento, sem precisar de `*`), e `html` chega a tudo por baixo do mesmo jeito. */ html { -webkit-tap-highlight-color: transparent; } /* ===================================================================== TÍTULOS ===================================================================== */ /* A OBO Star é EXCLUSIVA de título. Esta lista é a definição do que conta como título na loja — título de seção, o h1 da página de categoria e os h2 do CTA final e do modal. Nada mais. Saíram daqui, por não serem títulos: a quantidade dos kits (.fancy-kit-card .kit-qty), o número dos passos (.fancy-how-steps .step-num) e o nome do produto no carrossel de destaque (.fancy-dst-card .dst-name). Os três voltaram a herdar a Poppins do body. O botão "Adicionar" tem regra própria, com o motivo anotado lá. */ .fancy-section-title, .fancy-category-header h1, .fancy-cta-final h2, .fancy-modal-box h2 { font-family: var(--fancy-display); letter-spacing: -0.02em; } /* Título é VERMELHO da marca, não o cinza do texto corrido. O cinza vinha do `color: var(--fancy-texto)` (#1e1e1e) declarado no style.css. A troca é feita aqui, no título, e NÃO na variável: a --fancy-texto é a cor de todo o texto do site, e mexer nela pintaria parágrafos, preços e nomes de produto de vermelho. Usa var(--fancy-vermelho) (#A80B1E), que é o vermelho já usado em botões, ícones e links da loja — um único lugar para ajustar a cor da marca. .fancy-cta-final h2 fica FORA de propósito: aquele bloco tem fundo em gradiente vermelho e texto branco, então pintar o título de vermelho o tornaria ilegível. Ele não era cinza para começar. */ .fancy-section-title, .fancy-category-header h1, .fancy-modal-box h2 { color: var(--fancy-vermelho); } .fancy-section-title { /* Reduzido de clamp(23px, 3.2vw, 36px). A OBO Star é bem mais larga e toda em caixa alta, então no mesmo corpo em px ela lê muito maior que a Poppins que estava aqui antes — a medida que fazia sentido para uma não serve para a outra. */ font-size: clamp(20px, 2.7vw, 31px); font-weight: 800; margin-bottom: 8px; } /* O ícone vira um detalhe pequeno acima do título, não um elemento do mesmo peso ao lado dele — assim o título respira e a linha fica limpa. */ .fancy-section-title .icon { display: block; margin: 0 auto 10px; font-size: 15px; width: 38px; height: 38px; line-height: 38px; border-radius: 50%; background: var(--fancy-rosa); color: var(--fancy-vermelho); } .fancy-section-sub { font-size: clamp(13.5px, 1.4vw, 15.5px); max-width: 52ch; color: var(--fancy-cinza-texto); } /* Um traço curto sob o título, no lugar da linha de borda que separava seções. Marca o início do bloco sem desenhar uma caixa. */ .fancy-section-title::after { content: ''; display: block; width: 46px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--fancy-vermelho), var(--fancy-rosa-hover)); } /* ===================================================================== FIM DAS BORDAS --------------------------------------------------------------------- Um seletor único zera o contorno de todos os objetos que antes eram "retângulo com borda". Mantidos: campos de formulário (onde a borda é affordance de digitação) e o carrinho/checkout, que têm regras próprias. ===================================================================== */ .fancy-product-card, .fancy-plush-card, .fancy-art-card, .fancy-kit-card, .fancy-benefits .benefit, .fancy-how-steps li, .fancy-collection-block, .fancy-category-sidebar, .fancy-mini-card { border: none; box-shadow: var(--fancy-elev-1); } /* A seção de coleções da página de categoria era um cartão branco com borda contendo outros cartões. Vira só um bloco com respiro. */ .fancy-collection-block { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } .fancy-collection-block + .fancy-collection-block { margin-top: 8px; } .collection-header { border-bottom: none; } /* ===================================================================== BANDAS DE FUNDO --------------------------------------------------------------------- Seções que sangram para a largura toda da tela com um fundo próprio, em vez de empilhar mais um cartão dentro do container. Dá ritmo à página (claro / creme / rosa) e separa blocos por ambiente, não por contorno. Hoje só as seções de Kits e "Como funciona" usam isso, e ambas estão temporariamente ocultas (ver os sinalizadores no topo do front-page.php). As regras ficam aqui prontas para quando elas voltarem. POR QUE o fundo vem de um ::before e não de margem negativa: A primeira versão usava `margin-inline: calc(50% - 50vw)`. O problema é que `100vw` inclui a largura da barra de rolagem, enquanto `100%` não: a banda ficava alguns pixels mais larga que a área visível, criando transbordo horizontal. Transbordo faz aparecer a barra horizontal, que por sua vez muda a altura útil e o valor de `vw` — e o navegador entra num vaivém de relayout. Em teste isso travou o renderizador. Aqui a banda não muda de tamanho: ela só ganha um retângulo pintado atrás, posicionado de forma absoluta. É pintura, não layout, então não existe transbordo possível. O `overflow-x: clip` no elemento pai apara o que passar da borda SEM criar um contêiner de rolagem (diferente de `hidden`, que quebraria o `position: sticky` do cabeçalho). */ .fancy-home, .fancy-category-page { overflow-x: clip; } .fancy-band { position: relative; padding-block: clamp(44px, 6vw, 86px); isolation: isolate; } .fancy-band::before { content: ''; position: absolute; z-index: -1; inset-block: 0; left: 50%; transform: translateX(-50%); width: 100vw; } .fancy-band--creme::before { background: var(--fancy-creme); } .fancy-band--rosa::before { background: var(--fancy-rosa-fundo); } /* ===================================================================== CARTÃO DE PRODUTO — a arte ocupa tudo --------------------------------------------------------------------- O botão "Personalizar" saía impresso em todos os cartões o tempo todo, competindo com a arte e criando uma parede de vermelho. Agora ele sobe sobre a imagem só no hover (e no foco pelo teclado). No toque, onde não existe hover, ele permanece visível — ver bloco de acessibilidade. ===================================================================== */ .fancy-product-card, .fancy-art-card { background: #fff; border-radius: 18px; padding: 0; overflow: hidden; transition: transform 0.45s var(--fancy-ease), box-shadow 0.45s var(--fancy-ease); } .fancy-product-card:hover, .fancy-art-card:hover, .fancy-product-card:focus-visible, .fancy-art-card:focus-visible { transform: translateY(-6px); box-shadow: var(--fancy-elev-2); } .fancy-product-card .card-image, .fancy-art-card .art-card-image { margin: 0; border-radius: 0; position: relative; overflow: hidden; background: var(--fancy-rosa); } .fancy-product-card .card-image img, .fancy-art-card .art-card-image img { transition: transform 0.7s var(--fancy-ease); } .fancy-product-card:hover .card-image img, .fancy-art-card:hover .art-card-image img { transform: scale(1.07); } .fancy-product-card .card-name { font-size: 14.5px; font-weight: 600; padding: 14px 14px 0; margin: 0; } .fancy-product-card .card-price { padding: 2px 14px 14px; margin: 0; font-size: 17px; } .fancy-product-card .card-price .from { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1px; } /* O botão fica no FLUXO, abaixo do preço. Houve uma tentativa de sobrepô-lo à imagem, aparecendo só no hover. Não funcionou: `.card-actions` é irmão de `.card-image`, não filho dela, e o ancestral posicionado mais próximo é o cartão inteiro — então o `position:absolute` jogava o botão para o rodapé do CARTÃO, bem em cima do nome e do preço. Além de esconder o CTA principal atrás de um hover, que só existe em quem usa mouse. */ .fancy-product-card .card-actions { padding: 0 14px 14px; margin-top: auto; } .fancy-art-card .art-card-btn { margin: 10px; } /* ===================================================================== PELÚCIAS — cartão macio, para não parecer um botton ===================================================================== */ .fancy-plush-card { background: linear-gradient(170deg, #fff 60%, var(--fancy-rosa-fundo)); border-radius: 24px; transition: transform 0.45s var(--fancy-ease), box-shadow 0.45s var(--fancy-ease); } .fancy-plush-card:hover { transform: translateY(-6px); box-shadow: var(--fancy-elev-2); } .fancy-plush-card .plush-image { background: transparent; border-radius: 18px; } .fancy-plush-card .plush-image img { transition: transform 0.6s var(--fancy-ease); } .fancy-plush-card:hover .plush-image img { transform: scale(1.06) rotate(-2deg); } /* ===================================================================== BENEFÍCIOS — linha de texto, não fileira de caixas ===================================================================== */ .fancy-benefits .benefit { background: transparent; box-shadow: none; padding: 10px 4px; } .fancy-benefits .benefit:hover { box-shadow: none; } .fancy-benefits .benefit i { background: transparent; color: var(--fancy-vermelho); width: auto; height: auto; font-size: 19px; } /* ===================================================================== COMO FUNCIONA — passos numerados, sem cartões ===================================================================== */ .fancy-how-section { background: transparent; padding-left: 0; padding-right: 0; } .fancy-how-steps li { background: transparent; box-shadow: none; padding: 0 10px; } .fancy-how-steps li:hover { transform: none; box-shadow: none; } /* O número deixa de ser um selo colado no topo e vira marca d'água atrás do passo — dá profundidade sem acrescentar mais um objeto na tela. */ .fancy-how-steps .step-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; background: none; color: var(--fancy-vermelho); opacity: 0.07; /* Sem a --fancy-display: é um algarismo de fundo, não um título. */ font-size: 108px; font-weight: 800; line-height: 1; pointer-events: none; z-index: 0; } .fancy-how-steps li > *:not(.step-num) { position: relative; z-index: 1; } /* ===================================================================== KITS — etiqueta de preço, não cartão ===================================================================== */ .fancy-kit-card { background: #fff; border-radius: 18px; transition: transform 0.45s var(--fancy-ease), box-shadow 0.45s var(--fancy-ease); } .fancy-kit-card:hover { transform: translateY(-6px); box-shadow: var(--fancy-elev-2); } .fancy-kit-card .kit-qty { font-size: 46px; background: linear-gradient(135deg, var(--fancy-vermelho), #e0566b); -webkit-background-clip: text; background-clip: text; color: transparent; } .fancy-kit-card .kit-badge { background: var(--fancy-texto); box-shadow: none; } .fancy-kit-card .kit-cta { background: transparent; color: var(--fancy-vermelho); border: 1.5px solid currentColor; transition: background 0.3s var(--fancy-ease), color 0.3s var(--fancy-ease); } .fancy-kit-card:hover .kit-cta { background: var(--fancy-vermelho); color: #fff; } /* ===================================================================== PERSONALIZADOS — carrossel com card em foco --------------------------------------------------------------------- Vitrine onde o produto central é o protagonista: ele fica em tamanho cheio e reto, e os vizinhos aparecem menores, levemente tortos e apagados — é a inclinação que dá o ar de adesivo espalhado na mesa, e não de tabela. MUDANÇA EM RELAÇÃO À VERSÃO ANTERIOR: o card em foco não é mais um bloco vermelho cheio. Agora todos os cards são brancos com contorno, e o destaque vem de ESCALA e nitidez, não de cor. O motivo prático: a arte do produto é o que a cliente precisa ver para escolher, e sobre fundo vermelho as artes claras somem. O vermelho da marca continua presente na pílula do nome, no preço e no botão. O carrossel é INFINITO: os cards são triplicados por JavaScript e o trilho salta de volta ao bloco do meio quando sai dele. Ver fancy-destaque.js — o salto acontece sem transição, por isso existe a classe `.is-teleporting` aqui. SEM JAVASCRIPT: os cards renderizados pelo PHP aparecem em fila, roláveis na horizontal, todos em tamanho cheio e clicáveis. Perde-se o carrossel, não o acesso aos produtos. ===================================================================== */ .fancy-dst { position: relative; margin-top: 8px; padding: 12px clamp(34px, 5vw, 68px) 4px; isolation: isolate; } /* ---------- Fundo Y2K ---------- Ondas grossas e estrelas chapadas em opacidade baixíssima. Fica em `z-index: -1` dentro do próprio `isolation: isolate` do pai, então nunca sobe por cima dos cards nem escapa para outras seções. `pointer-events: none` porque é enfeite: não pode roubar o clique dos cards nem o arrasto no celular. */ .fancy-dst-fundo { position: absolute; inset: 8px 10px; z-index: -1; overflow: hidden; border-radius: 52px; pointer-events: none; } .fancy-dst-fundo svg { display: block; width: 100%; height: 100%; } .fancy-dst-onda { fill: none; stroke: var(--fancy-vermelho); stroke-width: 58; stroke-linecap: round; stroke-linejoin: round; opacity: 0.075; } .fancy-dst-estrela { fill: var(--fancy-vermelho); opacity: 0.065; } .fancy-dst-viewport { overflow: hidden; padding: 25px 0 34px; /* `pan-y` deixa a rolagem vertical da página passar normalmente e reserva o gesto horizontal para o carrossel. Sem isso, arrastar de lado no celular rolava a página na diagonal. */ touch-action: pan-y; } .fancy-dst-track { display: flex; align-items: center; gap: 18px; will-change: transform; transition: transform 0.56s cubic-bezier(0.22, 0.72, 0.22, 1); } /* Durante o salto do laço infinito TUDO precisa ficar imóvel — o trilho e também os cards, senão a mudança de escala do card que entra em foco aparece como um "pisca" no meio do teleporte. LISTA INCOMPLETA POR UM BOM TEMPO: faltavam `.dst-cta` e `.dst-info`. O teleporte troca qual clone tem `.is-active` de forma síncrona — o clone que perde o foco e o que ganha são o MESMO produto, então a troca deveria ser invisível. Mas `.dst-cta` tem transição própria de `max-height` (0.5s) e `opacity` (0.34s), e `.dst-info` tem a própria de `margin-top` (0.48s) — nenhuma delas herda o `transition: none` do card pai (CSS não propaga transição de pai para filho). Resultado: bem no instante do salto, o botão de um clone começa a recolher e o do outro a abrir, e o preço desliza — um "pequeno salto/reset visual perceptível" relatado por uma beta tester, sempre no mesmo ponto do ciclo (ao voltar para o primeiro produto). Sem esses dois seletores aqui, a defesa contra esse exato bug fica furada pela metade. */ .fancy-dst-track.is-teleporting, .fancy-dst-track.is-teleporting .fancy-dst-card, .fancy-dst-track.is-teleporting .dst-media, .fancy-dst-track.is-teleporting .dst-media img, .fancy-dst-track.is-teleporting .dst-cta, .fancy-dst-track.is-teleporting .dst-info { transition: none !important; animation: none !important; } /* ---------- O card ---------- */ .fancy-dst-card { --dst-largura: min(315px, 72vw); --dst-tilt: 0deg; position: relative; flex: 0 0 var(--dst-largura); box-sizing: border-box; /* 378px — ajustado por medição real na página (não só pela conta no papel), para a margem do preço até o fundo do card fechar igual à margem do botão até o fundo do card em destaque. A primeira estimativa (411px) errou por ~33px porque o card fora de foco tem `transform: scale(0.93)` — a medida em tela vem escalada, e é fácil confundir pixel escalado com pixel real. Qualquer novo ajuste aqui precisa medir `getBoundingClientRect()` e DIVIDIR pela escala antes de comparar com o card em destaque (que não tem `scale`, é a referência real). */ min-height: 378px; padding: 20px; /* NÃO usar `display: flex` aqui. Foi tentado (para centralizar pílula+imagem+preço verticalmente e fechar o vão que sobra quando o botão está escondido) e revertido: o `align-items: stretch` padrão do flex esticava a pílula do nome (`.dst-name`, que é `inline-block` de propósito, do tamanho do próprio texto) para a largura cheia do card — virou uma barra de tamanho fixo em vez de acompanhar o nome. A loja preferiu o layout de fluxo normal de antes: nome encostado no topo, foto, preço, e o botão só entra quando o card está em foco. */ border: 1.5px solid rgba(168, 11, 30, 0.38); border-radius: 28px; background: radial-gradient(circle at 14% 10%, rgba(255, 241, 243, 0.62), transparent 24%), #fff; box-shadow: 6px 7px 0 rgba(168, 11, 30, 0.16); color: var(--fancy-texto); text-align: center; cursor: pointer; overflow: hidden; user-select: none; /* Fora de foco: menor, torto e apagado. */ transform: scale(0.86) rotate(var(--dst-tilt)); opacity: 0.58; transition: transform 0.56s cubic-bezier(0.22, 0.72, 0.22, 1), opacity 0.36s ease, box-shadow 0.38s ease, border-color 0.38s ease, min-height 0.56s cubic-bezier(0.22, 0.72, 0.22, 1); } .fancy-dst-card:focus-visible { outline: 3px solid var(--fancy-vermelho); outline-offset: 3px; } /* Vizinho imediato: um degrau entre o foco e o resto, para a fila não parecer que cai de um penhasco. */ .fancy-dst-card.is-near { opacity: 0.82; transform: scale(0.93) rotate(var(--dst-tilt)); } .fancy-dst-card.is-active { /* Era 500px — medido, isso deixava 53px do fim do botão até o fim do card, "grande e desconfortável" na avaliação da loja. Reduzido para fechar em ~28px, perto do padding do próprio card (20px) mais uma respiração pequena. */ min-height: 475px; /* Reto e em tamanho cheio: a ausência de inclinação é parte do que diz "este é o escolhido". */ transform: scale(1) rotate(0deg); opacity: 1; border-color: rgba(168, 11, 30, 0.72); /* O anel branco separa o card do fundo Y2K antes da sombra começar. */ box-shadow: 0 0 0 4px #fff, 7px 8px 0 rgba(168, 11, 30, 0.30); z-index: 2; } /* ---------- Nome, em pílula vermelha ---------- */ .fancy-dst-card .dst-name { display: inline-block; margin: 0 0 2px; padding: 8px 14px; border-radius: 999px; background: var(--fancy-vermelho); color: #fff; /* Sem a --fancy-display: é nome de produto, não título de seção — a mesma regra que já valia na versão anterior deste card. */ font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; box-shadow: 4px 4px 0 var(--fancy-rosa); } /* ---------- Arte ---------- */ .fancy-dst-card .dst-media { height: 220px; display: grid; place-items: center; margin-top: 10px; transform: translateY(7px); /* Rede de segurança: com o `min-height: 0` da imagem (ver a nota lá) a altura já fica correta, mas isso depende de o CSS carregar sem conflito de outro plugin. Sem este `overflow: hidden`, uma imagem que voltasse a vazar cobriria o preço em silêncio — com ele, na pior das hipóteses ela é cortada, nunca invisível o que vem depois. */ overflow: hidden; transition: transform 0.48s cubic-bezier(0.22, 0.72, 0.22, 1), height 0.48s cubic-bezier(0.22, 0.72, 0.22, 1); } .fancy-dst-card.is-active .dst-media { height: 250px; transform: translateY(0); } .fancy-dst-card .dst-media img { width: min(100%, 270px); height: 100%; /* `min-height: 0` desfaz uma armadilha do Grid: item de grid nasce com `min-height: auto`, que trava o tamanho MÍNIMO no conteúdo intrínseco — aqui, os 600×600 do placeholder do WooCommerce escalados pela largura (270px), ou seja, uma altura mínima de 270px. Isso vencia o `height: 100%` (220/250px) e a imagem crescia por cima do preço: medido, a imagem ficava com 270px de altura sempre, ignorando a altura do card. `min-height: 0` libera o encolhimento — a mesma classe de bug do `min-width: auto` em item flex, documentada em fancy-checkout.css. */ min-height: 0; min-width: 0; /* `contain` porque as artes do carrossel têm proporções diferentes entre si (um chaveiro é alto, uma placa é larga): recortar para preencher cortaria justamente o produto. */ object-fit: contain; display: block; transition: transform 0.36s ease; } .fancy-dst-card:hover .dst-media img { transform: translateY(-3px); } /* Durante o movimento o hover atrapalha: o ponteiro passa por cima de vários cards em sequência e cada um dava um pulinho. */ .fancy-dst-track.is-moving .fancy-dst-card:hover .dst-media img { transform: none; } /* ---------- Preço ---------- */ /* Recuo do bloco de preço — SÓ existe fora de foco. Causa da sobreposição relatada: `.dst-media` (acima) leva `transform: translateY(7px)` quando o card não está em destaque — um nudge visual que NÃO empurra o fluxo (transform nunca move irmãos), só desloca a própria imagem para baixo na tela. O resultado: a imagem visualmente invade o topo do "a partir de"/preço em ~16-18px, porque o `.dst-info` continua começando exatamente onde a imagem terminaria SEM o nudge. Em vez de mexer na imagem, descemos o preço — que é literalmente o que foi pedido. `22px` cobre a invasão com uma folga pequena. Some de volta a 0 no card em destaque (regra abaixo), porque lá a imagem usa `translateY(0)` e não há nada para compensar — e é assim que o preço "volta pra posição original" ao entrar em foco. */ /* `overflow: hidden` aqui não é sobre cortar nada — é para CONTER a margem do preço dentro da própria caixa do `.dst-info`. Sem isso, a margem de baixo do preço (18px, ver `.dst-price`) "vaza" através do `.dst-info` (que não tem borda nem padding) e vira uma margem externa que colapsa com o topo do botão de um jeito imprevisível — medido: em vez de aparecer como os 18px esperados de espaço antes do botão, viravam 36px, o dobro, só no card fora de foco (o botão escondido tem `overflow: hidden` próprio, que muda a forma como o navegador resolve esse colapso de margem entre vizinhos). Com a margem contida aqui dentro, o espaço antes do botão passa a ser exatamente o que o CSS diz, sem depender de como o vizinho seguinte está estilizado. */ .fancy-dst-card .dst-info { margin-top: 22px; overflow: hidden; transition: margin-top 0.48s cubic-bezier(0.22, 0.72, 0.22, 1); } .fancy-dst-card.is-active .dst-info { margin-top: 0; } /* Ajuste fino de 7px — o resto do caminho para a margem do preço até o fundo do card (fora de foco) igualar a margem do botão até o fundo do card (em destaque). Aqui, e não no `margin-top` do `.dst-info` acima, porque esse `margin-top` fica ANTES do conteúdo: aumentá-lo cresce o card inteiro na mesma proporção e não muda a margem final — foi medido, tentado, e não fez diferença nenhuma no vão. O padding do card É o vão final, então é aqui que 7px a mais realmente aparecem como respiro visível embaixo do preço. */ .fancy-dst-card:not(.is-active) { padding-bottom: 27px; } .fancy-dst-card .dst-from { display: block; color: var(--fancy-vermelho); font-size: 13px; font-weight: 700; } .fancy-dst-card .dst-price { display: block; margin: 3px 0 18px; color: var(--fancy-vermelho); font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-shadow: 3px 3px 0 var(--fancy-rosa); } .fancy-dst-card .dst-price .woocommerce-Price-amount { color: inherit; } /* ---------- Botão ---------- Tecla física: a sombra sólida embaixo é a "altura" do botão, e ela encurta quando a tecla desce no :active. É o mesmo vocabulário do botão "Adicionar" dos cards de arte. AQUI a --fancy-display (OBO Star) é usada, ao contrário do botão "Adicionar" da faixa de artes — e a diferença é proposital. Lá o rótulo se repete doze vezes num cartão de ~150px, onde a OBO Star estourava a largura e custava legibilidade sem ganhar ênfase (ver a nota em .fancy-art-card .art-card-btn). Aqui é UM botão, o único CTA de um card de 315px em foco: é destaque, que é justamente para o que a fonte serve. MEDIDO, porque a OBO Star é larga e a armadilha é a mesma de lá: "PERSONALIZAR" em OBO Star mede 194px a 16px, 182px a 15px e 158px a 13px. O botão já vazou uma vez com largura fixa de 224px — o teto de 266px, contra 275px úteis do card em foco (315 menos o padding), deixa folga sem encostar na borda. SEM ÍCONE de propósito — foi retirado a pedido da loja. `justify-content: center` (e não mais `space-between`) porque aquele valor só fazia sentido separando texto e ícone nas duas pontas; com um filho só, ele jogaria o texto para a esquerda em vez de centralizar. O padding também voltou a ser simétrico — antes era mais fechado à direita (22px esquerda, 18px direita) para abrir espaço para o ícone que ficava lá. `width: 100%` com `max-width` em vez de largura fixa: no celular o card muda de tamanho conforme a tela, e uma largura fixa vazaria ou sobraria dependendo da largura. Ver o ajuste de fonte no bloco de celular. */ .fancy-dst-card .dst-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 266px; min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #B70C24 0%, var(--fancy-vermelho) 100%); color: #fff; font-family: var(--fancy-display); font-size: 15px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 7px 0 #760417; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, max-height 0.5s var(--fancy-ease), opacity 0.34s var(--fancy-ease); } .fancy-dst-card .dst-cta .dst-cta-texto { white-space: nowrap; transform: translateY(-1px); } /* O card inteiro é o gatilho do modal (data-fancy-personalize), então o estado pressionado é disparado pelo CARD — o botão é um e não recebe :active próprio. Mesmo padrão do card de arte. */ .fancy-dst-card.is-active:active .dst-cta { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #760417; } .fancy-dst-card.is-active:hover .dst-cta { filter: brightness(1.04); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 0 #760417; } /* Fora de foco o botão desaparece: card lateral não tem ação própria — o clique nele traz para o centro. Fechado por altura, e não por `display: none`, para a saída ser animada junto com o resto. */ .fancy-dst-card:not(.is-active) .dst-cta { /* `display: block`, e não o `inline-flex` da regra base — é a causa real do vão fantasma de 18px medido entre o preço e o fundo do card fora de foco. Um elemento `inline-flex` sozinho depois de irmãos em bloco (h3, div, div) gera uma "linha" ao redor de si mesmo, com altura baseada na métrica de fonte do contêiner — isso acontece MESMO com `max-height:0`, porque max-height limita a caixa do próprio elemento, não a linha invisível que o layout de texto cria ao redor dele. Virando bloco, essa linha deixa de existir. */ display: block; max-height: 0; min-height: 0; padding-block: 0; opacity: 0; overflow: hidden; pointer-events: none; box-shadow: none; } /* ---------- Setas ---------- Só o traço, sem moldura — as duas setas do carrossel de categorias já seguem esse desenho na loja. Ficam sobre as bordas do carrossel, que é o espaço reservado pelo padding de .fancy-dst. */ .fancy-dst-nav { position: absolute; top: 50%; z-index: 7; width: 44px; height: 56px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--fancy-vermelho); font-size: 27px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: color 0.2s var(--fancy-ease), transform 0.2s var(--fancy-ease); } .fancy-dst-prev { left: 0; } .fancy-dst-next { right: 0; } .fancy-dst-nav:hover { color: var(--fancy-vermelho-hover); transform: translateY(-50%) scale(1.18); } .fancy-dst-nav:focus-visible { outline: 2px solid var(--fancy-vermelho); outline-offset: 4px; border-radius: 6px; } /* Sem `:disabled`: o carrossel é infinito, nunca chega ao fim. */ /* ---------- Setas do carrossel de artes (página de categoria) ---------- Também eram círculos brancos flutuando por cima das artes. Aqui elas já são irmãs da viewport no HTML, então basta tirar o posicionamento absoluto e deixar o flex do contêiner colocá-las ao lado. */ .fancy-art-carousel { display: flex; align-items: center; gap: 8px; } .fancy-art-carousel .carousel-viewport { flex: 1; min-width: 0; } .fancy-art-carousel .carousel-nav { position: static; transform: none; flex: 0 0 auto; width: 26px; height: 44px; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--fancy-vermelho); font-size: 24px; transition: color 0.2s var(--fancy-ease), transform 0.2s var(--fancy-ease); } .fancy-art-carousel .carousel-nav:hover { background: none; border: none; color: var(--fancy-vermelho-hover); transform: scale(1.18); } /* ---------- Setas do carrossel de categorias (home) ---------- Estas não dá para tirar do lugar só com CSS: o HTML as coloca DENTRO do wrapper que tem `overflow: hidden`, então mover para fora exigiria mexer no template. Aqui elas pelo menos perdem o círculo e ganham contraste para não sumirem sobre a imagem. */ .fancy-category-carousel-controls button { background: none; border: none; box-shadow: none; font-size: 30px; color: var(--fancy-vermelho); opacity: 1; text-shadow: 0 2px 10px rgba(255, 255, 255, 0.9); } .fancy-category-carousel-controls button:hover { background: none; color: var(--fancy-vermelho-hover); transform: scale(1.15); } /* ---------- Celular ---------- */ @media (max-width: 600px) { /* O CARD NÃO PODE TOMAR A TELA INTEIRA. Versão anterior usava `calc(100vw - 54px)`: numa tela de 375px isso é 321px de card contra 375px de viewport — o vizinho mal tinha por onde espiar, e a seção parecia "um produto só", não um carrossel. Reportado assim: "só aparece um quadrado de um produto apenas". Agora o card mede no máximo 70% da tela (`vw`), com teto em 258px para não crescer demais em celulares grandes. Sobra ~30% da largura dividida entre os dois vizinhos — o suficiente para reconhecer a pílula do nome e uma fatia da arte de cada lado, do mesmo jeito que o desktop mostra vários cards por vez. */ .fancy-dst { padding-inline: 8px; } .fancy-dst-fundo { inset-inline: 2px; opacity: 0.72; } .fancy-dst-onda { stroke-width: 48; opacity: 0.055; } .fancy-dst-estrela { opacity: 0.045; } .fancy-dst-viewport { padding: 18px 0 26px; } .fancy-dst-track { gap: 10px; } .fancy-dst-card { /* Medido com 258px (70vw): o vizinho só espiava 21px dentro do viewport — pouco para reconhecer a pílula ou a cor, ainda parecia "um produto só". Reduzido para deixar cada vizinho com uns 45-55px visíveis, perto do dobro. Cabe: o botão virou coluna (ver abaixo) e não depende mais de largura de texto lado a lado. */ --dst-largura: min(215px, 58vw); /* Altura maior que a proporção estrita da largura pediria (o fator direto seria uns 275px): a imagem do produto pediu mais espaço duas vezes — 125px→148px não foi suficiente, foi para 185px. A arte é o que mais precisa de espaço aqui. */ min-height: 340px; padding: 14px; border-radius: 20px; } .fancy-dst-card.is-active { min-height: 365px; } .fancy-dst-card .dst-media, .fancy-dst-card.is-active .dst-media { height: 185px; } .fancy-dst-card .dst-name { padding: 6px 10px; font-size: 13px; } /* Anula, só aqui, o recuo de 22px que `.dst-info` ganhou no desktop (ver a regra sem media query, na seção "Preço"). Aquele recuo existe para consertar uma sobreposição entre imagem e preço que só acontece no card DESKTOP — o celular tem outras alturas de imagem e card e nunca teve esse problema. A loja pediu explicitamente para não mudar nada do mobile: sem este zero, o recuo vazaria para cá também, por a regra de origem não ter escopo de largura. */ .fancy-dst-card .dst-info { margin-top: 0; } /* Mesmo motivo do zero acima: o ajuste fino de padding-bottom do card fora de foco (desktop) tem mais especificidade que o `padding: 14px` deste bloco, e venceria aqui também sem este cancelamento. */ .fancy-dst-card:not(.is-active) { padding-bottom: 14px; } /* Sem o ícone, "PERSONALIZAR" sozinho cabe numa linha só mesmo no card estreito do celular: medido, ~158px a 13px contra ~187px úteis (215 menos os 2×14 de padding) — sobra folga, não precisa mais empilhar texto e ícone como antes. */ .fancy-dst-card .dst-cta { min-height: 46px; padding: 0 10px; font-size: 13px; } .fancy-dst-card .dst-from { font-size: 11px; } .fancy-dst-card .dst-price { font-size: 18px; margin-bottom: 10px; } /* SETAS SOMEM NO CELULAR — e é conserto, não só gosto. Medido: a seta tinha 36px de largura, ficava a -4px da borda de `.fancy-dst` (posicionada por CSS, ver a regra de desktop), e o card começava a só 25px dessa mesma borda em telas de 375px. Resultado: a seta cobria os primeiros 21px do card, riscando por cima do contorno arredondado — a "seta cortando o card" que ficava feia em qualquer largura de tela, porque a largura do card no celular usa quase toda a tela (`calc(100vw - 54px)`) e nunca sobrava espaço para a seta ficar ao lado sem invadir. Ajustar os números não resolveria de vez — a cada largura de tela diferente a sobra muda, e o problema voltaria em algum tamanho. Escondendo, ele desaparece estruturalmente, para sempre: quem usa celular arrasta (o toque já está implementado em fancy-destaque.js), e a fatia do próximo card espiando na borda já sinaliza "tem mais". */ .fancy-dst-nav { display: none; } } @media (prefers-reduced-motion: reduce) { .fancy-dst-track, .fancy-dst-card, .fancy-dst-card .dst-cta, .fancy-dst-card .dst-media, .fancy-dst-card .dst-media img { transition: none; } } /* ===================================================================== FAIXA DE PRODUTOS — carrossel de favoritos / novidades / ofertas --------------------------------------------------------------------- Rolagem NATIVA do navegador com scroll-snap, não `transform` movido por JS. Assim o dedo arrasta com a inércia do próprio sistema no celular, a roda do mouse funciona na horizontal, e o teclado navega — de graça. As setas só empurram esse mesmo scroll (ver fancy-strip.js), então não existe um "estado" do carrossel que possa sair de sincronia com o que está na tela. ===================================================================== */ /* As setas ficam AO LADO da faixa, como itens do flex — não sobrepostas. Antes eram absolutas com deslocamento negativo e acabavam por cima da primeira e da última arte, tapando justamente o que a pessoa quer ver. */ .fancy-strip { display: flex; align-items: center; gap: var(--strip-gap); margin-top: 6px; --strip-nav: 26px; --strip-gap: 8px; /* O vão entre cartões é variável porque a largura do cartão no desktop é derivada dele (ver "Cartão cortado na borda"). Deixar o 18px solto nos dois lugares faria a conta do encaixe exato mentir no primeiro ajuste. */ --strip-track-gap: 18px; } /* No ponteiro (desktop) a viewport só recorta; quem se move é o trilho, por `transform`. No toque ela vira o próprio scroller — ver o bloco `(hover: none)` mais abaixo. Mesma divisão dos carrosséis da página de categoria, que é o arranjo que se provou estável aqui. */ .fancy-strip-viewport { flex: 1; min-width: 0; overflow: hidden; /* Vertical: espaço para a imagem subir no hover sem ser cortada pelo overflow. Horizontal: ZERO, e isto é requisito do encaixe exato dos cartões no desktop. O `100%` da conta da largura do cartão resolve contra o CONTENT box do trilho, enquanto o passo da seta é limitado por `viewport.clientWidth`, que inclui o padding. Com 2px de cada lado os dois valores divergiam em 4px e o último quadro da faixa saía desalinhado — cortando o cartão da esquerda justamente na ponta em que não se quer corte. Com zero, área visível e trilho medem o mesmo. O custo é 2px da sombra de elevação dos cartões das pontas ficarem recortados. É invisível: a --fancy-elev-1 tem ~4px de alcance lateral a 10% de opacidade, e o corte cai exatamente onde a faixa termina. */ padding: 8px 0 10px; } .fancy-strip-track { display: flex; gap: var(--strip-track-gap); transition: transform 0.45s var(--fancy-ease); will-change: transform; } .fancy-strip-track > * { flex: 0 0 clamp(148px, 16.5%, 196px); scroll-snap-align: start; /* Item flex tem `min-width: auto` por padrão, e isso faz a flex-basis ser um PISO, não um teto: se o conteúdo do cartão for mais largo que a base, o cartão estica e o encaixe exato do desktop deixa de valer. Aconteceu de verdade quando a OBO Star entrou — o rótulo "ADICIONAR" no desenho da marca mediu 213px contra uma base de 179px, o cartão foi para 212,7px e voltou a sobrar meio cartão na borda. Com `min-width: 0` a base manda. */ min-width: 0; } /* ---------- Cartão cortado na borda: sim no toque, não no ponteiro ---------- O cartão pela metade na borda é um AVISO de que a faixa continua. No toque ele é o único aviso que existe, porque não há setas — então ali fica. No ponteiro as setas já dizem isso, e aí o corte só atrapalha: parte uma arte no meio sem necessidade nenhuma. A condição é `(hover: hover) and (pointer: fine)`, e não uma largura, porque o que decide é a presença da SETA — é o complemento exato da media query que esconde as setas mais abaixo. Por largura, um tablet de 800px em modo toque cairia no caso "desktop": ficaria sem seta E sem corte, ou seja, sem aviso algum de que há mais para o lado. PARA NÃO CORTAR, a largura do cartão tem de ser derivada da viewport, não escolhida à mão: só não sobra ponta se (cartão + vão) x N couber exato. Daí `--strip-cols` e a divisão abaixo — o cartão passa a ser o resto da conta, e o degrau de N acompanha a largura da tela para o cartão não ficar nem estreito nem gordo (a faixa útil é ~150–200px). O `100%` da conta é a largura do TRILHO, que é um bloco dentro da viewport e portanto mede exatamente a largura visível — é isso que faz o último cartão do quadro terminar rente à borda do recorte. */ @media (hover: hover) and (pointer: fine) { .fancy-strip { --strip-cols: 6; } .fancy-strip-track > * { flex-basis: calc( (100% - (var(--strip-cols) - 1) * var(--strip-track-gap)) / var(--strip-cols) ); } /* Os cortes de N saem da conta inversa: para o cartão ficar entre 150 e 200px, N=6 pede um trilho de 990–1290px, N=5 de 822–1072, N=4 de 654–854, N=3 de 486–636. Traduzido em largura de janela (o trilho é a janela menos ~120px de container, setas e padding). */ @media (max-width: 1109px) { .fancy-strip { --strip-cols: 5; } } @media (max-width: 992px) { .fancy-strip { --strip-cols: 4; } } @media (max-width: 774px) { .fancy-strip { --strip-cols: 3; } } } /* ---------- Setas: só o traço, sem moldura ---------- */ .fancy-strip-nav { flex: 0 0 auto; width: var(--strip-nav); height: 44px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--fancy-vermelho); font-size: 25px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; /* Sobe a seta para a altura da ARTE. Sem isso ela fica centralizada no conjunto arte+botão, e desce para perto do botão. O valor é metade da altura do botão mais a margem dele. */ margin-bottom: 62px; transition: color 0.2s var(--fancy-ease), transform 0.2s var(--fancy-ease), opacity 0.2s var(--fancy-ease); } .fancy-strip-nav:hover { color: var(--fancy-vermelho-hover); transform: scale(1.18); } /* Ponta da lista: some em vez de ficar cinza — não há para onde ir. Como a seta é item do flex, `opacity` mantém o espaço reservado e a faixa não pula de largura ao chegar na ponta. */ .fancy-strip-nav[disabled] { opacity: 0; pointer-events: none; } /* No toque a pessoa arrasta; seta só ocuparia a imagem. */ @media (hover: none), (pointer: coarse) { .fancy-strip-nav { display: none; } } /* ===================================================================== CARD DE ARTE — imagem solta, botão embaixo --------------------------------------------------------------------- Sem moldura: o card deixa de ser um retângulo branco contendo imagem e botão e passa a ser só a arte (quadrada, cantos arredondados) com o botão separado abaixo dela. Numa faixa de 12 artes, doze molduras brancas viram doze caixas competindo entre si; a arte sozinha respira. ===================================================================== */ .fancy-art-card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; display: flex; flex-direction: column; } .fancy-art-card:hover, .fancy-art-card:focus-visible { transform: none; box-shadow: none; } .fancy-art-card .art-card-image { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; margin: 0; background: var(--fancy-rosa); box-shadow: var(--fancy-elev-1); transition: transform 0.4s var(--fancy-ease), box-shadow 0.4s var(--fancy-ease); } /* Quem levanta no hover é a IMAGEM, não o cartão — é ela o objeto agora. */ .fancy-art-card:hover .art-card-image { transform: translateY(-5px); box-shadow: var(--fancy-elev-2); } .fancy-art-card .art-card-image img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------- BOTÃO "ADICIONAR" — tecla física --------------------------------------------------------------------- O volume vem de um `box-shadow` SEM desfoque (`0 6px 0 cor`): a sombra vira um bloco sólido do mesmo formato, deslocado para baixo, como a lateral de uma tecla. Desfoque nenhum — é isso que diferencia o efeito de "objeto com espessura" de uma sombra comum de elevação. Ao pressionar, o botão desce exatamente o tanto que a sombra encolhe (4px de um lado, 4px do outro), então a base fica parada e só a tecla afunda. Se os dois valores não baterem, o botão "escorrega" na tela. --------------------------------------------------------------------- */ .fancy-art-card .art-card-btn { margin: 14px 0 8px; /* Padding lateral curto de propósito: é o que deixa o texto ocupar quase toda a largura do botão, como na referência. */ padding: 13px 10px; border-radius: 12px; gap: 10px; background: var(--fancy-vermelho); color: #FCE9EA; /* Poppins, e NÃO a --fancy-display. Esta regra pedia a fonte de título desde antes de a OBO Star existir no servidor, então até agora vinha caindo na Poppins e ninguém tinha visto o efeito real. Com a fonte instalada, o rótulo passou a medir 213px — mais que a largura inteira do cartão — e esticava o cartão, quebrando o encaixe exato da faixa no desktop (ver `min-width: 0` em .fancy-strip-track > *). Não há tamanho de fonte que resolva isso nos degraus estreitos, onde o cartão fica com ~150px. Além do encaixe: a OBO Star é um desenho de exibição, largo e caixa alta. Serve a título e destaque, que é para o que ela foi comprada; num rótulo utilitário de 15px repetido doze vezes na mesma faixa ela custa legibilidade sem ganhar ênfase. */ font-family: 'Poppins', system-ui, sans-serif; font-size: clamp(15px, 1.15vw, 19px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1; box-shadow: 0 6px 0 #6d0512; transition: transform 0.12s var(--fancy-ease), box-shadow 0.12s var(--fancy-ease), background 0.22s var(--fancy-ease); } .fancy-art-card .art-card-btn i { font-size: 1.15em; } .fancy-art-card:hover .art-card-btn { background: #b81326; } /* Estado pressionado. O gatilho é o CARD porque o clique é nele: o botão é um , não um