/* * Shared site chrome: the header/nav/footer injected by /api/html for pages * carrying the qc:header / qc:footer markers (api/lib/partials.js). * * Built on the canonical tokens in style.css (--qc-* semantic aliases over * the AAA palette). Every color pairing here passes AAA on its surface — * see docs/accessibility-palette.md. Fallbacks keep the chrome usable on any * page that loads this sheet without style.css (e.g. future standalone * surfaces). */ /* ─────────────────────────── page frame ─────────────────────────── */ /* The header/footer full-bleed trick (`calc(50% - 50vw)`) measures 50vw INCLUDING the vertical scrollbar, so on browsers with classic (visible) scrollbars every chromed page overflowed ~8-16px to the right — a permanent horizontal scrollbar that also made centered content sit left of the scroll-canvas center. Clip the axis at the root: the bleed still reaches both visual edges, the overflow can never scroll. (`clip`, not `hidden` — it doesn't create a scroll container, so position: sticky inside the page keeps working.) */ html { overflow-x: clip; } /* Pin the footer to the true bottom on pages shorter than the viewport — otherwise the page background shows as a void below the footer. Flex column + main-grows keeps every longer page byte-identical (free space only exists on short pages). */ body:has(> footer.qc-chrome-footer) { min-height: 100dvh; display: flex; flex-direction: column; /* Undo style.css's prelaunch scroll lock for shared-chrome pages. The footer accordions expand in-flow, so the body must remain vertically scrollable after a section opens. */ overflow-y: auto; /* The footer is the terminal spacing now; page sheets that padded the body bottom (e.g. about) were creating a band BELOW the footer. */ padding-bottom: 0; /* Several legacy pages scroll on the BODY (style.css pins html/body to 100% and the page sheet sets `overflow: auto` on body) — the shorthand re-enabled a horizontal scrollbar there. Clip the x axis at the same specificity level (type selector inside :has outweighs the page-class shorthand) so only y scrolls. */ overflow-x: clip; } body:has(> footer.qc-chrome-footer) > main { flex: 1 0 auto; } /* Same contract on the top edge: page sheets that pad the body (about, guide, bug-report pad 2-3rem) were pushing the sticky header down from the viewport top. The header's own margin-bottom supplies the content gap instead. */ body:has(> header.qc-chrome-header) { padding-top: 0; } /* ───────────────────────────── header ───────────────────────────── */ .qc-chrome-header { position: sticky; top: 0; z-index: 900; /* below modals (2147483646-class overlays), above content */ /* Full-bleed even inside a padded/centered (several tool pages pad the body directly): pull to the viewport edges from any content width. */ margin: 0 calc(50% - 50vw) 1.25rem; background: rgba(5, 19, 26, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--qc-border, rgba(47, 233, 255, 0.18)); font-family: var(--font, monospace); } .qc-chrome-header__inner { max-width: 1080px; margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; gap: 1rem; } .qc-chrome-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--qc-text-strong, #f1fbff); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; flex: none; } .qc-chrome-logo img { display: block; filter: drop-shadow(0 0 6px var(--qc-accent-glow, rgba(47, 233, 255, 0.38))); } .qc-chrome-logo__tld { color: var(--qc-accent, #2fe9ff); } /* Narrow-viewport menu button (2.5.1): opens the sitewide radial quick-nav dialog — the brand's signature interaction — instead of leaving mobile users a hidden-scrollbar swipe strip with no affordance. Ships [hidden]; lib/radial-nav.js reveals it once the dialog can actually open, so no-JS visitors keep the scrollable link strip as their nav. Desktop never shows it. */ .qc-chrome-menu-btn { display: none; border: 1px solid var(--qc-border, rgba(47, 233, 255, 0.18)); background: transparent; color: var(--qc-accent, #2fe9ff); font-family: var(--font, monospace); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.35rem 0.6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; } .qc-chrome-menu-btn:hover { background: var(--qc-accent-glow-soft, rgba(47, 233, 255, 0.18)); } .qc-chrome-menu-btn:focus-visible { outline: 2px solid var(--qc-focus, #f6fcff); outline-offset: 2px; } @media (max-width: 720px) { .qc-chrome-menu-btn:not([hidden]) { display: inline-block; order: 3; margin-left: 0.5rem; } /* With the menu button live, collapse the swipe strip to just the pricing CTA — the full link set lives one tap away in the dialog. (The :has() guard keeps the strip intact when JS never revealed the button.) The strip also stops being a scroller so the surviving CTA can't sit half-clipped behind the menu button. */ .qc-chrome-header__inner:has(.qc-chrome-menu-btn:not([hidden])) .qc-chrome-nav a:not(.qc-chrome-nav__cta) { display: none; } .qc-chrome-header__inner:has(.qc-chrome-menu-btn:not([hidden])) .qc-chrome-nav { overflow: visible; flex: none; } } @media (max-width: 460px) { /* The logo mark keeps the brand (and the aria-label carries the name); the word doesn't fit beside CTA + MENU on small phones. Only collapse it when the menu button is actually live. */ .qc-chrome-header__inner:has(.qc-chrome-menu-btn:not([hidden])) .qc-chrome-logo__word { display: none; } } .qc-chrome-nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; /* the nav scrolls on narrow screens; keep it chromeless */ -webkit-overflow-scrolling: touch; } .qc-chrome-nav::-webkit-scrollbar { display: none; } .qc-chrome-nav a { color: var(--qc-text-mid, #d4e9f4); text-decoration: none; font-size: 0.86rem; padding: 0.35rem 0.55rem; border-radius: 6px; white-space: nowrap; } .qc-chrome-nav a:hover { color: var(--qc-text-strong, #f1fbff); background: var(--qc-accent-glow-soft, rgba(47, 233, 255, 0.18)); } .qc-chrome-nav a[aria-current='page'] { color: var(--qc-accent, #2fe9ff); background: var(--qc-accent-glow-soft, rgba(47, 233, 255, 0.18)); } .qc-chrome-nav a:focus-visible, .qc-chrome-logo:focus-visible, .qc-chrome-footer a:focus-visible { outline: 2px solid var(--qc-focus, #f6fcff); outline-offset: 2px; } .qc-chrome-nav__cta { border: 1px solid var(--qc-accent, #2fe9ff); color: var(--qc-accent, #2fe9ff); } .qc-chrome-nav__cta:hover { background: var(--qc-accent, #2fe9ff); color: var(--qc-text-inverse, #04131a); } /* ───────────────────────────── footer ───────────────────────────── */ .qc-chrome-footer { position: static; /* several legacy sheets pin bare