/* ========================================================== XLX026_HEADER_NEON_FINETUNE_V1 ALTERA SOMENTE: - header - logo visual do header - título XLX026 Brasil - espaçamentos - efeito neon/laser NÃO ALTERA: - monitor - TX/RX - MTR - histórico - conectados - clima - notícias - rodapé ========================================================== */ /* ---------------------------------------------------------- HEADER MAIS COMPACTO ---------------------------------------------------------- */ .universal-header{ padding:10px 18px 9px !important; } /* ---------------------------------------------------------- REMOVE SOMENTE O LOGO DO HEADER O arquivo da imagem NÃO é apagado porque continua sendo usado em outros pontos do painel. ---------------------------------------------------------- */ .universal-header .universal-brand{ display:none !important; } /* ---------------------------------------------------------- NOVA ORGANIZAÇÃO DO TOPO ---------------------------------------------------------- */ .universal-header .universal-header-row{ position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-items:center !important; gap:0 !important; min-height:0 !important; } /* ---------------------------------------------------------- TÍTULO CENTRALIZADO ---------------------------------------------------------- */ .universal-header .universal-copy{ grid-column:1 !important; min-width:0 !important; width:100% !important; padding:0 110px !important; text-align:center !important; } /* ---------------------------------------------------------- XLX026 BRASIL um pouco mais espaçado ---------------------------------------------------------- */ .universal-header .universal-copy h1{ position:relative !important; z-index:1 !important; isolation:isolate !important; display:inline-block !important; overflow:hidden !important; margin:0 !important; padding:3px 24px 5px !important; font-size:32px !important; line-height:1.02 !important; letter-spacing:.045em !important; word-spacing:.13em !important; white-space:nowrap !important; text-align:center !important; } .universal-header .universal-copy h1 span{ position:relative !important; z-index:3 !important; color:var(--cyan) !important; text-shadow: 0 0 7px rgba(0,216,255,.18), 0 0 18px rgba(0,216,255,.08) !important; } /* ---------------------------------------------------------- FEIXE NEON / LASER ATRÁS DO TÍTULO CICLO: - espera à esquerda - atravessa para direita - espera - volta para esquerda - espera novamente ---------------------------------------------------------- */ .universal-header .universal-copy h1::before{ content:""; position:absolute !important; z-index:1 !important; top:50% !important; left:-26%; width:100px !important; height:170% !important; pointer-events:none !important; transform: translate(-50%,-50%) skewX(-18deg); background: linear-gradient( 90deg, rgba(0,216,255,0) 0%, rgba(0,216,255,.06) 20%, rgba(0,216,255,.22) 38%, rgba(124,240,255,.62) 48%, rgba(225,253,255,.90) 50%, rgba(124,240,255,.62) 52%, rgba(0,216,255,.22) 62%, rgba(0,216,255,.06) 80%, rgba(0,216,255,0) 100% ); filter:blur(7px); opacity:.18; box-shadow: 0 0 20px rgba(0,216,255,.20), 0 0 38px rgba(0,216,255,.13); animation: xlx026TitleLaser 12s linear infinite; } @keyframes xlx026TitleLaser{ /* parado à esquerda */ 0%{ left:-26%; opacity:.15; } 8%{ left:-26%; opacity:.18; } /* atravessa para a direita */ 12%{ opacity:.80; } 28%{ left:126%; opacity:.88; } /* aguarda à direita */ 32%{ left:126%; opacity:.18; } 52%{ left:126%; opacity:.18; } /* volta para a esquerda */ 56%{ opacity:.80; } 72%{ left:-26%; opacity:.88; } /* aguarda à esquerda */ 76%{ left:-26%; opacity:.18; } 100%{ left:-26%; opacity:.15; } } /* ---------------------------------------------------------- FAIXA D-STAR / DMR / C4FM MAIS PRÓXIMA DO TÍTULO ---------------------------------------------------------- */ .universal-header .universal-copy .access-strip{ justify-content:center !important; margin-top:7px !important; margin-bottom:0 !important; } /* ---------------------------------------------------------- MENU MAIS PRÓXIMO DA FAIXA DE PROTOCOLOS ---------------------------------------------------------- */ .universal-header .universal-nav{ justify-content:center !important; margin-top:7px !important; margin-bottom:0 !important; } /* ---------------------------------------------------------- STATUS DO HEADER Mantido fora do centro para não deslocar o título. ---------------------------------------------------------- */ @media (min-width:821px){ .universal-header .universal-live-pill{ position:absolute !important; z-index:5 !important; top:2px !important; right:0 !important; margin:0 !important; } } /* ========================================================== TABLET / CELULAR ========================================================== */ @media (max-width:820px){ .universal-header{ padding:9px 12px 9px !important; } /* * elimina a antiga coluna reservada para o logo */ .universal-header .universal-header-row{ grid-template-columns: minmax(0,1fr) auto !important; gap:7px !important; } .universal-header .universal-copy{ grid-column:1 !important; grid-row:1 !important; padding:0 !important; text-align:left !important; } .universal-header .universal-copy h1{ padding:2px 9px 3px 0 !important; font-size:24px !important; letter-spacing:.035em !important; word-spacing:.10em !important; text-align:left !important; } /* * A faixa completa de protocolos continua obedecendo * a regra móvel já existente do painel. */ .universal-header .universal-copy .access-strip{ margin-top:5px !important; } .universal-header .universal-live-pill{ position:static !important; transform:none !important; grid-column:1 !important; grid-row:2 !important; justify-self:start !important; margin:2px 0 0 !important; } /* * Compatibilidade com o botão mobile nativo. */ .universal-header .menu-toggle{ grid-column:2 !important; grid-row:1 !important; } .universal-header .xlx026-mobile-togglebar{ grid-column:2 !important; grid-row:1 !important; justify-self:end !important; } .universal-header .universal-nav{ margin-top:5px !important; } } /* ========================================================== CELULAR PEQUENO ========================================================== */ @media (max-width:520px){ .universal-header{ padding:8px 10px !important; } .universal-header .universal-copy h1{ font-size:21px !important; letter-spacing:.03em !important; word-spacing:.08em !important; } .universal-header .universal-copy h1::before{ width:72px !important; filter:blur(6px); } } /* ========================================================== ACESSIBILIDADE ========================================================== */ @media (prefers-reduced-motion:reduce){ .universal-header .universal-copy h1::before{ animation:none !important; left:50% !important; opacity:.10 !important; } } /* FIM XLX026_HEADER_NEON_FINETUNE_V1 */