/* ========================================================================== Adilet.kz — site header Utility strip over a sticky main bar with a standing search field. Reworked 2026-09-09; the markup contract is the {% comment %} at the top of templates/core/base.html and core/tests/test_navbar.py. Loaded AFTER style.css. Everything the old header styled has been moved here — style.css no longer carries a header rule — so this file is the one place to change the bar. Palette is unchanged: the #730C0B band, #5C0A0A for the strip and tabs, #F2C93E for the active accent, white text. Three things here are load-bearing: 1.

is the sticky element and it sticks at a NEGATIVE top: minus the utility strip's height, so the strip rolls off and the bar alone stays pinned. Making .header-top sticky instead does not work — a sticky box is confined to its parent's, and

is only ~100px tall, so the bar unpins the moment you scroll past it. That is also why the search row, the drawer and the listings sub-menu are siblings of

rather than children: anything left inside gets pinned along with the bar. 2. --app-header-h is the bar's measured height, written by navbar.js. Sticky sidebars in style.css and the law reader's docbar offset read it. The values declared here are only the pre-JS fallback; do not treat them as the source of truth. 3. The active nav item is marked by a gold underline AND a weight change. The predecessor set a transparent background and the same weight, which is why nothing on the site showed where you were. ========================================================================== */ :root { --nav-band: #730c0b; --nav-band-deep: #5c0a0a; --nav-accent: #f2c93e; --nav-on-band: #ffffff; --nav-on-band-dim: rgba(255, 255, 255, 0.74); --nav-fill: rgba(255, 255, 255, 0.12); --nav-fill-strong: rgba(255, 255, 255, 0.18); --nav-hairline: rgba(255, 255, 255, 0.18); --nav-bar-h: 64px; /* --nav-strip-h is an OUTPUT: navbar.js measures the strip into it and .header-main's negative top is its only consumer. Nothing that affects the strip's own size may read it — .site-utility-inner did, and each measurement then grew the strip it had just measured, one pixel per frame, forever. The strip's own height is --nav-strip-min-h. */ --nav-strip-min-h: 36px; --nav-strip-h: 37px; --nav-radius: 999px; } /* ========================================================================== 1. Shell ========================================================================== */ /* .header-main keeps its name: law-reader.css hides it in @media print and law_version_compare.html hides it for the full-screen diff. It also keeps the negative-margin bleed that cancels the 50px side padding style.css puts on . */ .header-main { background: var(--nav-band); position: sticky; top: calc(-1 * var(--nav-strip-h)); z-index: 1000; width: calc(100% + 100px); margin-left: -50px; margin-right: -50px; padding-left: 50px; padding-right: 50px; overflow: visible; } .header-main .container { max-width: 100%; width: 100%; padding-left: 15px; padding-right: 15px; overflow: visible; } /* ========================================================================== 2. Utility strip Secondary destinations, language, session. Deliberately NOT sticky: none of it is needed mid-page, and keeping it out of the sticky block is what lets the bar stay 64px. "Register my firm" lives here because it used to render only on the lawyers listings, where most visitors never go. ========================================================================== */ .site-utility { background: var(--nav-band-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-utility-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--nav-strip-min-h); } .site-utility-links { display: flex; align-items: center; gap: 1.25rem; min-width: 0; flex: 1 1 auto; } .site-utility-links a { color: var(--nav-on-band-dim); text-decoration: none; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .site-utility-links a:hover { color: var(--nav-on-band); border-bottom-color: var(--nav-accent); } .site-utility-right { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .site-utility-divider { width: 1px; height: 16px; background: var(--nav-hairline); } .site-utility-btn { display: inline-flex; align-items: center; gap: 0.375rem; background: transparent; border: 0; padding: 0.25rem 0.5rem; border-radius: var(--nav-radius); color: var(--nav-on-band-dim); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; } .site-utility-btn:hover { color: var(--nav-on-band); background: rgba(255, 255, 255, 0.1); text-decoration: none; } /* ========================================================================== 3. The bar ========================================================================== */ .header-top { background: var(--nav-band); } /* navbar.js adds .is-stuck once the page has scrolled past the strip. The bar sits directly on white content, so without this the boundary disappears. It goes on the header, whose bottom edge IS the bar's once the strip has rolled off. */ .header-main { transition: box-shadow 0.18s ease; } .header-main.is-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .site-bar { display: flex; align-items: center; gap: 0.5rem; min-height: var(--nav-bar-h); flex-wrap: nowrap; } .site-bar-spacer { flex: 1 1 auto; min-width: 0.25rem; } .navbar-brand-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; margin-right: 0.25rem; } .navbar-brand-logo:hover { opacity: 0.92; } .navbar-logo-img { height: 28px; width: auto; display: block; pointer-events: none; } .site-caret { font-size: 0.6875rem; opacity: 0.7; } /* --- All services trigger --- */ .site-services-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--nav-fill); border: 0; border-radius: var(--nav-radius); color: var(--nav-on-band); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.875rem; white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: background-color 0.15s ease; } .site-services-btn:hover, .site-services-btn[aria-expanded="true"] { background: var(--nav-fill-strong); color: var(--nav-on-band); } /* --- Primary navigation --- */ /* The nav does not shrink and the search field does. Sharing the squeeze proportionally is what clipped «Статьи» behind the search pill at 1440px: a destination that is half-visible is worse than a field that is 60px narrower. Three links is also the most that fits beside the field in Russian, where «Законодательство» is twice the width of «Заңнама». */ .site-nav { display: flex; align-items: center; gap: 0.125rem; flex: 0 0 auto; } .site-nav-link { position: relative; color: rgba(255, 255, 255, 0.92); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: var(--nav-radius); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .site-nav-link:hover { color: var(--nav-on-band); background: rgba(255, 255, 255, 0.1); text-decoration: none; } .site-nav-link.active { color: var(--nav-on-band); font-weight: 650; background: rgba(255, 255, 255, 0.13); } /* The gold rule is the answer to "which section am I in". It hangs off the bottom of the bar, so it must not be clipped: .header-top has no overflow rule for exactly this reason. */ .site-nav-link.active::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -0.75rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--nav-accent); } /* ========================================================================== 4. Search A plain GET form to core:site_search. The scope select is a native