@charset "UTF-8"; /* ========================================================================== modern.css — Camada de modernização do tema "default" (MCB Kit Alimentos) -------------------------------------------------------------------------- Objetivo: modernizar o visual MANTENDO A BASE (Bootstrap 3 + carfixing). - Carregado por ÚLTIMO no (depois de custom.css) para vencer por ordem de origem com a menor especificidade possível. - NÃO substitui style-main.css/bootstrap.min.css — apenas sobrescreve pontos. - Reaproveita as CSS variables já definidas em links-head.php (#var_style): --texto_principal, --texto_secundaria, --texto_menu, --texto_topo, --bg_topo, --bg_cabecalho, --bg_menu, --hover, --bg_geral, --overlay, --footer_bg, --footer_color. ========================================================================== */ /* Tokens próprios da camada moderna (espaçamento/raio/sombra/transição) */ :root { --m-radius: 12px; --m-radius-sm: 8px; --m-shadow: 0 8px 24px rgba(17, 22, 34, 0.08); --m-shadow-hover: 0 16px 40px rgba(17, 22, 34, 0.14); --m-transition: 0.25s ease; --m-section-pad: 60px; } /* ========================================================================== 1. BASE / TIPOGRAFIA ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Nunito", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: 0.1px; } p { line-height: 1.7; } img { max-width: 100%; height: auto; } a { transition: color var(--m-transition); } /* Títulos com um pouco mais de presença e respiro */ h1, h2, h3, h4, h5, h6 { font-family: "Nunito", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.2px; } /* ========================================================================== 2. RITMO DE SEÇÕES (GRID GERAL) -------------------------------------------------------------------------- Padroniza o espaçamento vertical entre as seções da home, que hoje usam utilitários soltos (pt-40/pb-0). Mantém respiro consistente. ========================================================================== */ .main-content > section, #section-empresa, #section-servicos, #section-produtos, #section-galeria, #section-parceiros, #section-contato, #section-blog { padding-top: var(--m-section-pad); padding-bottom: var(--m-section-pad); } /* O banner do catálogo logo abaixo do hero respira melhor */ .catalogo-produtos { display: block; margin: 0 auto; border-radius: var(--m-radius); box-shadow: var(--m-shadow); transition: transform var(--m-transition), box-shadow var(--m-transition); } .catalogo-produtos:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-hover); } /* Títulos de seção: padroniza tamanho e respiro do conjunto .line-bottom */ .section-content .line-bottom, h2.line-bottom, h3.line-bottom, .title.line-bottom { margin-bottom: 32px; font-weight: 800; letter-spacing: 0.4px; } /* ========================================================================== 3. HEADER / MENU ========================================================================== */ /* Logo não deve esticar (style-main.css força width:100%) */ .menuzord-brand img { width: auto !important; max-height: 60px; height: auto; } /* Barra de busca recolhida deve ficar oculta até ser acionada (corrige a "pílula" branca aparecendo no topo) */ #top-search-bar.collapse:not(.in) { display: none !important; } /* Topbar (faixa de e-mail/redes) com mais respiro */ .header-top .widget { padding-top: 4px; padding-bottom: 4px; } .header-top .styled-icons a { transition: opacity var(--m-transition); } .header-top .styled-icons a:hover { opacity: 0.75; } /* Faixa do logo/contato */ .header-middle { padding-top: 6px; padding-bottom: 6px; } /* Menu principal (menuzord): tipografia e respiro mais modernos */ .menuzord-menu > li > a { font-size: 14px; font-weight: 600; letter-spacing: 0.3px; padding-left: 16px; padding-right: 16px; transition: background var(--m-transition), color var(--m-transition); } /* Dropdown de serviços mais limpo */ .menuzord-menu ul.dropdown { border: none; box-shadow: var(--m-shadow); border-radius: 0 0 var(--m-radius-sm) var(--m-radius-sm); overflow: hidden; padding: 6px 0; } .menuzord-menu ul.dropdown li a { transition: background var(--m-transition), color var(--m-transition); } /* CTA "Pedir Cotação" no menu: alinhado e destacado */ ul.section-link-externo { display: flex; align-items: center; } ul.section-link-externo li a.btn { border-radius: 999px !important; font-weight: 700; letter-spacing: 0.4px; box-shadow: 0 6px 16px rgba(17, 22, 34, 0.18); transition: transform var(--m-transition), box-shadow var(--m-transition); } ul.section-link-externo li a.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(17, 22, 34, 0.26); } /* ========================================================================== 4. HERO / SLIDER (Revolution Slider) -------------------------------------------------------------------------- Rede de segurança: enquanto o slider NÃO inicializa (a