/*
* ========================================================================
* ANALYTIC ENDEAVORS - SITE HEADER / NAVIGATION (PC-01, "Meridian")
* Copyright (c) 2024-2026 Analytic Endeavors Inc. All Rights Reserved.
* Origin: analyticendeavors.com
* ========================================================================
*
* The site's own top navigation, replacing the Squarespace header.
* Markup is rendered by shared/js/ae-nav.js into ;
* the link set comes from data/sitemap.json (the same central model the
* footer mirrors). Include this file in the shared CSS block and the
* script after theme-toggle.js:
*
*
* ...
*
* ...
*
*
*
* Adopting pages must NOT also render the floating .theme-toggle button:
* the toggle lives inside the bar (same storage, same AETheme API).
* Every color is a token from variables.css, so light mode is automatic.
*/
:root {
--ae-nav-height: 64px;
--aeh-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
--aeh-scrim: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
--aeh-shadow: 0 18px 42px rgba(10, 22, 40, 0.14);
--aeh-scrim: rgba(10, 22, 40, 0.32);
}
/* Anchors and in-page jumps clear the fixed bar */
html { scroll-padding-top: calc(var(--ae-nav-height) + 16px); }
body.has-ae-nav { padding-top: var(--ae-nav-height); }
body.aeh-lock { overflow: hidden; }
/* ===== coexistence with legacy page chrome (only on pages carrying the bar) =====
The floating corner theme toggle is replaced by the one in the bar; hide the
legacy button (0,0,2,1 beats the per-page inline .theme-toggle rules, no
!important needed). The guide reading-progress bar lives at top:0 z-index 1001
(defined in both guide-nav.css and components.css); nudge it to sit just under
the bar. Everything else (back-to-top, slide-nav, slide-counter) is bottom- or
center-anchored and needs no change. */
body.has-ae-nav .theme-toggle { display: none !important; }
body.has-ae-nav .progress-container {
top: var(--ae-nav-height);
/* Under the header the 4px track loses its card-colored strip; only the
teal fill shows, reading as the slab's bottom edge. It travels with the
guide sub-bar's reveal (same 0.3s ease as .sticky-nav's top). */
background: transparent;
transition: top 0.3s ease;
/* Part of the slab, not above it: the legacy z-index 1001 painted the teal
line OVER the header's open dropdown cards (header is 990). 985 keeps it
above page content but under everything the header opens. */
z-index: 985;
}
/* While the guide sub-bar is visible the two rows read as ONE slab: the
header's own hairline hands off to the sub-bar's bottom edge, and the
progress line rides down to the slab bottom. Browsers without :has()
keep a seam hairline and a static progress line - cosmetic only.
Under the context morph (body.ae-nav-morph, below) there IS no second
row: the sub-bar never shows even though guide-ui.js keeps toggling its
.visible class, so these slab hand-offs must stand down - the progress
line stays at the bar's own bottom edge. */
body.has-ae-nav:not(.ae-nav-morph):has(.sticky-nav.visible) .aeh { border-bottom-color: transparent; }
body.has-ae-nav:not(.ae-nav-morph):has(.sticky-nav.visible) .progress-container {
top: calc(var(--ae-nav-height) + var(--guide-subbar-h, 0px));
}
/* Guide presentation mode is a self-contained fullscreen slideshow with its own
top control bar; the site header steps aside entirely (and drops its body
padding) so nothing peeks over the deck. */
body.present .aeh { display: none; }
body.present.has-ae-nav { padding-top: 0; }
/* ===== the bar ===== */
.aeh {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 990;
background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
transition: transform 0.28s ease, background 0.25s ease, border-color 0.25s ease;
}
.aeh.at-top {
background: transparent;
border-bottom-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* auto-hide hook: ae-nav.js toggles this only when opted in */
.aeh.aeh-hidden { transform: translateY(-105%); }
.aeh-inner {
max-width: 1200px;
margin: 0 auto;
height: var(--ae-nav-height);
padding: 0 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
}
/* ===== brand lockup (mirrors the footer wordmark) ===== */
.aeh-brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
flex-shrink: 0;
}
.aeh-mark { width: 30px; height: 30px; display: block; }
.aeh-word {
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--text-primary);
white-space: nowrap;
}
.aeh-word b { font-weight: 700; color: var(--teal-light); }
/* ===== guide reading bar (context morph) =====
On guide/post pages ae-nav.js adopts the legacy guide bar's lockup and
share cluster into THIS bar and retires the second row (body.ae-nav-morph;
the adopted guide-chrome elements are styled by guide-nav.css, which owns
their classes). Past the hero the bar wears .aeh-reading: the wordmark
hands off to the guide context. The menus and CTA stay put throughout -
only the brand text changes meaning, so the site nav is never out of
reach mid-read. */
.aeh-lead { display: inline-flex; align-items: center; gap: 0.9rem; min-width: 0; }
.aeh-ctx { display: none; align-items: center; min-width: 0; }
.aeh-ctx-div {
display: none;
width: 1px;
height: 22px;
flex-shrink: 0;
background: color-mix(in srgb, var(--border) 72%, transparent);
}
.aeh-reading .aeh-word { display: none; }
/* The menus keep their width; the (masked) guide title absorbs the squeeze. */
.aeh-reading .aeh-nav { flex-shrink: 0; }
.aeh-reading .aeh-ctx { display: inline-flex; animation: aeh-ctx-in 0.28s ease; }
.aeh-reading .aeh-ctx-div { display: block; }
@keyframes aeh-ctx-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
/* ===== primary nav ===== */
.aeh-nav { display: flex; align-items: center; gap: 0.25rem; }
.aeh-actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
/* Page actions adopted into the bar (data-ae-nav-action): the fixed
positioning they carry for header-less serves must not apply once they
participate in the row. Size/typography stay the page's job. */
.aeh-actions > [data-ae-nav-action] { position: static !important; margin: 0; }
.aeh-item { position: relative; }
.aeh-item > button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font: inherit;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
padding: 0.55rem 0.85rem;
border-radius: 9px;
transition: color 0.2s ease, background 0.2s ease;
}
.aeh-item > button:hover,
.aeh-item.open > button {
color: var(--text-primary);
background: color-mix(in srgb, var(--teal) 9%, transparent);
}
.aeh-caret {
width: 10px; height: 6px;
stroke: currentColor; fill: none; stroke-width: 1.6;
transition: transform 0.2s ease;
}
.aeh-item.open .aeh-caret, .aeh-item:hover .aeh-caret { transform: rotate(180deg); }
/* dropdown card */
.aeh-dd {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 230px;
background: var(--card-surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.45rem;
box-shadow: var(--aeh-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Menus wear the bar's glass. Readability-tuned for surfaces that float
over busy content: more opaque (86% card) and more blur (20px) than the
bar itself - the blur smears whatever is underneath into soft color, the
opacity does the rest. Gated so browsers without backdrop-filter keep
the solid card above instead of transparent text-on-text. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.aeh-dd, .aeh-sheet {
background: color-mix(in srgb, var(--card-surface) 86%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
}
}
/* invisible hover bridge so the pointer can travel into the card */
.aeh-dd::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.aeh-item:hover .aeh-dd,
.aeh-item.open .aeh-dd,
.aeh-item:focus-within .aeh-dd {
opacity: 1; visibility: visible; transform: none;
}
/* Single-menu invariant: while the pointer is over ANY menu item, only that
item's dropdown may render - a sibling stuck open via .open or lingering
click-focus (:focus-within) must not create a second open menu. Keyboard-only
navigation (no pointer in the nav) is unaffected. */
.aeh-nav:has(.aeh-item:hover) .aeh-item:not(:hover) .aeh-dd {
opacity: 0; visibility: hidden;
}
.aeh-dd a {
display: block;
padding: 0.55rem 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
transition: color 0.15s ease, background 0.15s ease;
}
.aeh-dd a:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--teal) 10%, transparent);
}
/* header CTA: shared .btn-secondary, resized for the bar */
.aeh-cta.btn-secondary {
padding: 0.45rem 1.05rem;
font-size: 0.85rem;
border-width: 1px;
}
.aeh-cta.btn-secondary:hover { transform: none; }
/* ===== icon buttons (theme, burger, close) ===== */
.aeh-theme, .aeh-burger, .aeh-x {
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.aeh-theme:hover, .aeh-burger:hover, .aeh-x:hover {
color: var(--teal-light);
border-color: var(--teal);
background: color-mix(in srgb, var(--teal) 8%, transparent);
}
.aeh-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.aeh-burger { flex-direction: column; gap: 4px; }
.aeh-burger span { display: block; width: 17px; height: 1.6px; background: currentColor; border-radius: 2px; }
.aeh-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* ===== mobile sheet ===== */
.aeh-scrim { position: fixed; inset: 0; z-index: 1040; background: var(--aeh-scrim); }
.aeh-sheet {
position: fixed;
top: 0; right: 0; bottom: 0;
z-index: 1050;
width: min(84vw, 360px);
background: var(--card-surface);
border-left: 1px solid var(--border);
box-shadow: var(--aeh-shadow);
display: flex;
flex-direction: column;
transform: translateX(102%);
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aeh-sheet.open { transform: none; }
.aeh-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1rem 0.8rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.aeh-sheet-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem 1rem; }
.aeh-acc { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.aeh-acc > button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
background: none;
border: none;
cursor: pointer;
padding: 0.95rem 0.15rem;
}
.aeh-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.aeh-acc.open .aeh-acc-body { grid-template-rows: 1fr; }
.aeh-acc.open .aeh-caret { transform: rotate(180deg); }
.aeh-acc-body > div {
min-height: 0;
overflow: hidden;
visibility: hidden;
transition: visibility 0.25s;
}
.aeh-acc.open .aeh-acc-body > div { visibility: visible; padding-bottom: 0.6rem; }
.aeh-acc-body a {
display: block;
padding: 0.55rem 0.75rem;
margin-left: 0.35rem;
border-left: 2px solid color-mix(in srgb, var(--teal) 35%, transparent);
font-size: 0.9rem;
color: var(--text-secondary);
}
.aeh-acc-body a:hover { color: var(--teal-light); }
.aeh-sheet-foot {
border-top: 1px solid var(--border);
padding: 1rem 1.25rem 1.2rem;
display: grid;
gap: 0.9rem;
justify-items: center;
}
.aeh-sheet-foot .btn-secondary { width: 100%; }
/* ===== newsletter (mobile sheet) ===== */
.aeh-news { width: 100%; display: grid; gap: 0.5rem; }
/* The hidden attribute must always win here: several of these elements carry
their own display values (grid/flex), which otherwise override [hidden]'s
UA default and paint "hidden" fields anyway - the exact bug where all five
fields showed by default. */
.aeh-news [hidden] { display: none !important; }
/* Two-step flow: once expanded, the small arrow hands off to the real
Subscribe button at the bottom. */
.aeh-news.is-open .aeh-news-btn { display: none; }
.aeh-news-submit {
width: 100%;
font: inherit;
font-size: 0.88rem;
font-weight: 700;
padding: 0.55rem;
border-radius: 9px;
border: 1px solid var(--teal);
background: color-mix(in srgb, var(--teal) 14%, transparent);
color: var(--teal-light);
cursor: pointer;
transition: background 0.2s ease;
}
.aeh-news-submit:hover { background: color-mix(in srgb, var(--teal) 24%, transparent); }
.aeh-news-submit:disabled { opacity: 0.55; cursor: default; }
.aeh-news-label {
margin: 0;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
text-align: center;
}
.aeh-news-row { display: flex; gap: 0.5rem; }
/* required fields that slide open once the visitor engages the email field */
.aeh-news-more { display: grid; gap: 0.5rem; }
.aeh-news-more input { width: 100%; }
.aeh-news-row input,
.aeh-news-more input {
flex: 1;
min-width: 0;
font: inherit;
font-size: 0.85rem;
color: var(--text-primary);
background: var(--card-inset);
border: 1px solid var(--border);
border-radius: 9px;
padding: 0.5rem 0.7rem;
outline: none;
transition: border-color 0.2s ease;
}
.aeh-news-row input:focus,
.aeh-news-more input:focus { border-color: var(--teal); }
.aeh-news-row input::placeholder,
.aeh-news-more input::placeholder { color: var(--text-muted); }
.aeh-news-btn {
width: 38px; height: 38px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid var(--teal);
background: color-mix(in srgb, var(--teal) 10%, transparent);
color: var(--teal-light);
cursor: pointer;
transition: background 0.2s ease;
}
.aeh-news-btn:hover { background: color-mix(in srgb, var(--teal) 20%, transparent); }
.aeh-news-btn:disabled { opacity: 0.55; cursor: default; }
.aeh-news-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.aeh-news-msg { margin: 0; font-size: 0.78rem; text-align: center; color: var(--danger); }
.aeh-news-msg.ok { color: var(--success, var(--teal-light)); }
/* intent-aware CTA wording swap: brief fade when the label changes */
.aeh-cta-swap { animation: aeh-cta-fade 0.35s ease; }
@keyframes aeh-cta-fade { from { opacity: 0.25; } to { opacity: 1; } }
.aeh-social { display: flex; gap: 1rem; }
.aeh-social a { color: var(--text-secondary); display: inline-flex; transition: color 0.2s ease, transform 0.2s ease; }
.aeh-social a:hover { color: var(--teal-light); transform: translateY(-2px); }
.aeh-social svg { width: 22px; height: 22px; fill: currentColor; }
/* ===== responsive ===== */
@media (max-width: 900px) {
:root { --ae-nav-height: 56px; }
.aeh-nav, .aeh .aeh-cta { display: none; }
.aeh-mark { width: 26px; height: 26px; }
.aeh-word { font-size: 0.86rem; }
/* reading bar: with the CTA gone the divider separates nothing */
.aeh-reading .aeh-ctx-div { display: none; }
.aeh-lead { gap: 0.6rem; }
}
@media (min-width: 901px) {
.aeh-burger { display: none; }
}
/* ===== motion + print (site chrome conventions) ===== */
@media (prefers-reduced-motion: reduce) {
.aeh, .aeh-dd, .aeh-sheet, .aeh-caret, .aeh-acc-body, .aeh-acc-body > div,
body.has-ae-nav .progress-container { transition: none !important; }
.aeh-cta-swap { animation: none !important; }
.aeh-reading .aeh-ctx { animation: none !important; }
}
@media print {
.aeh, .aeh-scrim, .aeh-sheet { display: none !important; }
body.has-ae-nav { padding-top: 0; }
}