/* ───────────────────────────────────────────────────────────────────── header-glass.css — Apple liquid-glass header chrome, shared across every page that includes

(leaderboard, trader, coin, coins, home, strategies, watching). The glass effect lives on .cmc-header::before so the header element itself doesn't acquire a containing block — `position: fixed` children like .ops-pill (bottom-right corner) still escape to the viewport. ───────────────────────────────────────────────────────────────────── */ .cmc-header { height: 60px !important; position: sticky; top: 0; z-index: 100; /* Self-constrain to the site-wide content max-width + horizontal gutter so the header aligns with the content column on EVERY page. Earlier this was padding:0 + relied on the surrounding .page-shell to supply gutter — that worked for /leaderboard etc. but on / (Market Pulse) the header is a direct child of with no .page-shell wrapper, so it spanned the full viewport while the content below was capped to 1800px. Centring the header itself fixes both cases at once. */ /* 1752px = 1800px page-shell max-width minus its 24+24 horizontal padding. Default for pages that don't wrap header in .page-shell. Pages that DO wrap (/leaderboard etc.) inherit their parent's constraint and this max-width simply doesn't engage. Pages that want a narrower constraint (e.g. /, Market Pulse — uses .shell at 1360px for its content column) can add the .shell class to the header and the override below kicks in. */ max-width: 1752px; margin-left: auto !important; margin-right: auto !important; padding: 0 24px !important; box-sizing: border-box; width: 100%; gap: 20px !important; background: transparent !important; /* No background pseudo, no border, no drop shadow — header now reads as floating chrome over the page background. Earlier the ::before had a dark glass fill that read as a visible "card edge" against the page bg, with a hard 1px border-bottom seam. Removed both so the header blends seamlessly into whatever sits below it. */ border-bottom: 0 !important; box-shadow: none !important; } /* When the header carries .shell (e.g. /, Market Pulse), match its content column's max-width (1360px) instead of the default 1752 so logo/nav/actions align horizontally with the .shell content below. */ .cmc-header.shell { max-width: 1360px !important; } /* When the header is wrapped in .page-shell (every modern Compass page) the shell already supplies the 24px horizontal gutter — the header's own 24px padding would push logo/login 24px IN from where the cards sit, breaking left/right alignment. Strip the padding inside .page-shell with the same !important so it wins against the header's own declaration. */ .page-shell .cmc-header { padding-left: 0 !important; padding-right: 0 !important; } /* Header background pseudo intentionally not rendered by default — see the border-bottom/box-shadow note above. When the page scrolls past the top, /static/header-scroll.js adds `.is-scrolled` and we light up the dark-glass backdrop again so content sliding under the sticky header doesn't make labels illegible. The ::before extends EDGE-TO-EDGE (100vw) regardless of the header's 1752px max-width, so the scrolled-bg fills the entire top strip without visible card edges. */ .cmc-header { isolation: isolate; } .cmc-header::before { display: none; } .cmc-header.is-scrolled::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: linear-gradient(180deg, rgba(13,17,24,.82) 0%, rgba(13,17,24,.70) 100%); border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); z-index: -1; pointer-events: none; /* Soft fade-in so the bg doesn't pop when crossing the 4px threshold */ animation: cmcHeaderFadeIn .22s ease; } @keyframes cmcHeaderFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Logo — refined wordmark next to compass mark, tight tracking */ .cmc-header .logo { font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: .12em; /* tracking opens up for caps wordmark */ gap: 9px !important; position: relative; /* anchor for the absolutely-positioned BETA badge */ } /* "BETA" badge — tiny tag tucked under the bottom-right of the wordmark, like a stage marker on a product label. Absolute positioning so the wordmark's bounding box doesn't grow vertically; the parent flex still centres COMPASS in the 60px header. */ .cmc-header .logo .logo-beta-badge { position: absolute; right: -2px; bottom: -4px; /* gap between wordmark baseline and badge */ display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; height: 12px; border-radius: 3px; background: rgba(108,182,255,.12); border: 1px solid rgba(108,182,255,.28); color: #a4d0ff; font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace); font-size: 7px; font-weight: 600; letter-spacing: .08em; line-height: 1; pointer-events: none; /* never blocks the logo click */ } /* Nav links — glass pills, active gets brand-blue tint */ .cmc-header nav { gap: 4px !important; } .cmc-header nav a { height: 32px; padding: 0 12px !important; border-radius: 8px; border: 1px solid transparent; color: var(--c-color-text-secondary, #c4cbda) !important; font-size: 12.5px !important; font-weight: 500 !important; transition: background .14s, color .14s, border-color .14s; } .cmc-header nav a:hover { background: rgba(255,255,255,.06); color: var(--c-color-text-primary, #e2e8f0) !important; } .cmc-header nav a.is-active { background: linear-gradient(180deg, rgba(108,182,255,.16), rgba(108,182,255,.06)) !important; border-color: rgba(108,182,255,.32); color: var(--c-color-brand, #6cb6ff) !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; } .cmc-header nav a:hover svg, .cmc-header nav a.is-active svg { opacity: 1; } /* Actions area — all chips in the same glass family */ .cmc-header .actions { gap: 8px !important; } .cmc-header .actions .cmc-btn, .cmc-header .actions .watch-trigger { height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.04) !important; color: var(--c-color-text-secondary, #c4cbda) !important; font-size: 12px !important; font-weight: 500 !important; display: inline-flex; align-items: center; gap: 6px; transition: background .14s, border-color .14s, color .14s, transform .08s; } .cmc-header .actions .cmc-btn:hover, .cmc-header .actions .watch-trigger:hover { background: rgba(255,255,255,.075) !important; border-color: rgba(255,255,255,.16) !important; color: var(--c-color-text-primary, #e2e8f0) !important; } .cmc-header .actions .cmc-btn:active { transform: scale(0.97); } /* Watching trigger — compact icon-only pill. Label "Watching" was removed in 2026-06-23 polish; just the star icon, the count badge, and the chevron carry meaning now. Smaller horizontal padding so the pill stays nicely square-ish next to ⌘K and Connect. */ .cmc-header .actions .watch-trigger { padding: 0 8px !important; gap: 5px !important; } .cmc-header .actions .watch-trigger .watch-chev { font-size: 8px; opacity: .55; } /* Connect — prominent brand CTA, solid not glass */ .cmc-header .actions .cmc-btn-primary { background: linear-gradient(180deg, var(--c-color-brand, #6cb6ff) 0%, #4d8fcc 100%) !important; border-color: transparent !important; color: #0d1117 !important; font-weight: 600 !important; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -8px rgba(108,182,255,.5) !important; } .cmc-header .actions .cmc-btn-primary:hover { background: linear-gradient(180deg, #82c2ff 0%, #5a9adb 100%) !important; transform: translateY(-1px); } /* ── Ops-pill (refresh-pipeline status badge) ───────────────────── Lives in the header markup but renders position:fixed in the bottom- right corner. The status colours are wired by /static/ops-pill.js. */ .ops-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-family: var(--c-font-family-mono); text-decoration: none; border: 1px solid var(--c-color-line-tertiary, #1f2937); background: var(--c-color-surface-secondary, #1c2230); color: var(--c-color-text-secondary, #a8b1c2); cursor: pointer; position: fixed !important; bottom: 14px !important; right: 14px !important; z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .ops-pill:hover { color: var(--c-color-text-primary); } .ops-pill .ops-dot { width: 6px; height: 6px; border-radius: 50%; background: #888; flex: none; } .ops-pill-ok .ops-dot { background: var(--c-color-positive, #16C784); box-shadow: 0 0 4px var(--c-color-positive, #16C784); } .ops-pill-running .ops-dot { background: #f5a524; animation: ops-pulse 1.4s ease-in-out infinite; } .ops-pill-degraded .ops-dot { background: #f5a524; } .ops-pill-stale .ops-dot, .ops-pill-failing .ops-dot { background: var(--c-color-negative, #EA3943); box-shadow: 0 0 4px var(--c-color-negative, #EA3943); } @keyframes ops-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* ── Watching dropdown ──────────────────────────────────────────── Wired by /static/watch-menu.js. Pop-out is hidden by default — the script toggles `.is-open` on the parent `.watch-menu`. */ .watch-menu { position: relative; display: inline-block; } .watch-menu > a { cursor: pointer; } /* Glass-style watching dropdown — Apple visionOS material with translucent base + backdrop blur + soft outer shadow. Replaces the earlier flat-dark popup that didn't match the rest of the chrome. */ .watch-menu-pop { display: none; position: absolute; top: 100%; right: 0; background: linear-gradient(180deg, rgba(20,24,32,.86), rgba(14,18,26,.86)); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; min-width: 440px; max-height: 520px; overflow-y: auto; z-index: 100; padding: 6px; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px -16px rgba(0,0,0,.7); margin-top: 8px; /* Subtle entry — fade + tiny rise */ opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .14s ease, transform .14s cubic-bezier(.2,.7,.2,1); } .watch-menu.is-open .watch-menu-pop { display: block; opacity: 1; transform: translateY(0) scale(1); } .watch-menu .watch-chev { font-size: 9px; color: var(--c-color-text-caption); margin-left: 2px; transition: transform .15s ease; } .watch-menu.is-open .watch-chev { transform: rotate(180deg); } .watch-menu-pop .watch-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 12px; border-radius: 8px; transition: background .12s; } .watch-menu-pop .watch-item:hover { background: rgba(255,255,255,.05); } .watch-menu-pop .watch-item + .watch-item { border-top: 1px solid rgba(255,255,255,.04); } .watch-menu-pop .watch-item > a { flex: 1; min-width: 0; font-family: var(--c-font-family-mono); color: var(--c-color-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .watch-menu-pop .watch-item > a:hover { color: #6cb6ff; } .watch-menu-pop .watch-item .rm { background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--c-color-text-caption); width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; flex: none; transition: background .12s, color .12s, border-color .12s; } .watch-menu-pop .watch-item .rm:hover { color: #f87171; background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.22); } .watch-menu-pop .empty { padding: 22px 16px; font-size: 12px; color: var(--c-color-text-caption); text-align: center; font-family: var(--c-font-family-mono); } .watch-menu-pop .wm-metric { font-family: var(--c-font-family-mono); font-size: 11.5px; min-width: 56px; text-align: right; color: var(--c-color-text-caption); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; } .watch-menu-pop .wm-metric.pos { color: #34d399; text-shadow: 0 0 8px rgba(52,211,153,.18); } .watch-menu-pop .wm-metric.neg { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,.20); } .watch-menu-pop .wm-metric.warn { color: #fcb040; } /* Pulsing skeleton dot for loading state inside watch-menu metrics. */ .watch-menu-pop .wm-pulse { display: inline-block; width: 36px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 100%); background-size: 200% 100%; animation: wmPulse 1.2s ease-in-out infinite; vertical-align: middle; } @keyframes wmPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} } .watch-menu-pop .wm-foot, .watch-menu-pop .watch-item:last-child[style*="justify-content:center"] { margin-top: 4px; padding: 10px 12px; text-align: center; font-size: 12px; border-top: 1px solid rgba(255,255,255,.06); border-radius: 0 0 10px 10px; } .watch-menu-pop .watch-item:last-child[style*="justify-content:center"] a { color: #6cb6ff !important; font-weight: 600; } /* Watching badge — pill counter inside the trigger */ .cmc-header .watch-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 5px; background: rgba(108,182,255,.2); color: #a4d0ff; font-family: var(--c-font-family-mono, monospace); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cmc-header .watch-count-badge[data-empty="true"] { background: rgba(255,255,255,.06); color: rgba(139,149,168,.7); } /* ── AI nav item (поговори с базой /ask) ── */ .cmc-header nav a.nav-ai { color: #a9c0ff; position: relative; } .cmc-header nav a.nav-ai:hover { color: #cdd9ff; } .cmc-header nav a.nav-ai svg { color: #6b90ff; } /* тонкий «new» акцент — мягкое свечение точки */ .cmc-header nav a.nav-ai::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #6b90ff; box-shadow: 0 0 6px rgba(107,144,255,.8); margin-left: 2px; align-self: flex-start; }