/* ========================================================================== NetrAI — The header is a capsule and a search key -------------------------------------------------------------------------- The sticky header, rebuilt to the arrangement in the pasted : the navigation collected into one translucent rounded-full capsule, and nothing else riding along with it. WHAT IS IN THE CAPSULE: the seven page links. That is the whole list. WHAT IS BESIDE IT: one 44px circle carrying the search icon, in the same frosted material, detached from the capsule with a small gap. ALSO BESIDE IT: the appearance key (the search key's twin) and the "Get Started" pill. Both briefly left the header and both are back; they sit in the track next to the capsule rather than inside it. The bar itself never paints at any scroll position above 860px. It is a transparent sticky positioning shell, and the capsule is the header. THIS FILE LOADS LAST, AFTER glass.css, and it is the only file allowed to. Everything here overrides chrome glass.css owns — `.site-header`, `.site-header.scrolled`, `.site-header.scrolled .nav` — and three separate bugs on this site have come from a newer, less specific rule losing to an older, more specific one. Loading last settles equal-specificity ties in this file's favour; where glass.css is MORE specific, the selectors below match its shape exactly rather than trusting order. PHONES ARE NOT TOUCHED. Everything below 861px keeps the header it had: logo, search, hamburger, full-screen drawer, and inside the mobile app shell the tab bar and More sheet. A capsule that has to hold seven links does not fit across a 390px screen, and the drawer is the answer that already exists. WHAT LEAVES ON SCROLL: only the logo. The capsule, both keys and the CTA ride together, so the persistent call to action is never off screen. ========================================================================== */ @media (min-width: 861px) { /* ========================================================================== 1. The shell and the bar — neither paints, ever -------------------------------------------------------------------------- glass.css section 6 styles `.site-header.scrolled` at (0,2,0) and its section 7 styles `.site-header.scrolled .nav` at (0,3,0). A bare `.site-header` here is (0,1,0) and would lose to both regardless of file order — that is exactly the bug that once left a floating island sitting inside a solid black bar. Every selector below is written to the shape it has to beat. ========================================================================== */ .site-header, .site-header.scrolled { background: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: none; } .site-header .nav, .site-header.scrolled .nav { /* Four tracks, not three. The search key has to sit NEXT TO the capsule rather than out at the right margin, so it takes a track of its own immediately after it and the two share the middle of the bar. Both flexible tracks are 1fr, so the pair is centred and the logo hangs off the left without moving it. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; max-width: 100%; margin: 0; padding: 12px clamp(20px, 4vw, 48px); border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* AND THE DARK-MODE COPIES OF BOTH. This is the hairline that survived. glass.css states the shell's and the bar's shadows twice — once plain, once again under `[data-theme="dark"]` with a heavier drop — and that second copy is (0,3,0) and (0,4,0). The resets above are (0,2,0) and (0,3,0), so in dark mode only, both kept their `inset 0 -1px 0 var(--glass-edge)`: a 14%-white rule drawn along the bottom edge of a bar that no longer paints anything else. Measured at y=78 across the full width, which is exactly where it was showing up. */ [data-theme="dark"] .site-header, [data-theme="dark"] .site-header.scrolled, [data-theme="dark"] .site-header .nav, [data-theme="dark"] .site-header.scrolled .nav { box-shadow: none; border-bottom: 0; } /* Three tracks. The outer two are 1fr, so the capsule in the middle is centred in the window no matter what hangs off either side. .nav-actions takes the whole right track and STRETCHES across it, which is what lets one row hold two groups at once: the search key sits at the track's start, hard against the capsule, and `margin-right: auto` on it pushes appearance and Get Started all the way out to the right edge. No wrapper element, no second grid, and the capsule never moves. */ .logo-mark { grid-column: 1; justify-self: start; } .nav-links-wrapper { grid-column: 2; justify-self: center; } .nav-actions { grid-column: 3; justify-self: stretch; display: flex; align-items: center; gap: 8px; } .nav-search-btn { margin-right: auto; } /* Nothing in the bar paints, so nothing in the bar should be catching clicks either — the whole strip is a full-width sticky box lying over the page. It stops swallowing them and the three things that are actually there put them back. glass.css grants `pointer-events: auto` to `.nav` when scrolled; that would hand the entire bar back, so it is revoked at the same specificity before the grants below. */ .site-header, .site-header.scrolled { pointer-events: none; } .site-header .nav, .site-header.scrolled .nav { pointer-events: none; } .logo-mark, .nav-links-wrapper, .nav-actions { pointer-events: auto; } /* ========================================================================== 2. The capsule -------------------------------------------------------------------------- `.nav-links` was already a pill — style.css builds it as a raised capsule with a white-to-canvas gradient, a hairline and a top sheen, which reads as a solid object sitting ON the bar. It is the bar now, so the fill becomes the frosted material: the chrome tint held back to ~80% opacity with a real blur behind it, which is what makes it read as translucent rather than as a light grey lozenge. THE FILL IS --chrome-tint AT FULL STRENGTH, AND IT HAD TO BE. The first pass held it back to 88% of that — 0.80 in light, 0.81 in dark — on the theory that a thinner fill would read as more translucent. Measured on Demos in dark mode with the section lede passing underneath, the nav labels came back at 1.0:1 against a sentence you could read straight through them: 19% of white is #303030, which on a near-black panel is not a ghost, it is text. The full-bleed bar this replaces measured clean at 86% / 30px, and a bar has a page's margins either side of it while this capsule is 540px wide and dead centre with headlines running directly under it. So the fill is the chrome value and the BLUR does the translucency — which is where it reads anyway: at 28px the content behind is legibly in motion without ever being legible. Section 6's numbers are re-measured after every change to this line. ========================================================================== */ :root { --capsule-tint: var(--chrome-tint); --capsule-line: var(--glass-hairline); --capsule-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 -1px 0 0 var(--glass-edge-dim), 0 4px 14px -6px rgba(17, 17, 26, 0.14), 0 14px 40px -18px rgba(17, 17, 26, 0.30); } [data-theme="dark"] { --capsule-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 -1px 0 0 var(--glass-edge-dim), 0 4px 14px -6px rgba(0, 0, 0, 0.55), 0 16px 44px -18px rgba(0, 0, 0, 0.80); } .nav-links, .nav-links:hover, .site-header.scrolled .nav-links { padding: 5px; border-radius: var(--radius-pill); background: var(--capsule-tint); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--capsule-line); box-shadow: var(--capsule-shadow); } /* ========================================================================== 3. The search key -------------------------------------------------------------------------- Same material, its own object. A circle rather than a rounded rectangle, because next to a 980px-radius capsule anything else reads as a second shape language. 44px is the pointer-target floor, so it is also the smallest this is allowed to be. ========================================================================== */ .nav-search-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; gap: 0; border-radius: 50%; background: var(--capsule-tint); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--capsule-line); border-top-color: var(--capsule-line); border-left-color: var(--capsule-line); box-shadow: var(--capsule-shadow); color: var(--mist); } .nav-search-btn:hover, .nav-search-btn:focus-visible { color: var(--ink); border-color: var(--capsule-line); box-shadow: var(--capsule-shadow); } .nav-search-btn svg { width: 18px; height: 18px; } /* The ⌘K hint goes with the label it used to sit beside. The shortcut still works — js/components/search.js binds it on the document, not on this element — and the button keeps its aria-label, so nothing is lost but the sign. */ .nav-search-kbd { display: none; } /* ========================================================================== 4. Appearance and Get Started, beside the capsule -------------------------------------------------------------------------- Both spent one revision out of the chrome — appearance in the footer's legal bar, Get Started nowhere — and both are back. They sit in the same track as the search key rather than inside the capsule, so the capsule stays what it is: seven page links and nothing else. Reading left to right that gives one capsule, then two 44px keys, then the CTA. The appearance key is the search key's twin — same circle, same frosted fill — because they are the same KIND of thing: a small persistent control that opens or changes something. The CTA is deliberately not: it is the one accent-filled object in the header and the only place the brand blue appears up here. ========================================================================== */ .site-header .theme-toggle { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--capsule-tint); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--capsule-line); box-shadow: var(--capsule-shadow); color: var(--mist); } .site-header .theme-toggle:hover, .site-header .theme-toggle:focus-visible { background: var(--capsule-tint); color: var(--ink); } /* Matched to the two keys so the row sits on one optical line — the pill shipped at 7px of vertical padding, which left it noticeably shorter than the circles either side of it. */ .nav-actions .nav-cta-btn { min-height: 44px; padding-inline: 20px; box-shadow: var(--capsule-shadow); } /* ========================================================================== 5. The logo leaves on scroll ========================================================================== */ /* Three things leave, not one. What is left once the page moves is the capsule and the search key — the two controls you use WHILE reading. Appearance and Get Started are start-of-page furniture: they are there when you arrive and they get out of the way after that. opacity, not display: a hidden grid item would resize the right track and drag the capsule off centre mid-scroll. These keep their boxes. */ .logo-mark, .site-header .theme-toggle, .nav-actions .nav-cta { transition: opacity 320ms ease, transform 320ms ease; } .site-header.scrolled .logo-mark, .site-header.scrolled .theme-toggle, .site-header.scrolled .nav-actions .nav-cta { opacity: 0; transform: translateY(-8px); pointer-events: none; } /* ========================================================================== 6. Narrow desktops -------------------------------------------------------------------------- The capsule plus the search key is a fixed-width object in the middle of the bar with the logo hanging off one side. Between 861 and about 1040 that is the tightest row on the site, so the links give back padding rather than the capsule being allowed to reach the logo. ========================================================================== */ @media (max-width: 1120px) { .site-header .nav, .site-header.scrolled .nav { padding-inline: 18px; column-gap: 8px; } .nav-links a:not(.btn) { padding-inline: 11px; } } @media (max-width: 980px) { .nav-links a:not(.btn) { padding-inline: 9px; font-size: 0.8125rem; } .nav-search-btn { width: 40px; height: 40px; } } } /* ========================================================================== 6b. At rest the bar takes the hero's own ground -------------------------------------------------------------------------- Making the bar transparent left the strip above the hero showing whatever is behind — the ambient mesh — while the hero right under it paints --waves-bg. Two different darks meeting at a hard edge, which read as a band bolted above the page. The bar takes the hero's ground instead, so there is nothing to see between the top of the window and the headline. Once scrolled it goes back to transparent (section 1) and the capsule floats over live content, which is the whole point. (0,3,0) — it has to beat `.site-header.scrolled` in glass.css and `html.m-app .site-header` in mobile-app.css. `body:not(.nav-open)` is not padding: css/layout/mobile.css strips this surface while the drawer is open so the panel's own background shows through, and that rule is (0,2,0) in a file that loads earlier. */ body:not(.nav-open) .site-header:not(.scrolled) { background: var(--waves-bg); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* The reading-progress bar. A 3px cosmic-gradient rule pinned across the top of the window at z-index 200 — above the header — so once the page moved there was a coloured line lying over the capsule's own top edge. The chapter rail down the right-hand side already reports position, and it does it without drawing through the chrome. */ .scroll-progress { display: none; } /* ========================================================================== 7. Reduced motion and print ========================================================================== */ @media (prefers-reduced-motion: reduce) { .logo-mark, .nav-links, .nav-search-btn { transition: none; } } @media print { .site-header { display: none; } }