/* ========================================================================== gkarchemsky.com Dark-first, content-forward theme for long-form vulnerability research. ========================================================================== */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The shell is fluid: it stretches with the viewport instead of sitting in a fixed centred column, so the page fills whatever device it is on. Only running prose is capped — paragraphs have a hard readability ceiling around 90 characters no matter how big the screen is. Code, tables, figures and the TOC rail all take the remaining width. */ --measure: 54rem; /* running prose only — the one hard cap */ --wide: 150rem; /* safety stop on ultra-wide displays */ /* Scales with the viewport, so the page keeps a comfortable margin on a large display instead of running into the edges. */ --gutter: clamp(1.5rem, 7vw, 12rem); --radius: 6px; color-scheme: dark; --bg: #0b0d10; --bg-elev: #12151b; --bg-code: #0e1116; /* Hairlines were #222831 / #1a1f27, which measured 1.31:1 and 1.10:1 against the surfaces they sit on — under the 1.5:1 where a 1px line stops reading as a line at all. The separators in the mobile menu were the worst case at 1.10:1 and were effectively invisible. Raised to 2.20:1 and 1.66:1, moving only lightness so the palette's blue-grey hue is unchanged. */ --border: #404b5c; --border-soft: #333d4c; --text: #d7dee7; --text-strong: #f2f5f8; --text-muted: #8a94a2; --text-faint: #7d8895; /* 4.8:1 on --bg; #626c7a was 3.7:1 */ /* Accent + status colours are Apple's system palette, read out of UIKit on iOS 26.5 and cross-checked against AppKit on macOS 26.6.1. Dark appearance uses the standard variants; every one clears WCAG AA as text on --bg-elev (cyan 10.4:1, green 9.0:1, orange 8.2:1, red 5.3:1, purple 5.0:1). */ /* Post rows carry a surface at rest, not only on hover — without one they read as loose text on the page background and the eye has nothing to separate one entry from the next. Same blue-grey as everything else, only lifted. The resting step is deliberately small: enough to bound the entry, not enough to compete with the writing. Hover then has somewhere to go — a deeper fill, the full border weight, and a shadow. */ --card-rest-bg: #101319; --card-rest-border: #272f3b; --card-hover-bg: #171c24; /* Border and shadow are deliberately NOT repeated in the light blocks below. color-mix substitutes at computed-value time, so var(--accent) and var(--border) inside resolve against whichever theme is in force — one definition covers both, and the treatment cannot drift apart between them. Only the fill, which is a literal colour, is per-theme. */ --card-hover-border: color-mix(in srgb, var(--accent) 60%, var(--border)); --card-hover-shadow: 0 8px 26px -18px color-mix(in srgb, var(--accent) 70%, transparent); --accent: #3cd3fe; /* systemCyan, dark */ --accent-dim: #00c0e8; /* systemCyan, light — pressed */ --accent-bg: rgba(60, 211, 254, 0.1); --warn: #ff9230; /* systemOrange, dark */ --c-green: #30d158; /* systemGreen, dark */ --c-red: #ff4245; /* systemRed, dark */ --c-purple: #db34f2; /* systemPurple, dark */ --callout-bg: #12151b; /* the surface those ratios assume */ --sel: rgba(60, 211, 254, 0.22); } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-elev: #f7f8fa; --bg-code: #f6f8fa; --border: #a4b0be; --border-soft: #bac4d3; --text: #24292f; --text-strong: #0d1117; --text-muted: #5b6672; --text-faint: #6b7280; /* 4.8:1 on white; #8994a1 was 3.1:1 */ /* Light appearance uses Apple's *high-contrast* variants. The standard ones are tuned for fills and fail as text on white — systemCyan is 2.16:1 and systemGreen 2.22:1. The high-contrast set clears AA (4.5:1+). */ --card-rest-bg: #fafbfc; --card-rest-border: #e3e8ee; --card-hover-bg: #f1f4f8; --accent: #007eae; /* systemCyan HC 4.57:1 */ --accent-dim: #00658b; /* derived: accent darkened for press */ --accent-bg: rgba(0, 126, 174, 0.08); --warn: #c55300; /* systemOrange HC 4.55:1 */ --c-green: #008932; /* systemGreen HC 4.54:1 */ --c-red: #e9152d; /* systemRed HC 4.56:1 */ --c-purple: #b02fc2; /* systemPurple HC 5.21:1 */ --callout-bg: #ffffff; /* ratios above are vs white, so callouts sit on white, not the tinted elevated surface */ label to 4.11:1; no fill keeps it on white at 4.57:1 */ --sel: rgba(0, 126, 174, 0.18); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #ffffff; --bg-elev: #f7f8fa; --bg-code: #f6f8fa; --border: #a4b0be; --border-soft: #bac4d3; --text: #24292f; --text-strong: #0d1117; --text-muted: #5b6672; --text-faint: #6b7280; /* 4.8:1 on white; #8994a1 was 3.1:1 */ --card-rest-bg: #fafbfc; --card-rest-border: #e3e8ee; --card-hover-bg: #f1f4f8; --accent: #007eae; --accent-dim: #00658b; --accent-bg: rgba(0, 126, 174, 0.08); --warn: #c55300; --c-green: #008932; --c-red: #e9152d; --c-purple: #b02fc2; --callout-bg: #ffffff; --sel: rgba(0, 126, 174, 0.18); } } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* No `scroll-behavior: smooth` here, deliberately. It governs exactly two things, because every programmatic scroll in site.js names its own behavior: plain `` links, and scrolls the *browser* performs — of which restoring your position after a refresh is one. Animating that is the bug: refresh a page you had scrolled down and it starts at the top and slides to where you were, dragging the layout past you on the way. On a phone, where restoration lands later, it was the whole of the reported glitch. Suppressing it during load was tried first and is worse: the guard has to end at some arbitrary moment, and flipping the property part-way through a page's life means a scroll begun under one rule finishes under another. Having no global smooth at all needs no timing and cannot be mistimed. A hash link jumps instead of gliding, which is the browser's own default and lands in the right place because of the scroll-padding below. */ scroll-padding-top: 5rem; /* Reserve the scrollbar's width on every page, whether that page scrolls or not. Where scrollbars take up space — Safari set to always show them, and the default on Windows and most Linux desktops — the layout width otherwise differs between a short page and a long one, and a window sized within a scrollbar's width of a breakpoint gets a different layout on each. On macOS's overlay scrollbars this reserves nothing. */ scrollbar-gutter: stable; } /* Nothing transitions until the page has settled. Set by the inline script in the head and removed by site.js after load, so it covers the whole window in which a custom property can resolve late and turn a value correction into a visible animation. Transitions only — animations are left alone, so the wordmark's cursor keeps blinking through the load rather than starting with a jump. */ :root.is-preload *, :root.is-preload *::before, :root.is-preload *::after { transition: none !important; } /* The same freeze, for the one synchronous measurement the header takes with .nav-collapsed briefly removed (see measureNav in site.js). Reading the links' natural width means laying them out inline for an instant; nothing is painted in that instant, but .nav-collapsed also moves the controls' `order` and margins, and those would otherwise animate on the way out and back. Separate from .is-preload because that class carries its own meaning — the load-time freeze — and the tracer reads it. */ :root.is-measuring *, :root.is-measuring *::before, :root.is-measuring *::after { transition: none !important; } /* No scroll guard here any more: with no global smooth to suppress, there is nothing for a load-time guard to do. See the note on `html` above. */ @media (prefers-reduced-motion: reduce) { /* `scroll-behavior` is not reset here: it is already auto everywhere. The scrolls that do animate name their behavior in site.js, and scrollBehavior() there returns 'instant' for exactly this media query — a stylesheet reset cannot override an explicit value, which is why the decision lives in the script rather than here. */ *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; } ::selection { background: var(--sel); } a { color: var(--accent); text-decoration: none; } @media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } } img, svg, video { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--bg-elev); border: 1px solid var(--accent); padding: 0.5rem 1rem; border-radius: var(--radius); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; /* The bar as glass, in the way iOS and macOS do it. Three parts, and all three are needed — any one alone reads as "translucent", not as a material: a thin tint, so what passes underneath is coloured rather than shown a wide blur with saturation pushed up, which is what makes the colour beneath bloom instead of smearing a bright hairline along the top inside edge, which is the whole trick: it is the lit edge of a pane catching the light, and without it the bar looks like a faded rectangle The tint is 76% rather than the 88% it was, so the blur has something to work with. It is a balance, not a maximum — below about 70% the wordmark starts competing with whatever scrolls under it. */ background: color-mix(in srgb, var(--bg) 76%, transparent); backdrop-filter: saturate(200%) blur(22px); -webkit-backdrop-filter: saturate(200%) blur(22px); /* No `contain: paint` here, and no transform or will-change either. All three would let the compositor cache the blur, and all three clip or reparent what hangs below the bar: the menu panel and the search card are both descendants that paint outside it. `contain: paint` was tried and erased the whole dropdown — and it did so invisibly to a geometry check, because the panel's box stays correct while its pixels are clipped. */ border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 65%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-strong) 10%, transparent), 0 1px 12px -8px color-mix(in srgb, var(--text-strong) 22%, transparent); } /* A 22px backdrop blur under a sticky bar is re-rasterised as the page scrolls beneath it, and on iOS that is the one thing in this header expensive enough to show: the bar appears to re-render while you scroll. Nothing about it is measurable — the geometry, the classes and --header-h are identical in every frame of a scroll in both engines — which is what points at the compositor rather than the layout. Half the radius on a touch device. The glass still reads as glass at 11px against a 76% tint; what goes is the cost per frame. Kept at full strength for a pointer, where it has never misbehaved. */ @media (pointer: coarse) { .site-header { backdrop-filter: saturate(180%) blur(11px); -webkit-backdrop-filter: saturate(180%) blur(11px); } } /* Without backdrop-filter there is no glass to be had, and a 76% tint is just a see-through bar. Those browsers get the solid surface instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } } .site-header .wrap { display: flex; align-items: center; /* The two sizes the search panel's caret has to be placed against, named so it can be derived rather than measured by hand. An icon button is centred in the bar, so the drop from its bottom edge to the bar's is exactly half the difference — arithmetic that stays true if either number moves. */ --bar-h: 3.75rem; --icon-btn: 1.9rem; /* How far the panel hangs below the bar. Enough to see the page between them, which is what makes it read as a box rather than more of the bar. */ --panel-drop: 0.55rem; --wrap-gap: 2rem; /* Declared here, not on .nav-controls: the stacked row sets its own column-gap from this value, and a variable on a child is not visible to its parent. */ --controls-gap: 0.7rem; /* The two numbers that decide the whole bar. --search-w is one width, not a range. It was `clamp(8rem, 20vw, 12rem)` with a `min-width` floor and `flex: 0 1 auto`, so the open field rendered anywhere from 96px to 192px depending on the viewport and on how tight the row already was. Every decision about the bar was being taken against that moving number, which is why none of them held still. --nav-clearance is the smallest gap allowed between the right edge of the wordmark's blinking cursor and the left edge of HOME. site.js collapses the menu when the row cannot honour it, and drops the search field into its card rather than let the field eat into it. Measured tightest case before this existed: 40px. */ --search-w: 12rem; --nav-clearance: 3rem; gap: var(--wrap-gap); height: var(--bar-h); } .brand { display: inline-flex; align-items: center; /* Shrinkable, not fixed. Pinning it with `flex: 0 0 auto` did guarantee clearance, but the wordmark is `white-space: nowrap` — so on a 320px phone the row could no longer fit and the controls were pushed 56px off the right edge. It gives way now, and the handle truncates with an ellipsis. That ellipsis lives on `.brand-label`, not here. This comment claimed it for a long time while no `text-overflow` existed anywhere in the file, and adding one here would not have worked either: `.brand` is a flex container, so the handle was an anonymous flex item and `text-overflow` cannot apply to one. The result was a wordmark cut mid-glyph — 55px gone at 320px, reading "gkarcher". */ flex: 0 1 auto; min-width: 0; overflow: hidden; padding-right: 0.5rem; /* clearance that survives at the tightest width */ gap: 0.6rem; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-strong); white-space: nowrap; letter-spacing: -0.01em; } /* Where the truncation actually happens. `min-width: 0` opts out of the automatic minimum size so this can shrink below its content, and the three overflow properties then do the ellipsis between them. */ .brand-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; /* A photo carries its own colour; a hairline keeps it from floating against either background. */ box-shadow: 0 0 0 1px var(--border); } @media (hover: hover) { .brand:hover { text-decoration: none; color: var(--accent); } } .brand .sigil { color: var(--accent); } .brand .cursor { display: inline-block; /* Never shrinks. As a flex item with the default `flex-shrink: 1` it was crushed to zero width whenever the bar was tight — measured gone at 320px, 375px *and* 414px, so the blinking cursor was missing on every phone rather than only the narrowest. The label's ellipsis is what should absorb a tight row; this is 9px of the site's identity. */ flex: 0 0 auto; width: 0.55em; height: 1.05em; vertical-align: -0.18em; margin-left: 0.15em; background: var(--accent); animation: blink 1.2s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; } /* The current-page link carries a filled box, which extends past the text it sits on — so the visual gap to the brand is smaller than the flex gap suggests, and at the tightest full-nav width the box appeared to touch the wordmark. This keeps the box's own edge clear of it. Padding, not margin: .site-nav above uses `margin-left: auto` to push itself and the controls against the right edge of the header, and overriding that with a fixed margin left the whole group hugging the wordmark with the right half of the bar empty. */ .site-nav { padding-left: 0.75rem; } .site-nav a.nav-link { font-family: var(--font-mono); /* 0.8rem — 12.8px — sat too small beside what shares the bar with it: the wordmark is 0.95rem and the icons are 17px, so the links read as a footnote to the row rather than as its main content. 0.88rem closes most of that gap while staying a step under the wordmark, which should still lead. */ font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .site-nav a.nav-link[aria-current="page"] { color: var(--text-strong); text-decoration: none; } @media (hover: hover) { .site-nav a.nav-link:hover { color: var(--text-strong); text-decoration: none; } } .site-nav a.nav-link[aria-current="page"] { color: var(--accent); } /* A hairline between the links, centred in the 1.4rem gap the row already has. Quiet on purpose — it is there to group the links as a set, not to be read as a control. Absolutely positioned, so it contributes nothing to the row's width. That matters more than it looks: site.js measures the natural width of this row to decide when the links have to give way to the menu button, and a separator that took up space would move that threshold on every link. Skipped in the dropdown, where the links stack and already carry a border-bottom each — a vertical rule there would cut across them. */ .site-nav a.nav-link { position: relative; } .site-nav a.nav-link + a.nav-link::before { content: ""; position: absolute; left: -0.7rem; /* half of .site-nav's gap */ top: 50%; transform: translateY(-50%); width: 1px; height: 0.85em; background: color-mix(in srgb, var(--border-soft) 65%, transparent); pointer-events: none; } .site-header.nav-collapsed .site-nav a.nav-link + a.nav-link::before { content: none; } @media (max-width: 1040px) { .site-nav a.nav-link + a.nav-link::before { content: none; } } .nav-sep { width: 1px; height: 1.25rem; background: var(--border); } /* Same fixed box as .nav-search-toggle, deliberately. Both sit in the same flex row, and a flex item shrinks by default — with only padding and no dimensions, this button changed size as the header ran out of room, so the two icons stopped matching. `flex: 0 0 auto` opts it out of shrinking; the width/height give it the box to keep. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--icon-btn); height: var(--icon-btn); padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--text-muted); line-height: 0; transition: color 0.15s ease, background 0.15s ease; } @media (hover: hover) { .theme-toggle:hover { color: var(--accent); background: var(--bg-elev); } } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The icons themselves must not scale with the button either. */ .theme-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; } .theme-toggle .moon { display: none; } :root[data-theme="light"] .theme-toggle .moon { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .moon { display: block; } :root:not([data-theme]) .theme-toggle .sun { display: none; } } .nav-toggle { display: none; } /* Search + theme toggle. Outside .site-nav so they never collapse into the mobile menu. */ .nav-controls { display: flex; align-items: center; /* One clearance for every divider in the bar. The two dividers are built differently — .nav-sep is a real element and takes the row's gap on each side, while the one before the theme toggle is drawn as a pseudo-element and centres itself in a single gap — so equal spacing has to be arranged rather than inherited. Three declarations do it: the group cancels the wrap's gap down to this value, the theme toggle adds one more of it so its divider has a double gap to centre in, and the divider is offset by exactly one. 0.7rem is the clearance the nav links' own hairlines already sit in, half of .site-nav's 1.4rem gap, so the whole row measures the same. */ gap: var(--controls-gap); } .nav-search + .theme-toggle { margin-left: var(--controls-gap); } /* Inline, the links and the controls are two separate groups and the row's own gap is what tells them apart — no rule between them. .nav-sep exists for the compact bar, where the icons sit together as one cluster. */ .nav-sep { display: none; } /* The compact bar reads as one cluster of controls, so it is bracketed: a rule before the menu button, between each pair, and after the theme toggle. The outer two are pseudo-elements for the same reason as the one before the theme toggle — a real element takes the row's gap on both sides and spreads the icons out. The group also cancels the wrap's gap down to --controls-gap, so every rule in the cluster sits in the same clearance. Inline, none of this applies: the links and the controls are two groups and the row's own gap is what separates them. */ @media (max-width: 1040px) { .nav-sep { display: block; } .nav-controls { margin-left: calc(var(--controls-gap) - var(--wrap-gap)); /* Room for the closing rule, which would otherwise be drawn past the gutter. The cluster steps in by one clearance so that rule lands on the content edge instead — where the eye already reads a boundary. */ margin-right: var(--controls-gap); } } .site-header.nav-collapsed .nav-sep { display: block; } .site-header.nav-collapsed .nav-controls { margin-left: calc(var(--controls-gap) - var(--wrap-gap)); margin-right: var(--controls-gap); } .nav-toggle { position: relative; } @media (max-width: 1040px) { .nav-toggle::before, .theme-toggle::after { content: ""; } } .site-header.nav-collapsed .nav-toggle::before, .site-header.nav-collapsed .theme-toggle::after { content: ""; } .nav-toggle::before, .theme-toggle::after { position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 1.25rem; background: var(--border); pointer-events: none; } .nav-toggle::before { left: calc(var(--controls-gap, 0.5rem) * -1); } .theme-toggle::after { right: calc(var(--controls-gap, 0.5rem) * -1); } /* The divider between the field and the theme toggle, matching .nav-sep — the one beside the menu button — in height and colour. Drawn as a pseudo-element rather than a second .nav-sep span, because a real element would take the row's gap on both sides and push the two icons apart again. This costs no width, which also keeps it out of the measurement site.js runs on this group to decide when the bar has to collapse. */ .nav-controls .theme-toggle { position: relative; } .nav-search + .theme-toggle::before { content: ""; position: absolute; left: calc(var(--controls-gap) * -1); top: 50%; transform: translateY(-50%); width: 1px; height: 1.25rem; background: var(--border); pointer-events: none; } @media (max-width: 1040px) { /* The 2rem row gap is desktop's, where it separates the wordmark from the nav links. Here there are no links — the hamburger carries `margin-left: auto` and is what actually holds the right-hand group against the edge, so all 2rem of it buys is 32px of nothing between the hamburger and the search icon, which already have .nav-sep between them. Reclaiming it is what lets the wordmark fit whole on a narrow phone rather than truncating. */ .site-header .wrap { --wrap-gap: 0.75rem; --controls-gap: 0.5rem; } /* The brand's own spacing tightens with it. 0.6rem between the avatar, sigil, handle and cursor is desktop's rhythm; three gaps of it plus 0.5rem of trailing padding is 37px of the ~173px the wordmark needs, and at 375px the row was still 12px short after the row gap came down. At 0.4rem and 0.25rem the handle fits whole on a 375px phone, which is the width worth winning — below that the ellipsis takes over, which is what it is for. */ .brand { gap: 0.4rem; padding-right: 0.25rem; } /* Same order as desktop reading left to right: menu, separator, search, theme. The hamburger stands in for the nav links it replaces, so it takes their position rather than being pushed to the end. */ .nav-toggle { order: 2; margin-left: auto; } .nav-controls { order: 3; } .brand { min-width: 0; } .nav-search { width: auto; margin: 0; min-width: 0; } /* No `min-width: 0` on the control group any more, here or anywhere. It let the group be squeezed below its own contents so the open field could take the room, back when the field shrank to absorb a tight row. It does not shrink now — it is one constant width and falls back to the card — so all this can do is push the theme toggle past the gutter, which it did by 7px at 320px the moment the collapsed class started applying here. What gives in a tight row is the wordmark, which has the ellipsis for it. */ /* There is a width below which the bar cannot hold the wordmark and a usable field at the same time. The field opens as a panel under the bar there, and site.js decides when by measuring, so the answer follows the wordmark and the icons rather than a fixed breakpoint. */ } /* With the field open the wordmark stops giving way — the field yields instead, down to its own floor, and if that is still not enough the links collapse (see .nav-collapsed). Only while open: with the field closed the brand stays shrinkable, which is what keeps a 320px phone from pushing the controls off the right edge (see .brand). So the wordmark is never half a word — it is shown whole, or hidden by the 520px rule above. Deliberately NOT inside the 1100px media query. It lived there first, which put it in the one range where the problem does not occur: the wordmark is clipped between 1101px and roughly 1255px, where the links are still inline and an open field leaves them nothing to take but the brand. Not while the field is a panel. There it takes no room in the row, so there is nothing for the wordmark to give way to — and pinning it hands a truncated wordmark its full width back, which moves everything beside it. Whenever the field is in the bar, though — not only while it is open. Keying this to the open state made closing the field jerk: .search-open comes off the instant the icon is tapped and the field then spends 0.18s getting to zero, so for that 0.18s the wordmark was unpinned while the field still held its full width. Between 1100 and 1255 it collapsed from 188px into an ellipsis, cutting the cursor mid-blink, and grew back as the field emptied. Pinning it in both states costs nothing: panel mode is off exactly when the row has been measured to hold the wordmark, the menu button and the controls with the field at its floor, so there is by construction room for it. What gives instead is the field, which is on its way out anyway. */ .site-header:not(.search-panel) .brand { flex-shrink: 0; } /* No room for the wordmark beside an open field: the field opens as a panel under the bar instead of squeezing into it. The bar itself does not change — same height, same three icons in the same places — so tapping search never moves the thing you just tapped. The panel drops from beneath, which is what makes the caret below honest: it points at the control the panel belongs to. .search-panel goes on and comes off in site.js, and it follows the width of the bar rather than the state of the field — so everything below is written to be correct with the field closed as well as open. */ /* The one frame in which the field changes shape. site.js puts this on, swaps .search-panel, forces the layout and takes it off again — see the note by setPanelMode(). Everything the swap touches has to be listed: the field, the form that holds it, the caret, and the icon whose colour is a state of the panel. */ .site-header.shape-switch .nav-search, .site-header.shape-switch .nav-search-input, .site-header.shape-switch .nav-search-toggle, .site-header.shape-switch .nav-search-toggle::after, .site-header.shape-switch .nav-controls { transition: none !important; } /* The form keeps the geometry it has closed: the width of its icon, no gap after it, and no give. Opening otherwise restores the form's own gap and lets `flex: 0 1 auto; min-width: 0` shrink it below its icon, and whatever that frees goes to the wordmark, which slides the icons along with it. A panel asks the row for nothing, so neither should the form holding it. */ .site-header.search-panel .nav-search, .site-header.search-panel .nav-search.open { flex: 0 0 auto; width: auto; min-width: 0; gap: 0; } /* The field. The selector names .nav-search as well, which looks like one class too many. It is not: the field's own open-state rules in the component section are three classes deep and come later in the file, so at equal specificity they win on order and put back the width, padding and border this block is replacing. A fourth class settles it wherever this block sits. */ .site-header.search-panel .nav-search .nav-search-input { position: absolute; /* Against .site-header, which is the nearest positioned ancestor — the form and the control cluster are both static, on purpose. So the box is placed against the bar rather than against the form it lives in. */ top: calc(100% + var(--panel-drop)); left: var(--gutter); right: var(--gutter); width: auto; max-width: none; min-width: 0; /* A card, not a band. Held off the bar by --panel-drop so the page shows between the two, inset to the gutter so it lines up with the column below, and closed on all four sides — a band sharing the bar's fill and running edge to edge read as more bar rather than as something that had dropped out of it. */ border-radius: 10px; border-width: 1px; border-color: var(--border); padding: 0.7rem 0.85rem; background: var(--bg-elev); /* Two shadows: a tight one that seats the card against the page and a wide soft one that lifts it off. One alone reads as either a sticker or a smudge. */ box-shadow: 0 2px 5px -3px color-mix(in srgb, var(--text-strong) 42%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--text-strong) 62%, transparent); } /* Restoring what this block's own border-color took away: the field turns its hairline accent on focus, the same accent the icon above it is wearing, and at four classes deep the plain `:focus` rule no longer reached it. */ .site-header.search-panel .nav-search .nav-search-input:focus { border-color: var(--accent); } /* And the caret with it. The caret is drawn on the button and the focus is on the field, which are siblings, so the state has to be read across — a grey arrow sitting on an accent card is two shapes, not one. Where `:has` is missing the caret simply stays in the resting hairline, which is the same thing it does with the field open and focus elsewhere in the bar. */ .site-header.search-panel .nav-search:has(.nav-search-input:focus) .nav-search-toggle::after { border-color: var(--accent); } /* The caret: a square rotated 45 degrees with two of its edges bordered, so it reads as the card's own top corner drawn up towards the icon rather than as a separate mark stuck on. Centred under the icon, drawn in the card's fill and hairline, and sitting astride the card's top border so the two are one shape. The offset is derived, not measured. From the icon's bottom edge it is half of whatever the bar has spare around an icon button, then the bar's own hairline, then the drop — which lands on the card's top border — and finally back up by half the square so the square straddles that border rather than hanging under it. Every term is a token, so moving the bar height or the icon size moves the caret with them. */ .nav-search-toggle { position: relative; } .site-header.search-panel.search-open .nav-search-toggle { color: var(--accent); } .site-header.search-panel .nav-search-toggle::after { content: ""; position: absolute; left: 50%; top: calc(100% + (var(--bar-h) - var(--icon-btn)) / 2 + 1px + var(--panel-drop) - 0.275rem); width: 0.55rem; height: 0.55rem; transform: translateX(-50%) rotate(45deg); background: var(--bg-elev); border-left: 1px solid var(--border); border-top: 1px solid var(--border); opacity: 0; pointer-events: none; z-index: 1; } .site-header.search-panel.search-open .nav-search-toggle::after { opacity: 1; } /* Something behind the card. On its own it reads as a bubble parked over the page; with a wash under it, it reads as a layer the bar has opened and the page as the thing behind that layer. A wash toward --bg rather than a dim toward black: the same declaration then works in both themes, fading the page out on light and down on dark, where a fixed dark tint would only be right on one of them. On body, not on .site-header, and that is forced rather than chosen — the bar carries a backdrop-filter, which makes it the containing block for fixed descendants, so a fixed overlay declared inside it would be measured against the bar instead of the viewport. Sitting above .to-top (40) and below the bar (50), so the bar and its card stay clear of it. */ body::after { content: ""; position: fixed; inset: var(--header-h, 3.75rem) 0 0 0; z-index: 45; background: color-mix(in srgb, var(--bg) 64%, transparent); opacity: 0; visibility: hidden; /* Taps go to the page underneath, which is what already closes an empty field — the wash is something to see, not something to hit. */ pointer-events: none; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } html:has(.site-header.search-panel.search-open) body::after { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s linear 0s; } @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) { html:has(.site-header.search-panel.search-open) body::after { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } } @media (prefers-reduced-motion: no-preference) { /* It drops. A card should arrive by moving, not by being uncovered — and the clip that uncovered the full-bleed band cannot be used on a card anyway: `clip-path: inset(0)` clips to the border box, and the two shadows that lift this card off the page are painted outside it, so the finished card would have had no shadow at all. A short translate carries no such cost, distorts nothing, and is what the menus this is imitating do. visibility rides along with a delay equal to the travel, so the closed card is out of the tab order without the close losing its animation. The caret travels with the card rather than fading in place, since it is meant to be part of it. */ .site-header.search-panel .nav-search .nav-search-input { transform: translateY(-0.45rem); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.15s ease, visibility 0s linear 0.2s; } .site-header.search-panel .nav-search-toggle::after { transform: translateX(-50%) translateY(-0.45rem) rotate(45deg); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.15s ease, border-color 0.15s ease; } .site-header.search-panel .nav-search.open .nav-search-input, .site-header.search-panel .nav-search .nav-search-input.is-open { transform: none; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.16s ease, visibility 0s linear 0s; } .site-header.search-panel .nav-search.open .nav-search-toggle::after { transform: translateX(-50%) rotate(45deg); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.18s ease 0.04s, border-color 0.15s ease; } } @media (max-width: 1040px) { .site-nav { position: fixed; inset: var(--header-h, 3.75rem) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0.5rem 1.5rem 1rem; /* Revealed by clipping, not by sliding in from off-screen. `transform: translateY(-120%)` parked the panel ~360px above the viewport, so on the way in it swept down *through* the header band and covered the brand and the hamburger for the length of the animation. It could not simply be given a lower z-index either: the panel is a descendant of .site-header, and a descendant always paints above its ancestor's own background, so no stacking order puts it behind the bar. Clipping sidesteps the whole problem. The panel stays where it belongs — pinned at 3.75rem, directly under the header — and the clip edge travels down to uncover it, so it never paints in the header's band at any point in the animation. Content is not distorted the way scaleY() would squash it, and clipped-away area takes no pointer events. `visibility` still rides alongside. Clipping hides a thing visually but takes it out of neither the tab order nor the accessibility tree, so with the menu closed a keyboard user on a narrow window tabbed from the brand through six invisible links before reaching anything they could see — while aria-expanded on the toggle said "false". visibility: hidden removes it from both, and the 0.22s delay holds it visible for exactly as long as the close takes, so closing is still animated. The same pattern is used for .nav-search-input further down. */ clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.22s ease, visibility 0s linear 0.22s; /* The open panel is its own scroll container, and `contain` stops a scroll that reaches its end from chaining through to the page underneath. On a short menu there is nothing to scroll at all, which the wheel handler in site.js covers. */ max-height: calc(100vh - var(--header-h, 3.75rem)); overflow-y: auto; overscroll-behavior: contain; } .site-nav.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.22s ease, visibility 0s linear 0s; } .site-nav a.nav-link { padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.85rem; } /* Closes the list at the top as well as the bottom, so the panel reads as a bounded set rather than one that starts mid-air. */ .site-nav a.nav-link:first-of-type { border-top: 1px solid var(--border-soft); } .nav-toggle { display: inline-flex; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0.4rem; line-height: 0; } } /* The same rules again, driven by measurement instead of by width. The breakpoint above cannot see the thing that actually decides whether the wordmark survives: how much room the row really needs. That changes when the search field opens, and with the rendered width of the brand itself. site.js measures the brand through the tip of its blinking cursor — that dot is the visual end of the wordmark, so it is the edge that has to stay clear — and adds .nav-collapsed as soon as the links would not fit beside it. A mirror of the block above rather than merged with it: a media query and a class cannot be combined in one selector. The width rule stays as the baseline because without JS the hamburger cannot open at all. */ .site-header.nav-collapsed .nav-toggle { order: 2; margin-left: auto; } .site-header.nav-collapsed .wrap { --controls-gap: 0.5rem; } .site-header.nav-collapsed .nav-controls { order: 3; } .site-header.nav-collapsed .brand { min-width: 0; } .site-header.nav-collapsed .nav-search { width: auto; margin: 0; min-width: 0; } .site-header.nav-collapsed .site-nav { position: fixed; inset: var(--header-h, 3.75rem) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0.5rem 1.5rem 1rem; /* Revealed by clipping, not by sliding in from off-screen. `transform: translateY(-120%)` parked the panel ~360px above the viewport, so on the way in it swept down *through* the header band and covered the brand and the hamburger for the length of the animation. It could not simply be given a lower z-index either: the panel is a descendant of .site-header, and a descendant always paints above its ancestor's own background, so no stacking order puts it behind the bar. Clipping sidesteps the whole problem. The panel stays where it belongs — pinned at 3.75rem, directly under the header — and the clip edge travels down to uncover it, so it never paints in the header's band at any point in the animation. Content is not distorted the way scaleY() would squash it, and clipped-away area takes no pointer events. `visibility` still rides alongside. Clipping hides a thing visually but takes it out of neither the tab order nor the accessibility tree, so with the menu closed a keyboard user on a narrow window tabbed from the brand through six invisible links before reaching anything they could see — while aria-expanded on the toggle said "false". visibility: hidden removes it from both, and the 0.22s delay holds it visible for exactly as long as the close takes, so closing is still animated. The same pattern is used for .nav-search-input further down. */ clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.22s ease, visibility 0s linear 0.22s; /* The open panel is its own scroll container, and `contain` stops a scroll that reaches its end from chaining through to the page underneath. On a short menu there is nothing to scroll at all, which the wheel handler in site.js covers. */ max-height: calc(100vh - var(--header-h, 3.75rem)); overflow-y: auto; overscroll-behavior: contain; } .site-header.nav-collapsed .site-nav.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.22s ease, visibility 0s linear 0s; } .site-header.nav-collapsed .site-nav a.nav-link { padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.85rem; } .site-header.nav-collapsed .site-nav a.nav-link:first-of-type { border-top: 1px solid var(--border-soft); } .site-header.nav-collapsed .nav-toggle { display: inline-flex; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0.4rem; line-height: 0; } /* The footer had no rule above it, so on a short page the icon row floated with nothing separating it from the content. The line goes on the inner .wrap rather than the