/* ============================================================ TITANITE ACCORDS — GLOBAL NAVBAR (single source of truth) No strokes. No hairlines. The scrolled panel is a frosted slab that dissolves into the page via a gradient mask — weight, no edge. Section accent driven by [data-section] on . Edit here + nav.js only — never per page. ============================================================ */ :root { --tx-accent: #ffffff; --tx-bar: 72px; --tx-subh: 40px; } html:not([data-section="hub"]) { --tx-bar: 56px; } /* compact bar on content pages */ html[data-section="iss"] { --tx-accent: #e53935; } html[data-section="tsc"] { --tx-accent: #8496b4; } .tx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--tx-bar); transform: translateY(-100%); opacity: 0; animation: tx-nav-in .85s cubic-bezier(.22,1,.36,1) .05s forwards; } @keyframes tx-nav-in { to { transform: translateY(0); opacity: 1; } } /* Frosted slab lives on a pseudo so the brand/links stay crisp while the panel itself fades to nothing at the bottom — a melt, never a line. */ .tx-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(9,10,11,.82) 0%, rgba(9,10,11,.66) 60%, rgba(9,10,11,0) 100%); backdrop-filter: blur(26px) saturate(1.45); -webkit-backdrop-filter: blur(26px) saturate(1.45); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); opacity: 0; transition: opacity .55s cubic-bezier(.22,1,.36,1); } .tx-nav.scrolled::before { opacity: 1; } .tx-nav__inner { max-width: 1240px; margin: 0 auto; padding: 0 34px; height: 100%; display: flex; align-items: center; justify-content: space-between; } /* ── Brand ── */ .tx-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; } .tx-brand__logo { width: 26px; height: 26px; opacity: .92; transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), filter .35s; } .tx-brand:hover .tx-brand__logo { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255,255,255,.18)); } .tx-brand__text { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: #fff; white-space: nowrap; } /* ── Desktop links ── */ .tx-links { display: flex; align-items: center; gap: 4px; } .tx-link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(255,255,255,.52); text-decoration: none; padding: 9px 15px; border-radius: 3px; transition: color .3s cubic-bezier(.22,1,.36,1); white-space: nowrap; } /* Frosted chip — fades in behind the label. No stroke. */ .tx-link::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 3px; background: rgba(255,255,255,.07); opacity: 0; transform: scale(.94); transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); } .tx-link:hover { color: #fff; } .tx-link:hover::before { opacity: 1; transform: scale(1); } /* Active section — filled accent square, not a line */ .tx-link.active { color: #fff; } .tx-link.active::after { content: ''; width: 6px; height: 6px; background: var(--tx-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--tx-accent) 70%, transparent); order: -1; } .tx-link.active::before { opacity: 1; transform: scale(1); background: rgba(255,255,255,.05); } /* Held / redacted section — concealed before its public drop */ .tx-link--held { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.24); padding: 9px 15px; cursor: default; pointer-events: none; } .tx-link--held::before, .tx-link--held::after { display: none; } /* Evidence badge — a weighty mono tag, no border */ .tx-tag { margin-left: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.4); background: rgba(255,255,255,.045); padding: 6px 11px; border-radius: 3px; } .tx-divider { display: none; } /* ── Section pages: ONE solid slab (content never bleeds through) ── */ html:not([data-section="hub"]) .tx-nav::before { opacity: 1; -webkit-mask-image: none; mask-image: none; background: rgba(9,10,11,.97); } /* ── Contextual sub-nav row — same solid slab, seamless with the bar ── */ .tx-subnav { position: fixed; top: var(--tx-bar); left: 0; right: 0; height: var(--tx-subh); z-index: 199; background: rgba(9,10,11,.97); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); transform: translateY(-100%); opacity: 0; animation: tx-nav-in .85s cubic-bezier(.22,1,.36,1) .12s forwards; overflow: hidden; } .tx-subnav__inner { max-width: 1240px; margin: 0 auto; padding: 0 34px; height: var(--tx-subh); display: flex; align-items: center; gap: 2px; overflow: hidden; } .tx-sublink { position: relative; white-space: nowrap; font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(255,255,255,.46); text-decoration: none; padding: 7px 13px; border-radius: 3px; transition: color .25s cubic-bezier(.22,1,.36,1), background .25s; } .tx-sublink:hover { color: #fff; background: rgba(255,255,255,.05); } .tx-sublink.active { color: var(--tx-accent); } /* ── ISS shell offset under the global header (nav 72 + sub-row 46) ── */ html[data-section="iss"][data-subnav] .sidebar { top: calc(var(--tx-bar) + var(--tx-subh)); height: calc(100vh - var(--tx-bar) - var(--tx-subh)); } html[data-section="iss"][data-subnav] .sidebar-toggle { top: calc(var(--tx-bar) + var(--tx-subh) + 12px); } html[data-section="iss"][data-subnav] :is(.index-main,.analysis-main,.search-main,.fw-main,.updates-main,.persons-main,.board-main) { padding-top: calc(var(--tx-bar) + var(--tx-subh) + 14px); } /* ── Mobile burger ── */ .tx-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; transition: background .2s; } .tx-burger:hover { background: rgba(255,255,255,.07); } .tx-burger span { display: block; width: 19px; height: 2px; background: #fff; border-radius: 2px; transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s; } .tx-burger span + span { margin-top: 5px; } .tx-nav.menu-open .tx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tx-nav.menu-open .tx-burger span:nth-child(2) { opacity: 0; } .tx-nav.menu-open .tx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile panel — frosted slab, mask-melted bottom, no lines ── */ .tx-mobile { position: fixed; inset: var(--tx-bar) 0 auto 0; background: linear-gradient(to bottom, rgba(9,10,11,.97) 0%, rgba(9,10,11,.94) 70%, rgba(9,10,11,0) 100%); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); padding: 22px 34px 40px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-14px); opacity: 0; pointer-events: none; transition: opacity .32s ease, transform .35s cubic-bezier(.22,1,.36,1); z-index: 199; } .tx-mobile.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .tx-mobile a, .tx-mobile span { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: rgba(255,255,255,.82); text-decoration: none; padding: 13px 0; opacity: 0; transform: translateX(-16px); transition: color .25s, opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .tx-mobile.open a, .tx-mobile.open span { opacity: 1; transform: translateX(0); } .tx-mobile a:hover { color: #fff; } .tx-mobile a.active { color: var(--tx-accent); } .tx-mobile .tx-link--held { font-size: 14px; color: rgba(255,255,255,.3); } .tx-backdrop { position: fixed; inset: 0; z-index: 198; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .32s ease; } .tx-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 720px) { .tx-links, .tx-tag, .tx-subnav { display: none; } .tx-burger { display: inline-flex; } /* No sub-row on mobile -> content only clears the bar */ html[data-section="iss"][data-subnav] :is(.index-main,.analysis-main,.search-main,.fw-main,.updates-main,.persons-main,.board-main) { padding-top: calc(var(--tx-bar) + 20px); } html[data-section="iss"][data-subnav] .sidebar { top: var(--tx-bar); height: calc(100vh - var(--tx-bar)); } html[data-section="iss"][data-subnav] .sidebar-toggle { top: calc(var(--tx-bar) + 12px); } } @media (min-width: 721px) { .tx-mobile, .tx-backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .tx-nav { animation: none; transform: none; opacity: 1; } .tx-link, .tx-link::before, .tx-brand__logo, .tx-mobile, .tx-mobile a, .tx-mobile span { transition: none; } }