@import url('lrl-tokens.css'); /* ========================================================= Learning Rewired Lab — site-wide standards layer Adds: (1) a unified pulsing "live" dot to every eyebrow/kicker label, colored to match that eyebrow's own text color, and (2) one consistent breadcrumb design across every page, regardless of the legacy per-template class name in use. Loaded last in so it wins ties with per-page CSS. ========================================================= */ /* ---------- eyebrow / kicker live dot ---------- Matches the site's own established dot pattern (lr-pulse, st-pulse, il-blip, cmp-pulse, etc. — a simple opacity fade), so the new dot looks like the same component already used across most pages. */ .lrl-dot, .lrl-dot { display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-right: 8px; margin-top: -2px; border-radius: 50%; background: currentColor; animation: lrl-dot-pulse 2.4s ease-in-out infinite; flex: none; } @keyframes lrl-dot-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lrl-dot { animation: none; } } /* ---------- unified breadcrumb design ---------- */ /* Doubled attribute selector = extra specificity so this beats any single-class rule from a page's own stylesheet. */ [class*="breadcrumb"][class*="breadcrumb"] { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 0 26px !important; padding: 0 !important; list-style: none !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #94a3b8 !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; } [class*="breadcrumb"][class*="breadcrumb"] a { color: #475569 !important; text-decoration: none !important; font-weight: 700 !important; } [class*="breadcrumb"][class*="breadcrumb"] a:hover { color: #0ea5c2 !important; } [class*="breadcrumb"][class*="breadcrumb"] strong, [class*="breadcrumb"][class*="breadcrumb"] [aria-current] { color: #07111f !important; font-weight: 800 !important; } [class*="breadcrumb"][class*="breadcrumb"] span:not([aria-hidden]):not([aria-current]) { color: #07111f !important; font-weight: 800 !important; } [class*="breadcrumb"][class*="breadcrumb"] span[aria-hidden], [class*="breadcrumb"][class*="breadcrumb"] i[aria-hidden] { color: var(--lrl-line, #e6ebf1) !important; font-weight: 700 !important; } /* Lab Goods remains discoverable through Community and the footer. Community stays visible as a primary trust-and-participation destination. */ @media (min-width: 980px) { .lrl-primary-nav-v38 > a[href="/lab-goods/"] { display: none !important; } } /* Ecosystem orientation: a restrained connective line between LRI and the page's specific job. It preserves each page's own visual identity. */ .lrl-context-strip { position: relative; z-index: 20; border-bottom: 1px solid #e6ebf1; background: #f8fbfc; color: #475569; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } .lrl-context-strip__inner { width: min(1180px, calc(100% - 52px)); min-height: 44px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .lrl-context-strip p { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.4; } .lrl-context-strip strong { color: #07111f; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .lrl-context-strip a { flex: none; color: #0789a2; font-size: 12px; font-weight: 800; text-decoration: none; } .lrl-context-strip a:hover { color: #0f766e; } @media (max-width: 720px) { .lrl-context-strip__inner { width: min(100% - 32px, 1180px); padding: 10px 0; align-items: flex-start; } .lrl-context-strip p { display: grid; gap: 2px; } .lrl-context-strip a { font-size: 0; padding-top: 2px; } .lrl-context-strip a span { font-size: 18px; } }