/* =========================================================== */ /* AG Header v2.8 — CANONICAL DROP-IN (slack-based auto-collapse) */ /* Source of truth: sectors/web/standards/AG-ADAPTIVE-HEADER-STANDARD.md (v2.8) */ /* + sectors/web/standards/AG-HEADER-STANDARD.md (nav-link Golden Touch v2.1) */ /* Extracted 2026-06-26 from the Clinic of Angels build-tier3 reference (the standard's */ /* cited reference implementation), token-genericized. Pairs with ag-header.js. */ /* */ /* Fixed blur bar (transparent over a dark hero, solid past it) + centered nav with the */ /* Golden-Touch hover (underline wipe under the word + arrow drop) + the AG Spiral */ /* hamburger that winds into an X + a body-level SLIDE-FROM-RIGHT drawer (.ag-drawer). */ /* The retired full-screen slide-down dropdown is NOT this (see the standard). */ /* */ /* PITFALL (scarred 2026-06-18): never put color-mix() inside a `background:` shorthand */ /* list — one unsupported value invalidates the whole declaration and the drawer renders */ /* transparent. Keep the opaque fill in background-color, gradients in background-image. */ /* */ /* REQUIRED MARKUP (see Nav reference in the standard): */ /* */ /* */ /* */ /* */ /* TOKEN CONTRACT (supplied by the build's brand kit + AG token system): */ /* layout: --header-bg --header-border --header-h --max-w --section-padding-inline */ /* --logo-size --space-md --space-lg --radius-md */ /* color: --text-primary --text-secondary --accent --brand-primary --brand --brand-700*/ /* --brand-rgb --ink --on-ink --on-ink-soft --c-white --c-mint --mint-glow */ /* --glass-08 --glass-12 --drawer-backdrop --drawer-close-border --scrim-45 --sh-sm */ /* type: --font-heading --font-display --font-body --fw-hero --fw-h2 --fw-h3 --text-sm*/ /* motion: --duration-quick --duration-medium --ease-satisfying --ease-soft --ease-settle*/ /* =========================================================== */ /* ---------------- Header ---------------- */ .ag-header { /* MACHINE-READABLE VERSION MARKER. A custom property, not a comment, because a comment does not survive minification and a build's own CSS bundle is what a gate actually has to read. Exact value, so "2.5" can never satisfy "2.7". Readable statically in source and in a bundle, and at runtime via getComputedStyle(header).getPropertyValue('--ag-header-version'). */ --ag-header-version: "2.8"; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 3px solid var(--header-border); transition: transform var(--duration-quick) var(--ease-satisfying), background-color var(--duration-medium) var(--ease-soft), border-color var(--duration-medium) var(--ease-soft); } .ag-header.is-hidden { transform: translateY(-100%); } /* Transparent over the dark homepage hero; reverts to the solid bar once past it */ .ag-header.is-transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .ag-header.is-transparent .ag-header__logo { filter: brightness(0) invert(1); } .ag-header.is-transparent .ag-header__nav a:not(.ag-button) { color: var(--glass-92); } @media (hover: hover) { .ag-header.is-transparent .ag-header__nav a:not(.ag-button):hover { color: var(--c-white); } } .ag-header.is-transparent .ag-header__nav a:not(.ag-button)::after { background: var(--c-white); } .ag-header.is-transparent .ag-nav-link-arrow { color: var(--c-white); } .ag-header.is-transparent .ag-hamburger { color: var(--c-white); } .ag-header__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: var(--header-h); padding: 14px var(--section-padding-inline); max-width: var(--max-w); margin-inline: auto; gap: var(--space-md); } .ag-header__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: var(--logo-size); font-weight: var(--fw-h2); color: var(--text-primary); letter-spacing: -0.01em; text-decoration: none; min-height: 49px; line-height: 1; } .ag-header__brand-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-primary); display: grid; place-items: center; color: var(--c-white); font-weight: var(--fw-hero); font-size: 21px; flex-shrink: 0; } .ag-header__logo { height: 50px; width: auto; display: block; } @media (max-width: 1200px) { .ag-header__logo { height: 44px; } } .ag-header__nav { display: flex; align-items: center; justify-self: center; gap: var(--space-lg); } /* AG Header nav-link hover (v2.1, 2026-06-18 — Owners Table "Golden Touch" recipe): underline draws left->right under the WORD only + a subtle 1.03 zoom + the arrow parked above the line drops DOWN and fades in on hover. Restrained, not jumpy. */ .ag-header__nav a:not(.ag-button) { position: relative; display: inline-flex; align-items: center; min-height: 49px; padding: 6px 1.1em 6px 0; overflow: hidden; font-size: var(--text-sm); font-weight: var(--fw-h3); color: var(--text-secondary); text-decoration: none; transition: color var(--duration-quick) var(--ease-satisfying); } .ag-nav-link-label { display: inline-block; transform-origin: center; transition: transform var(--duration-quick) var(--ease-satisfying); } /* underline under the word only, stops before the arrow gap */ .ag-header__nav a:not(.ag-button)::after { content: ""; position: absolute; left: 0; right: 1.1em; bottom: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-medium) var(--ease-satisfying); } /* arrow parked above the line; drops DOWN + fades in on hover */ .ag-nav-link-arrow { position: absolute; right: 0; top: 50%; color: var(--accent); font-size: 1em; line-height: 1; opacity: 0; transform: translateY(-180%); transition: transform var(--duration-medium) var(--ease-satisfying), opacity var(--duration-quick) var(--ease-soft); } @media (hover: hover) { .ag-header__nav a:not(.ag-button):hover { color: var(--accent); } .ag-header__nav a:not(.ag-button):hover .ag-nav-link-label { transform: scale(1.03); } .ag-header__nav a:not(.ag-button):hover::after { transform: scaleX(1); } .ag-header__nav a:not(.ag-button):hover .ag-nav-link-arrow { opacity: 1; transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce) { .ag-nav-link-label, .ag-nav-link-arrow, .ag-header__nav a:not(.ag-button)::after { transition: none; } } .ag-header__toggle { display: none; width: 49px; height: 49px; background: transparent; border: 0; cursor: pointer; padding: 0; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .ag-hamburger { position: relative; width: 28px; height: 14px; display: block; background: transparent; color: var(--text-primary); } .ag-hamburger::before, .ag-hamburger::after { content: ''; position: absolute; right: 0; height: 2px; background: currentColor; border-radius: 1px; transform-origin: right center; transition: transform 560ms var(--ease-settle); } /* Both bars are 28px wide and SCALE, so nothing animates `width` (a layout property that relayouts every frame on the main thread). The short bar is drawn by scaleX from a right origin, which looks identical. */ .ag-hamburger::before { top: 2px; width: 28px; transform: scaleX(0.5); } .ag-hamburger::after { top: 10px; width: 28px; transition-delay: 105ms; } body.is-dropdown-open .ag-hamburger::before { transform: translate(-3px, 4px) rotate(135deg) scaleX(0.7857); } body.is-dropdown-open .ag-hamburger::after { transform: translate(-3px, -4px) rotate(45deg) scaleX(0.7857); transition-delay: 105ms; } /* ---- Slack-based auto-collapse (Adaptive Header Standard v2.6) ---- The collapse point is MEASURED, not hardcoded: ag-header.js compares the inline nav's needed width against the room actually available and sets .is-collapsed / .is-expanded on .ag-header. Inline links live at ANY width where they genuinely fit (5 short links may hold to ~701px; 8 long links may collapse at 1200px) — no per-project breakpoint decision, no squeeze. No-JS fallback: fixed collapse at 900px. Phone floor: at <=700px the hamburger always wins, even if the links would fit. */ @media (max-width: 900px) { .ag-header__nav, .ag-header__row > .ag-button { display: none; } .ag-header__toggle { display: inline-flex; justify-self: end; } .ag-header__row { grid-template-columns: 1fr auto; padding-inline: 21px; } } .ag-header.is-collapsed .ag-header__nav, .ag-header.is-collapsed .ag-header__row > .ag-button { display: none; } .ag-header.is-collapsed .ag-header__toggle { display: inline-flex; justify-self: end; } .ag-header.is-collapsed .ag-header__row { grid-template-columns: 1fr auto; } /* Desktop is the BASE. The phone floor (the hamburger ALWAYS below the breakpoint) is the exception, expressed as max-width so the file keeps to exactly 900 and 1200. Value-identical apart from moving the pivot from the measured 701 to the canonical 900. */ .ag-header.is-expanded .ag-header__nav { display: flex; } .ag-header.is-expanded .ag-header__row > .ag-button { display: inline-flex; } .ag-header.is-expanded .ag-header__toggle { display: none; } .ag-header.is-expanded .ag-header__row { grid-template-columns: auto 1fr auto; } @media (max-width: 900px) { .ag-header.is-expanded .ag-header__nav { display: none; } .ag-header.is-expanded .ag-header__row > .ag-button { display: none; } .ag-header.is-expanded .ag-header__toggle { display: inline-flex; justify-self: end; } .ag-header.is-expanded .ag-header__row { grid-template-columns: 1fr auto; } } /* Invisible measuring probe (v2.6.1). Puts the row into INTRINSIC layout so every width the JS reads is the expanded layout's demand, never geometry the collapsed state itself created. Three things matter and all three are load-bearing: 1. Every column is intrinsic (`max-content`), so the brand is measured at its own width. Under the collapsed `1fr auto` the brand column stretches to fill and reads ~1177px at 1400px instead of ~218px, which is what made re-expansion impossible. See the note on the row rule below for why `auto` is not enough. 2. The nav and CTA are taken out of flow AND given `width: max-content`, so their width is their own content demand rather than whatever the current viewport allows. Without max-content the probe reported 744px at 400px and 1028px at 1400px for the same eight links. 3. The toggle is hidden so it cannot occupy a column during the measurement. The attribute is set and removed inside one synchronous block, so layout is forced but nothing is ever painted in this state. No flash, no layout shift. */ .ag-header[data-nav-measuring] .ag-header__row { /* max-content, NOT auto. An `auto` track STRETCHES to absorb free space when justify-content is normal, so `auto auto auto` made the brand measure 570px instead of 218px at 1400px: the same class of error as the `1fr` it replaced, just less obvious. justify-content:start removes any distribution entirely. */ grid-template-columns: max-content max-content max-content !important; justify-content: start !important; } .ag-header[data-nav-measuring] .ag-header__toggle { display: none !important; } /* Belt and braces: the brand reports its own content width whatever the track does. */ .ag-header[data-nav-measuring] .ag-header__brand { width: max-content !important; flex: none !important; } .ag-header[data-nav-measuring] .ag-header__nav, .ag-header[data-nav-measuring] .ag-header__row > .ag-button { display: flex !important; visibility: hidden !important; position: absolute !important; pointer-events: none !important; width: max-content !important; max-width: none !important; } /* ---------------- Slide-from-right drawer (Adaptive Header v2.5) ---------------- */ .ag-backdrop { position: fixed; inset: 0; background: var(--drawer-backdrop); z-index: 101; opacity: 0; pointer-events: none; transition: opacity var(--duration-quick) var(--ease-satisfying); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ag-backdrop[hidden] { display: none; } .ag-backdrop.is-open { opacity: 1; pointer-events: auto; } .ag-drawer { position: fixed; top: 0; right: 0; width: clamp(320px, 88vw, 440px); height: 100dvh; color: var(--on-ink); z-index: 110; transform: translateX(100%); background-color: var(--ink); background-image: radial-gradient(130% 80% at 100% 0%, rgb(var(--brand-rgb) / 0.26), transparent 58%), linear-gradient(180deg, var(--glass-06), transparent 46%); border-left: 1px solid var(--glass-12); transition: transform var(--duration-medium) var(--ease-satisfying); display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: -28px 0 72px var(--scrim-45); padding-bottom: env(safe-area-inset-bottom); } .ag-drawer[hidden] { display: none; } .ag-drawer.is-open { transform: translateX(0); } @supports not (height: 100dvh) { .ag-drawer { height: 100vh; } } .ag-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: calc(22px + env(safe-area-inset-top)) 28px 18px; border-bottom: 1px solid var(--glass-08); } .ag-drawer__brand { display: flex; align-items: center; gap: 10px; } .ag-drawer__logo { height: 58px; width: auto; display: block; } .ag-drawer__brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: var(--c-white); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; box-shadow: var(--sh-sm); } .ag-drawer__brand-name { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--on-ink); letter-spacing: 0.01em; } .ag-drawer__close { width: 49px; height: 49px; display: grid; place-items: center; background: var(--glass-08); border: 1px solid var(--drawer-close-border); border-radius: var(--radius-md); color: var(--on-ink); transition: background-color var(--duration-quick) var(--ease-satisfying), border-color var(--duration-quick) var(--ease-satisfying), transform var(--duration-quick) var(--ease-satisfying); touch-action: manipulation; cursor: pointer; } @media (hover: hover) { .ag-drawer__close:hover { background: var(--accent); border-color: var(--accent); color: var(--c-white); transform: rotate(90deg); } } .ag-drawer__list { list-style: none; margin: 0; padding: 28px 20px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 0 0 auto; } .ag-drawer__list li { opacity: 0; transform: translateX(var(--dist-lg)); transition: opacity var(--duration-quick) var(--ease-satisfying), transform var(--duration-quick) var(--ease-satisfying); transition-delay: calc(0.18s + (var(--i, 0) * 0.06s)); } .ag-drawer.is-open .ag-drawer__list li { opacity: 1; transform: none; } .ag-drawer__list a { position: relative; display: flex; align-items: baseline; gap: 14px; min-height: 49px; padding: 15px 16px; border-radius: 12px; transition: background-color var(--duration-quick) var(--ease-satisfying); } .ag-drawer__list a::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 56%; border-radius: 3px; background: var(--accent); transform: translateY(-50%) scaleY(0); transform-origin: center; transition: transform var(--duration-quick) var(--ease-satisfying); } .ag-drawer__index { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); opacity: 0.7; min-width: 1.7em; } .ag-drawer__label { flex: 1; font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 1.95rem); font-weight: 500; color: var(--on-ink); letter-spacing: 0.01em; line-height: 1.1; transition: color var(--duration-quick) var(--ease-satisfying), transform var(--duration-quick) var(--ease-satisfying); } .ag-drawer__chev { align-self: center; color: var(--accent); font-size: 1.15rem; opacity: 0; transform: translateX(-7px); transition: opacity var(--duration-quick) var(--ease-satisfying), transform var(--duration-quick) var(--ease-satisfying); } .ag-drawer__list a[aria-current="page"] { background: var(--glass-08); } .ag-drawer__list a[aria-current="page"]::before { transform: translateY(-50%) scaleY(1); } .ag-drawer__list a[aria-current="page"] .ag-drawer__chev { opacity: 1; transform: none; } @media (hover: hover) { .ag-drawer__list a:hover { background: var(--glass-08); } /* The nudge rides an inner span on TRANSFORM. padding-left is a layout property and relayouts the row every frame. */ .ag-drawer__list a:hover .ag-drawer__label { transform: translateX(6px); } .ag-drawer__list a:hover::before { transform: translateY(-50%) scaleY(1); } .ag-drawer__list a:hover .ag-drawer__label { color: var(--c-white); } .ag-drawer__list a:hover .ag-drawer__chev { opacity: 1; transform: none; } } .ag-drawer__meta { margin-top: auto; padding: 22px 28px 6px; } .ag-drawer__meta-label { font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .ag-drawer__info { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--glass-08); display: grid; gap: 13px; } .ag-drawer__info li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .ag-drawer__info-k { font-size: var(--text-sm); color: var(--on-ink-soft, var(--glass-50)); letter-spacing: 0.01em; } .ag-drawer__info-v { font-family: var(--font-display); font-size: 1.02rem; color: var(--on-ink); text-align: right; } .ag-drawer__foot { padding: 20px 28px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-12); display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .ag-drawer__cta { width: 100%; justify-content: center; } .ag-drawer__note { display: flex; align-items: center; gap: 9px; color: var(--on-ink); font-weight: 500; letter-spacing: 0.01em; font-size: var(--text-sm); margin: 0; } .ag-drawer__note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 0 4px var(--mint-glow); flex: none; } /* Two breakpoints deleted. The drawer is FLUID, so its width is a clamp and never a step: sizing must never use a breakpoint. */ @media (prefers-reduced-motion: reduce) { .ag-drawer, .ag-backdrop, .ag-drawer__list li { transition: none !important; } .ag-drawer__list li { transform: none; } }