/* Operator Studio — Shell Header Injected on every surface. Uses tokens from base-tokens.css. */ /* ── Global theme-switch transition ──────────────────────────── */ /* Active only while .is-theme-transitioning on (~200ms window) */ :root.is-theme-transitioning, :root.is-theme-transitioning body, :root.is-theme-transitioning *:not(svg):not(path):not(circle):not(line):not(polyline) { transition-property: background-color, border-color, color !important; transition-duration: 0.2s !important; transition-timing-function: ease !important; } /* ── Container ──────────────────────────────────────────────── */ [data-os-shell-header-root].os-header { display: flex; align-items: center; height: var(--strip, 48px); padding: 0; gap: var(--space-6, 12px); position: sticky; top: 0; z-index: var(--shell-z, 80); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: background .4s cubic-bezier(.4,0,.2,1), backdrop-filter .4s cubic-bezier(.4,0,.2,1), border-color .4s; } body[data-os-shell="post"] [data-os-shell-header-root].os-header { padding-left: var(--space-page-x); padding-right: var(--space-page-x); } @media (min-width: 640px) { body[data-os-shell="post"] [data-os-shell-header-root].os-header { padding-left: var(--space-page-x-wide); padding-right: var(--space-page-x-wide); } } [data-os-shell-header-root].os-header.is-scrolled { background: linear-gradient( to bottom, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.00) 100% ); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom-color: rgba(255,255,255,.05); } :root[data-theme="light"] [data-os-shell-header-root].os-header.is-scrolled { background: linear-gradient( to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.60) 60%, rgba(255,255,255,.00) 100% ); border-bottom-color: rgba(0,0,0,.06); } /* ── Solid nav (non-hero pages) ─────────────────────────────── */ [data-os-shell-header-root].os-header.is-solid { background: var(--bg); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--border-soft); } :root[data-theme="light"] [data-os-shell-header-root].os-header.is-solid { background: var(--bg); border-bottom-color: var(--border-soft); } /* ── 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-ui); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; line-height: 1; transition: color 0.12s; } [data-os-shell-header-root] .os-wordmark:hover { color: var(--accent); } /* ── 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-3); 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 ─────────────────────────────────────────────────── */ @media (max-width: 900px) { [data-os-shell-header-root] .os-nav { 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; } .os-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 80vw); background: var(--surface); border-left: 1px solid var(--border); 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; } .os-drawer.open { transform: translateX(0); } .os-drawer-header { display: flex; align-items: center; justify-content: flex-end; height: var(--strip, 48px); padding: 0 var(--space-page-x, 12px); border-bottom: 1px solid var(--border-soft); 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; } .os-drawer-nav a { display: flex; align-items: center; height: 52px; padding: 0 var(--space-12, 24px); color: var(--text-2); font-family: var(--font-ui); font-size: var(--fs-body, 13px); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border-soft); transition: color .12s, background .12s; } .os-drawer-nav a:hover { color: var(--text); background: var(--surface-2); } .os-drawer-nav a[aria-current="page"] { color: var(--accent); 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-dim); border-color: var(--accent-border); color: var(--accent); } .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(--accent-border); color: var(--accent); } /* ── Desktop tools (theme + lang — hidden on mobile) ──────────── */ [data-os-shell-header-root] .os-nav-tools { display: none; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--border); flex-shrink: 0; } @media (min-width: 561px) { [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-border); background: var(--accent-dim); color: var(--accent); 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: .75; } [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; } /* ── Wide ───────────────────────────────────────────────────── */ @media (min-width: 760px) { /* header padding inherited from body — no override needed */ } /* ── 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; }