/* Agentic Demand - Motion + interaction layer. Linked on every page directly after design-tokens.css. Pairs with motion.js. Rules this file keeps, and why: - Animate transform and opacity only. Never top, left, width or height. - Nothing here hides content on its own. Reveal styles apply only after motion.js adds .agd-motion to , and motion.js never adds it under prefers-reduced-motion. With JS off every page renders static and complete. - Every looping or moving effect sits inside @media (prefers-reduced-motion: no-preference). - Scoped transition properties only. Never "transition: all". - Class prefix is agd-. Ad blockers hide .ad-* and blank the page. Reference: zenity.io runs its motion as plain CSS keyframes, ushur.ai as a few script tags on static HTML. Neither needs a framework, and neither does this. Measured 2026-09-14. */ :root { --agd-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --agd-dur-fast: 150ms; --agd-dur-base: 250ms; --agd-dur-reveal: 600ms; --agd-reveal-shift: 20px; /* Real nav height. motion.js measures it; these defaults match site-chrome.css (24px padding x2 + 40px logo + 1px border) so sticky offsets are right even before the script runs. */ --agd-nav-h: 89px; } @media (max-width: 860px) { :root { --agd-nav-h: 85px; } } /* ------------------------------------------------------------------ */ /* Utilities */ /* ------------------------------------------------------------------ */ .agd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .agd-nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; } html { scroll-padding-top: calc(var(--agd-nav-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ */ /* 1. Sticky nav with a frosted state once the page scrolls */ /* ------------------------------------------------------------------ */ header.nav { position: sticky; top: 0; transition: background-color var(--agd-dur-base) var(--agd-ease), border-color var(--agd-dur-base) var(--agd-ease), box-shadow var(--agd-dur-base) var(--agd-ease); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { header.nav.is-scrolled { background-color: rgba(250, 250, 248, 0.78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(15, 61, 46, 0.04), 0 8px 24px rgba(15, 61, 46, 0.05); } } /* Mobile menu open: lift the header above the overlay so the close button stays tappable. Before this, the overlay (z-index 200) covered the header's own stacking context (z-index 100) and only a link or Escape closed it. */ header.nav:has(.nav-hamburger.is-open) { z-index: 210; background-color: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } header.nav:has(.nav-hamburger.is-open) .nav-brand { visibility: hidden; } .nav-hamburger.is-open span { background: var(--color-text-invert); } header.nav:has(.nav-hamburger.is-open) :focus-visible { outline-color: var(--color-accent); } /* Sticky side columns sit below the sticky nav instead of under it. */ html .article-sidebar, html .blog-sidebar, html .feature-stats, html .term-aside { top: calc(var(--agd-nav-h) + 24px); } /* Feature pages also carry a sticky section bar (49px) under the nav. */ html main[data-agd-toc] .feature-stats { top: calc(var(--agd-nav-h) + 73px); } /* ------------------------------------------------------------------ */ /* 2. Scroll reveal */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .agd-motion .agd-reveal { opacity: 0; transform: translate3d(0, var(--agd-reveal-shift), 0); transition: opacity var(--agd-dur-reveal) var(--agd-ease) var(--agd-delay, 0ms), transform var(--agd-dur-reveal) var(--agd-ease) var(--agd-delay, 0ms); } .agd-motion .agd-reveal.is-animating { will-change: opacity, transform; } .agd-motion .agd-reveal.is-in { opacity: 1; transform: none; } } @media print { .agd-motion .agd-reveal { opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------------ */ /* 4. Section nav */ /* ------------------------------------------------------------------ */ .agd-secnav__list { list-style: none; margin: 0; padding: 0; } .agd-secnav__link { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text-muted); transition: color var(--agd-dur-fast) var(--agd-ease), background-color var(--agd-dur-fast) var(--agd-ease); } .agd-secnav__link::after { content: ""; position: absolute; background: var(--color-accent); transition: transform var(--agd-dur-base) var(--agd-ease); } .agd-secnav__link:hover { color: var(--color-brand); } .agd-secnav__link[aria-current="true"] { color: var(--color-brand); } .agd-secnav__link[aria-disabled="true"] { opacity: 0.35; pointer-events: none; } .agd-secnav__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-muted); } /* 4a. Letter rail (glossary). Sticks under the nav while the list scrolls. */ .agd-secnav--letters { position: sticky; top: var(--agd-nav-h); z-index: 40; margin: 0 0 var(--space-5); background: rgba(250, 250, 248, 0.92); border-bottom: 1px solid var(--color-border); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .agd-secnav--letters { background: rgba(250, 250, 248, 0.78); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } } .agd-secnav--letters { height: 51px; } .agd-secnav--letters .agd-secnav__list { display: flex; gap: 2px; height: 50px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; } .agd-secnav--letters .agd-secnav__list::-webkit-scrollbar { display: none; } .agd-secnav--letters .agd-secnav__link { justify-content: center; min-width: 34px; height: 34px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; font-feature-settings: "tnum" 1, "lnum" 1; border-radius: var(--radius-sm); } .agd-secnav--letters .agd-secnav__link::after { left: 10px; right: 10px; bottom: 4px; height: 2px; transform: scaleX(0); } .agd-secnav--letters .agd-secnav__link:hover { background: var(--color-bg-soft); } .agd-secnav--letters .agd-secnav__link[aria-current="true"]::after { transform: scaleX(1); } [data-agd-letter] { scroll-margin-top: 60px; } /* the rail (51px) plus a gap; html adds the nav */ /* Headings land clear of the sticky nav and any section bar. html already pads the scroll by the nav height, so these add only the extra gap. Adding the nav height here too counted it twice and mislabeled the current section. */ .article-body h2, .blog-prose h2 { scroll-margin-top: 24px; } [data-agd-toc] h2 { scroll-margin-top: 72px; } @media (max-width: 960px) { .article-body h2, .blog-prose h2 { scroll-margin-top: 72px; } } /* 4b. "On this page" in an article sidebar (desktop). */ .agd-secnav--toc { /* Appended after the sidebar's own content, so inserting it moves nothing (CLS). */ margin: var(--space-6) 0 0; } .agd-secnav--toc .agd-secnav__list { display: flex; flex-direction: column; max-height: 44vh; overflow-y: auto; scrollbar-width: thin; } .agd-secnav--toc .agd-secnav__link { display: flex; padding: 7px 0 7px 14px; font-size: 0.875rem; font-weight: 500; line-height: 1.4; border-left: 2px solid var(--color-border); } .agd-secnav--toc .agd-secnav__link::after { left: -2px; top: 0; bottom: 0; width: 2px; transform: scaleY(0); transform-origin: top; } .agd-secnav--toc .agd-secnav__link[aria-current="true"]::after { transform: scaleY(1); } /* 4c. Horizontal bar at the top of the article. Phones and tablets, or any long page without a sidebar. Scrolls sideways inside itself, never the page. */ .agd-secnav--bar { position: sticky; top: var(--agd-nav-h); z-index: 40; margin: 0 0 var(--space-6); max-width: 100%; background: rgba(250, 250, 248, 0.94); border-bottom: 1px solid var(--color-border); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .agd-secnav--bar { background: rgba(250, 250, 248, 0.8); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } } .agd-secnav--bar { height: 49px; } .agd-secnav--bar .agd-secnav__list > li { display: flex; } .agd-secnav--bar .agd-secnav__list { display: flex; height: 100%; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .agd-secnav--bar .agd-secnav__list::-webkit-scrollbar { display: none; } /* Blog prose spaces siblings with `> * + *`; a bar first in line (hidden or not) must not add that gap to the real first paragraph. */ .blog-prose > .agd-secnav--bar + *, .article-body > .agd-secnav--bar + * { margin-top: 0; } .agd-secnav--bar .agd-secnav__link { padding: 0; white-space: nowrap; font-size: 0.875rem; font-weight: 500; } .agd-secnav--bar .agd-secnav__link::after { left: 0; right: 0; bottom: -1px; height: 2px; transform: scaleX(0); transform-origin: left; } .agd-secnav--bar .agd-secnav__link[aria-current="true"]::after { transform: scaleX(1); } @media (min-width: 961px) { .agd-secnav--bar:not(.agd-secnav--bar-always) { display: none; } } /* A page-level bar placed straight inside
(pages opted in with data-agd-toc and no sidebar): full-bleed ground, links on the container grid. */ main > .agd-secnav--bar { margin: 0; padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter))); padding-right: var(--gutter); } @media (max-width: 960px) { .agd-secnav--toc { display: none; } } /* 4d. Reserve the space for navs motion.js inserts, so content below them never moves when they arrive (CLS). Only where scripting runs; :has() drops each reservation the moment the real element is in place. Heights match 4a-4c. */ @media (scripting: enabled) { .agd-container:has(> #glossary-list):not(:has(> .agd-secnav--letters))::before { content: ""; display: block; height: 75px; } main[data-agd-toc]:not(.agd-toc-none):not(:has(> .agd-secnav--bar))::before { content: ""; display: block; height: 49px; } } @media (scripting: enabled) and (max-width: 960px) { .blog-prose:not(.agd-toc-none):not(:has(> .agd-secnav--bar)):not(:has(.blog-toc))::before, .article-body:not(.agd-toc-none):not(:has(> .agd-secnav--bar)):not(:has(.blog-toc))::before { content: ""; display: block; height: 81px; } } /* ------------------------------------------------------------------ */ /* 5. Depth on dark surfaces */ /* A layered wash painted by ::before under the content. Forest and */ /* dark carry the surface; mint appears only as a faint glow at one */ /* corner, never as a second background color. */ /* ------------------------------------------------------------------ */ .agd-section--invert, .agd-stat-card, .article-cta-section, .blog-cta-band, .video-cta, footer.footer { position: relative; isolation: isolate; } .agd-section--invert::before, .agd-stat-card::before, .article-cta-section::before, .blog-cta-band::before, .video-cta::before, footer.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 90% at 88% 0%, rgba(52, 211, 153, 0.11) 0%, rgba(52, 211, 153, 0) 62%), radial-gradient(60% 80% at 8% 100%, rgba(10, 31, 23, 0.6) 0%, rgba(10, 31, 23, 0) 70%), linear-gradient(180deg, rgba(22, 74, 56, 0.35) 0%, rgba(10, 31, 23, 0) 55%); } footer.footer::before { background: radial-gradient(50% 120% at 100% 0%, rgba(52, 211, 153, 0.07) 0%, rgba(52, 211, 153, 0) 60%), linear-gradient(180deg, rgba(10, 31, 23, 0) 0%, rgba(10, 31, 23, 0.45) 100%); } /* Glass card, for anything that floats over a dark surface. */ .agd-glass { background: rgba(10, 31, 23, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); } /* ------------------------------------------------------------------ */ /* 6. Hover and focus */ /* ------------------------------------------------------------------ */ /* Focus: mint alone is 1.9:1 on the warm ground, under the 3:1 a focus ring needs. Forest on light, mint on dark. */ :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; } .agd-section--invert :focus-visible, .agd-stat-card :focus-visible, footer :focus-visible, .nav-mobile :focus-visible, .ask-ai :focus-visible, .agd-hero-geo :focus-visible, .article-cta-section :focus-visible, .blog-cta-band :focus-visible, .video-cta :focus-visible, .pricing :focus-visible { outline-color: var(--color-accent); } /* Links in running text: the underline darkens instead of the whole link jumping. */ a { transition: color var(--agd-dur-fast) var(--agd-ease), text-decoration-color var(--agd-dur-fast) var(--agd-ease), opacity var(--agd-dur-fast) var(--agd-ease); } p a:hover, li a:hover { text-decoration-color: currentColor; } /* Primary nav: a mint rule grows under the hovered or current link. */ .nav-links a:not(.agd-btn) { position: relative; } .nav-links a:not(.agd-btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--agd-dur-base) var(--agd-ease); } .nav-links a:not(.agd-btn):hover::after, .nav-links a:not(.agd-btn):focus-visible::after, .nav-links a[aria-current="page"]:not(.agd-btn)::after { transform: scaleX(1); } /* Buttons. */ .agd-btn, .hh-btn { transition: background-color var(--agd-dur-fast) var(--agd-ease), color var(--agd-dur-fast) var(--agd-ease), border-color var(--agd-dur-fast) var(--agd-ease), box-shadow var(--agd-dur-base) var(--agd-ease), transform var(--agd-dur-base) var(--agd-ease); } .agd-btn--primary:hover, .hh-btn--primary:hover { box-shadow: 0 10px 28px rgba(15, 61, 46, 0.22); } .agd-btn--secondary:hover, .hh-btn--secondary:hover { box-shadow: 0 6px 18px rgba(15, 61, 46, 0.08); } .agd-btn--accent:hover { box-shadow: 0 8px 30px rgba(52, 211, 153, 0.2); } @media (prefers-reduced-motion: no-preference) { .agd-btn:hover, .hh-btn:hover { transform: translateY(-1px); } .agd-btn:active, .hh-btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; } /* Tile call-to-action nudges toward its arrow. */ .tile-cta { display: inline-block; transition: transform var(--agd-dur-base) var(--agd-ease), color var(--agd-dur-fast) var(--agd-ease); } .agd-tile:hover .tile-cta { transform: translateX(4px); } } /* Cards that already lift get the brand card shadow and a mint edge. */ .problem-card, .stat, .glossary-list a, .blog-card, .resource-card, .case-card { transition: transform var(--agd-dur-base) var(--agd-ease), box-shadow var(--agd-dur-base) var(--agd-ease), border-color var(--agd-dur-fast) var(--agd-ease), background-color var(--agd-dur-fast) var(--agd-ease); } .problem-card:hover, .glossary-list a:hover { border-color: var(--color-accent); } /* FAQ disclosure rows. */ details > summary { transition: color var(--agd-dur-fast) var(--agd-ease); } details > summary:hover { color: var(--color-brand) !important; } details > summary > span:last-child { transition: transform var(--agd-dur-base) var(--agd-ease), color var(--agd-dur-fast) var(--agd-ease); } details > summary:hover > span:last-child { color: var(--color-accent-deep) !important; } /* Footer links on dark. */ footer a { transition: color var(--agd-dur-fast) var(--agd-ease), opacity var(--agd-dur-fast) var(--agd-ease); } /* BRAND.md: the lockup is never under 120px wide. At 32px tall it is 116.5px. */ footer.footer img { height: 34px; } /* Reduced motion: nothing slides or grows, states change instantly. */ @media (prefers-reduced-motion: reduce) { .agd-secnav__link::after, .nav-links a:not(.agd-btn)::after, .agd-btn, .hh-btn, details > summary > span:last-child { transition: none !important; } }