/* ========================================================================= PINTE TINTAS — Cabeçalho e Rodapé Todo o CSS é escopado sob .pt-scope para não vazar/conflitar com o Divi. As cores vêm de variáveis --pt-* injetadas pelo PHP conforme o tema. ========================================================================= */ /* ----- Reset local mínimo (só dentro do escopo) ----- */ .pt-scope *, .pt-scope *::before, .pt-scope *::after { box-sizing: border-box; } .pt-scope { font-family: 'Inter', system-ui, sans-serif; color: var(--pt-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } .pt-scope a { color: inherit; text-decoration: none; } .pt-scope img { max-width: 100%; display: block; } .pt-scope button { font-family: inherit; cursor: pointer; } /* ========================================================================= O NÓ DA QUESTÃO — controle de largura interno ------------------------------------------------------------------------- .pt-wrap segura o conteúdo centralizado em 1280px INDEPENDENTE de como o Divi está configurado (caixa ou full width). Assim, tirar o "layout em caixa" não espalha mais o cabeçalho/rodapé. - Variante CONTIDO: faixa colorida vai de ponta a ponta, mas o conteúdo (logo, busca, links) fica alinhado ao miolo de 1280px. (Padrão.) - Variante FULL: o conteúdo também estica até as bordas. ========================================================================= */ .pt-scope .pt-wrap { width: 100%; margin: 0 auto; padding: 0 20px; } .pt-w-contido .pt-wrap { max-width: 1280px; } .pt-w-full .pt-wrap { max-width: none; } /* ========================================================================= CABEÇALHO ========================================================================= */ /* Barra superior azul */ .pt-header .pt-top { background: var(--pt-blue); color: #fff; } .pt-header .pt-top .pt-wrap { display: flex; align-items: center; gap: 20px; padding: 14px 20px; } .pt-header .pt-logo { background: #fff; border-radius: 10px; padding: 8px 12px; flex: none; display: flex; align-items: center; } /* v1.3.0 — logo do topo ampliado 34px -> 48px (pedido do cliente: "logo pequeno/sem personalidade", opção A = só tamanho, arte mantida). O arquivo logo-pinte.png tem 240x116px; o teto de nitidez em tela retina fica ~55px, então 48px cresce ~40% e continua crisp. A plaquinha branca e a barra azul acompanham a altura. ANTIGO: 34px. */ /* v1.6.0 — 48px -> 56px: logo agora é arquivo em alta (985x480), cresce sem borrar. ANTIGO: 48px. */ .pt-header .pt-logo img { height: 56px; width: auto; } .pt-header .pt-cep { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: #DCEAFB; white-space: nowrap; cursor: pointer; } .pt-header .pt-cep b { display: block; color: #fff; font-size: .82rem; } .pt-header .pt-cep .pt-pin { font-size: 1.1rem; } /* Busca central — a peça-chave do estilo marketplace */ .pt-header .pt-search { flex: 1; position: relative; max-width: 640px; display: flex; margin: 0; } .pt-header .pt-search input { width: 100%; border: 0; border-radius: 8px; padding: 13px 52px 13px 18px; font-size: .95rem; color: var(--pt-ink); } .pt-header .pt-search input:focus { outline: 3px solid rgba(255,177,60,.6); } .pt-header .pt-search .pt-go { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--pt-amber); color: var(--pt-blue-ink); border: 0; border-radius: 7px; width: 40px; height: 38px; display: grid; place-items: center; font-size: 1.1rem; } .pt-header .pt-search .pt-go:hover { background: var(--pt-amber-deep); } /* Área de conta + favoritos + carrinho */ .pt-header .pt-actions { display: flex; align-items: center; gap: 22px; flex: none; } .pt-header .pt-act { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: #fff; position: relative; cursor: pointer; /* v1.2.0 — reforça a affordance de botão nos 3 itens */ } .pt-header .pt-act .pt-ic { font-size: 1.5rem; line-height: 1; } .pt-header .pt-act small { display: block; color: #DCEAFB; font-size: .72rem; } .pt-header .pt-act b { font-size: .84rem; } /* v1.2.0 — Hover "tipo botão" nos 3 itens (Entre/Cadastre-se · Favoritos · Sacola). A cápsula translúcida é desenhada por um ::before posicionado com inset NEGATIVO, e NÃO por padding: assim o ícone, o texto e o badge do carrinho não se deslocam, e a largura da busca + o gap do cabeçalho ficam exatamente iguais (zero reflow). Mesmo idioma visual do hover da barra de departamentos (.pt-dept a:hover). */ .pt-header .pt-act::before { content: ""; position: absolute; inset: -8px -10px; border-radius: 10px; background: rgba(255,255,255,0); transition: background-color .18s ease; pointer-events: none; } .pt-header .pt-act:hover::before { background: rgba(255,255,255,.12); } .pt-header .pt-cart-badge { position: absolute; top: -6px; left: 14px; background: var(--pt-amber); color: var(--pt-blue-ink); font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; } /* v1.10.3 — contador de Favoritos (vermelho, igual ao coração). */ .pt-header .pt-fav-badge { position: absolute; top: -6px; left: 14px; background: #E23744; color: #fff; font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; } /* Barra de departamentos */ .pt-header .pt-dept { background: var(--pt-blue-2); color: #fff; } .pt-header .pt-dept .pt-wrap { display: flex; align-items: center; gap: 6px; height: 44px; overflow-x: auto; scrollbar-width: none; } .pt-header .pt-dept .pt-wrap::-webkit-scrollbar { display: none; } .pt-header .pt-dept .pt-all { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .86rem; padding: 0 16px 0 0; margin-right: 8px; border-right: 1px solid rgba(255,255,255,.25); height: 22px; white-space: nowrap; } .pt-header .pt-dept a { font-size: .85rem; color: #fff; padding: 8px 14px; border-radius: 7px; white-space: nowrap; transition: .15s; } .pt-header .pt-dept a:hover { background: rgba(255,255,255,.14); } /* Garante o branco dos links da barra em TODA página. O Divi aplica a cor de link global (var --gcid-link-color, #4080c0) via ".et-db #et-boc .et-l a" (contém um ID, especificidade 1,2,1), que no arquivo de categoria vencia a regra acima (0,2,1). Ancorando no #et-boc (container externo do Divi, presente em toda página) subimos a especificidade de forma legítima, sem !important. Confirmado via DevTools na 1.1.4. */ #et-boc .pt-scope .pt-dept a { color: #fff; } /* Item ativo da barra: categoria atual (ou Loja, no "Todos os produtos"). Sublinhado dourado via box-shadow inset — NÃO altera o layout (um border-bottom somaria altura e desalinharia só este item). #E0B010 = dourado do arco (guia da marca). A classe .pt-active vem do PHP: is_product_category($slug) / is_shop(). Sem !important. */ .pt-header .pt-dept a.pt-active { box-shadow: inset 0 -3px 0 0 #E0B010; } /* ------------------------------------------------------------------------- Dropdown "Início" da barra de departamentos (v1.10.0 / portado em 1.10.1). O BOTÃO fica na barra; o PAINEL é movido para o pelo JS (portal) e usa position:fixed — assim escapa de qualquer ancestral do Divi com transform/overflow/stacking que o cobria em certas páginas (Clube, Minha conta). O painel recebe a classe .pt-scope (no JS) para as variáveis de cor --pt-* resolverem; mantemos fallbacks fixos por garantia. ------------------------------------------------------------------------- */ .pt-header .pt-dept .pt-menu { display: flex; align-items: center; } .pt-header .pt-dept .pt-menu-toggle { font: inherit; font-weight: 700; font-size: .86rem; color: #fff; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 8px 16px; margin-right: 8px; border-right: 1px solid rgba(255,255,255,.25); border-radius: 7px; white-space: nowrap; transition: .15s; } .pt-header .pt-dept .pt-menu-toggle:hover { background: rgba(255,255,255,.14); } .pt-header .pt-dept .pt-menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.2); } /* Painel — seletores AUTÔNOMOS (vive no , fora de .pt-header). */ .pt-menu-panel { position: fixed; z-index: 100000; top: 0; left: 0; /* top/left reais vêm do JS */ min-width: 248px; max-width: calc(100vw - 16px); font-family: 'Inter', system-ui, sans-serif; background: var(--pt-paper, #fff); color: var(--pt-ink, #20242B); border: 1px solid var(--pt-line, #E6E9EF); border-radius: 12px; box-shadow: 0 14px 34px rgba(20,36,70,.16); padding: 8px; display: flex; flex-direction: column; } .pt-menu-panel[hidden] { display: none; } .pt-menu-panel a, .pt-menu-panel .pt-menu-sub-toggle { display: block; width: 100%; text-align: left; box-sizing: border-box; font: inherit; font-size: .92rem; font-weight: 600; color: var(--pt-ink, #20242B); text-decoration: none; background: transparent; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 8px; white-space: nowrap; transition: .12s; } .pt-menu-panel a:hover, .pt-menu-panel .pt-menu-sub-toggle:hover { background: var(--pt-bg, #F2F4F8); color: var(--pt-blue, #4080C0); } .pt-menu-panel .pt-menu-sep { height: 1px; background: var(--pt-line, #E6E9EF); margin: 6px 4px; } /* Submenu Categorias (accordion por clique). */ .pt-menu-panel .pt-menu-sub-toggle::after { content: "▸"; float: right; opacity: .55; transition: transform .15s; } .pt-menu-panel .pt-menu-sub-toggle[aria-expanded="true"]::after { transform: rotate(90deg); } .pt-menu-panel .pt-menu-sub { padding-left: 8px; } .pt-menu-panel .pt-menu-sub[hidden] { display: none; } .pt-menu-panel .pt-menu-sub a { font-weight: 500; font-size: .88rem; } .pt-menu-panel a.pt-active { box-shadow: none; color: var(--pt-blue, #4080C0); background: var(--pt-bg, #F2F4F8); } /* Faixa de benefícios */ .pt-header .pt-benefits { background: var(--pt-paper); border-bottom: 1px solid var(--pt-line); } .pt-header .pt-benefits .pt-wrap { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; flex-wrap: wrap; } .pt-header .pt-benefit { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--pt-ink-2); } .pt-header .pt-benefit .pt-bic { width: 34px; height: 34px; border-radius: 8px; background: #EAF2FC; display: grid; place-items: center; font-size: 1.05rem; } .pt-header .pt-benefit b { display: block; color: var(--pt-ink); font-size: .84rem; } /* ========================================================================= RODAPÉ ========================================================================= */ /* ANTIGO (v1.1.1) — a cor-base do rodapé ficava em (0,1,0) e EMPATAVA com ".pt-scope { color: var(--pt-ink) }" do pinte-home. Como o pinte-home carrega depois, ele vencia por ordem de carga e o texto herdado do rodapé (.pt-desc, selos de pagamento) escurecia. Mantido para rollback: .pt-footer { background: var(--pt-blue-ink); color: #FFFFFF; padding: 50px 0 24px; margin-top: 30px; } */ /* NOVO (v1.1.2) — o rodapé é