/* Ajustes complementares desta cópia estática — não existiam no bundle original (que dependia de React) e cobrem apenas comportamento de JS que recriamos manualmente: reveal on scroll, grid comunitário automático, e o drawer de seleção (adaptado a partir das classes .size-guide-*). */ /* Refino do selo "K / DESIGN PRODUÇÃO IDENTIDADE" (seção KLAN Lab): no original ele é um círculo perfeito com texto de 8px espremido contra a borda — lia como adesivo colado na foto. Damos mais respiro ao texto, uma leve sombra pra descolar da imagem de fundo, e suavizamos a rotação pra ler como um selo desenhado, não um clip-art torto. */ .custom-stamp { gap: 10px; padding: 0 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); transform: rotate(-5deg); } .custom-stamp b { font-size: 60px; } .custom-stamp span { font-size: 10px; line-height: 1.75; letter-spacing: .13em; } @media (width <= 900px) { .custom-stamp { padding: 0 10px; } .custom-stamp b { font-size: 44px; } .custom-stamp span { font-size: 9px; line-height: 1.6; } } /* Mesmo tipo de vazamento do bug do nav{} e footer{}: existe um button{} genérico no CSS original com color:#fff (pensado pro botão do menu no cabeçalho escuro), que também pega os botões de público (Unissex/ Feminino/Masculino/Infantil) na seção clara da coleção — ficavam quase invisíveis (texto branco sobre fundo papel). O hover/active já inverte pra fundo escuro + texto branco corretamente; só o estado normal precisa do texto escuro, igual aos filtros de categoria ao lado. */ .audience-filters button { color: var(--ink); } /* Alternância Feminino/Masculino na tabela de medidas — elemento novo, sem equivalente no CSS original, estilizado no mesmo tom do modal. */ .size-guide-gender { display: flex; gap: 8px; margin: 4px 0 18px; } .size-guide-gender button { flex: 1; cursor: pointer; background: #fff; border: 1px solid #ddd8ce; color: #6d675e; padding: 9px 10px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .size-guide-gender button.active { background: var(--ink); border-color: var(--ink); color: #fff; } section { opacity: 1; } section.is-revealed { animation: reveal-in .7s cubic-bezier(.2,.75,.3,1) both; } @keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .community-card { transition: opacity .3s; } /* (a "SELEÇÃO" foi removida — só o carrinho faz o pedido agora) */ .lifestyle-lightbox { display: none; } .lightbox-caption { display: flex; align-items: center; justify-content: space-between; } .lightbox-caption span { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; } .lightbox-close { color: #fff; background: none; border: 0; font-size: 26px; cursor: pointer; } .product-card[style*="display: none"] { display: none; } .whatsapp-float { z-index: 80; } /* Correção de um bug do próprio CSS original: o seletor genérico "nav{}" dentro do @media (width<=900px) foi escrito pensando só no menu mobile do cabeçalho, mas