/* ===== Sticky header — option D · added 2026-09-13 ================================== Replaces agnar's jQuery "Sticky Anything" pin (title + tagline + search, 89 px, desktop only, with the menu and the dark/language toggles scrolling away). assets/js/sticky-header.js adds `zia-stuck` to once the page has scrolled past the full header, stores the header's un-stuck height in --zia-header-h, and inserts the short brand link used by the phone bar. Design + owner decision: docs/superpowers/specs/2026-09-13-sticky-header-prototype.html (option D). Bands: ≥1025 px two rows (small title + tagline / menu, 96 px); <720 px one 56 px row (hamburger, short name, search + toggles) — built, then switched OFF, see below. 720–1024 px is left alone on purpose — the 12-item menu already wraps to two rows there, so a pinned header would cost ~150 px. */ html.zia-stuck body { padding-top: var(--zia-header-h, 141px); } /* reserve the header's slot */ html.zia-stuck #header { position: fixed; top: 0; left: 0; right: 0; z-index: 99; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); animation: zia-drop .18s ease; } html[data-theme="dark"].zia-stuck #header { box-shadow: 0 2px 8px rgba(0, 0, 0, .45); } html.zia-stuck body.admin-bar #header { top: 32px; } @media (max-width: 782px) { html.zia-stuck body.admin-bar #header { top: 46px; } } @keyframes zia-drop { from { transform: translateY(-100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { html.zia-stuck #header { animation: none; } } /* Short brand link (inserted by the JS before the hamburger): phone bar only. The id anchor is needed — agnar's `.nav-menu a { display:block }` outranks a bare `.zia-brand { display:none }`. */ #wrap-nav-header .zia-brand { display: none; } /* ---- Desktop (≥1025 px): the title row shrinks to 40 px; the menu row is untouched (52 px). ---- */ @media (min-width: 1025px) { html.zia-stuck #header-content { border-top-width: 3px; } html.zia-stuck #header .container-inner .group.pad { height: 40px; align-items: baseline; } /* same proportions as the full header (36/20 → 20/13), tagline light + muted beside the title */ html.zia-stuck .site-title { font-size: 20px; line-height: 40px; padding: 0; letter-spacing: 0; } html.zia-stuck .site-description { font-size: 13px; line-height: 40px; margin: 0; margin-inline-start: 12px; } /* search button: 40 px square at the end of the title row */ html.zia-stuck #header .container-inner .container { top: 0; } html.zia-stuck .toggle-search, html.zia-stuck .toggle-search.active { top: 0; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; } /* The search panel opens beside the button, INSIDE the 40 px title row (owner preference over a dropdown below the bar): top-aligned with the button, no inner padding, the input filling the row. Widths/sides stay agnar's + the child's (FA: 200 px to the right of the button; EN: 340 px to its left). 1 px panel border + 38 px input = 40 px, the row's height. */ html.zia-stuck .search-expand { top: 0; } html.zia-stuck .search-expand-inner { padding: 0; } html.zia-stuck .search-expand .themeform input { height: 38px; line-height: 38px; padding: 0 10px; } } /* ---- Phones (<720 px, agnar's hamburger band): one 56 px bar built from the nav row. ---- ⚠️ DORMANT: the JS never sets `zia-stuck` below 720 px unless PHONE_BAR in sticky-header.js is true (switched off 2026-09-13 by the owner after seeing it live; phones keep the old header). ---- */ @media (max-width: 719px) { /* The title block folds away; only its search button survives, re-parented visually into the fixed header by display:contents (its wrappers keep the DOM, lose their boxes). */ html.zia-stuck #header-sticky, html.zia-stuck #header-content, html.zia-stuck #header-content .container-inner, html.zia-stuck #header-content .group.pad, html.zia-stuck #header-content .container, html.zia-stuck #header-content .search-trap-focus { display: contents; } html.zia-stuck .site-title, html.zia-stuck .site-description { display: none; } /* The bar: orange rule on top (as the full header has), the nav row's own 52 px. */ html.zia-stuck #wrap-nav-header { border-top: 3px solid #de9533; } html.zia-stuck #wrap-nav-header .container-inner { min-height: 52px; } /* Hamburger stays on the right for BOTH languages — that is where the top header keeps it (agnar floats it right and the English header never mirrored it) — so it does not jump sides when the bar appears. The menu list itself keeps its language's direction. */ html.zia-stuck .nav-menu.mobile { display: flex; flex-wrap: wrap; align-items: center; direction: rtl; } html.zia-stuck .nav-menu.mobile > .menu-toggle { order: 1; float: none; } html.zia-stuck #wrap-nav-header .nav-menu.mobile > .zia-brand { order: 2; display: block; width: auto; /* agnar's `.nav-menu a { width:100% }` would stretch it under the search icon */ font-size: 17px; font-weight: 700; line-height: 52px; color: #333; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not([dir="rtl"]).zia-stuck .nav-menu.mobile > .zia-brand { direction: ltr; } html[data-theme="dark"].zia-stuck .nav-menu.mobile > .zia-brand { color: #fff; } html.zia-stuck .nav-menu.mobile > .menu-toggle ~ div { order: 3; flex: 0 0 100%; } html:not([dir="rtl"]).zia-stuck .nav-menu.mobile > .menu-toggle ~ div { direction: ltr; } /* Utilities gather at the far (left) end: language, theme, search — mirroring the prototype. The toggles are positioned from #wrap-nav-header .container-inner (below the 3 px rule); the search button, freed by display:contents, is positioned from the fixed #header. */ html.zia-stuck .zia-langswitch { left: 24px; right: auto; top: 6px; transform: none; } html.zia-stuck .zia-theme-toggle { left: 64px; right: auto; top: 6px; transform: none; } html.zia-stuck .toggle-search, html.zia-stuck .toggle-search.active { position: absolute; top: 5px; bottom: auto; left: 104px; right: auto; padding: 12px; } html.zia-stuck .search-expand { position: absolute; top: 56px; bottom: auto; left: 16px; right: 16px; width: auto; } /* An opened menu scrolls inside the bar instead of running off the bottom of the screen. */ html.zia-stuck #header:has(.nav-menu.toggled) { max-height: 100vh; overflow-y: auto; } }