/* header.css — top-nav Examples mega-menu styles (W6.F.A.1). * * Split out of app.css because the mega-menu is large enough (sections, * featured rows, per-tier list, CTA) to deserve its own file. app.css * retains the simpler .demo-nav primitives (brand, links, links-row, * focus rings, theme toggle). * * All values resolve through --demo-* tokens. Light + dark are inherited * from . The menu surface (.demo-nav__examples-menu) * uses --demo-bg-elevated + --demo-shadow-lg so it lifts off the nav. * * Mobile (< 768px) — chevron hides, menu becomes a full-width inline *

-style drawer immediately below the link. Same content, * stacked layout. The .demo-nav__links container is hidden via app.css * at the same breakpoint, so the drawer takes over. */ /* Wrapper around the Examples link + chevron. Positioned relatively so * the absolute-positioned menu pins underneath the trigger. */ .demo-nav__examples { position: relative; display: inline-flex; align-items: center; } .demo-nav__examples-link { /* inherits .demo-nav__link sizing — only the right padding shrinks * because the chevron sits inline next to the label. */ padding-right: var(--demo-space-1); } .demo-nav__examples-chevron { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: var(--demo-nav-h); margin-left: var(--demo-space-1); padding: 0; background: transparent; border: 0; color: var(--demo-text-muted); cursor: pointer; transition: color 120ms ease, transform 200ms ease; } .demo-nav__examples-chevron:hover { color: var(--demo-text-strong); } .demo-nav__examples-chevron:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; border-radius: var(--demo-radius-sm); } .demo-nav__examples-chevron .material-symbols-outlined { font-size: 20px; transition: transform 200ms ease; } .demo-nav__examples[data-open='true'] .demo-nav__examples-chevron .material-symbols-outlined { transform: rotate(180deg); } /* Menu surface — pinned right of trigger so the rightmost edge aligns * with the chevron. min-width keeps the layout from squashing on narrow * containers; max-width prevents the menu from becoming a bedsheet. */ .demo-nav__examples-menu { position: absolute; top: 100%; right: 0; z-index: 60; /* W6.F.B.4 — bumped from 420px to 480px to fit the 2-col tier * preview grid (each tier card holds a 56 px SVG thumb + label + * 1-line lede + count chip; 2 × ~210 px cards + gap fits 480 px * with the menu's existing padding). */ width: min(480px, calc(100vw - var(--demo-space-6) * 2)); max-height: calc(100vh - var(--demo-nav-h) - var(--demo-space-6)); margin-top: var(--demo-space-2); padding: var(--demo-space-4); background: var(--demo-bg-elevated); border: 1px solid var(--demo-border); border-radius: var(--demo-radius-lg); box-shadow: var(--demo-shadow-lg); overflow-y: auto; /* Elevation animation in / out — translateY adds purposeful motion; * opacity carries the visibility cue. Kept under 200ms per DESIGN * §7 motion budget. */ opacity: 0; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease; } .demo-nav__examples[data-open='true'] .demo-nav__examples-menu { opacity: 1; transform: translateY(0); } .demo-nav__examples-menu[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .demo-nav__examples-chevron .material-symbols-outlined, .demo-nav__examples-menu { transition: none; } } .demo-nav__menu-section + .demo-nav__menu-section { margin-top: var(--demo-space-4); padding-top: var(--demo-space-4); border-top: 1px solid var(--demo-border); } .demo-nav__menu-eyebrow { margin: 0 0 var(--demo-space-2); font-size: var(--demo-fs-xs); font-weight: var(--demo-fw-semibold); letter-spacing: var(--demo-ls-caps); text-transform: uppercase; color: var(--demo-text-muted); } .demo-nav__menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--demo-space-1); } .demo-nav__menu-item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--demo-space-3); padding: var(--demo-space-2) var(--demo-space-3); color: var(--demo-text); text-decoration: none; border-radius: var(--demo-radius-md); transition: background 120ms ease, color 120ms ease; } .demo-nav__menu-item:hover { background: var(--demo-bg); color: var(--demo-text-strong); } .demo-nav__menu-item:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: -2px; background: var(--demo-bg); } /* Tier rows are just label + count; no leading icon column. */ .demo-nav__menu-item--tier { grid-template-columns: 1fr auto; } .demo-nav__menu-item--tier.is-pending .demo-nav__menu-count { color: var(--demo-text-muted); font-style: italic; } .demo-nav__menu-icon { font-size: 20px; color: var(--demo-text-muted); } .demo-nav__menu-item:hover .demo-nav__menu-icon { color: var(--demo-accent); } .demo-nav__menu-label { font-size: var(--demo-fs-sm); font-weight: var(--demo-fw-medium); line-height: var(--demo-lh-tight); } .demo-nav__menu-tier { font-size: 11px; white-space: nowrap; } .demo-nav__menu-count { font-size: var(--demo-fs-xs); color: var(--demo-text-secondary); } .demo-nav__menu-cta { margin-top: var(--demo-space-4); width: 100%; justify-content: center; } /* Mobile: chevron hides; the wrapper itself absorbs the link. The links * container is already hidden by app.css at this breakpoint, so the * mega-menu is currently mobile-disabled. F.B.4 will introduce a * dedicated

drawer; F.A.1 ships desktop only with a graceful * keyboard fallback (Esc still closes if the menu is forced open via * dev tools). */ @media (max-width: 768px) { .demo-nav__examples-chevron { display: none; } .demo-nav__examples-menu { display: none; } } /* ──────────────────────────────────────────────────────────────────── * W6.F.B.4 — Per-tier preview grid (replaces the old "Featured" rows). * * 2-column grid of 6 cards (3 rows × 2 cols at >= 480 px menu width). * Each card carries a ZERO-TEXT 56 px tier-illustration SVG thumb + * tier label + 1-line lede + count pill. The SVG inherits the card's * `color` so currentColor strokes flip with the active theme; one * `var(--demo-accent)` fill per illustration paints the focal element. * ──────────────────────────────────────────────────────────────── */ .demo-nav__tier-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--demo-space-2); } .demo-nav__tier-card { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: var(--demo-space-3); padding: var(--demo-space-2) var(--demo-space-3); text-decoration: none; color: var(--demo-text); border-radius: var(--demo-radius-md); border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; } .demo-nav__tier-card:hover { background: var(--demo-bg); border-color: var(--demo-border); transform: translateY(-1px); } .demo-nav__tier-card:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: -2px; background: var(--demo-bg); } .demo-nav__tier-thumb { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--demo-radius-md); background: var(--demo-bg); color: var(--demo-text-muted); border: 1px solid var(--demo-border); flex-shrink: 0; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .demo-nav__tier-thumb svg { width: 40px; height: 40px; display: block; } .demo-nav__tier-card:hover .demo-nav__tier-thumb { color: var(--demo-text); border-color: var(--demo-accent); background: var(--demo-accent-soft); } .demo-nav__tier-body { display: grid; gap: 2px; min-width: 0; /* allow lede to ellipsize without busting the column */ } .demo-nav__tier-label-row { display: flex; align-items: center; gap: var(--demo-space-2); justify-content: space-between; } .demo-nav__tier-label { font-size: var(--demo-fs-sm); font-weight: var(--demo-fw-semibold); color: var(--demo-text); line-height: var(--demo-lh-tight); } .demo-nav__tier-count { /* Compact count badge — number-only so the lede line keeps its * breathing room. The full "5 examples" copy lives in the * aria-label so screen readers + tooltip layers still hear it. */ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: var(--demo-radius-pill); background: var(--demo-bg); color: var(--demo-text-muted); border: 1px solid var(--demo-border); font-size: 11px; font-weight: var(--demo-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } .demo-nav__tier-card:hover .demo-nav__tier-count { color: var(--demo-text); border-color: var(--demo-text-muted); } .demo-nav__tier-lede { font-size: var(--demo-fs-xs); color: var(--demo-text-secondary); line-height: var(--demo-lh-body); /* Single line, ellipsize if it overflows the card column. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Reduce-motion safety — drop hover lift + transition. */ @media (prefers-reduced-motion: reduce) { .demo-nav__tier-card, .demo-nav__tier-thumb { transition: none; } .demo-nav__tier-card:hover { transform: none; } } /* ----------------------------------------------------------------- * * W8 — Docs mega-menu (companion to the Examples menu above). * * The shape is a near-clone of `.demo-nav__examples`, but with a * compact featured-row stack (icon + title + lede per row) and a * per-track linklist. Same focus, hover, animation budget. The * surrounding nav row hides the chevron at <768 px — the mobile * drawer surfaces "Docs" as a plain link and the buyer reaches * tracks via the docs landing page anchors. * ----------------------------------------------------------------- */ .demo-nav__docs { position: relative; display: inline-flex; align-items: center; } .demo-nav__docs-link { padding-right: var(--demo-space-1); } .demo-nav__docs-chevron { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: var(--demo-nav-h); margin-left: var(--demo-space-1); padding: 0; background: transparent; border: 0; color: var(--demo-text-muted); cursor: pointer; transition: color 120ms ease, transform 200ms ease; } .demo-nav__docs-chevron:hover { color: var(--demo-text-strong); } .demo-nav__docs-chevron:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; border-radius: var(--demo-radius-sm); } .demo-nav__docs-chevron .material-symbols-outlined { font-size: 20px; transition: transform 200ms ease; } .demo-nav__docs[data-open='true'] .demo-nav__docs-chevron .material-symbols-outlined { transform: rotate(180deg); } .demo-nav__docs-menu { position: absolute; top: 100%; right: 0; z-index: 60; width: min(440px, calc(100vw - var(--demo-space-6) * 2)); max-height: calc(100vh - var(--demo-nav-h) - var(--demo-space-6)); margin-top: var(--demo-space-2); padding: var(--demo-space-4); background: var(--demo-bg-elevated); border: 1px solid var(--demo-border); border-radius: var(--demo-radius-lg); box-shadow: var(--demo-shadow-lg); overflow-y: auto; opacity: 0; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease; } .demo-nav__docs[data-open='true'] .demo-nav__docs-menu { opacity: 1; transform: translateY(0); } .demo-nav__docs-menu[hidden] { display: none; } /* Featured rows — 2-col grid; each row icon + title + lede. */ .demo-nav__docs-featured { list-style: none; margin: 0 0 var(--demo-space-3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--demo-space-2); } .demo-nav__docs-feature { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--demo-space-2); padding: var(--demo-space-3); border-radius: var(--demo-radius-md); border: 1px solid var(--demo-border-subtle); background: var(--demo-bg); text-decoration: none; color: inherit; transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; } .demo-nav__docs-feature:hover { border-color: color-mix(in srgb, var(--demo-accent) 40%, var(--demo-border-subtle)); background: color-mix(in srgb, var(--demo-accent) 5%, var(--demo-bg)); transform: translateY(-1px); } .demo-nav__docs-feature:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; } .demo-nav__docs-feature-icon { font-size: 22px; color: var(--demo-accent); width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--demo-radius-sm); background: color-mix(in srgb, var(--demo-accent) 12%, transparent); } .demo-nav__docs-feature-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .demo-nav__docs-feature-title { font-size: var(--demo-fs-sm); font-weight: 600; color: var(--demo-text-strong); } .demo-nav__docs-feature-lede { font-size: var(--demo-fs-xs); color: var(--demo-text-secondary); line-height: var(--demo-lh-body); } .demo-nav__docs-track-icon { font-size: 18px; color: var(--demo-accent); vertical-align: middle; margin-right: 0.25em; } /* Docs-track rows have only label + count (no leading icon column) — the * track icon lives INSIDE the label as an inline glyph. Override the base * 3-col grid the same way tier rows do, so the label gets the 1fr cell * and isn't crammed into the leading 24px slot by grid auto-placement. */ .demo-nav__menu-item--track { grid-template-columns: 1fr auto; } .demo-nav__menu-item--track .demo-nav__menu-label { display: inline-flex; align-items: center; gap: var(--demo-space-1); min-width: 0; } @media (prefers-reduced-motion: reduce) { .demo-nav__docs-chevron .material-symbols-outlined, .demo-nav__docs-menu, .demo-nav__docs-feature { transition: none; } .demo-nav__docs-feature:hover { transform: none; } } @media (max-width: 767px) { .demo-nav__docs-chevron { display: none; } .demo-nav__docs-menu { display: none; } }