/* ========================================================================== Global site header bridge for the Enterprise AI documentation portals. Purpose: make Knowledge Hub / Playbooks / Interview Prep feel like a section of srinivasaraokaza.com rather than a separate site, without touching the portal's own design system (sidebar, search, dark mode, code formatting, Mermaid, etc. all stay exactly as they are). This file is generated/copied by scripts/sync-knowledge-hub.ps1 into each portal's assets/ folder. Do not hand-edit the copies — edit this source file and re-run the sync script. All classes are prefixed "site-" to guarantee zero collision with the portal's own class names (the portal already uses "nav-link", "brand", "menu-toggle" etc. for its own sidebar/chapter navigation). Colors/typography intentionally reuse the portal's OWN CSS custom properties (--primary, --accent, --bg, --text, --border, --font, --tx, --r-sm) rather than redefining a second palette, since those tokens already match srinivasaraokaza.com's palette and already respond to this portal's own dark-mode toggle via [data-theme="dark"]. ========================================================================== */ /* The portal's is display:flex (row, no wrap) with a single normal-flow child (.content-wrapper — the sidebar/toc are position:fixed and don't participate in flex layout). Inserting .site-header as a second in-flow child would make it sit beside .content-wrapper instead of above it. Switching body to a column flow fixes that without affecting the fixed-position sidebar/toc, and without changing how .content-wrapper sizes itself (it already stretches to fill the cross-axis either way). */ body { display: flex; flex-direction: column; } .site-header { position: sticky; top: 0; z-index: 250; height: 68px; flex-shrink: 0; display: flex; align-items: center; background: var(--bg); border-bottom: 1px solid var(--border); } .site-header-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; flex-shrink: 0; } .site-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(145deg, var(--primary), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; letter-spacing: -0.02em; flex-shrink: 0; font-family: var(--font); } .site-brand-name { font-size: 1.02rem; white-space: nowrap; font-family: var(--font); line-height: 1.25; } .site-brand-name span { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .site-nav-links { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .site-nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; font-weight: 500; font-family: var(--font); padding: 7px 9px; border-radius: var(--r-sm); white-space: nowrap; transition: color var(--tx), background var(--tx); } .site-nav-link:hover { color: var(--text); background: var(--bg-muted); } .site-nav-link.is-active { color: var(--accent); } .site-menu-toggle { display: none; width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: transparent; align-items: center; justify-content: center; cursor: pointer; color: var(--text); flex-shrink: 0; } .site-menu-toggle svg { width: 20px; height: 20px; } @media (max-width: 1360px) { .site-nav-links { display: none; } .site-menu-toggle { display: flex; } .site-header.site-menu-open { position: relative; } .site-header.site-menu-open .site-nav-links { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 68px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 24px 20px; gap: 4px; box-shadow: var(--shadow-lg); z-index: 249; } } /* ---------- Offset the portal's own fixed/sticky chrome below the new 68px global header. The portal's --topbar-h and --sidebar-width tokens are reused so this keeps working if those values ever change. ---------- */ #reading-progress { top: 68px; } .sidebar { top: 68px; } .topbar { top: 68px; } .toc-sidebar { top: calc(68px + var(--topbar-h)); } @media print { .site-header { display: none; } }