/* Noise Factor AI site header — the stylesheet half of . Markup and the header DSL program live in js/nf-header.js. A copy of the noisefactor.io header stylesheet. This file must stay self-contained: pages may load it without index.css. Pages may extend the header by specificity in their own stylesheets (page-supplied nav extras), but the core header is styled only here. */ /* Before the component upgrades, its page-supplied children would render as stray content at the top of the page. Hide pre-upgrade; if the script never loads, the header stays hidden rather than half-rendered. */ nf-header:not(:defined) { display: none; } /* The host element is the sticky bar. A sticky element only sticks within its parent, so stickiness lives on the component itself — a direct child of on every page that uses it — and not on the inner row. */ nf-header { display: block; position: sticky; top: 0; z-index: 100; } .nf-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; /* Neutral fallback until the WebGL shader paints, and without WebGL. The shader cycles its whole four-color palette, so no single solid color matches it; the logo pill below stays readable on either. */ background: var(--hf-color-3); border-bottom: 1px solid var(--hf-border-subtle); overflow: hidden; } .nf-header-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* The logo sits on a frosted pill in the page's own colors. The header shader sweeps from near-white to deep blue (measured header luminance 0.03 to 0.66), so text drawn straight on it is unreadable for part of every cycle in either color scheme. The pill is the same glass treatment noisefactor.io uses for controls that sit on moving video. */ .nf-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; line-height: 0; padding: 0.25rem 0.9rem 0.25rem 0.3rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hf-text-normal) 14%, transparent); background: color-mix(in srgb, var(--hf-bg-base) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--hf-text-normal); text-decoration: none; flex-shrink: 0; transition: background 0.2s ease; } .nf-logo:hover { background: color-mix(in srgb, var(--hf-bg-base) 86%, transparent); color: var(--hf-text-normal); text-decoration: none; } .nf-logo:focus-visible { outline: 2px solid var(--hf-text-normal); outline-offset: 2px; } /* Inline SVG so fill="currentColor" inherits from .nf-logo's color — the previous

rendered the SVG in an isolated context where currentColor resolved to default black regardless of theme. */ .nf-logo-mark { width: 44px; height: 44px; display: block; margin: -4px 0; } .nf-logo-wordmark { font-size: 1.125rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--hf-text-normal); white-space: nowrap; } .nf-nav { position: relative; z-index: 1; display: flex; align-items: center; flex-shrink: 0; } .nf-nav a { margin-left: 1.5rem; color: var(--hf-bg-base); opacity: 0.8; font-size: 0.9rem; text-decoration: none; transition: opacity 0.15s ease; } .nf-nav a:hover { opacity: 1; color: var(--hf-bg-base); text-decoration: none; } .nf-nav a.nf-nav-current { opacity: 1; font-weight: 700; } /* At phone widths only the built-in back-nav links collapse (the logo still links home, and the current section stays). Page-supplied extras may contain nested links, so target the built-in links directly. */ @media (max-width: 540px) { .nf-nav a.nf-nav-core:not(.nf-nav-current) { display: none; } } @media (max-width: 720px) { .nf-header { padding: 0.75rem 1rem; } .nf-logo-mark { width: 38px; height: 38px; margin: -3px 0; } .nf-logo-wordmark { font-size: 1rem; } .nf-nav a { margin-left: 1rem; text-decoration: none; } }