/* * NATAL.CSS — VERSÃO 10 — NATAL GOURMET PREMIUM * * OBJETIVO * Aplicar a identidade visual de Natal ao site O Salgadão sem alterar o * HTML, os produtos, os preços, a navegação ou as regras de negócio. * v10: uniformiza somente os fundos do catálogo e das laterais; * preserva tipografia, cards, guirlanda, enfeites e neve. * * PERSONALIZAÇÃO * Todas as cores do tema ficam concentradas no :root abaixo. * Imagens auxiliares em PNG na mesma pasta do natal.css: * natal-guirlanda-desktop.png, natal-guirlanda-mobile.png, * natal-enfeite-esquerda.png e natal-enfeite-direita.png. * * COMPATIBILIDADE * Mantidas as regras do CSS anterior para busca mobile, preços, descrições, * imagens, botões, cabeçalho, menu e neve. Os detalhes adicionados usam * principalmente cores, bordas, sombras e pseudo-elementos decorativos. * * ATENÇÃO À NEVE * O JavaScript define width, height e animation-duration em cada floco. * Nunca usar !important nessas três propriedades. A animação executa uma * única vez; o próprio JavaScript remove o floco ao terminar. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Inter:wght@400;500;600;700;800&display=swap'); /* =============================================================== 1. PALETA DO NATAL — ALTERE AS CORES SOMENTE AQUI =============================================================== */ :root { /* Cores principais da campanha (não afetam a logomarca). */ --natal-vermelho: #870708; --natal-vermelho-hover: #b32d2f; --natal-verde: #16553a; --natal-dourado: #d3aa58; --natal-dourado-claro: #f0dfbc; /* Fundos, bordas, textos e preço em destaque. */ --natal-fundo: #fff9ef; --natal-fundo-card: #fffdf9; --natal-fundo-cabecalho: #fffaf2; --natal-branco: #ffffff; --natal-texto: #393630; --natal-texto-secundario: #74706b; --natal-borda: #d3b079; --natal-borda-interna: #fff1d4; --natal-preco-pix: #07852c; --natal-preco-antigo: #86817d; --natal-sombra: rgba(102, 59, 15, 0.18); /* Tipografia do catálogo: ajustes concentrados aqui. */ --natal-fonte-produtos: 'Inter', Arial, sans-serif; --natal-fonte-titulo-produto: 18px; --natal-fonte-descricao-produto: 14px; --natal-fonte-preco: 20px; --natal-fonte-preco-antigo: 12px; --natal-fonte-titulo-categoria: 24px; /* Guirlanda: imagem transparente fornecida no pacote. */ /* Imagens auxiliares locais: desktop, mobile e enfeites laterais. */ --natal-imagem-guirlanda: url('./natal-guirlanda-desktop.png?v=7'); --natal-imagem-guirlanda-mobile: url('./natal-guirlanda-mobile.png?v=7'); --natal-imagem-lateral-esquerda: url('./natal-enfeite-esquerda.png?v=7'); --natal-imagem-lateral-direita: url('./natal-enfeite-direita.png?v=7'); /* Dimensões ajustáveis sem mexer nas regras CSS abaixo. */ /* Altura da faixa: toda a guirlanda cabe na faixa, inclusive o laço. * O PNG já foi preparado com proporção adequada para esta faixa. */ --natal-altura-guirlanda: clamp(68px, 5.4vw, 96px); --natal-altura-guirlanda-mobile: clamp(46px, 12vw, 57px); /* Sangria visual: fica acima da área visível e não contém peças essenciais. * A imagem começa ANTES da tela, mas toda a guirlanda continua visível. */ --natal-sangria-topo: clamp(8.5px, 0.675vw, 12px); --natal-sangria-topo-mobile: 6px; --natal-lateral-largura: clamp(95px, 8.3vw, 132px); --natal-lateral-altura: clamp(240px, 20vw, 320px); --natal-posicao-enfeites-laterais: clamp(300px, 28vw, 460px); /* v9: painel com tom de confeitaria, bordas e detalhes ornamentais. */ --natal-fundo-creme: #fff7e9; --natal-fundo-creme-claro: #fffdf5; --natal-card-fundo-superior: #fffefa; --natal-card-fundo-inferior: #fff9f0; --natal-card-borda-premium: #d8b27a; --natal-card-borda-oferta: #e8ac31; --natal-card-sombra-forte: rgba(126, 80, 30, 0.20); --natal-ornamentos-fundo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22430%22%20height%3D%22360%22%20viewBox%3D%220%200%20430%20360%22%3E%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23cfa058%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.6%22%20opacity%3D%22.22%22%3E%20%20%20%20%20%3Cg%20transform%3D%22translate%2853%2C85%29%22%3E%3Cpath%20d%3D%22M-18%200H18%20M0-18V18%20M-13-13L13%2013%20M13-13L-13%2013%22%2F%3E%3Cpath%20d%3D%22M-18%200l5-4m-5%204l5%204%20M18%200l-5-4m5%204l-5%204%20M0-18l-4%205m4-5l4%205%20M0%2018l-4-5m4%205l4-5%22%2F%3E%3C%2Fg%3E%20%20%20%20%20%3Cg%20transform%3D%22translate%28352%2C266%29%20scale%28.72%29%22%3E%3Cpath%20d%3D%22M-22%200H22%20M0-22V22%20M-16-16L16%2016%20M16-16L-16%2016%22%2F%3E%3C%2Fg%3E%20%20%20%20%20%3Cg%20transform%3D%22translate%28195%2C305%29%20scale%28.34%29%22%3E%3Cpath%20d%3D%22M-18%200H18%20M0-18V18%20M-13-13L13%2013%20M13-13L-13%2013%22%2F%3E%3C%2Fg%3E%20%20%20%20%20%3Cg%20transform%3D%22translate%28312%2C47%29%20scale%28.35%29%22%3E%3Cpath%20d%3D%22M-15%200H15%20M0-15V15%20M-11-11L11%2011%20M11-11L-11%2011%22%2F%3E%3C%2Fg%3E%20%20%20%3C%2Fg%3E%20%20%20%3Cg%20fill%3D%22%23d3aa58%22%20opacity%3D%22.20%22%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22265%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%22386%22%20cy%3D%22111%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%22231%22%20cy%3D%2263%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22279%22%20cy%3D%22191%22%20r%3D%221.3%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E"); /* Menu fixo inferior do celular: mantenha os ícones originais. */ --natal-menu-rodape-fundo: #fff7ec; --natal-menu-rodape-borda: #e5ceaa; --natal-menu-rodape-ativo: #870708; --natal-menu-rodape-sombra: rgba(102, 59, 15, 0.11); /* Nomes exigidos pelo tema original; permanecem compatíveis. */ --primary-color: var(--natal-vermelho); --primary-img-color: linear-gradient(to right, var(--natal-vermelho), var(--natal-vermelho)); --primary-color-hover: var(--natal-vermelho-hover); --primary-img-color-hover: linear-gradient(to right, var(--natal-vermelho-hover), var(--natal-vermelho-hover)); --primary-font-color: var(--natal-branco); --primary-bg-color: var(--natal-fundo-creme); } /* =============================================================== 2. FUNDO E GUIRLANDA — SEM ALTERAR A ESTRUTURA DO SITE =============================================================== */ body { background-color: var(--primary-bg-color) !important; background-image: linear-gradient(180deg, var(--natal-fundo) 0%, var(--natal-branco) 100%) !important; /* v3 aplicava padding-top para uma guirlanda solta no body. * v4 move a decoração para dentro do header, sem espaço duplicado. */ padding-top: 0 !important; } /* Garante que o pseudo-elemento solto da versão anterior não permaneça. */ body::before { content: none !important; display: none !important; } /* O cabeçalho e a guirlanda passam a rolar como uma unidade. * position:sticky preserva a interação com logomarca, busca e carrinho. */ header { position: sticky !important; top: 0 !important; z-index: 900 !important; background-color: var(--natal-fundo-cabecalho) !important; border-bottom: 1px solid var(--natal-dourado-claro) !important; box-shadow: 0 2px 10px rgba(96, 58, 20, 0.09) !important; overflow: visible !important; } /* v7: desenha o PNG INTEIRO, sem corte superior nem inferior. * A arte tem uma pequena extensão verde (sangria) no alto: ela fica acima * da viewport e faz o Natal começar no primeiro pixel visível da página. * Ao contrário da v6, não se usa 100% auto numa caixa mais baixa: isso * causava corte do laço e deixava uma faixa clara no início da página. * O tamanho compacto foi preparado diretamente no PNG. */ header::before { content: '' !important; display: block !important; width: 100% !important; height: calc(var(--natal-altura-guirlanda) + var(--natal-sangria-topo)) !important; margin-top: calc(-1 * var(--natal-sangria-topo)) !important; background-image: var(--natal-imagem-guirlanda) !important; background-position: center top !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; pointer-events: none !important; } /* Original: barra superior transparente e sem alterar margens. */ #top { background-color: transparent !important; margin: 0 0 5px 0 !important; } /* =============================================================== 3. BANNERS, CATEGORIAS E CARDS DE PRODUTOS =============================================================== */ .carousel { border: 0px !important; } /* Acabamento discreto do banner principal na página inicial. */ .common-home .carousel, .common-home .swiper-viewport, #common-home .carousel { border-radius: 12px !important; box-shadow: 0 5px 16px var(--natal-sombra) !important; } /* Títulos das categorias com um pequeno detalhe natalino, sem linha adicional. */ .common-home #content h2, .common-home #content h3, #common-home #content h2, #common-home #content h3 { display: flex !important; align-items: center !important; gap: 9px !important; color: var(--natal-vermelho) !important; font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-titulo-categoria) !important; font-weight: 800 !important; line-height: 1.3 !important; padding-top: 5px !important; padding-bottom: 8px !important; } /* Estrela delicada, em vez de inserir elementos no HTML. */ .common-home #content h2::before, .common-home #content h3::before, #common-home #content h2::before, #common-home #content h3::before { content: '✦' !important; flex: 0 0 auto !important; color: var(--natal-dourado) !important; font-family: Arial, sans-serif !important; font-size: 0.85em !important; } /* Borda gourmet reforçada: na v3 o champanhe claro desaparecia no branco. * Inclui nomes de cards usuais de temas responsivos sem afetar o layout. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile), .product-thumb { background-color: var(--natal-fundo-card) !important; border: 1.5px solid var(--natal-borda) !important; border-radius: 16px !important; box-shadow: inset 0 0 0 1px var(--natal-borda-interna), 0 3px 7px rgba(102, 59, 15, 0.11), 0 8px 18px var(--natal-sombra) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } @media (hover: hover) and (pointer: fine) { #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile):hover, .product-thumb:hover { border-color: var(--natal-dourado) !important; box-shadow: inset 0 0 0 1px var(--natal-borda-interna), 0 5px 12px rgba(102, 59, 15, 0.17), 0 10px 25px var(--natal-sombra) !important; } } /* Não aplica filtros, sobreposições ou alterações nas fotos dos produtos. */ .product-thumb .image { /* Mantém desativado o fundo padrão do tema, como no CSS original. */ background-image: none !important; background-color: var(--natal-branco) !important; border-radius: 12px !important; } .product-thumb .image img { padding: 15px !important; } .img-thumbnail { padding: 15px !important; } .img-fluid { width: 100% !important; } /* Fontes de catálogo: a v3 mudava quase apenas a cor, não o peso/tamanho. * Aplicamos Inter somente nos cards, para não mudar a fonte da marca/menu. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile), .product-thumb { font-family: var(--natal-fonte-produtos) !important; } /* Título principal do produto — cobre as estruturas de cards mais comuns. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.product-name, .product-title, .name, .title, h3, h4, h5), #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.product-name, .product-title, .name, .title, h3, h4, h5) a, #content .product-thumb .caption > a:first-child, #content .product-thumb .description > a:first-child, .product-thumb .caption h4, .product-thumb .caption h4 a { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-titulo-produto) !important; font-weight: 750 !important; line-height: 1.3 !important; letter-spacing: -0.25px !important; color: var(--natal-texto) !important; } /* Texto descritivo: legível, mas subordinado ao nome e ao preço. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.description p, .caption p, .product-description, .description-text), .product-thumb .description { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-descricao-produto) !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--natal-texto-secundario) !important; } /* Preço do Pix: destaque forte conforme a prévia, sem alterar valores. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.price-new, .price-current, .current-price, .sale-price, .price .amount), .product-thumb .price-new, .product-thumb .price .price-new { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-preco) !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -0.45px !important; color: var(--natal-preco-pix) !important; } /* Preço no cartão segue presente, sem riscar (não é preço antigo). * Preserva as informações adicionais exigidas nas regras originais. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) .price-old, .product-thumb .price-old { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-preco-antigo) !important; font-weight: 500 !important; color: var(--natal-preco-antigo) !important; text-decoration: none !important; } .price-new::after, .price-old::before, .price-old::after { font-family: var(--natal-fonte-produtos) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: normal !important; } /* Destaca etiquetas promocionais existentes, sem criar ofertas novas. */ .product-thumb .badge, .product-thumb .product-label, .product-thumb .sticker, .product-thumb .label-sale { border-radius: 7px !important; box-shadow: 0 2px 6px var(--natal-sombra) !important; } /* Preserva a apresentação comercial já definida para os preços. */ .price-old { text-decoration: none !important; color: var(--primary-color-hover) !important; } .price-old::after { content: ' no cartão' !important; } .price-old::before { content: ' ou ' !important; } .price-new::after { content: ' no Pix' !important; } /* Mantém exatamente duas linhas nas descrições. */ .description a { line-height: 1.5em !important; max-height: 3em !important; /* line-height x número de linhas. */ min-height: 3em !important; /* Reserva o espaço mesmo para texto curto. */ overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .description p { line-height: 1.5em !important; max-height: 3em !important; min-height: 3em !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } /* Mantém o fundo próprio da ampliação das imagens de produtos. */ .image.magnific-popup img { background-image: url('https://osalgadao.com.br/extension/themaedit/product_bg.png'); background-color: var(--natal-branco); } /* =============================================================== 3B. ENFEITES LATERAIS — SOMENTE NAS MARGENS DA HOME DESKTOP =============================================================== */ /* * Os pseudo-elementos não criam produtos, não capturam cliques e ficam * nas margens externas do conteúdo. Evita-se overlay sobre os cards. * As imagens laterais possuem espaçamento transparente no rodapé e são * repetidas de cima para baixo com o aspecto original preservado. */ .common-home #content, #common-home #content { position: relative !important; } .common-home #content::before, .common-home #content::after, #common-home #content::before, #common-home #content::after { content: '' !important; position: absolute !important; top: var(--natal-posicao-enfeites-laterais) !important; width: var(--natal-lateral-largura) !important; /* Cobre a altura restante do catálogo; a arte repete com intervalos. */ height: calc(100% - var(--natal-posicao-enfeites-laterais)) !important; min-height: var(--natal-lateral-altura) !important; background-repeat: repeat-y !important; /* PNG com grande área transparente: um enfeite por ~1100–1200 px. * Nunca esticar a altura da arte; dimensionar só pela largura. */ background-size: 100% auto !important; pointer-events: none !important; z-index: 0 !important; } /* Folhas e bolas próximas à margem esquerda. */ .common-home #content::before, #common-home #content::before { left: calc(-1 * var(--natal-lateral-largura)) !important; background-image: var(--natal-imagem-lateral-esquerda) !important; background-position: left top !important; } /* Enfeites correspondentes junto à margem direita. */ .common-home #content::after, #common-home #content::after { right: calc(-1 * var(--natal-lateral-largura)) !important; background-image: var(--natal-imagem-lateral-direita) !important; background-position: right top !important; } /* Evita apertar ou sobrepor produtos quando a margem lateral é pequena. */ @media (max-width: 1199px) { .common-home #content::before, .common-home #content::after, #common-home #content::before, #common-home #content::after { display: none !important; } } /* =============================================================== 4. CORES EXISTENTES DO MENU, BOTÕES, LINKS E RODAPÉ =============================================================== */ #menu { background-image: var(--primary-img-color) !important; } .btn-primary { background-image: var(--primary-img-color) !important; color: var(--primary-font-color) !important; } .btn-primary:disabled { color: var(--primary-font-color) !important; } .btn-inverse { background-image: var(--primary-img-color) !important; } .btn-inverse:hover { background-image: var(--primary-img-color-hover) !important; } .btn-light { background-image: var(--primary-img-color) !important; color: var(--primary-font-color) !important; } .btn-light:hover { background-image: var(--primary-img-color-hover) !important; color: var(--primary-font-color) !important; } .list-group-item.active { color: var(--natal-vermelho-hover) !important; } #menu #category { color: var(--primary-font-color) !important; } a { color: var(--primary-color) !important; transition: color 0.3s !important; } a:hover { color: var(--primary-color-hover) !important; } .navbar-light .navbar-toggler { background-color: transparent !important; background-image: none !important; border-color: var(--primary-font-color) !important; } #menu .navbar-toggler i { color: var(--primary-font-color) !important; } #menu .navbar-nav > li > a { color: var(--primary-font-color) !important; text-shadow: none !important; font-family: 'Fredoka One', cursive !important; font-size: 16px !important; } #menu .navbar-nav > li > a:hover { background-image: var(--primary-img-color-hover) !important; } .list-inline-item, #top .nav > .list-inline .list-inline-item > a, #top .nav > .list-inline .list-inline-item .dropdown > a { color: var(--primary-color) !important; } #top .nav > .list-inline > .list-inline-item, #top .nav > .list-inline .list-inline-item > a, #top .nav > .list-inline .list-inline-item .dropdown > a { color: var(--primary-color) !important; } .product-thumb .button-group button { background-image: var(--primary-img-color) !important; color: var(--primary-font-color) !important; } .product-thumb .button-group button:hover { background-image: var(--primary-img-color-hover) !important; color: var(--primary-font-color) !important; } footer { background-color: var(--primary-color) !important; } /* Mantém os links do rodapé legíveis sobre o fundo vinho. */ footer a, footer a:hover { color: var(--natal-branco) !important; } /* =============================================================== 5. RESPONSIVIDADE — MANTÉM OS CONTROLES E A GRADE ORIGINAIS =============================================================== */ @media (max-width: 768px) { :root { /* Imagem mobile com proporção própria; mantém o laço legível. */ --natal-altura-guirlanda: var(--natal-altura-guirlanda-mobile); --natal-sangria-topo: var(--natal-sangria-topo-mobile); --natal-imagem-guirlanda: var(--natal-imagem-guirlanda-mobile); --natal-fonte-titulo-produto: 16px; --natal-fonte-descricao-produto: 13px; --natal-fonte-preco: 18px; --natal-fonte-preco-antigo: 11px; --natal-fonte-titulo-categoria: 20px; } /* Regra já existente: não exibir o campo de busca nesta coluna. */ .col-md-5:has(#search) { display: none !important; } /* O mobile usa sua própria arte, desenhada integralmente na faixa. */ header::before { background-size: 100% 100% !important; background-position: center top !important; } /* Acabamento compacto sem modificar a quantidade de produtos. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile), .product-thumb { border-radius: 14px !important; box-shadow: inset 0 0 0 1px var(--natal-borda-interna), 0 3px 8px rgba(102, 59, 15, 0.12), 0 6px 15px var(--natal-sombra) !important; } .common-home #content h2, .common-home #content h3, #common-home #content h2, #common-home #content h3 { gap: 7px !important; } /* Menu inferior fixo: acabamento champanhe sem alterar tamanho ou posição. */ :is( #bottom-nav, #bottom-menu, #mobile-bottom-nav, #mobile-menu-bottom, .bottom-nav, .bottom-navigation, .bottom-menu, .mobile-bottom-nav, .mobile-bottom-navigation, .mobile-bottom-menu, .mobile-footer-nav, .mobile-footer-menu, .mobile-menu-bottom, .footer-mobile-menu, .footer-bottom-nav, .bottom-tab-bar, .bottom-tab-nav, nav.fixed-bottom ) { background-color: var(--natal-menu-rodape-fundo) !important; background-image: linear-gradient(180deg, var(--natal-branco), var(--natal-menu-rodape-fundo)) !important; border-top: 1px solid var(--natal-menu-rodape-borda) !important; box-shadow: 0 -3px 14px var(--natal-menu-rodape-sombra) !important; } /* Sinaliza o item ativo com vinho, preservando as demais cores dos ícones. */ :is( #bottom-nav, #bottom-menu, #mobile-bottom-nav, #mobile-menu-bottom, .bottom-nav, .bottom-navigation, .bottom-menu, .mobile-bottom-nav, .mobile-bottom-navigation, .mobile-bottom-menu, .mobile-footer-nav, .mobile-footer-menu, .mobile-menu-bottom, .footer-mobile-menu, .footer-bottom-nav, .bottom-tab-bar, .bottom-tab-nav, nav.fixed-bottom ) :is(.active, .selected, [aria-current='page']) { color: var(--natal-menu-rodape-ativo) !important; } /* Mantém as imagens dos enfeites fora da região clicável no celular. */ .common-home #content::before, .common-home #content::after, #common-home #content::before, #common-home #content::after { display: none !important; } } /* =============================================================== 6. V9 — ACABAMENTO GOURMET MAIS PRÓXIMO DA PRÉVIA APROVADA =============================================================== */ /* Fundo natalino único: a mesma cor em toda a largura da página. * Preserva os flocos SVG da v9, mas remove o degradê que fazia algumas * regiões parecerem mais brancas que outras. */ body { background-color: var(--natal-fundo-creme) !important; background-image: var(--natal-ornamentos-fundo) !important; background-repeat: repeat !important; background-size: 430px 360px !important; } /* O fundo do body deve aparecer por trás dos contêineres do catálogo. * Cards, imagens, cabeçalho e elementos interativos mantêm seus fundos. */ #content, .ifood-products { background-color: transparent !important; background-image: none !important; } /* A classe bg-white era pintada de creme e criava retângulos. * Limitamos a transparência à página inicial. */ body.common-home .bg-white, .common-home .bg-white, #common-home .bg-white { background-color: transparent !important; background-image: none !important; } #content > .row { background-color: transparent !important; background-image: none !important; } /* Borda de confeitaria: champanhe mais presente, fundo marfim e sombra * em camadas como na prévia. Evita dimensões fixas, para manter a grade. * Incluímos nomes comuns de cards, sem selecionar categorias inteiras. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) { box-sizing: border-box !important; background-color: var(--natal-card-fundo-superior) !important; background-image: linear-gradient(160deg, var(--natal-card-fundo-superior), var(--natal-card-fundo-inferior)) !important; border: 1.5px solid var(--natal-card-borda-premium) !important; border-radius: 17px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(126, 80, 30, 0.12), 0 7px 16px var(--natal-card-sombra-forte) !important; transition: border-color .2s ease, box-shadow .2s ease !important; } @media (hover: hover) and (pointer: fine) { #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile):hover { border-color: var(--natal-card-borda-oferta) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 12px rgba(126, 80, 30, .16), 0 9px 22px var(--natal-card-sombra-forte) !important; } } /* Somente cards com etiqueta de oferta já existente recebem borda dourada. * Não criamos etiquetas novas, nem alteramos preços ou promoções. */ @supports selector(:has(*)) { #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile):has(:is(.badge, .product-label, .sticker, .label-sale, .special-offer)) { border-color: var(--natal-card-borda-oferta) !important; } } /* Compatibilidade com cards que não usam os nomes de classe acima. * Só seleciona caixas com foto ou legenda como filho direto E preço; * isso evita afetar categorias, colunas ou a seção inteira. */ @supports selector(:has(*)) { #content :is(article, div, a):has(> .image):has(:is(.price-new, .price-current, .current-price)), #content :is(article, div, a):has(> .caption):has(:is(.price-new, .price-current, .current-price)) { background-color: var(--natal-card-fundo-superior) !important; background-image: linear-gradient(160deg, var(--natal-card-fundo-superior), var(--natal-card-fundo-inferior)) !important; border: 1.5px solid var(--natal-card-borda-premium) !important; border-radius: 17px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 5px rgba(126,80,30,.12), 0 7px 16px var(--natal-card-sombra-forte) !important; } } /* TÍTULO — garante que a fonte forte seja aplicada ao link real do nome. * O tema pode colocá-lo em .description, .caption ou diretamente no card. * Não estilizamos os links de imagem nem os botões de comprar. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.description a, .caption h3, .caption h3 a, .caption h4, .caption h4 a, .product-name, .product-name a, .product-title, .product-title a, .name a), #content .description > a[href*="/product/"] { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-titulo-produto) !important; font-weight: 800 !important; line-height: 1.28 !important; letter-spacing: -.35px !important; text-decoration: none !important; color: var(--natal-texto) !important; } /* Em alguns templates o link do produto não tem classe semântica. */ #content :is(.caption, .description) > a:not(.btn) { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-titulo-produto) !important; font-weight: 800 !important; line-height: 1.28 !important; letter-spacing: -.35px !important; text-decoration: none !important; color: var(--natal-texto) !important; } /* DESCRIÇÃO — tamanho confortável e cinza quente, sem retirar a regra * antiga que limita a exibição a duas linhas. */ #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) :is(.description p, .caption p, .product-description, .description-text) { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-descricao-produto) !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--natal-texto-secundario) !important; } /* PREÇOS — regras diretas para cobrir também cards que tenham uma estrutura * diferente de .product-thumb. Não modificam os números apresentados. */ #content :is(.price-new, .price-current, .current-price, .sale-price, .price-special) { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-preco) !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -.4px !important; color: var(--natal-preco-pix) !important; } #content :is(.price-old, .old-price, .price-original) { font-family: var(--natal-fonte-produtos) !important; font-size: var(--natal-fonte-preco-antigo) !important; font-weight: 500 !important; letter-spacing: normal !important; color: var(--natal-preco-antigo) !important; } /* Somente no celular: valorize o produto sem ocupar o espaço da foto. * O posicionamento, a quantidade de produtos e o menu seguem intactos. */ @media (max-width: 768px) { #content :is(.product-thumb, .product-card, .product-item, .product-box, .product-tile) { border-radius: 15px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 3px 6px rgba(126, 80, 30, .12), 0 6px 15px var(--natal-card-sombra-forte) !important; } } /* * NEVE NATALINA * O JS cria os elementos .snowflake, define posição, tamanho e duração, * e os remove após a queda. Por isso a animação NÃO pode ser infinita. */ .snowflake { position: fixed !important; top: -10px !important; background-image: url('./snowflakes.png') !important; background-size: contain !important; background-repeat: no-repeat !important; width: 30px; /* Valor padrão; o JavaScript sobrescreve por floco. */ height: 30px; /* Valor padrão; o JavaScript sobrescreve por floco. */ opacity: 1 !important; pointer-events: none !important; /* Não impede cliques na loja. */ z-index: 9999 !important; /* Exibe a neve acima do tema. */ animation-name: fall !important; animation-timing-function: linear !important; animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; /* Não fixar animation-duration: o JavaScript define esse valor. */ } @keyframes fall { 0% { transform: translateY(-10px) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } /* Mantém as dimensões originais da listagem de produtos. */ .ifood-products { width: 100%; margin: 0 auto; }