/* ===== Header styles (scoped) ===== */
.ttr-header { margin: 0 0 14px; }
.ttr-header * { box-sizing: border-box; }
.ttr-headerBar{
position: relative;
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 12px 12px;
border-radius: 18px;
overflow:hidden;
color:#fff;
/* Animated background similar vibe */
background:
radial-gradient(900px 380px at 15% 0%, rgba(72,255,196,.22), transparent 60%),
radial-gradient(800px 380px at 95% 20%, rgba(255,120,82,.24), transparent 55%),
radial-gradient(900px 520px at 40% 130%, rgba(167,116,255,.20), transparent 62%),
linear-gradient(135deg, #081427, #061a34 52%, #041f3b);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
/* subtle moving grid */
.ttr-headerBar::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 34px 34px;
opacity: .45;
animation: ttrGridFloat 11s ease-in-out infinite;
pointer-events:none;
}
@keyframes ttrGridFloat{ 50%{ transform: translateY(-10px); } }
.ttr-brand{
position: relative;
z-index: 1;
display:flex;
align-items:center;
gap: 10px;
text-decoration:none;
color:#fff;
min-width: 0;
}
.ttr-brandLogo{
width: 44px;
height: 44px;
border-radius: 14px;
object-fit: contain;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
padding: 6px;
}
.ttr-brandText{
font-weight: 950;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Menu button */
.ttr-menuBtn{
position: relative;
z-index: 1;
display:inline-flex;
align-items:center;
gap: 10px;
border-radius: 999px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(0,0,0,.16);
color:#fff;
cursor:pointer;
font-weight: 900;
}
.ttr-menuBtn:active{ transform: translateY(1px); }
.ttr-menuIcon{
width: 18px;
height: 12px;
display:inline-block;
position: relative;
}
.ttr-menuIcon::before,
.ttr-menuIcon::after{
content:"";
position:absolute;
left:0; right:0;
height:2px;
background:#fff;
border-radius: 4px;
}
.ttr-menuIcon::before{ top:0; }
.ttr-menuIcon::after{ bottom:0; }
.ttr-menuLabel{ font-size: 14px; }
/* Nav panel */
.ttr-nav{
margin-top: 10px;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.96);
box-shadow: 0 18px 50px rgba(0,0,0,.10);
max-height: 0;
opacity: 0;
transform: translateY(-6px);
transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
}
/* When open */
.ttr-header.is-open .ttr-nav{
max-height: 380px;
opacity: 1;
transform: translateY(0);
}
.ttr-navLink{
display:block;
padding: 14px 14px;
text-decoration:none;
color:#061225;
font-weight: 900;
border-top: 1px solid rgba(0,0,0,.06);
}
.ttr-navLink:first-child{ border-top: none; }
.ttr-navLink:hover{ background: rgba(6,18,37,.05); }
.ttr-navCta{
background: linear-gradient(135deg, rgba(72,255,196,.20), rgba(255,120,82,.18), rgba(167,116,255,.14));
}
/* Desktop: show inline links, hide menu button */
@media (min-width: 900px){
.ttr-menuBtn{ display:none; }
.ttr-nav{
max-height: none;
opacity: 1;
transform:none;
margin-top: 0;
display:flex;
gap: 8px;
padding: 8px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
box-shadow: none;
}
.ttr-navLink{
border-top: none;
border-radius: 999px;
padding: 10px 12px;
color:#fff;
background: rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.14);
}
.ttr-navLink:hover{ background: rgba(0,0,0,.20); }
.ttr-navCta{ background: rgba(255,255,255,.92); color:#061225; border-color: transparent; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.ttr-headerBar::before{ animation: none !important; }
.ttr-nav{ transition: none !important; }
}
(function(){
const header = document.querySelector('.ttr-header');
if(!header) return;
const btn = header.querySelector('.ttr-menuBtn');
const nav = header.querySelector('#ttrNav');
function closeMenu(){
header.classList.remove('is-open');
btn.setAttribute('aria-expanded','false');
}
function toggleMenu(){
const open = header.classList.toggle('is-open');
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
}
btn.addEventListener('click', toggleMenu);
// Close when clicking a link (mobile)
nav.addEventListener('click', (e) => {
if(e.target && e.target.matches('a')) closeMenu();
});
// Close when tapping outside
document.addEventListener('click', (e) => {
if(!header.contains(e.target)) closeMenu();
});
// Close on ESC
document.addEventListener('keydown', (e) => {
if(e.key === 'Escape') closeMenu();
});
})();
