/* Shared site header — single source of truth for the Landing & Pricing page headers (ticket #49). Loaded by both index.html and pricing.html via . Every rule is scoped under .site-header and uses self-contained color vars, so the header renders identically regardless of which page's palette is in scope. Adopts the Landing page's look (the canonical design per the ticket). */ .site-header { --sh-text: #f3f6fa; --sh-muted: #8b98a9; --sh-border: #1c2634; --sh-accent: #22d3ee; --sh-on-accent: #06222b; --sh-accent-hover: #67e8f9; --sh-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; position: sticky; top: 0; z-index: 20; background: rgba(10, 15, 22, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sh-border); } .site-header__inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px; } .site-header__logo { display: flex; align-items: center; } .site-header__logo img { display: block; height: 26px; } .site-header__links { display: flex; gap: 22px; font-size: 14px; color: var(--sh-muted); } .site-header__links a:hover { color: var(--sh-text); } .site-header__auth { margin-left: auto; display: flex; align-items: center; gap: 18px; } .site-header__auth .signin { font-size: 14px; color: var(--sh-muted); } .site-header__auth .signin:hover { color: var(--sh-text); } /* Primary button — Landing spec, scoped to the header so it never restyles the pages' other .btn instances (hero CTAs, pricing tables). */ .site-header .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; } .site-header .btn-primary { background: var(--sh-accent); color: var(--sh-on-accent); } .site-header .btn-primary:hover { background: var(--sh-accent-hover); } /* Keyboard-shortcut chip — canonical (Landing) style, header-scoped so it is identical on both pages regardless of each page's own global .kbd. */ .site-header .kbd { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; vertical-align: 0.08em; font: 500 11px/1.6 var(--sh-mono); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); } /* Active-page link — the ONLY permitted per-page difference, keyed off the page's so the header markup itself stays byte-identical. */ body[data-page="pricing"] .site-header a[href="/pricing"] { color: var(--sh-text); font-weight: 500; } /* Match the Landing look on mobile: collapse the nav links. Landing hid them at ≤860px; unifying Pricing to the same breakpoint (it previously used ≤820px). */ @media (max-width: 860px) { .site-header__links { display: none; } }