/* * TEMA CSS PROFISSIONAL PARA LOJA INTEGRADA - ATUALIZAÇÃO: MENU ESTENDIDO * Autor: Gemini AI * Data: 10 de Julho de 2025 * * Esta atualização foca em fazer o menu principal se estender por toda a largura da página. * As alterações foram feitas principalmente na seção do cabeçalho. * * Dicas importantes: * 1. Sempre inspecione os elementos (F12 no navegador) na sua loja para * confirmar as classes e IDs exatas que a Loja Integrada utiliza. * 2. Se uma regra não estiver aplicando, tente aumentar a especificidade * do seletor (ex: 'body #id-do-elemento .classe-do-elemento'). * 3. Certifique-se de que a fonte 'Montserrat' seja carregada (veja instruções abaixo). */ /* --- 1. Reset Básico e Fontes --- */ /* Define a fonte principal para todo o site, cores de fundo e texto padrão. */ body { font-family: 'Montserrat', sans-serif; /* Fonte moderna e legível */ background-color: #f8f8f8; /* Fundo cinza muito claro para um toque suave */ color: #333333; /* Cor de texto padrão, um cinza escuro */ line-height: 1.6; -webkit-font-smoothing: antialiased; /* Suaviza a renderização da fonte */ -moz-osx-font-smoothing: grayscale; } /* Para que a fonte 'Montserrat' funcione, adicione esta linha em: * Visual da Loja > Incluir código HTML > Meta Tags (dentro da tag ) * */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: #222222; /* Títulos em um cinza mais escuro */ margin-bottom: 15px; font-weight: 600; /* Semibold para destaque */ } a { color: #a08a6d; /* Cor de destaque: um tom de dourado/bronze */ text-decoration: none; transition: color 0.3s ease; } a:hover { color: #8a735a; /* Tom mais escuro no hover */ text-decoration: underline; } /* --- 2. Layout Geral e Contêineres --- */ /* Ajusta a largura máxima do conteúdo e o espaçamento. */ .container { max-width: 1280px; /* Largura máxima um pouco maior para mais espaço */ margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } /* Ajustes para o corpo principal do site */ #corpo { padding-top: 40px; padding-bottom: 60px; } /* --- 3. Cabeçalho (Top Bar e Menu Principal) --- */ /* Top Bar (Barra Superior de Notícias/Contato) */ .barra-inicial, .top-bar { /* Seletores para compatibilidade com a LI */ background-color: #222222; /* Fundo preto/cinza escuro */ color: #ffffff; font-size: 0.8em; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linha sutil */ } .barra-inicial a, .top-bar a { color: #ffffff; opacity: 0.9; transition: opacity 0.3s ease; } .barra-inicial a:hover, .top-bar a:hover { opacity: 1; } /* Cabeçalho Principal (#cabecalho) */ #cabecalho { background-color: #ffffff; /* Fundo branco limpo */ box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07); /* Sombra suave */ padding: 25px 0; position: relative; z-index: 100; } /* Logo */ .logo img { max-height: 90px; /* Tamanho da logo ajustado */ width: auto; } /* Menu Principal de Navegação - ALTERAÇÕES AQUI PARA ESTENDER A LARGURA */ /* O elemento que contém o menu precisa ter 100% de largura */ /* Assumindo que o menu está dentro de um div com a classe 'menu-principal-wrapper' ou similar */ /* Se o menu estiver diretamente dentro de #cabecalho, ajuste os seletores */ .menu-principal-wrapper, /* Adicione esta classe se ela existir no seu HTML */ #cabecalho .conteudo-topo .inferior { /* Este seletor é do seu código original, pode ser o wrapper */ width: 100%; /* Ocupa toda a largura disponível */ background-color: #f0f0f0; /* Fundo cinza claro para o menu, como na imagem */ padding: 15px 0; /* Espaçamento vertical para o menu */ box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Sombra interna sutil */ margin-top: 20px; /* Espaçamento do cabeçalho */ } /* =============================== MENU PRINCIPAL ================================== */ #cabecalho .conteiner .menu.superior { position: absolute; bottom: -1px; left: 0; width: 100%; background: #ff9900; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } /* Melhorar tamanho da fonte do menu */ .menu.superior .nivel-um > li > a > strong { font-size: 12pt; } /* Remover seta do menu com submenu */ .menu li.com-filho > a i { display: none; } #cabecalho .menu.superior > .nivel-um, /* Seletores comuns da LI para o menu principal */ .menu-catalogo { display: flex; justify-content: center; /* Centraliza os itens do menu dentro do wrapper de 100% */ list-style: none; padding: 0; margin: 0; max-width: 1280px; /* Limita a largura do conteúdo do menu para não ficar muito esticado */ margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } #cabecalho .menu.superior > .nivel-um > li, .menu-catalogo > li { padding: 0 20px; /* Espaçamento entre os itens */ position: relative; } #cabecalho .menu.superior > .nivel-um > li > a, .menu-catalogo > li > a { font-weight: 500; text-transform: uppercase; color: #444444; /* Cor de texto do menu */ padding: 12px 0; display: block; transition: color 0.3s ease; } #cabecalho .menu.superior > .nivel-um > li > a:hover, .menu-catalogo > li > a:hover { color: #a08a6d; /* Cor de destaque no hover */ } /* Submenus (se existirem e forem padrão da LI) */ #cabecalho .menu.superior .nivel-dois { background-color: #ffffff; border: 1px solid #eeeeee; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 10px 0; z-index: 10; border-radius: 4px; } #cabecalho .menu.superior .nivel-dois li a { padding: 10px 20px; color: #555555; display: block; } #cabecalho .menu.superior .nivel-dois li a:hover { background-color: #f0f0f0; color: #a08a6d; } /* Campo de Busca no Cabeçalho */ #campo-busca input[type="text"] { border: 1px solid #dddddd; border-radius: 20px; /* Bordas arredondadas */ padding: 10px 20px; width: 100%; max-width: 280px; /* Largura máxima para a busca */ transition: border-color 0.3s ease, box-shadow 0.3s ease; font-size: 0.95em; } #campo-busca input[type="text"]:focus { border-color: #a08a6d; box-shadow: 0 0 0 0.2rem rgba(160, 138, 109, 0.25); outline: none; } #campo-busca button { background-color: transparent; border: none; color: #888888; padding: 0 12px; cursor: pointer; font-size: 1.2em; } #campo-busca button:hover { color: #a08a6d; } /* Ícones de Conta/Carrinho (Ações da Conta) */ #cabecalho .acoes-conta > li > a { color: #555555; transition: color 0.3s ease; } #cabecalho .acoes-conta > li > a:hover { color: #a08a6d; } #cabecalho .acoes-conta > li > i { font-size: 1.5em; /* Tamanho dos ícones */ } /* --- 4. Banners e Slideshow --- */ /* Ajustes para o banner principal */ .banners .banner-principal, .vitrine-banner .owl-item img { border-radius: 6px; /* Cantos levemente arredondados */ overflow: hidden; margin-bottom: 40px; /* Espaçamento abaixo do banner */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra mais pronunciada */ } /* --- 5. Vitrine de Produtos --- */ .listagem-item, .produto { /* Seletores comuns da LI para produtos */ background-color: #ffffff; border: 1px solid #eeeeee; border-radius: 8px; padding: 20px; text-align: center; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .listagem-item:hover, .produto:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); transform: translateY(-8px); /* Efeito de elevação mais notável */ border-color: #dddddd; } /* Imagens do Produto */ .listagem-item .imagem-principal, .produto .produto__imagem { height: 240px; /* Altura fixa para as imagens */ overflow: hidden; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .listagem-item .imagem-principal img, .produto .produto__imagem img { width: 100%; height: 100%; object-fit: contain; /* Ajusta a imagem dentro do espaço sem cortar */ border-radius: 4px; display: block; max-width: 100%; } /* Nome do Produto */ .listagem-item .nome-produto, .produto .titulo-produto { font-size: 1.15em; font-weight: 500; margin-bottom: 10px; min-height: 50px; /* Garante altura mínima para nomes de produtos */ display: flex; align-items: center; justify-content: center; flex-grow: 1; } .listagem-item .nome-produto a, .produto .titulo-produto a { color: #333333; transition: color 0.3s ease; } .listagem-item .nome-produto a:hover, .produto .titulo-produto a:hover { color: #a08a6d; text-decoration: none; } /* Preços */ .listagem-item .preco-produto .preco-promocional, .produto .preco-promocional { font-size: 1.6em; font-weight: 700; color: #e74c3c; /* Vermelho vibrante para promoção */ margin-top: 8px; margin-bottom: 8px; } .listagem-item .preco-produto .preco-original, .produto .preco-original { font-size: 0.95em; color: #999999; text-decoration: line-through; margin-bottom: 8px; } .listagem-item .forma-pagamento, .produto .forma-pagamento { font-size: 0.85em; color: #666666; margin-bottom: 20px; } /* --- 6. Botões --- */ .botao, .btn-primary, .botao-comprar, .botao-principal { /* Seletores para compatibilidade */ background-color: #a08a6d !important; /* Cor de destaque para botões */ color: #ffffff !important; border: none !important; border-radius: 5px; padding: 12px 30px; font-weight: 600; text-transform: uppercase; font-size: 0.95em; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; display: inline-block; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .botao:hover, .btn-primary:hover, .botao-comprar:hover, .botao-principal:hover { background-color: #8a735a !important; /* Tom mais escuro no hover */ transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Botão de Adicionar ao Carrinho na página do produto (exemplo) */ .principal .comprar .acoes-produto .comprar { /* Seletor comum na LI */ background-color: #27ae60 !important; /* Verde para 'Comprar' */ } .principal .comprar .acoes-produto .comprar:hover { background-color: #229954 !important; } /* --- 7. Rodapé --- */ .footer, #rodape { /* Seletores para compatibilidade */ background-color: #222222; /* Fundo escuro */ color: #ffffff; padding: 50px 0; font-size: 0.9em; border-top: 5px solid #a08a6d; /* Borda de destaque */ } .footer h4, #rodape h4 { color: #ffffff; font-size: 1.2em; margin-bottom: 25px; text-transform: uppercase; font-weight: 600; } .footer ul, #rodape ul { list-style: none; padding: 0; margin: 0; } .footer ul li, #rodape ul li { margin-bottom: 10px; } .footer ul li a, #rodape ul li a { color: #cccccc; transition: color 0.3s ease; } .footer ul li a:hover, #rodape ul li a:hover { color: #a08a6d; text-decoration: none; } .footer .redes-sociais a i, #rodape .redes-sociais a i { font-size: 1.6em; margin-right: 12px; color: #ffffff; transition: color 0.3s ease; } .footer .redes-sociais a i:hover, #rodape .redes-sociais a i:hover { color: #a08a6d; } .footer .copyright, #rodape .copyright { text-align: center; margin-top: 40px; color: #999999; } /* --- 8. Responsividade Geral (Ajustes para Telas Menores) --- */ @media screen and (max-width: 991px) { /* Tablets e Mobile */ #cabecalho { padding: 15px 0; } /* Ajustes para o menu mobile (geralmente controlado por JS da LI) */ /* O wrapper do menu também deve ser 100% em mobile */ .menu-principal-wrapper, #cabecalho .conteudo-topo .inferior { padding: 10px 0; /* Menos padding em mobile */ margin-top: 10px; } #cabecalho .menu.superior > .nivel-um, .menu-catalogo { flex-direction: column; align-items: flex-start; padding-left: 0; /* Remove padding lateral do container interno */ padding-right: 0; } #cabecalho .menu.superior > .nivel-um > li, .menu-catalogo > li { width: 100%; padding: 0; border-bottom: 1px solid #f0f0f0; } #cabecalho .menu.superior > .nivel-um > li:last-child { border-bottom: none; } #cabecalho .menu.superior > .nivel-um > li > a, .menu-catalogo > li > a { padding: 15px 25px; font-size: 1em; } #campo-busca { margin-top: 20px; order: 3; /* Move a busca para baixo no cabeçalho mobile */ } .listagem-item, .produto { margin-bottom: 25px; /* Espaçamento entre produtos em telas menores */ } .footer .col-md-3 { margin-bottom: 35px; text-align: center; } } @media screen and (max-width: 767px) { /* Mobile Pequeno */ h1 { font-size: 1.6em; } h2 { font-size: 1.4em; } .top-bar .container, .barra-inicial .container { flex-direction: column; text-align: center; } .listagem-item .nome-produto, .produto .titulo-produto { font-size: 1em; } .listagem-item .preco-produto .preco-promocional, .produto .preco-promocional { font-size: 1.4em; } } /* --- 9. WhatsApp Flutuante --- */ /* Garante que o botão do WhatsApp seja visível e acessível. */ .whatsapp-fixo { position: fixed; bottom: 25px; /* Distância da parte inferior */ left: 25px; /* Distância da lateral */ z-index: 9999; /* Z-index bem alto */ width: 65px; /* Tamanho do ícone/botão */ height: 65px; display: flex; align-items: center; justify-content: center; background-color: #25D366; /* Cor oficial do WhatsApp */ border-radius: 50%; /* Torna-o redondo */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } .whatsapp-fixo:hover { transform: scale(1.1); /* Efeito de leve aumento no hover */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .whatsapp-fixo img { width: 40px; /* Tamanho da imagem do ícone */ height: 40px; } /* Se você estiver usando um ícone de fonte (Font Awesome, por exemplo), use: */ /* .whatsapp-fixo i { font-size: 2.2em; color: #ffffff; } */