/* ========================================================================== allanninal.dev — unified site navigation One dark, high-tech header bar shared by every first-party page on the site. Everything here is namespaced `anx-` and fully self-contained: these rules are injected into ~1,400 pages that each carry their own stylesheet, so the header must not inherit from — or leak into — anything around it. ========================================================================== */ .anx-root { /* `display: contents` matters, it is not cosmetic. This wrapper exists only to scope the custom properties and the guard below, and a sticky element sticks within its parent's box — leaving the wrapper as a 57px-tall block meant the header scrolled away with it on every page. Removing the box makes the header a flow child of again, where sticky works, while custom properties still inherit straight through. */ display: contents; --anx-h: 56px; --anx-bg: #05070E; --anx-bg-2: #0B1120; --anx-bg-3: #111A2E; --anx-line: rgba(148, 163, 184, 0.16); --anx-line-2: rgba(148, 163, 184, 0.28); --anx-text: #E2E8F0; --anx-dim: #94A3B8; --anx-cyan: #22D3EE; --anx-cyan-dim: #0E7490; --anx-indigo: #818CF8; --anx-sans: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --anx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .anx-root, .anx-root *, .anx-root *::before, .anx-root *::after { box-sizing: border-box; } /* Guard against the host page. This bar is injected into ~1,400 documents, several of which style bare element selectors — `header { padding: 120px 0 }` on the analysis pages was inflating the bar to 237px tall. `:where()` contributes no specificity, so this whole rule weighs exactly `.anx-root` (0,1,0): it outranks any bare element rule from the host, and every component rule below outranks it in turn by appearing later at the same weight. Do not reset `display` here — the elements below rely on their own defaults. */ .anx-root :where(header, nav, div, span, p, a, button, ul, ol, li, dl, dt, dd, svg, h1, h2, h3) { margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; text-transform: none; text-decoration: none; text-indent: 0; letter-spacing: normal; line-height: inherit; list-style: none; position: static; float: none; width: auto; height: auto; min-height: 0; min-width: 0; max-width: none; max-height: none; box-shadow: none; border-radius: 0; opacity: 1; transform: none; visibility: visible; cursor: auto; } .anx-root :where(a, button) { cursor: pointer; } /* Skip link — first focusable element on every page. */ .anx-skip { position: absolute; left: -9999px; top: 0; z-index: 1200; } .anx-skip:focus { left: 0.75rem; top: 0.75rem; padding: 0.6rem 1rem; border-radius: 8px; background: var(--anx-cyan); color: #04121A; font-family: var(--anx-sans); font-weight: 700; font-size: 0.875rem; } /* ── Bar ───────────────────────────────────────────────────────────────── */ .anx-header { position: sticky; top: 0; z-index: 1000; background: rgba(5, 7, 14, 0.88); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--anx-line); font-family: var(--anx-sans); color: var(--anx-text); line-height: 1.4; } /* Hairline of accent light under the bar — reads as a status strip. */ .anx-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(34, 211, 238, 0.55) 18%, rgba(129, 140, 248, 0.45) 52%, transparent 88% ); opacity: 0.7; pointer-events: none; } .anx-bar { max-width: 76rem; margin-inline: auto; padding-inline: 1rem; height: var(--anx-h); display: flex; align-items: center; gap: 0.5rem; } @media (min-width: 640px) { .anx-bar { padding-inline: 1.5rem; } } /* ── Brand ─────────────────────────────────────────────────────────────── */ .anx-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--anx-text); padding: 0.35rem 0.35rem 0.35rem 0; border-radius: 8px; flex: none; min-width: 0; } .anx-brand:hover { color: #fff; } .anx-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; flex: none; background: linear-gradient(140deg, #0E7490 0%, #1E293B 60%, #312E81 100%); border: 1px solid rgba(34, 211, 238, 0.4); box-shadow: 0 0 0 1px rgba(5, 7, 14, 0.8), 0 0 14px -4px rgba(34, 211, 238, 0.6); color: var(--anx-cyan); } .anx-brand__mark svg { width: 15px; height: 15px; display: block; } .anx-brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anx-brand__dim { color: var(--anx-dim); font-weight: 600; } .anx-brand__section { font-family: var(--anx-mono); font-size: 0.8125rem; font-weight: 700; color: var(--anx-cyan); } /* ── Desktop nav ───────────────────────────────────────────────────────── */ .anx-nav { display: none; align-items: center; gap: 0.125rem; margin-left: 0.75rem; } @media (min-width: 1024px) { .anx-nav { display: flex; } } .anx-link { display: inline-flex; align-items: center; gap: 0.3rem; height: 34px; padding: 0 0.7rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; color: var(--anx-dim); white-space: nowrap; transition: color 0.14s ease, background-color 0.14s ease; } .anx-link:hover, .anx-link[aria-expanded='true'] { color: #fff; background: rgba(148, 163, 184, 0.1); } .anx-link[aria-current='page'], .anx-link.is-active { color: var(--anx-cyan); background: rgba(34, 211, 238, 0.1); } .anx-link__chev { width: 12px; height: 12px; flex: none; transition: transform 0.16s ease; opacity: 0.75; } .anx-link[aria-expanded='true'] .anx-link__chev { transform: rotate(180deg); } /* ── Dropdown panels ───────────────────────────────────────────────────── */ .anx-menu { position: relative; } .anx-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 15rem; padding: 0.5rem; border-radius: 12px; background: var(--anx-bg-2); border: 1px solid var(--anx-line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(5, 7, 14, 0.9); } .anx-panel[hidden] { display: none; } /* The Guides panel. Two column groups until the APIs group lands, three after — `auto-fit` means the column count follows the number of groups instead of being restated here. `right: 0` is not set, so a three-column panel opening from a left-ish trigger could otherwise run off the right edge; the max-width and the viewport clamp below keep it on screen at every width the panel is visible. */ .anx-panel--wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.25rem 0.75rem; max-width: min(46rem, calc(100vw - 2rem)); } /* Below this the third group would squeeze the columns under a readable width, so they wrap to two and the panel grows downward instead. */ @media (max-width: 1180px) { .anx-panel--wide { grid-template-columns: repeat(2, minmax(12rem, 1fr)); } } .anx-panel__group { min-width: 0; } .anx-panel__title { font-family: var(--anx-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--anx-cyan-dim); padding: 0.5rem 0.6rem 0.35rem; margin: 0; } .anx-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--anx-text); transition: background-color 0.12s ease, color 0.12s ease; } .anx-item:hover { background: rgba(34, 211, 238, 0.12); color: #fff; } .anx-item__note { font-family: var(--anx-mono); font-size: 0.6875rem; font-weight: 500; color: var(--anx-dim); margin-left: auto; white-space: nowrap; } /* ── Right-hand actions ────────────────────────────────────────────────── */ .anx-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex: none; } .anx-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; color: var(--anx-dim); border: 1px solid transparent; transition: color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease; } .anx-icon:hover { color: #fff; border-color: var(--anx-line-2); background: rgba(148, 163, 184, 0.1); } .anx-icon svg { width: 17px; height: 17px; display: block; } .anx-cta { display: none; align-items: center; gap: 0.4rem; height: 36px; padding: 0 0.9rem; border-radius: 9px; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.005em; color: #04121A; background: linear-gradient(135deg, #67E8F9 0%, #22D3EE 55%, #38BDF8 100%); box-shadow: 0 0 18px -6px rgba(34, 211, 238, 0.8); white-space: nowrap; transition: filter 0.14s ease, box-shadow 0.14s ease; } .anx-cta:hover { filter: brightness(1.08); box-shadow: 0 0 26px -6px rgba(34, 211, 238, 0.95); } .anx-cta__dot { width: 6px; height: 6px; border-radius: 50%; background: #04121A; flex: none; } @media (min-width: 560px) { .anx-cta { display: inline-flex; } } /* Hamburger */ .anx-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--anx-line); color: var(--anx-text); background: rgba(148, 163, 184, 0.06); } .anx-burger:hover { border-color: var(--anx-line-2); background: rgba(148, 163, 184, 0.14); } @media (min-width: 1024px) { .anx-burger { display: none; } } .anx-burger__box { position: relative; width: 17px; height: 12px; } .anx-burger__box span { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease; } .anx-burger__box span:nth-child(1) { top: 0; } .anx-burger__box span:nth-child(2) { top: 5.1px; } .anx-burger__box span:nth-child(3) { top: 10.25px; } .anx-burger[aria-expanded='true'] .anx-burger__box span:nth-child(1) { top: 5.1px; transform: rotate(45deg); } .anx-burger[aria-expanded='true'] .anx-burger__box span:nth-child(2) { opacity: 0; } .anx-burger[aria-expanded='true'] .anx-burger__box span:nth-child(3) { top: 5.1px; transform: rotate(-45deg); } /* ── Mobile drawer ─────────────────────────────────────────────────────── */ .anx-drawer { display: block; max-height: calc(100vh - var(--anx-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--anx-bg); border-top: 1px solid var(--anx-line); padding: 0.75rem 1rem 1.25rem; } .anx-drawer[hidden] { display: none; } @media (min-width: 1024px) { .anx-drawer { display: none !important; } } .anx-drawer__cta { display: flex; align-items: center; justify-content: center; gap: 0.45rem; height: 46px; border-radius: 10px; margin-bottom: 0.85rem; font-size: 0.9375rem; font-weight: 700; color: #04121A; background: linear-gradient(135deg, #67E8F9 0%, #22D3EE 55%, #38BDF8 100%); } .anx-acc + .anx-acc { margin-top: 0.25rem; } .anx-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 46px; padding: 0 0.75rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--anx-text); text-align: left; } .anx-acc__btn:hover { background: rgba(148, 163, 184, 0.1); } .anx-acc__btn[aria-expanded='true'] { color: var(--anx-cyan); } .anx-acc__btn .anx-link__chev { width: 14px; height: 14px; } .anx-acc__btn[aria-expanded='true'] .anx-link__chev { transform: rotate(180deg); } .anx-acc__panel { padding: 0.15rem 0 0.5rem 0.75rem; margin-left: 0.4rem; border-left: 1px solid var(--anx-line); } .anx-acc__panel[hidden] { display: none; } .anx-acc__panel .anx-panel__title { padding-left: 0.6rem; } .anx-acc__panel .anx-item { min-height: 42px; align-items: center; font-size: 0.875rem; } .anx-drawer__foot { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--anx-line); } .anx-drawer__foot a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0 0.75rem; border-radius: 8px; border: 1px solid var(--anx-line); font-family: var(--anx-mono); font-size: 0.75rem; font-weight: 600; color: var(--anx-dim); } .anx-drawer__foot a:hover { color: #fff; border-color: var(--anx-line-2); } .anx-drawer__foot svg { width: 14px; height: 14px; } /* Anchor targets must clear the sticky bar. */ html { scroll-padding-top: calc(56px + 1rem); } @media (prefers-reduced-motion: reduce) { .anx-root *, .anx-root *::before, .anx-root *::after { transition-duration: 0.01ms !important; } }