/* nav.css - shared product navigation rail for homeaglow-admin. Injected into index.html (Google SERP), yelp.html, crunchbase.html. Styling consumes ONLY the semantic tokens defined in theme.css (--bg, --surface*, --border*, --text*, --accent*, --radius*, --space*, --shadow*, --dur/--ease, --font-*, --text-*, --fw-*). No primitives, no hardcoded colors. The rail wears the Claude warm-light design language: ivory background differentiated from content by a single hairline border, pill-style active rows, lighter non-uppercase section labels, and a bottom account block with a round initials avatar. */ :root { --nav-rail-width: 248px; --nav-rail-width-collapsed: 64px; } /* Smooth cross-document navigation between the product pages (Chrome). The rail is given a stable view-transition-name so it does not cross-fade — only the page content transitions. Degrades to a normal navigation where unsupported. */ @view-transition { navigation: auto; } .hg-rail { view-transition-name: hg-rail; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; } ::view-transition-group(hg-rail) { animation-duration: 0s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Shift page content right of the fixed rail. Added to only when the rail is mounted (authenticated app shell). Login / invite screens never get this class, so they stay full width with no rail. */ body.has-nav-rail { padding-left: var(--nav-rail-width); transition: padding-left var(--dur) var(--ease); } /* Collapsed shell: the rail shrinks to an icon-only column and the content padding mirrors it. Width + padding animate smoothly via the transitions on this rule and on .hg-rail. */ body.has-nav-rail-collapsed { padding-left: var(--nav-rail-width-collapsed); } .hg-rail { position: fixed; top: 0; left: 0; width: var(--nav-rail-width); height: 100vh; /* Claude differentiates the rail from content with just a hairline border and minimal contrast — the rail shares the page's ivory canvas. */ background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 40; font-family: var(--font-sans); overflow-x: hidden; overflow-y: auto; view-transition-name: hg-rail; transition: width var(--dur) var(--ease); } body.has-nav-rail-collapsed .hg-rail { width: var(--nav-rail-width-collapsed); } /* Collapse toggle: a small ghost icon button pinned at the top of the rail. currentColor inline SVG so it inherits the text tone. Stays visible in both states so the rail can always be re-expanded. */ .hg-rail-collapse { display: flex; align-items: center; justify-content: flex-end; padding: var(--space-2) var(--space-3) 0; } body.has-nav-rail-collapsed .hg-rail-collapse { justify-content: center; } .hg-rail-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .hg-rail-collapse-btn:hover { color: var(--text); background: var(--surface-hover); } .hg-rail-collapse-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } .hg-rail-collapse-btn svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .hg-rail-nav { flex: 1 1 auto; padding: var(--space-3) 0 var(--space-2); } .hg-rail-product { /* one product group: header row + its sub-view rows */ } /* Product header row: brand logo + product name. Lighter, non-uppercase look in the Claude language — a faint section label rather than a shouting caps band. */ .hg-rail-product-head { display: flex; align-items: center; gap: 10px; margin: 0 var(--space-2); padding: 7px 10px 6px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: normal; color: var(--text-faint); text-decoration: none; cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .hg-rail-product-head:hover { color: var(--text); text-decoration: none; } /* Active product: the active ROW pill carries the signal now, so the header only lifts to the primary text tone (no tinted band). */ .hg-rail-product.is-active > .hg-rail-product-head { color: var(--text); } /* Brand icon wrapper. A fixed optical box keeps every row aligned; the SVG inside is sized per-icon (see .hg-icon-* below) so the marks read as equal visual weight despite different glyph geometry. Brand product glyphs keep their OWN brand colors (the SVGs set their own fill via the markup); this wrapper's currentColor only drives the monochrome admin gear. */ .hg-rail-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* The inline brand SVGs are single-path marks that inherit fill:currentColor from this wrapper. We render them at the solid primary text tone so the Google / Yelp / Crunchbase glyphs read crisp and present (NOT desaturated to the faint label gray), and we never shift them on hover/active — the brand marks are left alone; only the admin gear tracks state below. Brand hex is intentionally not used here (semantic-tokens-only rule). */ color: var(--text); } /* Only the admin gear is monochrome chrome that tracks the active/text tone; it starts fainter (it's app chrome, not a product brand) and lifts on hover or when its group is active. The brand marks above never change tone. */ .hg-icon-admin { color: var(--text-faint); } .hg-rail-product.is-active .hg-icon-admin, .hg-rail-product-head:hover .hg-icon-admin { color: var(--text); } .hg-rail-icon svg { display: block; fill: currentColor; } /* Optical sizing (hard requirement). The Crunchbase mark is a full-bleed solid rounded square, so at a uniform box it looks heavier than the open Google "G" and the Yelp burst. Render the solid square smaller than the open glyphs so all three carry equal visual weight in the rail. */ .hg-icon-google svg { width: 16px; height: 16px; } .hg-icon-yelp svg { width: 18px; height: 18px; } .hg-icon-crunchbase svg { width: 15px; height: 15px; } .hg-icon-admin svg { width: 16px; height: 16px; } /* Reports (solid bar-chart) + Reddit (Snoo) need their own optical sizes too — without these they fall back to the 20px box and read oversized next to the brand marks. Tuned so all six glyphs carry equal visual weight in the rail. */ .hg-icon-reports svg { width: 17px; height: 17px; } .hg-icon-reddit svg { width: 16px; height: 16px; } /* Sub-view rows, indented under their product. Pill style: full-width rounded rows with horizontal margin, so the active fill reads as a soft pill. */ .hg-rail-views { display: flex; flex-direction: column; padding-bottom: var(--space-1); } .hg-rail-view { display: block; margin: 1px var(--space-2); padding: 7px 12px 7px 38px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; cursor: pointer; /* The 2px left accent bar is gone in the Claude language; the pill fill is the active signal. Keep a transparent left border for layout parity. */ border-left: 2px solid transparent; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .hg-rail-view:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; } /* Active sub-view: soft clay-tint pill, clay contrast text, no left bar. */ .hg-rail-view.is-active { color: var(--accent-contrast-text); background: var(--accent-tint); border-left-color: transparent; font-weight: var(--fw-semibold); } /* Footer: signed-in account block — a round initials avatar + the email, in a row, like Claude's pinned account row. The email IS the popover trigger (a real