/* ══════════════════════════════════════════════════════════════ Neorgon Header Kit — header.css Canonical source: packages/neorgon-ui/header/ Vendored per site as css/neorgon-header.css — do not edit copies. Live CDN: https://cdn.neorgon.org/v1.0.0/header/header.css ══════════════════════════════════════════════════════════════ */ :root { /* Geometry */ --header-h: 68px; --header-h-app: 56px; --header-control-h: 40px; /* every header control (buttons, ⋯, palette, home) shares this height */ /* Palette — themes override these (see themes.css) */ --header-bg-start: #B015B0; --header-bg-mid: #3D0080; --header-bg-end: #040714; /* Kept here for anything that references the composed gradient, but the authoritative copy is re-declared on .header-bar below — see the note there before changing either. */ --header-bg: linear-gradient(in oklch 135deg, var(--header-bg-start) 0%, var(--header-bg-mid) 50%, var(--header-bg-end) 100%); --header-glass: rgba(0, 9, 18, .35); --header-text: #f9f9f9; --header-text-dim: rgba(255, 255, 255, .72); --header-border: rgba(255, 255, 255, .07); --header-border-strong: rgba(255, 255, 255, .22); --header-accent: #e879f9; --header-menu-bg: #10142a; --header-menu-hover: rgba(255, 255, 255, .08); /* Focus ring — near-white with a whisper of the brand hue so it never reads as a stray browser default. 5.77:1 (bright end) to 17.98:1 (dark end) against the bar, 16.54:1 on the menu. Themes may override. */ --header-focus: oklch(0.97 0.02 320); --header-focus-w: 2px; /* Icon sizing. Two tokens: a filled glyph reads heavier than a stroked one in the same box, so the solid home icon is set smaller to match optically. */ --header-icon: 22px; /* stroked glyphs (palette) */ --header-icon-solid: 20px; /* filled glyphs (home) */ /* ease-out-quart: fast start, long settle, no overshoot. */ --header-ease: cubic-bezier(.22, 1, .36, 1); --header-ease-in: cubic-bezier(.55, 0, 1, .45); } /* Colour judgements about the DEFAULT gradient specifically. Scoped to html:not([data-theme]) because themes.css sets these per theme at the same specificity as :root — a :root override here would silently overwrite all five palettes. Every consumer below pairs them with a var() fallback to the theme's own token. */ html:not([data-theme]) { /* --header-border-strong (.22) measures 1.91-1.95:1 on the bar, below the 3:1 WCAG 1.4.11 needs for a control boundary. .42 gives 3.73-4.02:1. */ --header-control-border: rgba(255, 255, 255, .42); /* --header-bg-end (#040714) is identical to the standard page background, so a flat hairline measures 1.14:1 on the right half. The bar's luminance swings 43x left-to-right, so the edge ramps too. */ --header-edge-from: rgba(255, 255, 255, .10); --header-edge-to: rgba(255, 255, 255, .34); /* .72 measures 4.14:1 at the start of the subtitle span — below AA. Split from the icon colour, which only needs 3:1 as non-text. */ --header-text-dim: rgba(255, 255, 255, .82); --header-icon-color: rgba(255, 255, 255, .78); } /* ══════════════════════════════════════════════════════════════ SKINS — site-level identity, opt-in per site ──────────────────────────────────────────────────────────── A skin replaces the default magenta gradient for ONE site whose own palette clashes with it. Set it in the site's markup:
This is NOT the theme system. Precedence, by design: visitor choice (?theme= / cookie) > season (CDN) > skin > kit default Two cascade facts make that ordering work, and both are easy to get wrong: 1. A declaration ON .header-bar beats a value INHERITED from , whatever the specificity. Visitor themes declare on , so every skin is scoped `html:not([data-theme])` — the moment a visitor picks a theme, all skins stop matching. 2. Season rules in season.css carry a matching `[data-header-skin]` selector one step more specific than the skin rules below, so an armed season still flips skinned sites. Do not raise the specificity here without raising it there too, or skinned sites will silently sit out the season. Each skin re-tunes the edge ramp and control border for its own surface — those defaults are calibrated to the magenta gradient and are wrong on a black bar. ══════════════════════════════════════════════════════════════ */ /* ink — near-black neutral. The default choice for a site whose palette the magenta gradient fights. */ html:not([data-theme]) .header-bar[data-header-skin="ink"] { --header-bg-start: #14161c; --header-bg-mid: #0b0d12; --header-bg-end: #050609; --header-glass: rgba(10, 12, 16, .55); --header-accent: #cbd5e1; --header-text: #f4f4f5; --header-text-dim: rgba(255, 255, 255, .78); --header-icon-color: rgba(255, 255, 255, .74); --header-border: rgba(255, 255, 255, .09); --header-border-strong: rgba(255, 255, 255, .24); --header-control-border: rgba(255, 255, 255, .44); --header-menu-bg: #14161c; --header-menu-hover: rgba(255, 255, 255, .09); /* A near-black bar sits close to the page in luminance at BOTH ends, so the edge has to be brighter than the gradient's ramp. */ --header-edge-from: rgba(255, 255, 255, .26); --header-edge-to: rgba(255, 255, 255, .26); } /* carbon — flat true black, no gradient. The most restrained option; the hairline does all the separating. */ html:not([data-theme]) .header-bar[data-header-skin="carbon"] { --header-bg-start: #08080a; --header-bg-mid: #08080a; --header-bg-end: #08080a; --header-glass: rgba(0, 0, 0, .6); --header-accent: #e5e5e5; --header-text: #fafafa; --header-text-dim: rgba(255, 255, 255, .76); --header-icon-color: rgba(255, 255, 255, .72); --header-border: rgba(255, 255, 255, .12); --header-border-strong: rgba(255, 255, 255, .26); --header-control-border: rgba(255, 255, 255, .46); --header-menu-bg: #101012; --header-menu-hover: rgba(255, 255, 255, .1); --header-edge-from: rgba(255, 255, 255, .3); --header-edge-to: rgba(255, 255, 255, .3); } /* brass — warm dark, tuned to incident-runbook's #b8935f / #d8b280 accents and its #040714 page background. */ html:not([data-theme]) .header-bar[data-header-skin="brass"] { --header-bg-start: #2a2114; --header-bg-mid: #16120c; --header-bg-end: #040714; --header-glass: rgba(22, 18, 12, .5); --header-accent: #d8b280; --header-text: #f7f3ea; --header-text-dim: rgba(247, 243, 234, .8); --header-icon-color: rgba(216, 178, 128, .86); --header-border: rgba(216, 178, 128, .2); --header-border-strong: rgba(216, 178, 128, .38); --header-control-border: rgba(216, 178, 128, .55); --header-menu-bg: #17130d; --header-menu-hover: rgba(216, 178, 128, .14); --header-edge-from: rgba(216, 178, 128, .22); --header-edge-to: rgba(216, 178, 128, .34); } /* slate — cool blue-grey. Neutral without going fully black. */ html:not([data-theme]) .header-bar[data-header-skin="slate"] { --header-bg-start: #33415a; --header-bg-mid: #1e293b; --header-bg-end: #0b1120; --header-glass: rgba(15, 23, 42, .5); --header-accent: #7dd3fc; --header-text: #f1f5f9; --header-text-dim: rgba(241, 245, 249, .8); --header-icon-color: rgba(226, 232, 240, .78); --header-border: rgba(148, 163, 184, .2); --header-border-strong: rgba(148, 163, 184, .36); --header-control-border: rgba(203, 213, 225, .5); --header-menu-bg: #16202f; --header-menu-hover: rgba(148, 163, 184, .16); --header-edge-from: rgba(148, 163, 184, .18); --header-edge-to: rgba(148, 163, 184, .34); } /* aurora — deep teal into cyan. For data/monitoring surfaces. */ html:not([data-theme]) .header-bar[data-header-skin="aurora"] { --header-bg-start: #0e7490; --header-bg-mid: #0a3d4d; --header-bg-end: #040714; --header-glass: rgba(8, 51, 68, .5); --header-accent: #67e8f9; --header-text: #ecfeff; --header-text-dim: rgba(236, 254, 255, .82); --header-icon-color: rgba(165, 243, 252, .82); --header-border: rgba(103, 232, 249, .2); --header-border-strong: rgba(103, 232, 249, .36); --header-control-border: rgba(165, 243, 252, .5); --header-menu-bg: #07222c; --header-menu-hover: rgba(103, 232, 249, .14); --header-edge-from: rgba(103, 232, 249, .2); --header-edge-to: rgba(103, 232, 249, .32); } /* ember — warm amber into rust. For alert/ops surfaces that want warmth without reading as the danger theme. */ html:not([data-theme]) .header-bar[data-header-skin="ember"] { --header-bg-start: #9a3412; --header-bg-mid: #4a1608; --header-bg-end: #040714; --header-glass: rgba(74, 22, 8, .5); --header-accent: #fbbf24; --header-text: #fff7ed; --header-text-dim: rgba(255, 247, 237, .82); --header-icon-color: rgba(253, 230, 138, .84); --header-border: rgba(251, 191, 36, .2); --header-border-strong: rgba(251, 191, 36, .36); --header-control-border: rgba(253, 230, 138, .5); --header-menu-bg: #23120a; --header-menu-hover: rgba(251, 191, 36, .14); --header-edge-from: rgba(251, 191, 36, .2); --header-edge-to: rgba(251, 191, 36, .32); } /* ── Bar ─────────────────────────────────────────────────────── */ .header-bar { position: sticky; top: 0; z-index: var(--z-sticky-header, 200); display: flex; align-items: center; gap: var(--space-3, 12px); height: var(--header-h); padding: 0 var(--space-6, 24px); /* Re-composed HERE, not only at :root. A custom property's var() references resolve on the element where that property is declared, so a --header-bg built at :root bakes in :root's start/mid/end and ignores any override made further down the tree. Declaring it on .header-bar means skins (and any site override on the bar) only need to set the three stops. Themes still work: they set the stops on , which inherits down to here before this resolves. */ --header-bg: linear-gradient(in oklch 135deg, var(--header-bg-start) 0%, var(--header-bg-mid) 50%, var(--header-bg-end) 100%); background: var(--header-bg); border-bottom: 1px solid var(--header-border); color: var(--header-text); --header-h-cur: var(--header-h); } /* Bottom edge as a ramp, not a flat hairline (see --header-edge-*). Degrades to the theme's flat --header-border where unsupported or where a theme defines no ramp of its own. */ html:not([data-theme]) .header-bar { border-image: linear-gradient( to right, var(--header-edge-from, rgba(255, 255, 255, .10)), var(--header-edge-to, rgba(255, 255, 255, .34)) ) 1; } /* Hub is a floating glass plate, not a band welded to the page — the ramp would read as a seam. */ html:not([data-theme]) .header-bar[data-header-mode="hub"] { border-image: none; border-bottom-color: var(--header-border); } /* Mode: hub — transparent cozy glass, no gradient */ .header-bar[data-header-mode="hub"] { background: var(--header-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Mode: app — slim, auto-hides on scroll down (JS toggles .header-hidden) */ .header-bar[data-header-mode="app"] { height: var(--header-h-app); --header-h-cur: var(--header-h-app); transition: transform .26s var(--header-ease, ease); } /* Leaving accelerates away; returning decelerates in. Same budget. */ .header-bar[data-header-mode="app"].header-hidden { transform: translateY(-100%); transition-duration: .2s; transition-timing-function: var(--header-ease-in, ease); } /* ── Logo block ──────────────────────────────────────────────── */ .header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; } .header-logo-img { height: 36px; width: auto; flex-shrink: 0; display: block; filter: brightness(0) invert(1); transition: transform .28s var(--header-ease, ease); } .header-logo-img:hover { transform: scale(1.06) rotate(-4deg); } /* min-height also fixes a target-size failure: at <=700px the subtitle is hidden and this link collapses to 22px, under the 24px WCAG 2.5.8 minimum. The parent centres it, so it grows symmetrically — no shift. */ .header-title-link { text-decoration: none; color: inherit; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: var(--header-control-h); } /* rem, not em: a shared component must not rescale because a site set its own body font-size. 1.2rem == 19.2px == today's rendered size. */ .header-logo h1 { font-size: 1.2rem; font-weight: 600; line-height: 1.2; letter-spacing: .015em; color: var(--header-text); white-space: nowrap; } .header-subtitle { font-size: .8125rem; line-height: 1.25; color: var(--header-text-dim); font-weight: 500; margin-top: 2px; letter-spacing: .005em; white-space: nowrap; } /* ── Right cluster: actions + theme toggle + home ────────────── */ .header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2, 8px); min-width: 0; } .header-actions { display: flex; align-items: center; gap: var(--space-2, 8px); position: relative; /* overflow .header-menu anchors here */ min-width: 0; } .header-actions .btn, .header-actions .nav-link { white-space: nowrap; flex-shrink: 0; } /* Uniform control row: direct action children match the icon buttons' height so Share / ⋯ / palette / home read as one correlative strip. (Direct-child only — items moved into the ⋯ menu keep menu styling.) */ .header-actions > .btn, .header-actions > .nav-link, .header-actions > button, .header-actions > a { height: var(--header-control-h); min-height: 0; /* neutralize site-level control minimums (e.g. --control-height) */ box-sizing: border-box; display: inline-flex; align-items: center; } /* Appearance fallback for action buttons. The kit enforces geometry on .header-actions children but never styled them, so a site that uses the canonical .btn / .nav-link classes without defining them renders a raw browser button inside the header (incident-runbook hit exactly this). Wrapped in :where() so the whole rule has ZERO specificity — every site's own .btn/.nav-link styling still wins, and this only shows through where nothing else applies. */ :where(.header-actions) > :where(.btn, .nav-link, button, a) { padding: 0 12px; border: 1px solid var(--header-border-strong); border-radius: 6px; background: transparent; color: var(--header-text); font: inherit; font-size: .875rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background .2s var(--header-ease, ease), border-color .2s var(--header-ease, ease); } :where(.header-actions) > :where(.btn, .nav-link, button, a):hover { background: var(--header-menu-hover); border-color: var(--header-control-border, var(--header-border-strong)); } /* ── Theme toggle ────────────────────────────────────────────── */ .header-theme { position: relative; display: flex; } .header-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--header-control-h); height: var(--header-control-h); padding: 0; border: 1px solid var(--header-control-border, var(--header-border-strong)); border-radius: 6px; background: transparent; color: var(--header-icon-color, var(--header-text-dim)); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .header-theme-toggle:hover, .header-theme-toggle[aria-expanded="true"] { color: var(--header-text); border-color: var(--header-border-strong); background: var(--header-menu-hover); } .header-theme-toggle svg { width: var(--header-icon, 22px); height: var(--header-icon, 22px); display: block; } [data-theme]:not([data-theme=""]) .header-theme-toggle { color: var(--header-accent); } /* ── Home icon ───────────────────────────────────────────────── */ .header-home { display: flex; align-items: center; justify-content: center; width: var(--header-control-h); height: var(--header-control-h); box-sizing: border-box; padding: 0; border-radius: 6px; color: var(--header-icon-color, var(--header-text-dim)); text-decoration: none; flex-shrink: 0; transition: color .18s var(--header-ease, ease), background .18s var(--header-ease, ease); } .header-home:hover { color: var(--header-text); background: var(--header-menu-hover); } .header-home svg { width: var(--header-icon-solid, 20px); height: var(--header-icon-solid, 20px); display: block; } /* ── Overflow toggle (⋯) — injected by header.js ─────────────── */ .header-overflow { position: relative; display: flex; } .header-overflow[hidden] { display: none; } .header-overflow-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--header-control-h); height: var(--header-control-h); box-sizing: border-box; padding: 0 10px; border: 1px solid var(--header-control-border, var(--header-border-strong)); border-radius: 6px; background: transparent; color: var(--header-text); font-size: 1rem; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: background .2s; } .header-overflow-toggle:hover, .header-overflow-toggle[aria-expanded="true"] { background: var(--header-menu-hover); } /* Shared press feedback — these three controls are kit-owned, so the kit owns their states (sites style their own .btn). */ .header-overflow-toggle:active, .header-theme-toggle:active, .header-home:active { background: var(--header-menu-hover); transform: translateY(.5px); } /* ── Dropdown menu (overflow + theme + Export▾ groups) ───────── Rules: parent gets position:relative; one open at a time; Esc / outside click closes; arrow keys navigate (all handled by header.js) */ .header-menu { position: absolute; /* Anchored to the BAR's bottom edge, not the button's. A 40px control centred in a 68px bar put the old panel 10.5px inside the bar. */ top: calc(100% + (var(--header-h-cur, 68px) - var(--header-control-h)) / 2 + 8px); right: 0; min-width: 180px; max-height: min(60vh, 320px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--header-menu-bg); border: 1px solid var(--header-border-strong); border-radius: 12px; /* Contact / mid / ambient + inner top highlight, so the panel lands instead of floating. */ box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 16px -6px rgba(0, 0, 0, .5), 0 24px 48px -16px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06); transform-origin: top right; display: none; z-index: 1; } .header-menu.open { display: block; animation: neo-menu-in .14s var(--header-ease, ease) both; } @keyframes neo-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .header-menu .btn, .header-menu .nav-link, .header-menu button, .header-menu a { display: flex; align-items: center; /* text-align does nothing to a flex item; without this the site's own .btn { justify-content: center } wins and every row centres itself. */ justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: none; border-radius: 8px; background: none; color: var(--header-text); font: inherit; font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } .header-menu .btn:hover, .header-menu .nav-link:hover, .header-menu button:hover, .header-menu a:hover { background: var(--header-menu-hover); } /* ── Focus visibility ───────────────────────────────────────── Every focusable header control gets a real ring. outline costs no layout and creates no stacking context, so app-mode transform is unaffected. Longhand lists (no :is()) for universal support. */ .header-logo a:focus-visible, .header-title-link:focus-visible, .header-actions > a:focus-visible, .header-actions > button:focus-visible, .header-actions > .btn:focus-visible, .header-actions > .nav-link:focus-visible, .header-overflow-toggle:focus-visible, .header-theme-toggle:focus-visible, .header-home:focus-visible { outline: var(--header-focus-w) solid var(--header-focus); outline-offset: 2px; } /* Drawn inside the item so it never collides with the menu's padding or scroll edge. Covers menuitemradio/checkbox, which the old rule missed. */ .header-menu .btn:focus-visible, .header-menu .nav-link:focus-visible, .header-menu button:focus-visible, .header-menu a:focus-visible, .header-menu [role="menuitem"]:focus-visible, .header-menu [role="menuitemradio"]:focus-visible, .header-menu [role="menuitemcheckbox"]:focus-visible { outline: var(--header-focus-w) solid var(--header-focus); outline-offset: -2px; background: var(--header-menu-hover); } .header-menu .badge, .header-menu [data-badge] { margin-left: auto; } /* Grouped controls (.header-btn-group divs / navs) moved into the ⋯ menu render as stacked rows; group chrome (borders, padding, flex) is stripped. */ .header-menu > div, .header-menu > nav { display: block; border: none; margin: 0; padding: 0; } .header-menu > div + div, .header-menu > nav + nav { border-top: 1px solid var(--header-border); margin-top: 4px; padding-top: 4px; } .header-menu > div button, .header-menu > div a, .header-menu > nav button, .header-menu > nav a { width: 100%; margin: 0; } /* Theme menu specifics */ .header-theme-menu .theme-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .25); } .header-theme-menu [aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--header-accent); } /* ── Mobile (≤700px): shrink, hide subtitle, JS moves non-kept action buttons into the ⋯ overflow menu ────────────────────── */ @media (max-width: 700px) { :root { --header-control-h: 36px; --header-icon: 20px; --header-icon-solid: 18px; } .header-bar { padding: 0 var(--space-4, 16px); gap: var(--space-2, 8px); } .header-subtitle { display: none; } .header-logo h1 { font-size: 1rem; } .header-logo-img { height: 28px; } .header-right { gap: 6px; } /* A 180px panel pinned to the right of a 375px viewport wastes width. */ .header-menu { min-width: min(260px, calc(100vw - 32px)); max-width: calc(100vw - 32px); } } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .header-bar[data-header-mode="app"], .header-bar[data-header-mode="app"].header-hidden { transition: none; } .header-logo-img { transition: none; } .header-logo-img:hover { transform: none; } .header-menu.open { animation: none; } .header-overflow-toggle:active, .header-theme-toggle:active, .header-home:active { transform: none; } } /* ── Forced colors (Windows High Contrast) ──────────────────── The bar's hierarchy is carried entirely by translucent whites, which all collapse to one system colour. Give the structural edges system tokens so the header doesn't become one undifferentiated block. */ @media (forced-colors: active) { .header-bar { border-image: none; border-bottom: 1px solid CanvasText; } .header-overflow-toggle, .header-theme-toggle { border-color: ButtonBorder; } .header-menu { border: 1px solid CanvasText; } .header-logo a:focus-visible, .header-title-link:focus-visible, .header-actions > a:focus-visible, .header-actions > button:focus-visible, .header-actions > .btn:focus-visible, .header-actions > .nav-link:focus-visible, .header-overflow-toggle:focus-visible, .header-theme-toggle:focus-visible, .header-home:focus-visible, .header-menu button:focus-visible, .header-menu a:focus-visible { outline-color: Highlight; } }