/* ============================================================================ MetaScan unified chrome — shared stylesheet (header + footer, both auth states). SINGLE SOURCE for the chrome look, ported 1:1 from the LIVE marketing site (Metascan3Di/src/components/beta/BetaLayout.jsx style jsx) + the sticky-band CSS from share_viewer.html. Consumed by web/panel (linked) and inlined into the SEO-critical /s product page. See chrome/chrome.manifest.json + docs/wave2/50. The mega-menu is CSS-FIRST: panels reveal on :hover / :focus-within with NO JavaScript. chrome-enhance.js only adds aria-expanded sync, Esc, click-toggle and arrow-key focus — it creates no markup and no links. ============================================================================ */ /* Animated brand gradients — copied from BetaLayout global styles. */ .beta-accent { background: linear-gradient(100deg,#ff2fb9,#a24bff 25%,#00eaff 50%,#a24bff 75%,#ff2fb9); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: beta-flow 3s linear infinite; } .beta-cta { color: #05060a; background: linear-gradient(100deg,#ff2fb9,#7a5cff 28%,#00eaff 50%,#7a5cff 72%,#ff2fb9); background-size: 220% auto; animation: beta-flow 4s linear infinite; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .beta-cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 30px rgba(0,234,255,0.22), 0 2px 12px rgba(255,47,185,0.24); } @keyframes beta-flow { to { background-position: -220% center; } } @media (prefers-reduced-motion: reduce) { .beta-accent, .beta-cta { animation: none; } } /* Chrome links never underline (the panel has no global reset like the share page). */ .chrome-market a, .chrome-app a { text-decoration: none; } /* ---- Auth-aware visibility: both chromes ship in the DOM; a class flips which shows. No markup is added/removed by JS (zero CLS, fully crawlable). ---- */ .chrome-app { display: none !important; } body.is-authed .chrome-market { display: none !important; } body.is-authed .chrome-app { display: block !important; } body.is-authed .chrome-app.app-topbar { display: block !important; } /* Panel app topbar (its own rich header) carries .chrome-app too. */ body.is-authed header.topbar.chrome-app { display: block !important; } /* ---- Marketing NAVBAR — transparent over the hero at the top, then a sticky glass band once you scroll (chrome-enhance.js toggles .is-scrolled past ~12px), matching the live marketing site. ---- */ header.chrome-market { position: sticky; top: 0; z-index: 50; width: 100%; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background .28s ease, backdrop-filter .28s ease, border-color .28s ease, box-shadow .28s ease; } header.chrome-market.is-scrolled { background: rgba(8,8,11,0.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 34px rgba(0,0,0,0.38); } .mk-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 clamp(20px, 4vw, 32px); gap: 16px; } .mk-brand { display: flex; align-items: center; gap: 10px; } .mk-brand img { width: 28px; height: 28px; object-fit: contain; } .mk-brand .word { font-weight: 600; letter-spacing: -0.01em; font-size: 17px; color: #fff; } .mk-links { display: flex; align-items: center; gap: 2px; } .mk-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,0.65); padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; } .mk-link .caret { display: inline-flex; align-items: center; margin-left: 5px; opacity: .55; transition: transform .2s, opacity .2s; } .mk-link .caret svg { width: 16px; height: 16px; display: block; } .mk-link:hover { color: #fff; } /* The disclosure trigger is a real