/****************************************************************************** * ARQUIVO UNIFICADO DE ESTILOS DO HEADER * -------------------------------------- * Este arquivo combina todos os trechos de CSS fornecidos, referentes ao * header e seus componentes (botão "Assine Agora", navegação, dropdowns, temas, * ícones sociais, animações, etc.). * * Objetivo: * - Facilitar a manutenção ao manter todo o CSS do header em um único lugar. * - Preservar o layout atual, sem mudanças estruturais ou de comportamento. * - Fornecer comentários extensivos para orientar a equipe de desenvolvimento. * * Seções Principais: * 1. Variáveis e Temas (Light/Dark) * 2. Estilos Globais e Body * 3. Header e Divisores * 4. Navegação (Nav-Links, Dropdowns, Responsividade) * 5. Botões e Animações (Assine Agora, Pulso, etc.) * 6. Botões Sociais Personalizados (WhatsApp, TikTok, Facebook, Instagram) * 7. Botões Específicos (Área do Cliente, Fale com a Gente) *****************************************************************************/ /*============================================== = 1. VARIÁVEIS E TEMAS = ==============================================*/ /** * .light-theme * Descrição: Define variáveis (custom properties) para o tema claro. * Controla cores de fundo, cor principal de texto e cor de hover. * Uso: Aplica-se ao ou ao container principal para ativar o tema claro. */ .light-theme { --background-color: var(--bs-light); --background-header: linear-gradient(180deg, #0d47a1, #1565c0); --text-color: #000000; --item-hover: #ff9800; } /** * .dark-theme * Descrição: Define variáveis (custom properties) para o tema escuro. * Controla cores de fundo, cor principal de texto e cor de hover. * Uso: Aplica-se ao ou ao container principal para ativar o tema escuro. */ .dark-theme { --background-color: #1b1b1b; --background-header: linear-gradient(180deg, #102c3a, #133a4a); --text-color: #ffffff; --item-hover: #ff9800; } /** * .toggle-theme-btn * Descrição: Botão para alternar entre temas (light/dark). * Estilos: Remove borda e fundo padrão, configurando cor de texto e hover. */ .toggle-theme-btn { border: none; background: none; margin: 0; padding: 0; color: var(--bs-light); } .toggle-theme-btn:hover { color: var(--item-hover); } /*============================================== = 2. ESTILOS GLOBAIS E BODY = ==============================================*/ /** * body * Descrição: Aplica as cores de fundo e de texto baseadas nas variáveis, * além de transições suaves para alterações de tema. */ body { background-color: var(--background-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; font-size: 14px; /* Tamanho base da fonte */ } /*============================================== = 3. HEADER E DIVISORES = ==============================================*/ /** * header, .header-custom * Descrição: Configura o background e cores do header, baseado nas variáveis do tema. */ header, .header-custom { background: var(--background-header); color: #ffffff; transition: background 0.3s ease, color 0.3s ease; } /** * .vr-divider * Descrição: Divisor vertical para separar elementos no header. */ .vr-divider { background-color: var(--bs-secondary); width: 1px; height: 1.5rem; margin: 0 0.5rem; } /*============================================== = 4. NAVEGAÇÃO (NAV-LINKS, DROPDOWNS)= ==============================================*/ /** * .nav-link * Descrição: Links de navegação no header, configurados para uso em ambientes claros ou escuros. * Destaca cor no hover e no estado ativo. */ .nav-link { color: #ffffff; transition: color 0.3s ease; } .nav-link:hover, .nav-link:focus { color: #ff9800; } .nav-link.active { color: #ff9800 !important; font-weight: bold; } /** * .dropdown-menu, .dropdown-item * Descrição: Estiliza o menu e itens de dropdown no header, mantendo contraste e legibilidade. */ .dropdown-menu { background-color: var(--bs-dark); border: none; text-align: center; } .dropdown-item { color: #ffffff; transition: background-color 0.3s ease, color 0.3s ease; text-align: center; } .dropdown-item:hover { background-color: #ff9800; color: var(--bs-dark); } /** * Responsividade: Ajuste de tamanho para telas menores (mobile). */ @media (max-width: 576px) { .navbar-brand svg { height: 40px; } .nav-link { font-size: 1.1rem; padding: 0.75rem; } .dropdown-menu { left: auto; right: 0; } .toggle-theme-btn + .dropdown-menu { right: 1rem; left: auto; } } /*============================================== = 5. BOTÕES E ANIMAÇÕES (ASSINE AGORA) = ==============================================*/ /** * @keyframes pulseBase * Descrição: Animação de pulsação padrão para botões (efeito "pulse"). * Uso: Pode ser aplicada em qualquer elemento que precise de efeito de pulsar. */ @keyframes pulseBase { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } } /** * .assine-agora * Descrição: Botão destacado (CTA) com animação de pulsação contínua. * Usado para chamar atenção do usuário em ações primárias (ex: "Assine Agora"). */ .assine-agora { color: #ffffff; background-color: var(--item-hover); border-radius: 4px; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; box-shadow: 0 0 0 rgba(255, 152, 0, 0); animation: pulseBase 2s infinite; } .assine-agora:hover { background-color: #ff9800; color: #ffffff !important; transform: scale(1.05); } /** * .btn-menu * Descrição: Botão de navegação para exibição em menus específicos. * Mantém a cor branca e destaca cor no hover. */ .btn-menu { display: block; width: 100%; text-align: left; color: #ffffff; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; transition: background-color 0.3s ease, color 0.3s ease; } .btn-menu:hover, .btn-menu:focus { background-color: #ff9800; color: #ffffff; } /** * .nav-btn * Botões de navegação utilizados no menu mobile. * Herda estilo de .btn-menu e ajusta layout para * ocupar toda a largura com ícone e texto separados. */ .nav-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 1rem; } .nav-btn:hover { background-color: var(--item-hover); transform: scale(.98); } /** * .user-box * Container para avatar e nome do usuário no menu mobile. */ .user-box { display: flex; align-items: center; gap: .75rem; margin-bottom: 0.5rem; } /** * .btn-prominent * Descrição: Classe base para botões de destaque, sem a animação de pulso. * Compartilha estilo com o .assine-agora, porém estático. */ .btn-prominent { color: #ffffff; background-color: #ff9800; border: none; border-radius: 4px; text-decoration: none; text-align: center; display: block; width: 100%; padding: 0.5rem 0; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .btn-prominent:hover { background-color: #ffb74d; color: #ffffff !important; transform: scale(1.05); } /*============================================== = 6. BOTÕES SOCIAIS PERSONALIZADOS = ==============================================*/ /** * @keyframes pulseWhatsApp * Descrição: Animação de pulsação usando o verde oficial do WhatsApp. * Uso: Atribuída ao botão do WhatsApp (.btn-whatsapp). */ @keyframes pulseWhatsApp { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /** * .btn-whatsapp * Descrição: Botão customizado para WhatsApp, com cor oficial * e animação de pulsação própria. */ .btn-whatsapp { background-color: #25D366; color: #ffffff; animation: pulseWhatsApp 2s infinite; box-shadow: 0 0 0 rgba(37, 211, 102, 0); border: none; } .btn-whatsapp:hover { background-color: #128C7E; transform: scale(1.05); } /** * @keyframes pulseTiktok * Descrição: Animação de pulsação para o TikTok, usando vermelho oficial. */ @keyframes pulseTiktok { 0% { box-shadow: 0 0 0 0 rgba(238, 29, 82, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(238, 29, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 29, 82, 0); } } /** * .btn-tiktok * Descrição: Botão customizado para TikTok, usando cores oficiais e animação. */ .btn-tiktok { background-color: var(--bs-dark); color: #ffffff; animation: pulseTiktok 2s infinite; box-shadow: 0 0 0 rgba(238, 29, 82, 0); border: none; } .btn-tiktok:hover { background-color: #222222; transform: scale(1.05); } /** * @keyframes pulseFacebook * Descrição: Animação de pulsação para o Facebook, usando o azul oficial. */ @keyframes pulseFacebook { 0% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(24, 119, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0); } } /** * .btn-facebook * Descrição: Botão customizado para Facebook, usando cor oficial e animação. */ .btn-facebook { background-color: #1877F2; color: var(--bs-secondary); animation: pulseFacebook 2s infinite; box-shadow: 0 0 0 rgba(24, 119, 242, 0); border: none; } .btn-facebook:hover { background-color: #145dbf; transform: scale(1.05); } /** * @keyframes pulseInstagram * Descrição: Animação de pulsação para o Instagram, usando roxo oficial. */ @keyframes pulseInstagram { 0% { box-shadow: 0 0 0 0 rgba(193, 53, 132, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(193, 53, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(193, 53, 132, 0); } } /** * .btn-instagram * Descrição: Botão customizado para Instagram, com cor sólida e animação. */ .btn-instagram { background-color: #C13584; color: #ffffff; animation: pulseInstagram 2s infinite; box-shadow: 0 0 0 rgba(193, 53, 132, 0); border: none; } .btn-instagram:hover { background-color: #9B2A6D; transform: scale(1.05); } /*============================================== = 7. BOTÕES ESPECÍFICOS (CLIENTE, CHAT) = ==============================================*/ /** * .btn-area-cliente * Descrição: Botão para "Área do Cliente", com cor de fundo verde e efeito de hover. */ .btn-area-cliente { color: #fff; background-color: #4CAF50; border: none; border-radius: 4px; text-decoration: none; text-align: center; display: block; width: 100%; padding: 0.5rem 0; transition: background-color 0.3s ease, transform 0.2s ease; } .btn-area-cliente:hover { background-color: #43A047; transform: scale(1.05); } /** * .btn-chat * Descrição: Botão para "Fale com a Gente", com cor de fundo teal e efeito de hover. */ .btn-chat { color: #fff; background-color: #009688; border: none; border-radius: 4px; text-decoration: none; text-align: center; display: block; width: 100%; padding: 0.5rem 0; transition: background-color 0.3s ease, transform 0.2s ease; } .btn-chat:hover { background-color: #00796B; transform: scale(1.05); } /*============================================== = ÍCONES SOCIAIS (DESKTOP) = ==============================================*/ /** * .desktop-social-icons * Descrição: Container para ícones de redes sociais na versão desktop, * com espaçamento e alinhamento horizontal. */ .desktop-social-icons { display: flex; align-items: center; gap: 5px; } .desktop-social-icons a { display: inline-block; text-decoration: none; } .desktop-social-icons .icon { display: block; width: 20px; height: 20px; vertical-align: middle; fill: var(--bs-light); } .icon:hover { fill: var(--item-hover); } /** * .badge.bg-secondary * Descrição: Ajusta a cor do badge de acordo com o texto definido no tema. */ .badge.bg-secondary { background-color: rgba(108, 117, 125, 0.5); color: var(--text-color) !important; } /** * .divider * Descrição: Divisor simples em bloco (horizontal ou vertical), ocupando 100% da largura ou altura. */ .divider { display: block; width: 100%; height: auto; } @media (min-height: 700px) { .user-box img { width: 36px; } .offcanvas-body { padding-top: .5rem; padding-bottom: .5rem; } } @media (min-width: 992px) { .border-lg { border: 1px solid #ff9800; } } /*============================================== = 8. AJUSTES DO CARROSSEL (MOBILE) = ==============================================*/ /* CSS para forçar a mesma altura no carrossel (versão mobile) */ @media (max-width: 767px) { /* Garante que o wrapper do Swiper estique os slides igualmente */ .swiper-wrapper { align-items: stretch; } /* Cada slide (item do carrossel) ocupará toda a altura necessária */ .swiper-slide { /* força altura automática e exibe conteúdo no modo flex */ height: auto !important; display: flex; align-items: stretch; margin: 0 auto; /* opcional: centralizar, se desejar */ } /* A .card também em modo flex, para ocupar 100% e alinhar itens */ .swiper-slide .card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; } /* O 'corpo' expande enquanto header/footer ficam fixos */ .swiper-slide .card .card-body { flex: 1; } } /*.icon-only {*/ /* background: transparent; !* Remove o fundo *!*/ /* border: none; !* Remove a borda *!*/ /* padding: 5px; !* Remove o padding *!*/ /*}*/