/* Cabeçalho padronizado com o Feed FITZONE. Aplicado somente em Histórias. */ /* CABEÇALHO NEON PADRÃO FITZONE */ .topo.fitzone-neon { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; width: calc(100% - 60px); max-width: 1460px; min-height: 100px; margin: 14px auto 0; padding: 13px 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; border: 1px solid rgba(112, 221, 32, .36); border-radius: 22px; background: radial-gradient(ellipse at 20% 112%, rgba(48, 126, 18, .19), transparent 32%), radial-gradient(ellipse at 90% 114%, rgba(35, 105, 17, .16), transparent 30%), linear-gradient(100deg, #070d09, #070c09 52%, #071007); box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 0 25px rgba(42, 106, 21, .075), 0 0 14px rgba(91, 211, 30, .075); transition: border-color .3s ease, box-shadow .3s ease; } .topo.fitzone-neon::before { content: ""; position: absolute; inset: 8px; z-index: 0; border: 1px solid rgba(94, 227, 22, .45); border-radius: 17px; box-shadow: inset 0 0 11px rgba(75, 206, 29, .13), 0 0 7px rgba(67, 204, 24, .12); pointer-events: none; } .topo.fitzone-neon::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 38% 25%, rgba(174, 255, 86, .64) 0 1px, transparent 2.4px), radial-gradient(circle at 69% 78%, rgba(165, 255, 51, .4) 0 1px, transparent 2.2px), radial-gradient(circle at 83% 34%, rgba(165, 255, 51, .35) 0 1px, transparent 2.2px), linear-gradient(90deg, transparent 30%, rgba(128, 255, 51, .24) 53%, transparent 57%); opacity: .56; } .topo.fitzone-neon:hover { border-color: rgba(145, 239, 46, .53); box-shadow: 0 8px 30px rgba(0, 0, 0, .36), inset 0 0 25px rgba(42, 106, 21, .09), 0 0 19px rgba(91, 211, 30, .13); } .fitzone-neon .neon-traco { position: absolute; bottom: -31px; z-index: 0; width: 350px; height: 151px; overflow: visible; pointer-events: none; opacity: .87; animation: fitzone-respirar 7s ease-in-out infinite alternate; } .fitzone-neon .neon-traco.esquerda { left: clamp(205px, 20%, 275px); } .fitzone-neon .neon-traco.direita { right: 72px; transform: scaleX(-1); animation-delay: -3.5s; } .fitzone-neon .neon-traco path { fill: none; stroke-linecap: round; } .fitzone-neon .neon-traco .traco-halo { stroke: #55ff13; stroke-width: 12; opacity: .34; filter: blur(11px); } .fitzone-neon .neon-traco .traco-externo { stroke: #3bdc13; stroke-width: 2; opacity: .56; filter: drop-shadow(0 0 6px #57ff18); } .fitzone-neon .neon-traco .traco-nucleo { stroke: #b6ff67; stroke-width: 2.6; opacity: .95; filter: drop-shadow(0 0 4px #69ff11) drop-shadow(0 0 7px #59f20f); } .fitzone-neon .neon-traco .traco-paralelo { stroke: #56d825; stroke-width: 1.4; opacity: .55; } @keyframes fitzone-respirar { from { opacity: .68; } to { opacity: .94; } } /* Conteúdo sempre na frente dos efeitos, inclusive o botão clicável. */ .topo.fitzone-neon > .logo-fitzone, .topo.fitzone-neon > .menu, .topo.fitzone-neon > .btn-perfil { position: relative; z-index: 2; } .topo.fitzone-neon .logo-fitzone { flex-shrink: 0; } .topo.fitzone-neon .logo-fitzone svg { display: block; width: 245px; height: auto; filter: drop-shadow(0 0 2px rgba(163, 230, 53, .14)); } .topo.fitzone-neon .menu { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: auto; margin: 0 auto; gap: clamp(12px, 1.55vw, 26px); } .topo.fitzone-neon .menu a { color: #f4f6f1; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; text-shadow: none; transition: color .25s ease, text-shadow .25s ease; } .topo.fitzone-neon .menu a:hover, .topo.fitzone-neon .menu a:focus-visible, .topo.fitzone-neon .menu a.ativo, .topo.fitzone-neon .menu a[aria-current="page"] { color: #a3e635 !important; text-shadow: 0 0 11px rgba(163, 230, 53, .45); } .topo.fitzone-neon .menu a::before, .topo.fitzone-neon .menu a::after { content: none !important; display: none !important; } .topo.fitzone-neon .btn-perfil { display: inline-flex; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; min-height: 43px; padding: 9px 18px; border: 1px solid rgba(115, 244, 25, .72); border-radius: 999px; color: #fff; background: rgba(5, 15, 7, .74); box-shadow: 0 0 10px rgba(91, 231, 23, .22), inset 0 0 11px rgba(82, 214, 21, .08); text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease, background-color .24s ease; } .topo.fitzone-neon .btn-perfil svg { width: 20px; height: 20px; stroke: #a3e635; filter: drop-shadow(0 0 4px rgba(126, 241, 25, .4)); } .topo.fitzone-neon .btn-perfil:hover, .topo.fitzone-neon .btn-perfil:focus-visible { transform: translateY(-1px); border-color: #baff36; background: rgba(21, 46, 13, .81); box-shadow: 0 0 17px rgba(91, 231, 23, .37), inset 0 0 12px rgba(82, 214, 21, .11); } /* Tema claro: preservar o contraste preto + neon do cabeçalho. */ body.tema-claro .topo.fitzone-neon { background: linear-gradient(110deg, #09100b, #050b08 58%, #0a140a); } body.tema-claro .topo.fitzone-neon .menu a:not(.ativo):not([aria-current="page"]), body.tema-claro .topo.fitzone-neon .btn-perfil { color: #fff; } @media (max-width: 1180px) { .topo.fitzone-neon { flex-wrap: wrap; } .topo.fitzone-neon .menu { order: 3; flex-basis: 100%; width: 100%; padding-top: 4px; margin: 0; } .fitzone-neon .neon-traco.direita { right: 8px; } } @media (max-width: 700px) { .topo.fitzone-neon { width: calc(100% - 20px); margin-top: 9px; min-height: 94px; padding: 14px 18px; border-radius: 17px; } .topo.fitzone-neon::before { inset: 5px; border-radius: 13px; } .topo.fitzone-neon .logo-fitzone svg { width: clamp(140px, 36vw, 190px); } .topo.fitzone-neon .menu { gap: 12px 15px; } .topo.fitzone-neon .menu a { font-size: 12px; } .topo.fitzone-neon .btn-perfil { padding: 8px 12px; font-size: 11px; } .fitzone-neon .neon-traco { opacity: .42; width: 240px; } .fitzone-neon .neon-traco.esquerda { left: 7%; } .fitzone-neon .neon-traco.direita { right: -80px; } } @media (prefers-reduced-motion: reduce) { .fitzone-neon .neon-traco { animation: none !important; } .topo.fitzone-neon, .topo.fitzone-neon .menu a, .topo.fitzone-neon .btn-perfil { transition: none !important; } } /* Logo sempre branca e verde, inclusive no tema claro. */ .topo.fitzone-neon .logo-fitzone { color: #f4f6f1; } .topo.fitzone-neon .logo-fitzone svg { fill: none; } .topo.fitzone-neon .logo-fitzone:hover svg { transform: scale(1.02); } /* Mesmo espaçamento do menu de Feed e Perfis. */ .topo.fitzone-neon {font-family:Inter,Arial,sans-serif;} .topo.fitzone-neon .menu {gap:clamp(10px,1.25vw,20px);} .topo.fitzone-neon .menu a {font-size:12px;}