/** * @author Unbox | Marco Moura * @link https://unboxbr.com.br * @project Unbox Layout * @module Front CSS (header/footer escopado em .ubxl-) * @version 0.1.0 * @updated 2026-05-31 * @license GPL-2.0-or-later * * Todo seletor é escopado em .ubxl-header / .ubxl-footer. Cores herdam tokens * var(--ubx-*) do Design System; sobrescritas por instância via --ubxl-*. */ /* --------------------------------------------------------------------------- Mapeamento de tokens (herança + fallback Unbox) --------------------------------------------------------------------------- */ .ubxl-header, .ubxl-footer { --_bg:var(--ubxl-bg, var(--ubx-surface, #ffffff)); --_text:var(--ubxl-text, var(--ubx-text, #111113)); --_link:var(--ubxl-link, var(--ubx-text, #111113)); --_hover:var(--ubxl-hover, var(--ubx-primary, #f97316)); --_border:var(--ubxl-border, var(--ubx-border, #e0e0e8)); --_container:var(--ubx-container, 1140px); --_radius:var(--ubx-btn-radius, 7px); --_font-h:var(--ubx-font-heading, 'Sora', sans-serif); --_font-b:var(--ubx-font-body, 'Sora', sans-serif); box-sizing:border-box; } .ubxl-header *, .ubxl-footer *, .ubxl-header *::before, .ubxl-footer *::before { box-sizing:border-box; } /* =========================================================================== HEADER =========================================================================== */ .ubxl-header { background:var(--_bg); color:var(--_text); font-family:var(--_font-b); position:relative; z-index:1000; transition:background .25s ease, transform .25s ease, box-shadow .25s ease, padding .25s ease; } /* Sombra do header (normal). Na barra flutuante a sombra fica na pílula. */ .ubxl-header:not(.ubxl-bar-floating) { box-shadow:var(--ubxl-shadow, none); } .ubxl-header.ubxl-no-transition, .ubxl-header.ubxl-no-transition * { transition:none !important; } /* Linha abaixo do header (controlável). Não se aplica à barra flutuante: a pílula é destacada e uma linha cheia abaixo dela fica deslocada. */ .ubxl-header.ubxl-divider:not(.ubxl-bar-floating) { border-bottom:1px solid var(--_border); } /* Skip link (acessibilidade) */ .ubxl-skip-link { position:absolute; left:-9999px; top:0; z-index:1200; background:var(--ubx-primary, #f97316); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; text-decoration:none; } .ubxl-skip-link:focus { left:0; } .ubxl-header .ubxl-inner { display:flex; align-items:center; gap:20px; width:100%; max-width:var(--_container); margin:0 auto; padding:0 24px; } .ubxl-header.ubxl-width-full .ubxl-inner { max-width:none; } .ubxl-header.ubxl-width-full-bg-boxed .ubxl-inner { max-width:var(--_container); } .ubxl-header .ubxl-bar { padding-top:calc(var(--ubxl-pad-y, 14px) + var(--ubxl-gap-top, 0px)); padding-bottom:calc(var(--ubxl-pad-y, 14px) + var(--ubxl-gap-bottom, 0px)); } .ubxl-header.ubxl-stuck .ubxl-bar, .ubxl-header.ubxl-fixed .ubxl-bar, .ubxl-header.ubxl-scrolled .ubxl-bar { padding-top:calc(var(--ubxl-pad-y, 14px) + var(--ubxl-gap-stuck, 0px)); } .ubxl-header.ubxl-stuck .ubxl-bar, .ubxl-header.ubxl-fixed .ubxl-bar, .ubxl-header.ubxl-scrolled .ubxl-bar { padding-bottom:calc(var(--ubxl-pad-y, 14px) + var(--ubxl-gap-bottom-stuck, 0px)); } .ubxl-header .ubxl-bar .ubxl-inner { min-height:var(--ubxl-height, 72px); } /* Formato de barra "flutuante" (pílula): a barra inteira vira uma pílula destacada das bordas, flutuando sobre o conteúdo. */ .ubxl-header.ubxl-bar-floating { background:transparent; } .ubxl-header.ubxl-bar-floating .ubxl-bar { padding-top:calc(16px + var(--ubxl-gap-top, 0px)); padding-bottom:calc(16px + var(--ubxl-gap-bottom, 0px)); } .ubxl-header.ubxl-bar-floating .ubxl-bar .ubxl-inner { background:var(--_bg); border:1px solid var(--_border); border-radius:999px; padding:10px 14px 10px 22px; box-shadow:var(--ubxl-shadow, none); max-width:min(var(--_container), calc(100% - 40px)); min-height:var(--ubxl-height, 64px); } /* CTA "encaixa" melhor dentro da pílula. */ .ubxl-header.ubxl-bar-floating .ubxl-cta { border-radius:var(--ubxl-cta-radius, 999px); } /* Em estado rolado/sticky, usa o espaço do topo "ao rolar". */ .ubxl-header.ubxl-bar-floating.ubxl-stuck .ubxl-bar, .ubxl-header.ubxl-bar-floating.ubxl-fixed .ubxl-bar, .ubxl-header.ubxl-bar-floating.ubxl-scrolled .ubxl-bar { padding-top:calc(8px + var(--ubxl-gap-stuck, 0px)); padding-bottom:calc(8px + var(--ubxl-gap-bottom-stuck, 0px)); } /* Quando flutuante e transparente, a pílula tem fundo sólido sobre o hero, então o texto interno volta a usar as cores normais (não a cor sobre-hero). */ .ubxl-header.ubxl-bar-floating.ubxl-transparent .ubxl-bar .ubxl-inner { background:var(--_bg); } .ubxl-header.ubxl-bar-floating.ubxl-transparent .ubxl-menu-link, .ubxl-header.ubxl-bar-floating.ubxl-transparent .ubxl-logo-text { color:var(--_text); } /* Busca/redes (NA BARRA do header) na pílula transparente respeitam a cor do ícone. Escopado em .ubxl-header-social para NÃO afetar as redes do sidebar. */ .ubxl-header.ubxl-bar-floating.ubxl-transparent .ubxl-header-social .ubxl-social-link { color:var(--ubxl-action-color, var(--_text)); } .ubxl-header.ubxl-bar-floating.ubxl-transparent .ubxl-search-toggle { color:var(--ubxl-search-color, var(--ubxl-action-color, var(--_text))); } .ubxl-zone { display:flex; align-items:center; gap:18px; } .ubxl-zone-start { flex:1 1 0; justify-content:flex-start; } .ubxl-zone-center { flex:0 0 auto; justify-content:center; } .ubxl-zone-end { flex:1 1 0; justify-content:flex-end; } /* Logo */ .ubxl-logo { display:inline-flex; align-items:center; text-decoration:none; color:inherit; } .ubxl-logo-img { display:block; width:auto; height:auto; max-height:var(--ubxl-logo-h, 36px); } .ubxl-logo-img-mobile { display:none; } .ubxl-logo-text { font-family:var(--_font-h); font-weight:700; font-size:20px; color:var(--_text); } /* Logo "ao rolar": troca a imagem (ou cor) quando o header entra no estado .ubxl-scrolled. As duas logos ocupam a MESMA célula de grid (1/1), centradas, então ficam exatamente no mesmo lugar mesmo com dimensões diferentes; só a opacidade/transform muda. O efeito é escolhido por .ubxl-lt-*. */ .ubxl-logo-swap { display:inline-grid; align-items:center; justify-items:center; } .ubxl-logo-swap .ubxl-logo-rest, .ubxl-logo-swap .ubxl-logo-scrolled { grid-area:1 / 1; transition:opacity .35s ease, transform .35s ease; will-change:opacity, transform; } .ubxl-logo-swap .ubxl-logo-scrolled { opacity:0; pointer-events:none; } .ubxl-logo-swap.ubxl-lt-none .ubxl-logo-rest, .ubxl-logo-swap.ubxl-lt-none .ubxl-logo-scrolled { transition:none; } /* estado rolado: troca rest -> scrolled (fade base) */ .ubxl-header.ubxl-logo-rolled .ubxl-logo-swap .ubxl-logo-rest { opacity:0; } .ubxl-header.ubxl-logo-rolled .ubxl-logo-swap .ubxl-logo-scrolled { opacity:1; } /* slide para cima */ .ubxl-lt-slide-up .ubxl-logo-scrolled { transform:translateY(10px); } .ubxl-header.ubxl-logo-rolled .ubxl-lt-slide-up .ubxl-logo-rest { transform:translateY(-10px); } .ubxl-header.ubxl-logo-rolled .ubxl-lt-slide-up .ubxl-logo-scrolled { transform:translateY(0); } /* slide para baixo */ .ubxl-lt-slide-down .ubxl-logo-scrolled { transform:translateY(-10px); } .ubxl-header.ubxl-logo-rolled .ubxl-lt-slide-down .ubxl-logo-rest { transform:translateY(10px); } .ubxl-header.ubxl-logo-rolled .ubxl-lt-slide-down .ubxl-logo-scrolled { transform:translateY(0); } /* zoom */ .ubxl-lt-scale .ubxl-logo-scrolled { transform:scale(.8); } .ubxl-header.ubxl-logo-rolled .ubxl-lt-scale .ubxl-logo-rest { transform:scale(.8); opacity:0; } .ubxl-header.ubxl-logo-rolled .ubxl-lt-scale .ubxl-logo-scrolled { transform:scale(1); opacity:1; } @media (prefers-reduced-motion: reduce) { .ubxl-logo-swap .ubxl-logo-rest, .ubxl-logo-swap .ubxl-logo-scrolled { transition:none; } } /* Logo "vazando": deixa o logo extrapolar a altura da barra/pílula sem aumentá-la. As margens verticais negativas absorvem o excedente (logo_h - altura), então a caixa do logo continua do tamanho da barra e a imagem transborda para fora. */ .ubxl-header.ubxl-logo-overflow .ubxl-logo { align-self:center; position:relative; z-index:2; } /* Vazamento vertical: valores explícitos (--ubxl-logo-ovt/ovb); sem eles, cai no cálculo automático (metade da diferença entre a altura da logo e a da barra). */ .ubxl-header.ubxl-logo-overflow .ubxl-logo-img { margin-top:calc(-1 * var(--ubxl-logo-ovt, max(0px, (var(--ubxl-logo-h, 36px) - var(--ubxl-height, 64px)) / 2))); margin-bottom:calc(-1 * var(--ubxl-logo-ovb, max(0px, (var(--ubxl-logo-h, 36px) - var(--ubxl-height, 64px)) / 2))); } /* Vazamento lateral: empurra a logo para fora pelo lado em que ela está. Usa transform (não margem) para não alterar a largura medida do conteúdo — senão o "Recolher quando não couber" dispararia falso e viraria hambúrguer. */ .ubxl-header.ubxl-logo-overflow.ubxl-logo-left .ubxl-logo { transform:translateX(calc(-1 * var(--ubxl-logo-ovs, 0px))); } .ubxl-header.ubxl-logo-overflow.ubxl-logo-right .ubxl-logo { transform:translateX(var(--ubxl-logo-ovs, 0px)); } /* Navegação */ .ubxl-nav { display:flex; } .ubxl-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--ubxl-menu-gap, 6px); } .ubxl-menu .ubxl-submenu { list-style:none; margin:0; padding:8px; } .ubxl-menu-link { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; color:var(--_link); text-decoration:none; font-size:15px; font-weight:500; border-radius:var(--_radius); white-space:nowrap; transition:color .15s ease, background .15s ease; } .ubxl-menu-link:hover, .ubxl-menu-item:focus-within > .ubxl-menu-link, .ubxl-menu-link[aria-current] { color:var(--_hover); } /* Estilos de menu */ .ubxl-menu-style-underline .ubxl-menu-link { position:relative; } .ubxl-menu-style-underline .ubxl-menu-link::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--_hover); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; } .ubxl-menu-style-underline .ubxl-menu-link:hover::after, .ubxl-menu-style-underline .ubxl-menu-item:focus-within > .ubxl-menu-link::after, .ubxl-menu-style-underline .ubxl-menu-link[aria-current]::after, .ubxl-menu-style-underline .current-menu-item > .ubxl-menu-link::after { transform:scaleX(1); } .ubxl-menu-style-uppercase .ubxl-menu-link { text-transform:uppercase; letter-spacing:.05em; font-size:13px; font-weight:600; } /* Divisores entre os itens de topo do menu (linha vertical no vão). */ .ubxl-menu-dividers .ubxl-menu > .ubxl-menu-item + .ubxl-menu-item { position:relative; } .ubxl-menu-dividers .ubxl-menu > .ubxl-menu-item + .ubxl-menu-item::before { content:""; position:absolute; top:50%; left:calc(var(--ubxl-menu-gap, 6px) / -2); transform:translateY(-50%); width:1px; height:14px; background:var(--_border); } .ubxl-menu-style-pill .ubxl-menu { background:var(--ubx-bg-alt, #f4f4f8); border-radius:99px; padding:4px; } .ubxl-menu-style-pill .ubxl-menu-link:hover, .ubxl-menu-style-pill .ubxl-menu-item:focus-within > .ubxl-menu-link { background:var(--_bg); color:var(--_hover); } .ubxl-menu-style-button .ubxl-menu-link:hover, .ubxl-menu-style-button .ubxl-menu-item:focus-within > .ubxl-menu-link { background:var(--_hover); color:#fff; } /* Submenus (dropdown) */ .ubxl-has-children { position:relative; } .ubxl-submenu { position:absolute; top:100%; left:0; min-width:200px; background:var(--_bg); border:1px solid var(--_border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:1001; } .ubxl-has-children:hover > .ubxl-submenu, .ubxl-has-children:focus-within > .ubxl-submenu, .ubxl-has-children.ubxl-open > .ubxl-submenu { opacity:1; visibility:visible; transform:translateY(0); } .ubxl-submenu .ubxl-submenu { top:0; left:100%; } .ubxl-submenu .ubxl-menu-link { display:flex; width:100%; } /* Mega menu */ .ubxl-mega { left:50%; transform:translate(-50%, 6px); width:min(900px, 92vw); display:grid; gap:8px; padding:18px; grid-template-columns:repeat(3, 1fr); } .ubxl-mega-item:hover > .ubxl-mega, .ubxl-mega-item:focus-within > .ubxl-mega, .ubxl-mega-item.ubxl-open > .ubxl-mega { transform:translate(-50%, 0); } .ubxl-mega-cols-2 .ubxl-mega, .ubxl-mega-cols-2 > .ubxl-mega { grid-template-columns:repeat(2,1fr); } .ubxl-mega-cols-4 > .ubxl-mega { grid-template-columns:repeat(4,1fr); } .ubxl-mega-cols-5 > .ubxl-mega { grid-template-columns:repeat(5,1fr); } .ubxl-mega > .ubxl-menu-item { display:block; } .ubxl-mega > .ubxl-menu-item > .ubxl-menu-link { font-weight:600; color:var(--_text); } .ubxl-mega .ubxl-submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:4px 0; min-width:0; } /* Toggle de submenu (mobile/teclado) */ .ubxl-submenu-toggle { display:none; align-items:center; justify-content:center; background:transparent; border:none; color:inherit; cursor:pointer; padding:6px; } .ubxl-submenu-toggle svg { transition:transform .2s ease; } .ubxl-open > .ubxl-submenu-toggle svg { transform:rotate(180deg); } /* Extras */ .ubxl-extras { display:flex; align-items:center; gap:14px; } .ubxl-cta { display:inline-flex; align-items:center; gap:8px; padding:var(--ubxl-cta-py, 9px) var(--ubxl-cta-px, 18px); border-radius:var(--ubxl-cta-radius, var(--_radius)); font-weight:600; font-size:var(--ubxl-cta-fs, 14px); text-decoration:none; border:1px solid transparent; white-space:nowrap; } .ubxl-cta-icon { flex:0 0 auto; width:18px; height:18px; } /* CTA dentro do sidebar: largura total (ou conteúdo) + alinhamento do rótulo. */ .ubxl-mobile-body .ubxl-cta { align-self:var(--ubxl-cta-mself, stretch); justify-content:var(--ubxl-cta-mjust, center); } /* Ícone de item de menu (do tema, via _ubxl_icon) */ .ubxl-menu-icon { flex:0 0 auto; width:18px; height:18px; } .ubxl-cta-primary { background:var(--ubxl-cta-bg, var(--ubx-primary, var(--_hover))); color:var(--ubxl-cta-fg, #fff); } .ubxl-cta-secondary { background:transparent; border-color:var(--ubxl-cta-bg, var(--_border)); color:var(--ubxl-cta-fg, var(--_text)); } .ubxl-cta-ghost { background:transparent; color:var(--ubxl-cta-bg, var(--ubx-primary, var(--_hover))); } .ubxl-cta:hover { opacity:.92; } /* Hover do CTA: usa as cores próprias de hover quando definidas; senão recai na cor base (o opacity acima dá o feedback sutil). */ .ubxl-cta-primary:hover { background:var(--ubxl-cta-bg-h, var(--ubxl-cta-bg, var(--ubx-primary, var(--_hover)))); color:var(--ubxl-cta-fg-h, var(--ubxl-cta-fg, #fff)); } .ubxl-cta-secondary:hover { background:var(--ubxl-cta-bg-h, transparent); border-color:var(--ubxl-cta-bg-h, var(--ubxl-cta-bg, var(--_border))); color:var(--ubxl-cta-fg-h, var(--ubxl-cta-fg, var(--_text))); } .ubxl-cta-ghost:hover { background:var(--ubxl-cta-bg-h, transparent); color:var(--ubxl-cta-fg-h, var(--ubxl-cta-bg, var(--ubx-primary, var(--_hover)))); } .ubxl-social { list-style:none; margin:0; padding:0; display:flex; gap:10px; align-items:center; } /* Redes no sidebar: alinhamento e tamanho dos ícones configuráveis. */ .ubxl-mobile-social { justify-content:var(--ubxl-msocial-just, flex-start); } .ubxl-mobile-social .ubxl-social-icon { width:var(--ubxl-msocial-size, 20px); height:var(--ubxl-msocial-size, 20px); } .ubxl-mobile-panel .ubxl-mobile-social .ubxl-social-link { color:var(--ubxl-msocial-color, var(--ubxl-panel-link, var(--_link))); } .ubxl-mobile-panel .ubxl-mobile-social .ubxl-social-link:hover { color:var(--ubxl-msocial-hover, var(--_hover)); } /* Fundo opcional atrás dos ícones de rede do sidebar (igual ao do header). */ .ubxl-mpanel-social-boxed .ubxl-mobile-social .ubxl-social-link { background:var(--ubxl-msocial-bg, var(--ubx-bg-alt, #f4f4f8)); border-radius:var(--ubxl-msocial-radius, 50%); padding:var(--ubxl-msocial-pad, 9px); display:inline-flex; align-items:center; justify-content:center; line-height:0; transition:background .15s ease, color .15s ease; } .ubxl-mpanel-social-boxed .ubxl-mobile-social .ubxl-social-link:hover { background:var(--ubxl-msocial-bg-h, var(--ubxl-msocial-bg, var(--ubx-bg-alt, #f4f4f8))); } .ubxl-social-link { color:var(--_link); display:inline-flex; transition:color .15s ease; } .ubxl-social-link:hover { color:var(--_hover); } /* Aparência dos ícones de ação no header (busca + redes): tamanho, cor e fundo. As redes têm vars próprias (--ubxl-hsocial-*) que sobrepõem as de ação, caindo para --ubxl-action-* quando não definidas — assim a aparência das redes é configurável de forma independente da busca. */ .ubxl-header-social .ubxl-social-link svg { width:var(--ubxl-hsocial-size, var(--ubxl-action-size, 20px)); height:var(--ubxl-hsocial-size, var(--ubxl-action-size, 20px)); } .ubxl-header-social .ubxl-social-link { color:var(--ubxl-hsocial-color, var(--ubxl-action-color, var(--_link))); } .ubxl-header-social .ubxl-social-link:hover { color:var(--ubxl-hsocial-color-h, var(--_hover)); } .ubxl-actions-boxed .ubxl-search-toggle, .ubxl-actions-boxed .ubxl-header-social .ubxl-social-link { background:var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8)); border-radius:var(--ubxl-action-radius, 50%); padding:var(--ubxl-action-pad, 9px); display:inline-flex; align-items:center; justify-content:center; line-height:0; } /* Fundo dedicado das redes do header (independente da busca). */ .ubxl-hsocial-boxed .ubxl-header-social .ubxl-social-link { background:var(--ubxl-hsocial-bg, var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8))); border-radius:var(--ubxl-hsocial-radius, var(--ubxl-action-radius, 50%)); padding:var(--ubxl-hsocial-pad, var(--ubxl-action-pad, 9px)); display:inline-flex; align-items:center; justify-content:center; line-height:0; } .ubxl-hsocial-boxed .ubxl-header-social .ubxl-social-link:hover { background:var(--ubxl-hsocial-bg-h, var(--ubxl-hsocial-bg, var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8)))); } /* Fundo próprio da busca, quando definido (sobrescreve o fundo geral). */ .ubxl-actions-boxed .ubxl-search-toggle { background:var(--ubxl-search-bg, var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8))); } .ubxl-search { position:relative; } .ubxl-search-toggle { background:transparent; border:none; color:var(--_link); cursor:pointer; display:inline-flex; padding:6px; } .ubxl-search-toggle:hover { color:var(--_hover); } /* Blindagem contra CSS de tema que repinta OU encolhe os SVGs do header (ex.: "header button{color:#fff}", "svg{width:auto/100%/1em}"), o que deixava o ícone de busca invisível/colapsado. Especificidade maior + tamanho, cor e stroke/fill explícitos. O !important no tamanho vence resets agressivos de tema. */ .ubxl-header .ubxl-search-toggle { color:var(--ubxl-search-color, var(--ubxl-action-color, var(--_link))); } .ubxl-header .ubxl-search-submit { color:var(--_link); } .ubxl-header .ubxl-search-toggle:hover, .ubxl-header .ubxl-search-submit:hover { color:var(--_hover); } .ubxl-header .ubxl-search-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; } .ubxl-header .ubxl-search-toggle svg { width:var(--ubxl-search-size, var(--ubxl-action-size, 20px)) !important; height:var(--ubxl-search-size, var(--ubxl-action-size, 20px)) !important; } .ubxl-header .ubxl-search-submit svg { width:18px !important; height:18px !important; } .ubxl-header .ubxl-search-toggle svg, .ubxl-header .ubxl-search-submit svg { stroke:currentColor; fill:none; flex:none; } /* Formulário de busca */ .ubxl-search-form { display:flex; align-items:center; gap:4px; flex:1; } .ubxl-search-input { flex:1; min-width:0; border:none; background:transparent; padding:8px 4px; font:inherit; color:inherit; outline:none; } /* Remove o "×" nativo do (WebKit/Chromium). */ .ubxl-search-input::-webkit-search-cancel-button, .ubxl-search-input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; } .ubxl-search-submit { background:transparent; border:none; color:var(--_link); cursor:pointer; display:inline-flex; padding:4px; } .ubxl-search-submit:hover { color:var(--_hover); } .ubxl-search-cancel { background:transparent; border:none; color:var(--_text); cursor:pointer; display:none; padding:4px; } /* Campo sempre visível (desktop "field" e no sidebar) */ .ubxl-search-inline { width:100%; } .ubxl-search-inline .ubxl-search-form { border:1px solid var(--_border); border-radius:var(--_radius); padding:2px 6px 2px 12px; min-width:200px; } .ubxl-search-shortcode { width:100%; } /* Painel revelado pelo ícone (oculto até .is-open) */ .ubxl-search-panel { display:none; z-index:1101; } .ubxl-search.is-open .ubxl-search-panel { display:block; } .ubxl-search-box { display:flex; align-items:center; flex-wrap:wrap; gap:6px; background:var(--_bg); border:1px solid var(--_border); border-radius:10px; padding:6px 8px 6px 14px; box-shadow:0 12px 32px rgba(0,0,0,.16); } /* Resultados da busca inteligente (autocomplete) */ .ubxl-search-results { flex-basis:100%; width:100%; margin-top:8px; max-height:min(60vh,440px); overflow-y:auto; display:flex; flex-direction:column; gap:2px; } .ubxl-search-results[hidden] { display:none !important; } .ubxl-search-box .ubxl-search-results { border-top:1px solid var(--_border); padding-top:8px; } .ubxl-search-result { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--_text); } .ubxl-search-result:hover, .ubxl-search-result:focus { background:var(--ubx-bg-alt, #f4f4f8); } .ubxl-search-result-thumb { width:56px; height:42px; flex:none; object-fit:cover; border-radius:8px; background:var(--ubx-bg-alt, #f4f4f8); } .ubxl-search-result-thumb.is-empty { display:inline-block; } .ubxl-search-result-info { display:flex; flex-direction:column; gap:2px; min-width:0; } .ubxl-search-result-type { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ubxl-search-type-color, #e01020); } .ubxl-search-result-title { font-size:15px; font-weight:600; color:var(--_text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ubxl-search-empty { padding:14px 10px; font-size:14px; color:var(--_text); opacity:.6; } /* Modo "campo sempre visível": resultados como dropdown ancorado, sem empurrar o layout. */ .ubxl-search-inline .ubxl-search-results { position:absolute; left:0; right:0; top:calc(100% + 6px); margin-top:0; z-index:1101; background:var(--_bg); border:1px solid var(--_border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.16); padding:6px; } /* No overlay, os resultados acompanham o campo grande. */ .ubxl-search-reveal-overlay .ubxl-search-result-title { font-size:17px; } .ubxl-search-reveal-overlay .ubxl-search-result-thumb { width:64px; height:48px; } /* dropdown: caixinha ao lado do ícone (abre p/ baixo; p/ cima quando embaixo) */ .ubxl-search-reveal-dropdown .ubxl-search-panel { position:absolute; right:0; top:calc(100% + 8px); width:min(320px, 80vw); } .ubxl-search-reveal-dropdown.ubxl-search-up .ubxl-search-panel { top:auto; bottom:calc(100% + 8px); } /* barra: faixa do tamanho do header (ancorada no .ubxl-header, que é relative) */ .ubxl-search-reveal-bar { position:static; } .ubxl-search-reveal-bar .ubxl-search-panel { position:absolute; left:0; right:0; top:100%; padding:8px 16px; } .ubxl-search-reveal-bar.ubxl-search-up .ubxl-search-panel { top:auto; bottom:100%; } /* slide: faixa full-width fixa no topo da tela (ou na base, se o botão está embaixo) */ .ubxl-search-reveal-slide .ubxl-search-panel { position:fixed; left:0; right:0; top:0; padding:10px 16px; background:var(--_bg); box-shadow:0 8px 24px rgba(0,0,0,.16); } .ubxl-search-reveal-slide.ubxl-search-up .ubxl-search-panel { top:auto; bottom:0; box-shadow:0 -8px 24px rgba(0,0,0,.16); } .ubxl-search-reveal-slide .ubxl-search-box { border:none; box-shadow:none; padding:0; } /* overlay: tela cheia com campo centralizado (grande ou pequeno) */ .ubxl-search-reveal-overlay .ubxl-search-panel { position:fixed; inset:0; background:rgba(0,0,0,.72); padding:18px; } .ubxl-search-reveal-overlay .ubxl-search-box { margin:15vh auto 0; width:min(760px, 92vw); gap:8px; padding:10px 16px 10px 26px; border-radius:16px; } .ubxl-search-reveal-overlay.ubxl-search-ov-sm .ubxl-search-box { width:min(520px, 90vw); } .ubxl-search-reveal-overlay .ubxl-search-input { font-size:24px; padding:16px 6px; } .ubxl-search-reveal-overlay.ubxl-search-ov-sm .ubxl-search-input { font-size:18px; padding:12px 6px; } /* Campo clean: sem borda/outline (inclui o foco vermelho do tema). */ .ubxl-header .ubxl-search-reveal-overlay .ubxl-search-input { border:none !important; outline:none !important; box-shadow:none !important; background:transparent; } /* Ícones de buscar/fechar ampliados (vencem a blindagem de tamanho de 18px). */ .ubxl-search-reveal-overlay .ubxl-search-submit, .ubxl-search-reveal-overlay .ubxl-search-cancel { padding:8px; flex:none; } .ubxl-header .ubxl-search-reveal-overlay .ubxl-search-submit svg { width:28px !important; height:28px !important; } .ubxl-header .ubxl-search-reveal-overlay .ubxl-search-cancel svg { width:30px !important; height:30px !important; } /* Botão fechar aparece em slide e overlay */ .ubxl-search-reveal-slide .ubxl-search-cancel, .ubxl-search-reveal-overlay .ubxl-search-cancel { display:inline-flex; } /* Top / bottom bar */ .ubxl-topbar, .ubxl-bottombar { font-size:13px; background:var(--ubx-bg-alt, #f4f4f8); border-bottom:1px solid var(--_border); } /* Cores próprias da top bar: sobrescrevem só quando a instância define --ubxl-tb-* (toggle no builder); senão, herdam o comportamento padrão. */ .ubxl-topbar { background:var(--ubxl-tb-bg, var(--ubx-bg-alt, #f4f4f8)); color:var(--ubxl-tb-text, var(--_text)); border-bottom-color:var(--ubxl-tb-border, var(--_border)); } .ubxl-topbar .ubxl-inner, .ubxl-bottombar .ubxl-inner { display:flex; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px; min-height:0; } .ubxl-bottombar a { color:var(--_link); } .ubxl-topbar a { color:var(--ubxl-tb-link, var(--_link)); } .ubxl-topbar-left, .ubxl-topbar-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .ubxl-topbar-item { display:inline-flex; align-items:center; gap:6px; color:var(--ubxl-tb-text, var(--_text)); text-decoration:none; } .ubxl-topbar-item:hover { color:var(--ubxl-tb-hover, var(--_hover)); } .ubxl-ui-icon { color:var(--_hover); flex:none; } .ubxl-topbar .ubxl-ui-icon { color:var(--ubxl-tb-hover, var(--_hover)); } .ubxl-topbar-nav .ubxl-topbar-menu { list-style:none; margin:0; padding:0; display:flex; gap:14px; } .ubxl-topbar-menu .ubxl-submenu, .ubxl-topbar-menu .ubxl-submenu-toggle { display:none; } .ubxl-topbar-menu .ubxl-menu-link { padding:2px 0; font-size:13px; color:var(--ubxl-tb-link, var(--_link)); } .ubxl-topbar-social { gap:8px; } .ubxl-topbar-social .ubxl-social-link { color:var(--ubxl-tb-link, var(--_link)); } .ubxl-topbar-social .ubxl-social-link:hover { color:var(--ubxl-tb-hover, var(--_hover)); } .ubxl-topbar-btn { display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px; background:var(--ubxl-tb-btn-bg, var(--_hover)); color:var(--ubxl-tb-btn-text, #fff) !important; font-weight:600; font-size:13px; text-decoration:none; } .ubxl-topbar-btn:hover { opacity:.9; } .ubxl-topbar-sticky { position:sticky; top:0; z-index:1001; } /* Hambúrguer (configurável por instância via --ubxl-burger-*) */ .ubxl-burger { display:none; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:var(--ubxl-burger-size, 42px); height:var(--ubxl-burger-size, 42px); background:var(--ubxl-burger-bg, transparent); border:var(--ubxl-burger-bw, 1px) solid var(--ubxl-burger-bd, var(--_border)); border-radius:var(--ubxl-burger-radius, var(--_radius)); color:var(--ubxl-burger-bar, currentColor); cursor:pointer; box-sizing:border-box; padding:0; } .ubxl-burger-bar { display:block; width:20px; height:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; } .ubxl-header.ubxl-menu-open .ubxl-burger-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); } .ubxl-header.ubxl-menu-open .ubxl-burger-bar:nth-child(2) { opacity:0; } .ubxl-header.ubxl-menu-open .ubxl-burger-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* Painel mobile */ .ubxl-mobile-panel { display:none; } .ubxl-mobile-head { display:none; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid var(--_border); } .ubxl-mobile-close { background:transparent; border:none; color:inherit; cursor:pointer; padding:6px; } .ubxl-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1099; } /* Estado sticky (classes adicionadas por JS) */ .ubxl-header.ubxl-fixed { position:fixed; top:0; left:0; right:0; } .ubxl-header.ubxl-fixed-bottom { position:fixed; bottom:0; left:0; right:0; } /* Fixo na base: a "Linha abaixo do header" vira linha ACIMA da barra (separa do conteúdo). Controlada pelo mesmo toggle e nunca aplicada na pílula flutuante. */ .ubxl-header.ubxl-fixed-bottom.ubxl-divider:not(.ubxl-bar-floating) { border-top:1px solid var(--_border); border-bottom:none; } .ubxl-header.ubxl-stuck { position:fixed; top:0; left:0; right:0; box-shadow:0 6px 20px rgba(0,0,0,.08); } .ubxl-header.ubxl-shrink .ubxl-bar { padding-top:6px; padding-bottom:6px; } .ubxl-header.ubxl-shrink .ubxl-bar .ubxl-inner { min-height:54px; } .ubxl-header.ubxl-hidden { transform:translateY(-100%); } .ubxl-spacer { display:block; } /* Transparente sobre o hero */ .ubxl-header.ubxl-transparent { background:var(--ubxl-over-bg, transparent); border-bottom-color:transparent; color:var(--ubxl-over-text, #fff); position:absolute; top:0; left:0; right:0; } /* Transparente + "Fixo no topo": fica fixo na viewport (não rola junto), permanecendo transparente sobre o hero até virar sólido (.ubxl-scrolled). */ .ubxl-header.ubxl-transparent.ubxl-fixed { position:fixed; } /* Apenas a BARRA fica com a cor "sobre o hero". O painel mobile (.ubxl-mobile-panel, irmão de .ubxl-bar) é sólido e mantém as próprias cores — sem isso a over-text vaza para os ícones/links do menu lateral. */ .ubxl-header.ubxl-transparent .ubxl-bar .ubxl-menu-link, .ubxl-header.ubxl-transparent .ubxl-bar .ubxl-logo-text, .ubxl-header.ubxl-transparent .ubxl-bar .ubxl-social-link { color:var(--ubxl-over-text, #fff); } .ubxl-header.ubxl-transparent.ubxl-scrolled { background:var(--ubxl-scrolled-bg, var(--_bg)); color:var(--ubxl-scrolled-text, var(--_text)); border-bottom-color:var(--_border); position:fixed; } .ubxl-header.ubxl-transparent.ubxl-scrolled .ubxl-bar .ubxl-menu-link, .ubxl-header.ubxl-transparent.ubxl-scrolled .ubxl-bar .ubxl-logo-text, .ubxl-header.ubxl-transparent.ubxl-scrolled .ubxl-bar .ubxl-social-link { color:var(--ubxl-scrolled-text, var(--_text)); } /* ===== Botão de busca: aparência própria (cor/tamanho/fundo + hover), válida inclusive sobre o hero. A cor da busca, quando definida, vence o over-text. ===== */ .ubxl-header.ubxl-transparent .ubxl-bar .ubxl-search-toggle { color:var(--ubxl-search-color, var(--ubxl-over-text, #fff)); } .ubxl-header.ubxl-transparent.ubxl-scrolled .ubxl-bar .ubxl-search-toggle { color:var(--ubxl-search-color, var(--ubxl-scrolled-text, var(--_text))); } .ubxl-header .ubxl-bar .ubxl-search-toggle:hover, .ubxl-header.ubxl-transparent .ubxl-bar .ubxl-search-toggle:hover { color:var(--ubxl-search-color-h, var(--ubxl-search-color, var(--_hover))); } .ubxl-search-boxed .ubxl-bar .ubxl-search-toggle { background:var(--ubxl-search-bg, var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8))); border-radius:var(--ubxl-action-radius, 50%); padding:var(--ubxl-action-pad, 9px); display:inline-flex; align-items:center; justify-content:center; line-height:0; transition:background .15s ease, color .15s ease; } .ubxl-search-boxed .ubxl-bar .ubxl-search-toggle:hover { background:var(--ubxl-search-bg-h, var(--ubxl-search-bg, var(--ubxl-action-bg, var(--ubx-bg-alt, #f4f4f8)))); } /* --------------------------------------------------------------------------- MOBILE (classe .ubxl-is-mobile adicionada via JS no breakpoint) --------------------------------------------------------------------------- */ .ubxl-header.ubxl-is-mobile .ubxl-nav, .ubxl-header.ubxl-is-mobile .ubxl-zone-center .ubxl-nav { display:none; } .ubxl-header.ubxl-is-mobile .ubxl-extras { display:none; } .ubxl-header.ubxl-is-mobile .ubxl-burger { display:inline-flex; } /* Busca e redes na barra do mobile/hambúrguer, controladas separadamente. O container aparece se busca OU redes estiverem habilitadas na barra; dentro dele, cada item só aparece se o seu toggle estiver ligado (o CTA nunca). */ .ubxl-header.ubxl-is-mobile.ubxl-bar-search .ubxl-extras, .ubxl-header.ubxl-is-mobile.ubxl-bar-social .ubxl-extras { display:flex; } .ubxl-header.ubxl-is-mobile .ubxl-extras > * { display:none; } .ubxl-header.ubxl-is-mobile.ubxl-bar-search .ubxl-extras .ubxl-search { display:inline-flex; } .ubxl-header.ubxl-is-mobile.ubxl-bar-social .ubxl-extras .ubxl-header-social { display:flex; } .ubxl-header.ubxl-is-mobile .ubxl-mobile-panel { display:block; } .ubxl-header.ubxl-is-mobile .ubxl-mobile-head { display:flex; } /* Off-canvas */ .ubxl-header.ubxl-is-mobile.ubxl-mobile-offcanvas-left .ubxl-mobile-panel, .ubxl-header.ubxl-is-mobile.ubxl-mobile-offcanvas-right .ubxl-mobile-panel { position:fixed; top:0; bottom:0; width:min(92vw, var(--ubxl-panel-w, 360px)); background:var(--ubxl-panel-bg, var(--_bg)); color:var(--ubxl-panel-text, var(--_text)); z-index:1100; overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.2); transition:transform .28s ease; } .ubxl-mobile-offcanvas-left .ubxl-mobile-panel { left:0; transform:translateX(-100%); } .ubxl-mobile-offcanvas-right .ubxl-mobile-panel { right:0; transform:translateX(100%); } .ubxl-menu-open.ubxl-mobile-offcanvas-left .ubxl-mobile-panel, .ubxl-menu-open.ubxl-mobile-offcanvas-right .ubxl-mobile-panel { transform:translateX(0); } /* Overlay tela cheia */ .ubxl-header.ubxl-is-mobile.ubxl-mobile-overlay .ubxl-mobile-panel { position:fixed; inset:0; background:var(--ubxl-panel-bg, var(--_bg)); color:var(--ubxl-panel-text, var(--_text)); z-index:1100; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; } .ubxl-menu-open.ubxl-mobile-overlay .ubxl-mobile-panel { opacity:1; visibility:visible; } /* Dropdown (abaixo do header) */ .ubxl-header.ubxl-is-mobile.ubxl-mobile-dropdown .ubxl-mobile-panel { position:absolute; top:100%; left:0; right:0; background:var(--ubxl-panel-bg, var(--_bg)); color:var(--ubxl-panel-text, var(--_text)); border-bottom:1px solid var(--_border); z-index:1100; overflow:hidden; max-height:0; transition:max-height .28s ease; } .ubxl-menu-open.ubxl-mobile-dropdown .ubxl-mobile-panel { max-height:80vh; overflow-y:auto; } .ubxl-mobile-dropdown .ubxl-mobile-head { display:none; } /* Conteúdo do painel mobile */ .ubxl-mobile-body { padding:var(--ubxl-panel-pad, 18px); display:flex; flex-direction:column; gap:16px; } /* align-items:stretch ANULA o align-items:center herdado de .ubxl-menu (a