/* ═══════════════════════════════════════════════════════════════════════════
SageX - chrome
Site header · site footer
═══════════════════════════════════════════════════════════════════════════
Requires tokens.css AND primitives.css. Load third:
Pairs with _partials/header.html and _partials/footer.html.
───────────────────────────────────────────────────────────────────────────
PROVENANCE - same two-tag scheme primitives.css uses
───────────────────────────────────────────────────────────────────────────
[PORTED] Trait carried over from SageXTopNav.tsx / SageXFooter.tsx with
only the colour NAMES translated onto tokens.css. Geometry,
easing, durations and gradient angles are unchanged.
[COMPOSED] No TSX rule to port. Built from tokens.css. Mostly the responsive
layer, because the TSX branched its render tree in JS and there
was no CSS to carry over.
The showcase (sagex-component-showcase.html) has NO nav or footer entry -
all 27 SGX-* codes were grepped and none is SGX-NAV / SGX-FOOT. That matches
primitives.css GAP 3: nav and footer are assembly, not styling. So the CTAs
here reuse .sgx-btn--enh (SGX-BTN-ENH) from primitives.css rather than
restating it, which is also what keeps the corrected gradient ramp in one
place. Nothing in this file redefines a button.
───────────────────────────────────────────────────────────────────────────
TOKEN TRANSLATION - TSX constant -> tokens.css name
───────────────────────────────────────────────────────────────────────────
navBg rgba(23,24,31,.72) -> --panel-bg (see MATERIAL note below)
pageBg #0C0C0F -> --surface-page
panelBg #17181F -> --surface-section
panel2 #303046 -> --surface-raised
iconBg #414162 -> --surface-highlight
text #FFFFFF -> --ink-heading
textHigh #E4E4E7 -> --ink-high
textBody #9AA0A6 -> --ink-body
textSubtle#6B6F76 -> --ink-subtle
border #1F1F26 -> --hairline
sep rgba(255,255,255,.12) -> --hairline
link #8AA6FF -> --brand-text
hairline #06B6D4 -> --accent
ctaA #4C4CFF -> --cta-gradient-from (via .sgx-btn--enh)
ctaB #06B6D4 -> DROPPED - see below
itemHover #303046 -> --surface-raised
logo #FFFFFF -> --ink-heading
Two of those need saying out loud:
1. The TSX names #1F1F26 "border" and #06B6D4 "hairline". The second is not a
hairline - it is the cyan trace colour on the underline and the row rails.
So border -> --hairline and hairline -> --accent. The names cross over.
The TSX's own comment concedes the first one: "the dark border token reads
invisible on near-black".
2. ctaB #06B6D4 is not ported at all. Both TSX files build the CTA as
linear-gradient(135deg, ctaA, ctaB) - the exact indigo -> cyan ramp retired
for a measured accessibility failure (white-on-cyan 2.43:1, 2.88:1 at the
worst point under the label). tokens.css L83-88 and primitives.css L36-43
both carry the finding. The CTAs here use .sgx-btn--enh, which already
resolves --cta-gradient-from -> --cta-gradient-to.
TOKEN COUNT UNCHANGED AT 58. Nothing was added. Verify:
grep -oP '\-\-[a-z0-9-]+(?=\s*:)' tokens.css | sort -u | wc -l
(The command printed in the brief returns 44 - it counts leading whitespace
as part of the match and misses mid-line definitions. The 58 baseline is
correct; only that one check line is imprecise.)
───────────────────────────────────────────────────────────────────────────
MATERIAL AXIS - the bar is free
───────────────────────────────────────────────────────────────────────────
The nav bar runs on --panel-bg / --panel-blur / --panel-edge, the same three
the card uses. Glass gives a translucent blurred bar; solid gives an opaque
one. No second class, no JS. --panel-edge is a 0/1 multiplier, not a colour,
so it goes inside calc() for border opacity - identical to .sgx-card L269.
--panel-blur is `none` in solid, so applying it unconditionally is safe.
───────────────────────────────────────────────────────────────────────────
RESPONSIVE - media queries, never data-bp
───────────────────────────────────────────────────────────────────────────
Three tiers at the TSX's own thresholds. The TSX measured its own width with
a ResizeObserver and swapped render trees; this does it in CSS with no JS.
>= 1200 full bar
900-1199 condensed - tighter gaps, smaller triggers, compact CTA
< 900 hamburger + full-height menu
The footer keeps its own 820px break, as the TSX did.
ALIGNED 2026-08-07: the full-bar line was 1100, which cut across the content
ladder's 640-1199 tablet band - a full-width nav bar sat over tablet-density
content between 1100 and 1199. It now coincides with the 1200 desktop line.
The 900 burger line and the footer's 820 both sit INSIDE the tablet band and
were deliberately left alone: they are nav and footer density decisions, and
a component is allowed to sub-divide a tier as long as it does not cross a
content line. Six links plus a dropdown and a CTA do not fit an 820px iPad
without the condensed tier, so forcing the burger to 640 would be worse.
───────────────────────────────────────────────────────────────────────────
SIZES
───────────────────────────────────────────────────────────────────────────
Nav density is its own scale. --text-* is a page-copy ramp; a 14.5px nav
trigger has no token and should not borrow one. Where a token fits
(--radius-pill, --space-*, --max-width, --font-*) it is used. Colour is the
locked axis, and every colour here is a var(). Same posture as primitives.css,
which also carries a literal 52px icon and a 14px radius.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PAGE BASE [COMPOSED]
Six declarations, and they belong here for one reason: this is the
only stylesheet every assembled page is guaranteed to load.
Nothing else sets them. tokens.css declares values but binds none
to ; primitives.css styles components only. So without this
block a real page renders body copy in the browser's default serif
on a white gutter, with the 8px default body margin showing as a
light frame around the dark sections. Caught on the first assembled
page - it would otherwise have hit all 23 identically.
The alternative was a fourth stylesheet for six declarations, or
every page restating them - which is the duplication this whole
build step exists to end.
═══════════════════════════════════════════════════════════════ */
/* The CANVAS, pinned. Rubber-band overscroll paints the area beyond the
document with the canvas colour, and every hero here is a warm gradient
sitting on a flat page colour - so a bounce revealed a flat dark band
against the glow on every page (Ram, 2026-08-28, screen recording).
overscroll-behavior:none switches the elastic bounce off at the root
scroller so nothing beyond the document is ever shown; the explicit html
background is the belt to that suspender - any UA that still paints the
canvas (in-app webviews, scrollbar gutters) paints it in-palette. */
html{
background:var(--surface-page);
overscroll-behavior:none;
}
body{
margin:0;
background:var(--surface-page);
color:var(--ink-body);
font-family:var(--font-body);
font-size:var(--text-body);
-webkit-font-smoothing:antialiased;
}
/* ═══════════════════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════════════════ */
/* Scoped reset [PORTED] - SageXTopNav.tsx INJECTED_CSS L295 opened with
`.sgx-topnav *{box-sizing:border-box}`, and the footer scoped the same rule.
It is load-bearing, not boilerplate: neither tokens.css nor primitives.css
sets box-sizing, so under the default content-box every min-height in here
inflates by its own padding and border. The 44px CTA measured 68px without
this line. Each partial scopes its own reset, exactly as the TSX files did,
so neither depends on a page-level reset existing. */
.sgx-hdr, .sgx-hdr *{ box-sizing:border-box; }
/* The header's own outer height, published so a section can sit UNDER it.
MEASURED in the harness, not derived - same discipline as --sgx-hdr-panel-drop
below. It is padding-top + the bar's content height + the bar's border, and
the bar's height is content-driven (the 44px CTA touch target is the tallest
thing in it), so it cannot be computed from the declarations alone.
Consumed by .sgx-section--under-nav in primitives.css, which pulls the first
section up by exactly this much so the section's background and bloom paint
BEHIND the bar instead of being clipped at its bottom edge. verify-page.js
asserts this value against the real measured height at all three viewports -
if the bar's padding or CTA size changes, that assertion fails and tells you
the number to put here. Do not hand-tune it. */
:root{ --sgx-hdr-h:78px; } /* Went 78 -> 58 when the nav was stripped, then back to 78 when Ram asked for the Book-a-demo button again. Both moves were caught by verify-page.js's HDR-OFFSET assertion, neither by eye. Do not hand-tune - run the build. */
.sgx-hdr{
position:sticky; top:0; z-index:1000;
padding:10px 16px 0;
font-family:var(--font-body);
isolation:isolate;
}
/* Skip link - [COMPOSED]. The TSX had none. */
.sgx-hdr__skip{
position:absolute; left:-9999px; top:0;
padding:10px 16px; border-radius:0 0 10px 0;
background:var(--surface-raised); color:var(--ink-heading);
font-family:var(--font-display); font-size:var(--text-small); font-weight:600;
text-decoration:none; z-index:2;
}
.sgx-hdr__skip:focus{ left:0; }
/* The bar [PORTED] - geometry, radius, shadow and blur verbatim from the TSX
desktop