/* Operator Studio — Shell Header Injected on every surface. Uses tokens from base-tokens.css. */ /* ── Floating-nav clearance ────────────────────────────────────────── The nav is position:fixed (floats over content), so it no longer reserves space in flow. Reserve it here: every surface gets top padding equal to the pill height + its top inset + a breathing gap, and anchors land below the floating bar via scroll-padding-top. --glass-clear is the single source of truth so the offset and the anchor padding never drift apart. */ :root { --glass-clear: calc(var(--strip, 56px) + 14px + 22px); /* height + top inset + gap */ } html { scroll-padding-top: var(--glass-clear); } /* Content surfaces: push the first content below the floating pill. */ body:not([data-os-home]) main { padding-top: var(--glass-clear); } /* Home: the hero owns its own top padding; just guarantee it clears the pill. */ body[data-os-home] .h-hero { padding-top: max(var(--glass-clear), clamp(56px,10vh,104px)); } /* Anchor targets keep a matching scroll margin (belt + suspenders for in-page jumps that bypass scroll-padding, e.g. focus()/hash on load). */ body[data-os-home] [id] { scroll-margin-top: var(--glass-clear); } /* ── Global theme-switch transition (N2 — scoped) ─────────────── Active only while .is-theme-transitioning on (~200ms window). Scoped to the structural/text/control elements that actually change colour on a theme flip, not a blanket wildcard, so the transition is cheap. */ :root.is-theme-transitioning, :root.is-theme-transitioning body, :root.is-theme-transitioning header, :root.is-theme-transitioning main, :root.is-theme-transitioning section, :root.is-theme-transitioning article, :root.is-theme-transitioning aside, :root.is-theme-transitioning nav, :root.is-theme-transitioning footer, :root.is-theme-transitioning div, :root.is-theme-transitioning a, :root.is-theme-transitioning button, :root.is-theme-transitioning p, :root.is-theme-transitioning span, :root.is-theme-transitioning h1, :root.is-theme-transitioning h2, :root.is-theme-transitioning h3, :root.is-theme-transitioning summary, :root.is-theme-transitioning details { transition-property: background-color, border-color, color !important; transition-duration: 0.2s !important; transition-timing-function: ease !important; } @media (prefers-reduced-motion: reduce) { :root.is-theme-transitioning, :root.is-theme-transitioning * { transition-duration: 0s !important; } } /* ── FLOATING LIQUID-GLASS NAV (2026-06-15, branch rebuild-glassnav) ───────── A slim translucent pill that FLOATS over the content rather than a solid full-width bar. Apple "Liquid Glass" / iOS-26 frosted translucency: a glossy semi-transparent pill with a bright top edge highlight, a soft depth shadow so it reads as floating, and a backdrop blur+saturate so page content shows through behind it while the wordmark/links stay legible. Mechanism: the
is position:fixed, full viewport width, inset from the top by --glass-top so it floats. Inside, the flex row is capped to --page-max + --page-gutter (so the pill rides the SAME outer container as the hero — never edge-to-edge) and the GLASS itself is painted on that inner row (.os-header is the flex parent; the pill background lives on it directly). Because the pill is the inner row, it is naturally narrower than full width. Per-theme tuning lives in the token block below: glass tint, opacity, the rim highlight and the float shadow each resolve differently in light vs dark so the frosted effect reads "right" on both the warm-paper and near-black UI. Legibility is the #1 risk. We solve it with (a) a high-enough base opacity that text never sits on raw scrolling content, (b) blur+saturate that mutes whatever scrolls behind, and (c) an opacity BUMP on scroll (.is-scrolled / .is-solid) so once real content is moving under the bar the backing firms up. Proven over the dark #how band in both themes. */ [data-os-shell-header-root].os-header { /* Floating geometry */ --glass-top: 14px; /* inset from the very top so the pill floats */ --glass-radius: var(--r-pill, 999px); /* Per-theme glass recipe (light defaults; dark overrides below) */ --glass-tint: 250, 249, 246; /* warm paper, rgb */ --glass-opacity: .80; /* resting translucency — always reads as a pill */ --glass-opacity-scrolled: .88; /* firms up once content scrolls under */ --glass-blur: 22px; --glass-saturate: 170%; --glass-rim: rgba(255,255,255,.85); /* bright glossy top edge highlight */ --glass-rim-inner: rgba(255,255,255,.30); --glass-hairline: rgba(20,20,16,.14); --glass-shadow: 0 20px 54px -20px rgba(40,38,28,.60), 0 4px 14px -8px rgba(40,38,28,.34); position: fixed; top: var(--glass-top); left: 50%; transform: translateX(-50%); width: min(var(--page-max), 100vw); box-sizing: border-box; /* the gutter keeps the pill content off the viewport edges */ margin-inline: 0; padding: 0; z-index: var(--shell-z, 80); pointer-events: none; /* gutter zone is click-through; pill re-enables */ display: block; background: transparent; border: 0; transition: transform .45s var(--spring-soft, cubic-bezier(.22,1,.36,1)), opacity .45s var(--spring-soft, cubic-bezier(.22,1,.36,1)); } /* The flex children sit ABOVE the glass; the gutter zone is click-through. */ [data-os-shell-header-root].os-header { display: flex; } [data-os-shell-header-root].os-header > * { position: relative; z-index: 1; pointer-events: auto; } /* The visible PILL is painted by ::before — a rounded glass box inset from the header edges by the gutter, so it never spans edge-to-edge and clips the backdrop-filter cleanly to the rounded shape. */ [data-os-shell-header-root].os-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--page-gutter); right: var(--page-gutter); z-index: 0; pointer-events: auto; border-radius: var(--r-pill); /* was var(--glass-radius) = same value; direct token avoids 5th distinct radius */ background: rgba(var(--glass-tint), var(--glass-opacity)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* glossy rim: bright inset top highlight + faint inner edge + 1px hairline */ box-shadow: inset 0 1px 0 0 var(--glass-rim), inset 0 0 0 1px var(--glass-hairline), inset 0 -8px 18px -12px var(--glass-rim-inner), var(--glass-shadow); transition: background .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1); } /* a second, ultra-thin gloss sweep across the top of the pill (Y2K gloss) */ [data-os-shell-header-root].os-header.is-scrolled::before, [data-os-shell-header-root].os-header.is-solid::before { background: rgba(var(--glass-tint), var(--glass-opacity-scrolled)); box-shadow: inset 0 1px 0 0 var(--glass-rim), inset 0 0 0 1px var(--glass-hairline), inset 0 -8px 18px -12px var(--glass-rim-inner), var(--glass-shadow), 0 26px 60px -30px rgba(40,38,28,.45); } /* the flex children sit inside the pill: same gutter inset + vertical centring */ [data-os-shell-header-root].os-header { align-items: center; height: var(--strip, 56px); gap: var(--space-6, 12px); /* inner padding = gutter (matches ::before inset) + the pill's own side pad. +22px makes the wordmark's LEFT clear-space equal its OPTICAL top/bottom padding inside the 56px pill (cap sits ~2.5px below the line box) — equal optical clear-space on all four sides (brand-guidelines §6.3). */ padding-inline: calc(var(--page-gutter) + 22px); } @media (max-width: 979px) { [data-os-shell-header-root].os-header { /* same 22px target so the mark never hugs the left edge on mobile */ padding-inline: calc(var(--page-gutter) + 22px); } } /* ── Dark-theme glass tuning ────────────────────────────────────────── Near-black tint, lower-but-firm opacity, a cool white rim that reads as glass on dark, and a deeper float shadow. */ :root[data-theme="dark"] [data-os-shell-header-root].os-header { /* a touch lighter than the page so the pill lifts off near-black content */ --glass-tint: 38, 38, 33; --glass-opacity: .66; --glass-opacity-scrolled: .80; --glass-blur: 26px; --glass-saturate: 155%; --glass-rim: rgba(255,255,255,.22); --glass-rim-inner: rgba(255,255,255,.08); --glass-hairline: rgba(255,255,255,.14); --glass-shadow: 0 24px 64px -22px rgba(0,0,0,.85), 0 6px 18px -10px rgba(0,0,0,.6); } /* Reduced motion: kill the entrance/scroll transforms (none added besides transitions, but be explicit). */ @media (prefers-reduced-motion: reduce) { [data-os-shell-header-root].os-header, [data-os-shell-header-root].os-header::before { transition: none; } } /* ── Brand cluster ──────────────────────────────────────────── */ [data-os-shell-header-root] .os-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ── Wordmark ───────────────────────────────────────────────── */ [data-os-shell-header-root] .os-wordmark { color: var(--text); font-family: var(--font-display); font-optical-sizing: auto; font-size: 17px; font-weight: 800; /* canonical logotype weight — ExtraBold, operator call 2026-06-16 (brand-guidelines §6.1) */ letter-spacing: -0.02em; /* canonical tracking, matches footer */ text-decoration: none; white-space: nowrap; line-height: 1; transition: color 0.12s; } [data-os-shell-header-root] .os-wordmark:hover { color: var(--accent-ink); } /* ── Keyboard focus rings (N1) — visible on every header control ── */ [data-os-shell-header-root] .os-wordmark:focus-visible, [data-os-shell-header-root] .os-nav a:focus-visible, [data-os-shell-header-root] .os-lang-btn:focus-visible, [data-os-shell-header-root] .os-theme-btn:focus-visible, [data-os-shell-header-root] .os-menu-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r); } /* ── Nav links ──────────────────────────────────────────────── */ [data-os-shell-header-root] .os-header-group { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } [data-os-shell-header-root] .os-nav { display: flex; align-items: center; } [data-os-shell-header-root] .os-nav a { display: inline-flex; align-items: center; height: var(--strip, 48px); padding: 0 12px; color: var(--text-2); font-family: var(--font-ui); font-size: var(--fs-body, 13px); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.12s; position: relative; } [data-os-shell-header-root] .os-nav a:hover { color: var(--text); } [data-os-shell-header-root] .os-nav a[aria-current="page"] { color: var(--text); font-weight: 600; } [data-os-shell-header-root] .os-nav a[aria-current="page"]::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* ── Hamburger ──────────────────────────────────────────────── */ [data-os-shell-header-root] .os-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-2); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; transition: color 0.12s; } [data-os-shell-header-root] .os-menu-btn:hover { color: var(--text); } /* ── Mobile / tablet — ONE breakpoint (--bp-desktop:980px) ─────── Below 980px nav + tools collapse together into the drawer and the menu button appears; at/above 980px the inline nav + tools show and the menu button is hidden, so no stray floating button can appear on wide screens. */ @media (max-width: 979px) { [data-os-shell-header-root] .os-nav { display: none !important; } [data-os-shell-header-root] .os-nav-tools { display: none !important; } [data-os-shell-header-root] .os-menu-btn { display: inline-flex; } } /* ── Side drawer (mobile nav) ────────────────────────────────── */ .os-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: calc(var(--shell-z, 80) + 10); opacity: 0; transition: opacity .25s; -webkit-tap-highlight-color: transparent; } .os-drawer-backdrop.open { display: block; opacity: 1; } /* Drawer = the same liquid-glass language as the floating pill: a frosted translucent sheet, no hard left border, content shows through. */ .os-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 84vw); background: rgba(250,249,246,.82); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: -24px 0 60px -30px rgba(40,38,28,.5); z-index: calc(var(--shell-z, 80) + 11); transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } :root[data-theme="dark"] .os-drawer { background: rgba(22,22,19,.78); box-shadow: -24px 0 60px -30px rgba(0,0,0,.8); } .os-drawer.open { transform: translateX(0); } /* No bottom hairline on the header row — the close button floats on the glass. */ .os-drawer-header { display: flex; align-items: center; justify-content: flex-end; height: var(--strip, 48px); padding: 0 var(--space-page-x, 12px); flex-shrink: 0; } .os-drawer-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-2); background: none; border: none; cursor: pointer; padding: 0; transition: color .12s; } .os-drawer-close:hover { color: var(--text); } .os-drawer-nav { display: flex; flex-direction: column; padding: var(--space-4, 8px) 0; flex: 1; } /* No per-link hairlines — they read as stray borders inside the glass sheet. Generous height + hover wash carry the list rhythm instead. */ .os-drawer-nav a { display: flex; align-items: center; height: 52px; margin: 0 var(--space-8, 16px); padding: 0 var(--space-8, 16px); border-radius: var(--r); color: var(--text-2); font-family: var(--font-ui); font-size: var(--fs-body, 13px); font-weight: 500; text-decoration: none; transition: color .12s, background .12s; } .os-drawer-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .os-drawer-nav a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; } .os-drawer-tools { padding: var(--space-8, 16px) var(--space-12, 24px) var(--space-16, 32px); border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: var(--space-10, 20px); flex-shrink: 0; } .os-drawer-tool-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; } .os-lang-toggle-row { display: flex; gap: 4px; } .os-lang-opt { font-family: var(--font-mono); font-size: var(--fs-sm, 11px); font-weight: 700; letter-spacing: .04em; padding: 6px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; min-height: 0; transition: all .12s; } .os-lang-opt.active, .os-lang-opt:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-deep); } .os-theme-toggle-row button { font-family: var(--font-ui); font-size: var(--fs-sm, 11px); font-weight: 600; padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; min-height: 0; display: flex; align-items: center; gap: 6px; transition: border-color .12s, color .12s; } .os-theme-toggle-row button:hover { border-color: var(--text); color: var(--text); } /* ── Desktop tools (theme + lang — hidden on mobile) ──────────── */ /* No left divider: inside a clean glass pill a hairline reads as a stray line. Spacing alone separates the tools cluster from the nav links. */ [data-os-shell-header-root] .os-nav-tools { display: none; align-items: center; gap: 8px; padding-left: 6px; flex-shrink: 0; } @media (min-width: 980px) { [data-os-shell-header-root] .os-nav-tools { display: flex; } } [data-os-shell-header-root] .os-lang-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; height: 32px; line-height: 1; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-deep); cursor: pointer; min-height: 0; display: flex; align-items: center; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity .15s; } [data-os-shell-header-root] .os-lang-btn:hover { opacity: .8; } [data-os-shell-header-root] .os-theme-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 32px; border-radius: var(--r); border: 1px solid var(--border); background: none; color: var(--text-3); cursor: pointer; min-height: 0; padding: 0; position: relative; transition: color 0.2s, border-color 0.2s, background 0.2s; } [data-os-shell-header-root] .os-theme-btn:hover { color: var(--text); border-color: var(--accent-border); } /* Sun/moon — stacked with opacity crossfade (no display flash) */ [data-os-shell-header-root] .os-icon-sun, [data-os-shell-header-root] .os-icon-moon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s; } [data-os-shell-header-root] .os-icon-sun { opacity: 1; } [data-os-shell-header-root] .os-icon-moon { opacity: 0; } :root[data-theme="light"] [data-os-shell-header-root] .os-icon-sun { opacity: 0; } :root[data-theme="light"] [data-os-shell-header-root] .os-icon-moon { opacity: 1; } /* Drawer theme button — display toggle is fine (rarely seen, has label text) */ .os-drawer-icon-sun { display: block; } .os-drawer-icon-moon { display: none; } :root[data-theme="light"] .os-drawer-icon-sun { display: none; } :root[data-theme="light"] .os-drawer-icon-moon { display: block; } /* ── Drawer tools refinements ─────────────────────────────────── */ .os-theme-btn-drawer { display: flex; align-items: center; gap: 6px; width: 100%; } .os-drawer-icon-sun, .os-drawer-icon-moon { flex-shrink: 0; }