/* ============================================================ GCG LIVE TICKER STRIP Fixed bar at top of every page. Height: 32px desktop / 28px mobile. ============================================================ */ #gcg-ticker { position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 9999; background: #0a0a0a; border-bottom: 1px solid rgba(245, 158, 11, 0.25); overflow: hidden; display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; user-select: none; } #gcg-ticker-inner { display: flex; align-items: center; white-space: nowrap; animation: gcg-ticker-scroll 60s linear infinite; will-change: transform; } #gcg-ticker:hover #gcg-ticker-inner { animation-play-state: paused; } @keyframes gcg-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .gcg-ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.08); color: #c9d1d9; } .gcg-ticker-symbol { color: #f0f6fc; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; } .gcg-ticker-price { color: #e6edf3; } .gcg-ticker-change { font-size: 11px; font-weight: 600; } .gcg-ticker-change.up { color: #22c55e; } .gcg-ticker-change.down { color: #ef4444; } .gcg-ticker-change.flat { color: #8b949e; } /* Loading state */ .gcg-ticker-loading { padding: 0 24px; color: #8b949e; font-size: 11px; letter-spacing: 0.08em; animation: gcg-ticker-blink 1.4s ease-in-out infinite; } @keyframes gcg-ticker-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- Push page content down by ticker height ---- */ /* Applied to so sticky navs still offset correctly */ html.gcg-ticker-active { scroll-padding-top: 32px; } /* Nudge the existing sticky gcg-nav down */ html.gcg-ticker-active .gcg-nav { top: 32px; } /* index.html sidebar layout — push header down */ html.gcg-ticker-active header.bg-white { top: 32px; position: sticky; } /* Prevent content being hidden behind ticker on direct anchor jumps */ html.gcg-ticker-active [id] { scroll-margin-top: 64px; } @media (max-width: 768px) { #gcg-ticker { height: 28px; font-size: 11px; } html.gcg-ticker-active { scroll-padding-top: 28px; } html.gcg-ticker-active .gcg-nav { top: 28px; } .gcg-ticker-item { padding: 0 14px; } }