/* ============================================================ ADB SUPPLY — CSS PERSONALIZADO PARA TEMA SIMPLE NUVEMSHOP Paleta: Navy #0B1F3A | Azul #1D6FBF | Âmbar #F9A825 Como usar: Painel → Loja online → Layout → Personalizar → Edição de CSS avançada → Colar tudo ============================================================ */ /* ── BLOCO 1 — IDENTIDADE BASE (Cores e Tipografia) ── */ /* Importa fonte Barlow do Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700&display=swap'); /* Aplica fonte em todo o site */ body, body *:not(i):not(.icon) { font-family: 'Barlow', sans-serif !important; } /* Títulos em Barlow Condensed */ h1, h2, h3, .js-product-name, .product-name, .title { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.3px; } /* Cor de texto principal */ body { color: #2C3E50 !important; } /* Fundo geral levemente acinzentado (mais clean que branco puro) */ body { background-color: #F7F9FC !important; } /* ── BLOCO 2 — CABEÇALHO E NAVEGAÇÃO ── */ /* Fundo do cabeçalho — navy escuro */ header, .js-header, #header, .header, .site-header { background-color: #0B1F3A !important; border-bottom: none !important; } /* Logo — garante visibilidade no fundo escuro */ .js-header .logo a, header .logo a, .site-header .logo a { color: #ffffff !important; } /* Links do menu de navegação */ header nav a, .js-header nav a, .main-nav a, .navigation a, #header nav a { color: #A8BDD4 !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.3px !important; transition: color 0.15s !important; } /* Hover dos links do menu */ header nav a:hover, .js-header nav a:hover, .main-nav a:hover, .navigation a:hover { color: #ffffff !important; text-decoration: none !important; } /* Link ativo no menu */ header nav a.active, .main-nav a.active { color: #F9A825 !important; border-bottom: 2px solid #F9A825 !important; } /* Barra de busca no header */ .js-header .search-input, header .search-input, .search-bar input, input[type="search"] { background-color: #1A3A5C !important; border: 1px solid #2D5C8A !important; color: #ffffff !important; border-radius: 4px !important; } input[type="search"]::placeholder, .search-input::placeholder { color: #7EAACF !important; } /* Ícones do header (carrinho, busca) */ .js-header .icon, header .icon, .header-icons a, .cart-icon, .search-icon { color: #A8BDD4 !important; fill: #A8BDD4 !important; } .js-header .icon:hover, header .icon:hover { color: #F9A825 !important; fill: #F9A825 !important; } /* Contador do carrinho */ .js-cart-count, .cart-count, .badge-cart { background-color: #F9A825 !important; color: #0B1F3A !important; font-weight: 700 !important; } /* Barra de anúncios (announcement bar) */ .announcement-bar, .promo-bar, .js-announcement-bar { background-color: #1D6FBF !important; color: #ffffff !important; font-size: 12px !important; font-weight: 500 !important; } .announcement-bar a, .promo-bar a { color: #F9A825 !important; } /* ── BLOCO 3 — BOTÕES E CALLS TO ACTION ── */ /* Botão principal — "Comprar", "Adicionar ao carrinho" */ .js-buy-button, .buy-button, .add-to-cart, .js-add-to-cart, button[data-store="add-to-cart"], .btn-primary, input[type="submit"], button[type="submit"], .checkout-button, .js-checkout-button { background-color: #1D6FBF !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-family: 'Barlow', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.3px !important; padding: 12px 24px !important; cursor: pointer !important; transition: background-color 0.15s, transform 0.1s !important; text-transform: none !important; } .js-buy-button:hover, .buy-button:hover, .add-to-cart:hover, .js-add-to-cart:hover, button[data-store="add-to-cart"]:hover { background-color: #155a9e !important; color: #ffffff !important; } .js-buy-button:active, .buy-button:active { transform: scale(0.98) !important; } /* Botão de cotação / CTA secundário — âmbar */ .btn-cotacao, .btn-secondary, .js-whatsapp-button, .whatsapp-button { background-color: #F9A825 !important; color: #0B1F3A !important; border: none !important; border-radius: 6px !important; font-weight: 700 !important; padding: 12px 24px !important; cursor: pointer !important; transition: background-color 0.15s !important; } .btn-cotacao:hover, .btn-secondary:hover { background-color: #F57F17 !important; color: #ffffff !important; } /* Botão "Ver mais", "Carregar mais produtos" */ .btn-load-more, .load-more, .js-load-more, .see-more { background-color: transparent !important; color: #1D6FBF !important; border: 1px solid #1D6FBF !important; border-radius: 6px !important; font-weight: 600 !important; transition: all 0.15s !important; } .btn-load-more:hover, .load-more:hover { background-color: #1D6FBF !important; color: #ffffff !important; } /* ── BLOCO 4 — CARDS DE PRODUTO ── */ /* Card de produto */ .product-item, .js-product-item, .product-card, .item-product { background-color: #ffffff !important; border: 1px solid #DDE8F4 !important; border-radius: 8px !important; overflow: hidden !important; transition: border-color 0.15s, box-shadow 0.15s !important; } /* Hover no card */ .product-item:hover, .js-product-item:hover, .product-card:hover { border-color: #1D6FBF !important; box-shadow: 0 4px 16px rgba(29,111,191,0.1) !important; } /* Nome do produto */ .product-item .product-name, .js-product-name, .item-product .name { color: #0B1F3A !important; font-weight: 600 !important; font-size: 13px !important; } /* Preço */ .product-price, .js-product-price, .price, .item-price { color: #1D6FBF !important; font-size: 17px !important; font-weight: 700 !important; } /* Preço original riscado */ .product-compare-price, .compare-price, .price-compare, .js-compare-price { color: #9AAFC4 !important; font-size: 12px !important; text-decoration: line-through !important; } /* Badge de oferta / desconto */ .product-tag, .badge-offer, .js-product-tag, .tag-discount, .offer-badge { background-color: #F9A825 !important; color: #0B1F3A !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 3px !important; padding: 3px 8px !important; letter-spacing: 0.5px !important; } /* Badge "Esgotado" */ .sold-out-badge, .js-sold-out, .product-out-of-stock { background-color: #DDE8F4 !important; color: #6B8CAE !important; } /* Imagem do produto — padroniza fundo */ .product-item .image-wrapper, .product-image, .js-product-image { background-color: #F2F7FD !important; } /* ── BLOCO 5 — PÁGINA DE PRODUTO ── */ /* Título do produto na página individual */ .product-detail .product-name, .js-product-detail .product-name, h1.product-title { color: #0B1F3A !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; } /* Preço na página do produto */ .product-detail .product-price, .js-product-detail .price { color: #1D6FBF !important; font-size: 26px !important; font-weight: 700 !important; } /* Descrição do produto */ .product-description, .js-product-description, .description { color: #4A6580 !important; font-size: 14px !important; line-height: 1.75 !important; } /* Breadcrumb */ .breadcrumb, .breadcrumbs, .js-breadcrumb { font-size: 12px !important; color: #9AAFC4 !important; } .breadcrumb a, .breadcrumbs a { color: #1D6FBF !important; text-decoration: none !important; } .breadcrumb a:hover, .breadcrumbs a:hover { text-decoration: underline !important; } /* Seletor de variações (tamanho, tipo) */ .product-variants .variant-option, .js-variant-option { border: 1px solid #DDE8F4 !important; border-radius: 4px !important; color: #2C3E50 !important; transition: all 0.15s !important; } .product-variants .variant-option:hover, .js-variant-option:hover, .product-variants .variant-option.selected, .js-variant-option.active { border-color: #1D6FBF !important; background-color: #E8F1FB !important; color: #0B1F3A !important; } /* Calculadora de frete */ .shipping-calculator, .js-shipping-calculator { background-color: #F7F9FC !important; border: 1px solid #DDE8F4 !important; border-radius: 8px !important; padding: 16px !important; } .shipping-calculator input[type="text"], .js-shipping-calculator input { border: 1px solid #DDE8F4 !important; border-radius: 4px !important; } .shipping-calculator button, .js-shipping-calculator button { background-color: #1D6FBF !important; color: #ffffff !important; border-radius: 4px !important; } /* ── BLOCO 6 — RODAPÉ ── */ footer, .js-footer, #footer, .site-footer { background-color: #0B1F3A !important; color: #7EAACF !important; border-top: none !important; } footer a, .site-footer a, .footer-links a { color: #7EAACF !important; text-decoration: none !important; transition: color 0.15s !important; } footer a:hover, .site-footer a:hover { color: #F9A825 !important; } footer h3, footer h4, .footer-title, .site-footer h3 { color: #ffffff !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* Copyright */ .footer-copyright, .copyright { color: #3D5A78 !important; font-size: 11px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } /* ── BLOCO 7 — DETALHES FINAIS ── */ /* Links gerais */ a { color: #1D6FBF !important; } a:hover { color: #0B1F3A !important; } /* Paginação */ .pagination a, .js-pagination a { border: 1px solid #DDE8F4 !important; color: #1D6FBF !important; border-radius: 4px !important; } .pagination a.active, .pagination a:hover { background-color: #1D6FBF !important; color: #ffffff !important; border-color: #1D6FBF !important; } /* Mensagem de estoque baixo */ .low-stock, .js-low-stock, .stock-warning { color: #F57F17 !important; font-size: 12px !important; font-weight: 600 !important; } /* Filtros de categoria */ .filter-item, .category-filter, .js-filter { border: 1px solid #DDE8F4 !important; border-radius: 4px !important; color: #2C3E50 !important; } .filter-item:hover, .filter-item.active, .js-filter.active { background-color: #E8F1FB !important; border-color: #1D6FBF !important; color: #0B1F3A !important; } /* Inputs e selects gerais */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { border: 1px solid #DDE8F4 !important; border-radius: 6px !important; color: #2C3E50 !important; font-family: 'Barlow', sans-serif !important; } input:focus, select:focus, textarea:focus { border-color: #1D6FBF !important; box-shadow: 0 0 0 3px rgba(29,111,191,0.08) !important; outline: none !important; } /* Notificações / alertas */ .alert-success, .notification-success { background-color: #EAF3DE !important; border-color: #3B6D11 !important; color: #27500A !important; } .alert-error, .notification-error { background-color: #FFEBEE !important; border-color: #C62828 !important; color: #B71C1C !important; } /* Botão flutuante de WhatsApp (se usar app) */ .whatsapp-float, .btn-whatsapp-float { background-color: #25D366 !important; }