/* Self-contained site header/footer for the Antora manual pages. No Tailwind / Preflight — everything is scoped under .vv-chrome so it neither leaks into Antora's doc body nor is disturbed by Antora's CSS. Mirrors src/components/Header.astro + Footer.astro. Sizes are in px (not rem) on purpose: Antora enlarges the root font (html{font-size:1.125em}), so rem here would scale the chrome ~12% bigger than the Astro site. The site renders its rem at the 16px root, so these px values (rem*16) make the chrome pixel-identical to the site regardless of Antora's root. */ /* Self-host Inter so doc pages render the SAME font as the Astro site. The site loads it via `@import '@fontsource-variable/inter'`; that @font-face does not exist on Antora pages, so without this the chrome silently fell back to system-ui — same computed CSS, different glyphs and metrics (looked smaller / wrong shape). url() is relative to this file (served at /en/doc/_/site-chrome/), keeping the chrome self-contained and independent of the deploy root. latin + latin-ext cover the menu, footer and the language-switcher labels (CJK names fall back, exactly as on the Astro site). Declarations copied verbatim from @fontsource-variable/inter/wght.css so they match pixel-for-pixel. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Antora reserves space for its own (now-removed) fixed navbar via body{margin-top:1rem}, body{padding-top:3.5rem} (site.css), body{padding-top:var(--vvv-navbar-height)} (vvv-brand.css) and an inline style="padding-top:var(--vvv-navbar-height)" on . A stylesheet !important beats the non-important inline style, so this one rule neutralises all of them and the header sits flush. (chrome.css is only loaded on /en/doc pages — safely targeted.) */ body { margin-top: 0 !important; padding-top: 0 !important; } .vv-chrome li { display: block; margin: 0; } .vv-chrome a { text-decoration: none; } .vv-chrome { --color-header: #345275; --color-header-dark: #2a4260; --color-menu: #ffffff; --color-menu-dim: #dedede; --color-accent: #780e0c; --color-accent-hover: #560c0a; --color-line: #e2e5ea; --color-surface: #ffffff; --color-surface-2: #f5f6f8; --color-muted: #69727e; --color-ink: #15181c; --vv-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-family: var(--vv-font); font-size: 16px; /* fixed base; chrome metrics are px (see header note) */ box-sizing: border-box; } .vv-chrome *, .vv-chrome *::before, .vv-chrome *::after { box-sizing: border-box; } /* ── Header shell ───────────────────────────────────────────────────── */ .vv-header { position: sticky; /* stays put on scroll, like docs.antora.org */ top: 0; z-index: 10; /* the active-item underline (-2px) paints over Antora content */ background: var(--color-header); color: var(--color-menu); width: 100%; flex: 0 0 auto; align-self: flex-start; } /* Antora's breadcrumb toolbar and left sidebar are sticky at a literal top:3.5rem (sized for its old fixed navbar). Re-point them to our 56px sticky header so they pin directly beneath it instead of floating. Desktop only — Antora's mobile nav is a separate overlay. */ @media (min-width: 1024px) { .toolbar { top: 56px !important; } .nav { top: 56px !important; height: calc(100vh - 56px) !important; } .nav-container { top: 56px !important; } } .vv-header .vv-bar { margin: 0 auto; display: flex; min-height: 56px; width: 100%; max-width: 1152px; align-items: stretch; gap: 24px; padding: 0 24px; } .vv-header .vv-logo { display: flex; flex-shrink: 0; align-items: center; } .vv-header .vv-logo img { height: 36px; width: auto; display: block; } .vv-chrome .nav-list { list-style: none; margin: 0; padding: 0; } .vv-chrome .nav-link { position: relative; display: flex; align-items: center; gap: 4.8px; font: inherit; font-weight: 600; font-size: 14px; color: var(--color-menu-dim); background: none; border: 0; cursor: pointer; text-decoration: none; } .vv-chrome .nav-link:hover, .vv-chrome .nav-link:focus-visible, .vv-chrome .nav-link[data-active='true'] { color: var(--color-menu); } .vv-chrome .caret { width: 11.2px; height: 11.2px; opacity: 0.7; transition: transform 0.3s ease-in-out; } .vv-chrome .menu-fx { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-accent); opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .vv-chrome .nav-item:hover > .nav-link > .menu-fx, .vv-chrome .nav-link:focus-visible > .menu-fx, .vv-chrome .nav-link[data-active='true'] > .menu-fx { opacity: 1; visibility: visible; } /* Search slot (Antora's lunr search input lives here on doc pages). */ /* `li.vv-search` (specificity beats the desktop .nav-item stretch rule) keeps the field a fixed, vertically-centred size instead of being stretched to the full 56px header height. */ .vv-chrome li.vv-search { display: flex; align-items: center; } .vv-chrome .vv-search .field { display: flex; align-items: center; position: relative; } .vv-chrome .vv-search input { font: inherit; font-size: 13px; height: 30px; line-height: 1; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-header-dark); border-radius: 4px; padding: 0 10px; width: 200px; max-width: 40vw; } .vv-chrome .vv-search input::placeholder { color: var(--color-muted); } /* Hamburger → X */ .vv-chrome .nav-burger { margin-left: auto; display: inline-flex; height: 56px; width: 40px; align-items: center; justify-content: center; color: var(--color-menu); background: none; border: 0; cursor: pointer; } .vv-chrome .burger-box { position: relative; display: block; width: 22px; height: 16px; } .vv-chrome .burger-line { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out, top 0.3s ease-in-out; } .vv-chrome .burger-line:nth-child(1) { top: 0; } .vv-chrome .burger-line:nth-child(2) { top: 7px; } .vv-chrome .burger-line:nth-child(3) { top: 14px; } .vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(1) { top: 7px; transform: rotate(45deg); } .vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(2) { opacity: 0; } .vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(3) { top: 7px; transform: rotate(-45deg); } html.nav-no-anim .vv-chrome .sub-menu, html.nav-no-anim .vv-chrome .menu-fx, html.nav-no-anim .vv-chrome .primary-nav, html.nav-no-anim .vv-chrome .burger-line { transition: none !important; } /* ── Desktop (lg+) ──────────────────────────────────────────────────── */ @media (min-width: 1024px) { .vv-chrome .nav-burger, .vv-chrome .nav-backdrop { display: none; } .vv-header .primary-nav { margin-left: auto; } /* Full-height link chain: the bar stretches its children, so each nav-link fills the 56px bar and centres its own text — and the active underline (.menu-fx, bottom:-2px) lands exactly on the header's bottom edge, like the Astro site. */ .vv-chrome .primary-nav, .vv-chrome .nav-list, .vv-chrome .nav-item { display: flex; align-items: stretch; } .vv-chrome .nav-list { gap: 4px; } .vv-chrome .has-children { position: relative; } .vv-chrome .nav-link { padding: 0 13.6px; transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out; } .vv-chrome .sub-menu { position: absolute; top: 100%; left: 0; min-width: 208px; list-style: none; margin: 0; padding: 0; background: var(--color-header); border-top: 2px solid var(--color-accent); box-shadow: 0 8px 15px rgb(0 0 0 / 0.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out; z-index: 20; } /* The last nav item sits at the right edge of the bar; open its dropdown leftward so it doesn't overflow the viewport (the lang switcher used to be the last item and absorbed this). */ .vv-chrome .nav-list > .nav-item:last-child > .sub-menu { left: auto; right: 0; } .vv-chrome .has-children:hover > .sub-menu, .vv-chrome .has-children:focus-within > .sub-menu, .vv-chrome .has-children[data-submenu='open'] > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .vv-chrome .sub-link { display: block; padding: 9.6px 16px; font-size: 14px; color: var(--color-menu-dim); text-decoration: none; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } .vv-chrome .sub-link:hover, .vv-chrome .sub-link:focus-visible, .vv-chrome .sub-link[aria-current='page'] { background: var(--color-header-dark); color: var(--color-menu); } } /* ── Mobile (< lg): right-side slide-in drawer ──────────────────────── */ @media (max-width: 1023px) { .vv-chrome .nav-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 50; } .vv-chrome .nav-backdrop:not([hidden]) { opacity: 1; } .vv-chrome .primary-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--color-header); transform: translateX(100%); transition: transform 0.3s ease-in-out; overflow-y: auto; z-index: 60; padding-top: 64px; } .vv-chrome .primary-nav[data-open='true'] { transform: translateX(0); box-shadow: -8px 0 24px rgb(0 0 0 / 0.3); } .vv-chrome .nav-burger { z-index: 70; } .vv-chrome .nav-list { display: block; padding: 8px 0 24px; } .vv-chrome .nav-link { width: 100%; justify-content: space-between; padding: 13.6px 24px; transition: color 0.4s ease-in-out; } .vv-chrome .menu-fx { display: none; } .vv-chrome .nav-link[data-active='true'] { box-shadow: inset 3px 0 0 var(--color-accent); } .vv-chrome .vv-search { padding: 12px 24px; } .vv-chrome .vv-search input { width: 100%; max-width: none; } .vv-chrome .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; background: var(--color-header-dark); transition: max-height 0.3s ease-in-out; } .vv-chrome .has-children[data-submenu='open'] > .sub-menu { max-height: 640px; } .vv-chrome .has-children[data-submenu='open'] .caret { transform: rotate(180deg); } .vv-chrome .sub-link { display: block; padding: 11.2px 36px; font-size: 14.4px; color: var(--color-menu-dim); text-decoration: none; } .vv-chrome .sub-link[aria-current='page'] { color: var(--color-menu); font-weight: 600; } } /* ── Footer ─────────────────────────────────────────────────────────── */ .vv-footer { margin-top: 64px; border-top: 1px solid var(--color-line); background: var(--color-surface-2); color: var(--color-muted); font-family: var(--vv-font); font-size: 14px; width: 100%; flex: 0 0 auto; } .vv-footer .vv-foot-inner { margin: 0 auto; width: 100%; max-width: 1152px; padding: 24px; } .vv-footer ul { list-style: none; margin: 0; padding: 0; } /* Top row: site links (left) and the social icons (right), mirroring the Astro Footer.astro layout. */ .vv-footer .vv-foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .vv-footer .vv-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .vv-footer a { color: var(--color-muted); text-decoration: none; } .vv-footer a:hover { color: var(--color-accent); } /* Bottom row: copyright (left) + language selector (right). */ .vv-footer .vv-foot-bottom { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-line); padding-top: 16px; } .vv-footer .vv-foot-bottom p { margin: 0; } /* Language selector — a native

disclosure that opens UPWARD (it sits at the very bottom of the page), right-aligned. Selecting a language navigates away, so no JS is needed. Mirrors Footer.astro. */ .vv-footer .vv-lang { position: relative; margin-left: auto; } .vv-footer .vv-lang > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--color-muted); } .vv-footer .vv-lang > summary::-webkit-details-marker { display: none; } .vv-footer .vv-lang > summary:hover { color: var(--color-accent); } .vv-footer .vv-lang-globe { width: 16px; height: 16px; opacity: 0.85; } .vv-footer .vv-lang-caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.2s ease-in-out; } .vv-footer .vv-lang[open] > summary .vv-lang-caret { transform: rotate(180deg); } .vv-footer .vv-lang-name { font-weight: 600; } .vv-footer .vv-lang-menu { position: absolute; bottom: 100%; right: 0; margin: 0 0 8px; min-width: 192px; max-height: 60vh; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 6px; box-shadow: 0 8px 15px rgb(0 0 0 / 0.18); padding: 4px 0; z-index: 20; } .vv-footer .vv-lang-menu a { display: block; padding: 6px 16px; color: var(--color-muted); text-decoration: none; } .vv-footer .vv-lang-menu a:hover { background: var(--color-surface-2); color: var(--color-accent); } .vv-footer .vv-lang-menu a[aria-current='page'] { font-weight: 600; color: var(--color-accent); } .vv-footer .vv-social { display: flex; align-items: center; gap: 16px; /* Right-align within .vv-foot-top even if the row wraps (space-between only right-aligns on a single line). Mirrors Footer.astro. */ margin-left: auto; } .vv-footer .vv-social a { display: block; } .vv-footer .vv-social svg { width: 18px; height: 18px; fill: currentColor; }