/* * Sistema visual do njparts-theme — portado do protótipo aprovado * (njparts-a-marketplace.html). Tema claro único, sem alternância * automática por modo escuro do sistema (decisão do dono da loja, depois * de ver a versão escura sem querer no protótipo). * * Convenção: todas as classes do tema usam o prefixo "njp-", pra nunca * colidir com o CSS do tema antigo (partdo) enquanto os dois convivem * durante a migração, nem com plugins de terceiros. */ :root{ --bg:#F5F7F9; --surface:#FFFFFF; --surface-2:#EAEDF1; --ink:#050F28; --navy:#151E3F; --ink-soft:#4A5570; --border:#DEE3E9; --red:#FF1E3F; --red-deep:#C7112C; --on-red:#FFFFFF; --red-tint:#FFF1F2; --red-glow:rgba(255,30,63,.5); /* Campanha (Personalizar → "Campanha", 29/09/2026): header.php troca estes 3 conforme o estilo escolhido (cor do site, Black Friday ou personalizado); os de baixo são calculados a partir deles no @supports. */ --camp-fundo:var(--red); --camp-texto:var(--on-red); --camp-realce:var(--surface); --camp-fundo-escuro:var(--camp-fundo); --camp-linha:rgba(255,255,255,.16); --camp-texto-suave:var(--camp-texto); --camp-sobre-realce:var(--camp-fundo-escuro); /* o que vai EM CIMA do realce — header.php troca pra branco quando o realce é escuro */ --amber:#FFB020; --on-amber:#241a02; --green:#1C8A4B; --green-bg:#E3F3EA; --gray-badge:#6B7488; --gray-badge-bg:#E7EAEF; /* Avisos de problema (erro, "não serve no seu carro"): vermelho FIXO, igual ao verde de "compatível" — não segue a cor de destaque do Personalizar (--red), senão "não serve" ficaria da cor da marca, com cara de informação comum. */ --danger:#FF1E3F; --danger-deep:#C7112C; --danger-tint:#FFF1F2; --font-display:'Barlow Condensed',system-ui,sans-serif; --font-body:'Barlow',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; } /* Tom clarinho e brilho da cor de destaque calculados a partir dela: trocar a cor no Personalizar leva junto o fundo dos selos, do "Adicionar ao carrinho" da página de produto etc. e o brilho dos botões. Navegador antigo fica nos fixos acima. */ @supports (color:color-mix(in srgb,red 50%,white)){ /* --camp-fundo-escuro: o próprio fundo da campanha escurecido (degradê do "Destaque de promoção", número do cronômetro) — não usa o --red-deep do Personalizar, que pode estar em qualquer cor e deixaria o degradê com duas cores sem relação. --camp-linha / --camp-texto-suave: linhas finas, fundo do "passar o mouse" e texto secundário sobre o fundo da campanha. */ :root{--red-tint:color-mix(in srgb,var(--red) 8%,var(--surface));--red-glow:color-mix(in srgb,var(--red) 50%,transparent);--camp-fundo-escuro:color-mix(in srgb,var(--camp-fundo) 78%,#000);--camp-linha:color-mix(in srgb,var(--camp-texto) 16%,transparent);--camp-texto-suave:color-mix(in srgb,var(--camp-texto) 78%,transparent)} } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased} img,svg{max-width:100%} h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:.2px} a{color:inherit} .njp-tabular{font-variant-numeric:tabular-nums} .njp-wrap{max-width:1240px;margin:0 auto;padding:0 20px} .njp-icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Texto só pra leitor de tela (padrão de todo tema WordPress) — antes vinha só do CSS de outro plugin; o do WooCommerce está desligado neste tema (16/10/2026). */ .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);border:0;white-space:nowrap} /* ---------- topbar ---------- */ .njp-topbar{background:var(--surface-2);color:var(--ink-soft);font-size:12.5px;border-bottom:1px solid var(--border);overflow:hidden} .njp-topbar .njp-wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:16px} .njp-topbar-msg{font-weight:600;letter-spacing:.3px;white-space:nowrap} .njp-topbar-msg b{color:var(--red)} /* Faixa deslizante do topo (24/09/2026, corrigida 25/09/2026) — ver header.php pro porquê de cada metade ter min-width:100vw + 6 repetições. */ .njp-topbar-ticker{width:100%;height:34px;overflow:hidden;display:flex;align-items:center} .njp-topbar-ticker-track{display:flex;align-items:center;width:max-content;animation:njp-topbar-ticker 34s linear infinite} .njp-topbar-ticker-set{display:flex;align-items:center;min-width:100vw;flex-shrink:0} .njp-topbar-ticker-track .njp-topbar-msg{padding:0 48px} @keyframes njp-topbar-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .njp-topbar-ticker-track{animation:none} } /* Abaixo do cabeçalho (padrão desde 22/10/2026, no lugar da barra de categorias): branca, com linha em cima e embaixo — lê como parte do cabeçalho e não gruda na faixa de confiança cinza que vem logo depois nas páginas internas. */ .njp-topbar.is-abaixo{background:var(--surface);border-top:1px solid var(--border)} /* ---------- Faixa de destaques do topo (22/10/2026, template-parts/faixa-destaque.php) ---------- * Personalizar → "Faixa de destaques (topo)". Cores por variável (o PHP só escreve as que o dono mudou). Fundo padrão * fixo, não var(--ink): com a campanha escura ligada, --ink vira cor clara e o texto branco sumiria. Mensagem em * maiúsculo, como os títulos das seções. Celular: mensagem à esquerda (até 2 linhas), cronômetro à direita. */ .njp-faixa-destaque{--faixa-fundo:#050F28;--faixa-texto:#FFFFFF;background:var(--faixa-fundo);color:var(--faixa-texto)} .njp-faixa-destaque[hidden]{display:none} .njp-faixa-destaque-inner{display:flex;align-items:center;justify-content:center;gap:8px 28px;min-height:40px;padding-top:6px;padding-bottom:6px} .njp-faixa-destaque-texto{margin:0;min-width:0;font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.4px;text-transform:uppercase;text-align:center;color:inherit;text-decoration:none} .njp-faixa-destaque-texto b{color:var(--faixa-realce,var(--faixa-texto))} a.njp-faixa-destaque-texto:hover{text-decoration:underline} .njp-faixa-tempo{display:flex;align-items:flex-start;gap:4px;flex-shrink:0} .njp-faixa-tempo[hidden]{display:none} .njp-faixa-tempo:not(.is-pronto){visibility:hidden} .njp-faixa-tempo-bloco{display:flex;flex-direction:column;align-items:center;min-width:30px} .njp-faixa-tempo-bloco b{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--faixa-realce,var(--faixa-texto))} .njp-faixa-tempo-bloco small{margin-top:3px;font-size:10px;line-height:1;opacity:.8} .njp-faixa-tempo-sep{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1;opacity:.7} @media (max-width:760px){ .njp-faixa-destaque-inner.has-tempo{justify-content:space-between} .njp-faixa-destaque-inner.has-tempo .njp-faixa-destaque-texto{font-size:14.5px;text-align:left} .njp-faixa-tempo{gap:3px} .njp-faixa-tempo-bloco{min-width:25px} .njp-faixa-tempo-bloco b{font-size:19px} .njp-faixa-tempo-sep{font-size:17px} } @media (min-width:1201px){ .njp-faixa-destaque.njp-so-celular{display:none} } /* ---------- header ---------- */ .njp-site-header{position:sticky;top:0;z-index:40;background:var(--surface)} .njp-header-main{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px} /* * Altura exata no computador (29/10/2026, dono: "entre njp-site-header e njp-category-nav há um vão de 1px"): a barra de * categorias gruda a 77px do topo (ou logo + 28px), mas a altura do cabeçalho vinha do conteúdo — o texto "Minha conta / * Carrinho" — e mudava com a fonte: 77px com a Barlow, 76px com Arial (enquanto a fonte do site não carrega, ou noutro * aparelho) = fresta de 1px com a página rolando por baixo; com outras, 79px. Agora o cabeçalho tem a MESMA conta da barra * (a dela fica mais abaixo neste arquivo); o conteúdo continua centralizado. Só onde a barra gruda (acima de 1200px). */ @media (min-width:1201px){ .njp-header-main{height:77px} @supports (top:max(1px,2px)){ .njp-header-main{height:max(77px,calc(var(--njp-logo-h,30px) + 28px))} } } .njp-logo{display:flex;align-items:center;flex-shrink:0} /* Altura: Personalizar → "Cabeçalho e rodapé" (--njp-logo-h no computador, --njp-logo-h-cel até 1200px — header.php). */ .njp-logo img{height:var(--njp-logo-h,30px);width:auto;display:block} .njp-search-form{flex:1;display:flex;min-width:0;position:relative} .njp-search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 46px -18px rgba(5,15,40,.3);z-index:60;overflow:hidden} .njp-search-suggest-item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--border)} .njp-search-suggest-item:last-of-type{border-bottom:none} .njp-search-suggest-item:hover,.njp-search-suggest-item.is-active{background:var(--surface-2)} .njp-search-suggest-item img{width:42px;height:42px;object-fit:contain;border:1px solid var(--border);border-radius:7px;background:var(--surface);flex-shrink:0;padding:3px} .njp-search-suggest-info{display:flex;flex-direction:column;gap:2px;min-width:0} .njp-search-suggest-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .njp-search-suggest-meta{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .njp-search-suggest-price{font-size:12px;font-weight:700;color:var(--green)} /* * ".njp-search-form button" (regra da lupa, mais acima neste arquivo) sem * querer também pega este botão — os dois são