/* Unified page eyebrow / wayfinder — ported from Sigrix_new SxEyebrow. Renders: section › page · metric. Tokens are defined globally in base.html (theme-aware), so the section-link color flips light/dark automatically. */ .sx-eb { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-family: var(--sx-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; line-height: 1.4; } /* The `.sx a` prefix bumps specificity to (0,2,1) so the brand-colored section link beats `.sx a { color: inherit }` from sx-home.css, which loads after this file via the page's extra_head. Without it the link renders in inherited (dark) body text instead of brand blue. */ .sx a.sx-eb-s, a.sx-eb-s { color: var(--sx-brand-3); text-decoration: none; transition: color 120ms; } a.sx-eb-s:hover { text-decoration: underline; text-underline-offset: 3px; } .sx-eb-s--static { color: var(--sx-text-3); } /* The homepage's "current section" label (section="Sigrix marketplace" with no href) renders as a static span. The Site - Home prototype colors it brand blue in light theme via `.sx[data-theme="light"] .sx-eb-s`; mirror that here (data-theme lives on on the platform). Dark theme keeps it muted, as the prototype does. */ [data-theme="light"] .sx-eb-s--static { color: var(--sx-brand-3); } .sx-eb-chev { color: var(--sx-mute); padding: 0 8px; } .sx-eb-p { color: var(--sx-text-2); } .sx-eb-met { font-family: var(--sx-font-mono); color: var(--sx-text-3); font-weight: 500; letter-spacing: 0; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--sx-line-2); white-space: nowrap; } @media (max-width: 560px) { .sx-eb-met { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; } } /* Shared marketplace back-link breadcrumb — restyled to the wayfinder look while keeping its richer path (Marketplace / Type / @seller). Lives here (global) so it renders consistently on product/assistant/agent detail pages. */ .marketplace-back-link { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; font-family: var(--sx-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; line-height: 1.4; color: var(--sx-text-2); text-decoration: none; } /* Same specificity bump as .sx-eb-s above — keeps the back-link's section links brand blue on `.sx` detail pages instead of inheriting body text. */ .sx .marketplace-back-link a, .marketplace-back-link a { color: var(--sx-brand-3); text-decoration: none; transition: color 120ms; } .marketplace-back-link a:hover, .marketplace-back-link a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .marketplace-back-link span[aria-hidden] { font-size: 0; } .marketplace-back-link span[aria-hidden]::before { content: "›"; font-size: 13px; color: var(--sx-mute); }