/* ── Shared site chrome — top nav bar + footer ────────────────────────────── * Consumed by every surface (demos, radars, docs, landing, compare, * landscape). Tokens live in shared/tokens.css. * ─────────────────────────────────────────────────────────────────────────── */ /* All chrome rules use var() with hard-coded fallbacks so the bar still * renders correctly even if tokens.css fails to load (404, network error, * or CSP block). Without fallbacks, a missing --chrome-height would cause * `calc(var(--chrome-height) + 2rem)` to resolve to invalid → unset → * padding-top becomes 0 even with !important, and the bar collapses to its * intrinsic content height (~36px). */ .site-chrome { position: fixed; top: 0; left: 0; right: 0; height: var(--chrome-height, 48px); background: var(--chrome-bg, #1e2330); border-bottom: 1px solid var(--chrome-border, rgba(255, 255, 255, 0.18)); z-index: 100000; /* above everything (incl. Docsify sidebar-toggle z=1000) */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.875rem; color: var(--chrome-text, #f5f7fa); display: flex; align-items: stretch; flex-wrap: nowrap; /* defensive — never let nav drop below brand row */ padding: 0 0.75rem; gap: 0.25rem; box-shadow: 0 1px 0 var(--chrome-border, rgba(255, 255, 255, 0.18)); overflow: visible; /* must be visible so absolute-positioned dropdowns escape the bar */ } /* Push page content below the fixed bar. Applied to via * site-header.js. The +2rem gap matches the visual breathing room most * surfaces had before the chrome existed (landing previously had 4.5rem * total top padding; with the 48px bar plus 2rem gap, total is ~80px — * about the same). */ body.has-site-chrome { padding-top: calc(var(--chrome-height, 48px) + 2rem) !important; } /* Docsify's `.sidebar-toggle` is the proven, reliable trigger for its own * sidebar — programmatic body.close toggles or .click() on a hidden button * proved unreliable across docsify-themeable theme versions. Solution: keep * Docsify's native button visible, position it inside the left edge of the * chrome bar (where it visually replaces our own menuBtn on docs pages), * and hide our menuBtn when Docsify's sidebar is present (see site-header.js * which adds `body.has-docsify-sidebar`). * * Hamburger icon is drawn via three background-image linear-gradients so * it renders correctly regardless of Docsify's internal span markup * (different docsify-themeable versions structure the inner button * differently — three spans, two spans + ::before, etc). visibility:hidden * on inner content keeps the click target alive while the gradient draws * the visible icon. */ body.has-site-chrome .sidebar-toggle { position: fixed !important; top: 0 !important; left: 0 !important; width: 48px !important; height: var(--chrome-height, 48px) !important; background-color: transparent !important; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor) !important; background-size: 18px 2px !important; background-position: center calc(50% - 6px), center 50%, center calc(50% + 6px) !important; background-repeat: no-repeat !important; color: var(--chrome-text, #f5f7fa) !important; border: none !important; padding: 0 !important; margin: 0 !important; z-index: 100001 !important; cursor: pointer !important; } body.has-site-chrome .sidebar-toggle > * { visibility: hidden !important; } /* Hide our chrome's hamburger when Docsify's sidebar-toggle is taking its * place. The body class is set by site-header.js on docs pages. * Also push the chrome's content (brand, nav) right by the toggle's width * so the brand doesn't sit under the absolute-positioned sidebar-toggle. */ body.has-docsify-sidebar .site-chrome__btn--menu { display: none !important; } body.has-docsify-sidebar .site-chrome { padding-left: 48px !important; } body.has-site-chrome aside.sidebar { top: var(--chrome-height, 48px) !important; } .site-chrome__brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--chrome-text); text-decoration: none; font-weight: 600; padding: 0 0.75rem; border-radius: 6px; transition: background 0.15s; } .site-chrome__brand:hover { background: var(--chrome-hover); } .site-chrome__brand-logo { width: 20px; height: 20px; flex-shrink: 0; } /* The AOE radar package injects `svg { fill: currentColor }` globally, which * overrides the SVG's fill="none" attribute (CSS type selectors beat SVG * presentation attributes) and fills all three concentric circles solid. * This higher-specificity rule restores the intended stroke-only appearance * while letting the center dot's own fill="currentColor" attribute still * win via the cascade (directly-specified attribute > inherited value). */ .site-chrome__brand-logo svg { fill: none; } .site-chrome__nav { display: flex; align-items: stretch; flex: 1; flex-wrap: nowrap; /* never wrap; let the breakpoint collapse to hamburger */ min-width: 0; /* allow flex children to shrink past their content size */ gap: 0.125rem; padding-left: 0.25rem; /* overflow MUST be visible — dropdowns are absolutely positioned with * `top: calc(100% + 4px)` and would otherwise be clipped at the bar's * bottom edge. flex-wrap:nowrap + min-width:0 already prevent horizontal * overflow from breaking the layout, so overflow:hidden is unnecessary * and was the proximate cause of the "dropdowns don't appear" bug. * See scripts/validate-site-chrome.js for the CSS invariant lock. */ overflow: visible; } /* Wrapper around a dropdown trigger + its menu. position: relative anchors * the absolute-positioned menu under its specific trigger instead of the * chrome bar's left edge. */ .site-chrome__nav-group { position: relative; display: inline-flex; align-items: stretch; } /* Nav items are rendered as either (no children) or