/* ========================================================================== Locs · West Coast Linguagem de streetwear de raiz West Coast: foto em primeiro plano, caixa-alta condensada, preto e branco, azul Locs só como acento (preço no Pix, selos). CSS puro: toda classe .wc-* do Blade do tema está aqui (não depende do build do Tailwind). Superfícies nativas: só ids, atributos data-* e classes .ps-* documentados no anexo de ganchos. ========================================================================== */ @font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/archivo-narrow-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/archivo-narrow-latin-700-normal.woff2') format('woff2'); } :root { --wc-tinta: #0e0e0e; --wc-papel: #ffffff; --wc-nevoa: #f3f3f1; --wc-linha: #e3e3e0; --wc-cinza: #6b6b6b; --wc-azul: #1d3ae0; --wc-display: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', sans-serif; --wc-rotulo: 'Archivo Narrow', 'Arial Narrow', sans-serif; --wc-corpo: var(--font-menu, 'Red Hat Display'), ui-sans-serif, system-ui, sans-serif; --wc-ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- Base ---------- */ body { font-family: var(--wc-corpo); background: var(--wc-papel) !important; } main h1 { font-family: var(--wc-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02 !important; margin-top: .35rem; } :focus-visible:not(input):not(select):not(textarea) { outline: 2px solid var(--wc-azul); outline-offset: 2px; } ::selection { background: var(--wc-tinta); color: #fff; } /* ---------- Barra de anúncio (estilo_menu = anuncio; .ps-marquee é classe estável) ---------- */ body div:has(> .ps-marquee) { background: var(--wc-tinta) !important; color: #fff !important; border: 0 !important; padding-block: .55rem !important; } body div:has(> .ps-marquee) .ps-marquee { font-family: var(--wc-rotulo); font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .12em; } /* ---------- Header ---------- */ #ps-header-principal { border-bottom: 1px solid var(--wc-linha) !important; } #ps-header-principal nav { font-family: var(--wc-rotulo) !important; } #ps-header-principal nav a { font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-decoration-thickness: 2px !important; text-underline-offset: 7px; } #ps-header-principal #ps-busca-abrir, #ps-header-principal #ps-conta-link, #ps-header-principal #ps-favoritos-link, #ps-header-principal #ps-carrinho-abrir, #ps-header-principal #ps-menu-abrir { border-color: transparent !important; border-radius: 0 !important; padding: .55rem !important; } #ps-header-principal #ps-carrinho-badge, #ps-header-principal #ps-favoritos-badge { background: var(--wc-tinta) !important; color: #fff !important; font-family: var(--wc-rotulo); font-weight: 700; } #ps-menu-mobile { font-family: var(--wc-rotulo) !important; } /* Logo (arte com proporção ~1,78:1, 600×337): altura parecida com a do texto "LOCS" de antes. Este valor (50px) segue sendo o do estado ROLADO no desktop — pedido explícito do Ricardo (2026-09-30): "o atual do desktop eu gosto desse padrão pra ser mantido quando a barra for rolada pra baixo". */ #ps-header-principal .ps-logo-header { height: 50px !important; width: auto; } /* 50px × 1.32 = 66px, +50% = 99px, -10% = 89px (todos 2026-09-30, mesmo dia — a rodada de 99px ficou grande demais). Só o estado do TOPO muda, o rolado continua nos 50px de sempre. 2ª rodada de correção no mesmo dia (2026-09-30, 2 achados reais do Ricardo depois de ver ao vivo): (1) a margem de segurança acima/abaixo da logo não mantinha a mesma PORCENTAGEM da altura da própria barra entre os 2 estados — medido ao vivo: no rolado a barra fica com 86px de altura de verdade (ditada pelo nav de categorias, não pela logo) com a logo (50px) centralizada sobrando ~18px de cada lado, ou seja ~21% da altura da barra; o topo só herdava o `py-5` genérico (20px) de sempre, que não foi pensado especificamente pra essa logo maior e dava uma margem proporcionalmente MENOR (~16% da barra); (2) a logo virando mais LARGA no topo (proporção fixa da arte — 89px de altura ≈ 158px de largura, contra ~89px de largura nos 50px do rolado) empurrava nav/ícones (irmãos dela na `.ps-header-linha`, `justify-content:space-between`) pra mais longe no topo e de volta pra perto ao rolar — nav/ícones NUNCA deveriam se mexer horizontalmente, só a logo deveria mudar de tamanho. Corrigido replicando a MESMA técnica que o bloco mobile/tablet-retrato logo abaixo já usa: `position:absolute` na logo (sai do fluxo, não conta mais pra largura do flex) dentro de um container com largura RESERVADA fixa (cabe a logo no tamanho MAIOR, sobra em branco no rolado — é isso que trava nav/ícones no lugar) + `min-height` explícito na linha pro estado do topo, calculado pra dar a MESMA ~21% de margem da altura da barra que o rolado já tem naturalmente (89px de logo ÷ (1 - 2×0,21) ≈ 153px de barra, ~32px de margem de cada lado). Consulta de mídia é o COMPLEMENTO exato da consulta mobile/tablet-retrato logo abaixo (nunca as duas batem ao mesmo tempo) — desktop de verdade OU tablet em paisagem. */ @media (min-width: 640px) and (orientation: landscape), (min-width: 1025px) { /* 160px cabe a logo grande (600×337 ≈ 1,78:1) até uns 89px de altura com folga; no rolado (50px de altura ≈ 89px de largura) sobra espaço em branco à direita dela dentro da mesma caixa — é esse espaço reservado, sempre igual, que trava nav/ícones sem se mexerem. */ #ps-header-principal .ps-header-linha > div:first-child { position: relative; min-width: 160px; } #ps-header-principal .ps-header-linha > div:first-child > a { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #ps-header-principal:not(.ps-header-rolado) .ps-logo-header { height: 89px !important; } #ps-header-principal:not(.ps-header-rolado) .ps-header-linha { min-height: 153px; } } /* Celular: logo no centro; lupa sai da direita e vai pro lado do menu (☰ 🔍 · LOGO · 👤 🛒). Só posicionamento por CSS — a marcação e os ids do header nativo não mudam. Tablet RETRATO usa o MESMO topo (2026-09-26, pedido do Ricardo: "o topo não tá igual como deveria, igual é no topo do celular") — mesma faixa 640-1024px/portrait do menu hambúrguer logo abaixo; união por vírgula (OR) em vez de duplicar as regras, pra nunca divergir. */ @media (max-width: 639px), (min-width: 640px) and (max-width: 1024px) and (orientation: portrait) { #ps-header-principal .ps-header-linha { position: relative; min-height: 64px; } #ps-header-principal .ps-header-linha > div:first-child > a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 42px → 55px (2026-09-26, pedido do Ricardo: mais 30% em cima do que já tinha ficado em 2026-09-25). Base do estado ROLADO (scale(1) ali embaixo) — crescer ela também estica o estado de cima na mesma proporção, sem precisar recalcular o scale de novo. */ #ps-header-principal .ps-logo-header { height: 55px !important; } #ps-header-principal #ps-busca-abrir { position: absolute; top: 50%; left: calc(1rem + 44px); transform: translateY(-50%); } /* Logo do topo maior no celular (2026-09-25) — só o estado NÃO rolado; o nativo já encolhe pra scale(1) ao rolar (logo-scroll.js/app.css) e o pedido foi justamente manter esse tamanho menor como está, só aumentar o de cima. Nativo aplicava scale(1.1); 1.1 × 1.2 = 1.32 (pedido de 2026-09-25, "20% maior"). Mantido intacto em 2026-09-26 — o aumento pedido dessa vez veio inteiro da altura BASE acima, não deste multiplicador. */ #ps-header-principal:not(.ps-header-rolado) .ps-logo-header { transform: scale(1.32); } /* Barra do topo mais alta SÓ no estado não-rolado (2026-09-26, achado real: o logo cresceu (55px * scale 1.32 = ~73px de altura visível) mas a linha continuou no min-height:64px de sempre — como o logo é centralizado por position:absolute, ele passou a estourar a própria caixa por cima e por baixo, quase encostando no limite. `:not(.ps-header-rolado)` garante que o estado ROLADO (pedido explícito: "deve ficar do mesmo jeito que está") continua exatamente nos 64px de sempre — só essa regra, mais específica, muda o de cima. */ #ps-header-principal:not(.ps-header-rolado) .ps-header-linha { min-height: 88px; } } /* Tablet RETRATO usa o mesmo menu do celular (2026-09-26, pedido do Ricardo: o nav de categorias "esquerda" (várias palavras lado a lado) não tem largura suficiente num tablet em pé — só faz sentido a partir de PAISAGEM, que tem a largura de um desktop pequeno. Faixa 640-1024px cobre os tablets reais em retrato (iPad mini/Air/Pro 11" etc.); acima de 1024px já é a largura mínima de um iPad em paisagem, cai no padrão desktop de sempre — sem checar orientação, só largura, porque nessa faixa a paisagem SEMPRE é mais larga que 1024px. */ @media (min-width: 640px) and (max-width: 1024px) and (orientation: portrait) { /* :not(#ps-menu-mobile) (2026-09-26, achado real) — o painel off-canvas do menu É um