feat: connect atlas pages with breadcrumb line

apps/web/src/components/AtlasBreadcrumbs.astro

@@ -0,0 +1,28 @@
+---
+type Item = { label: string; href?: string };
+const { items } = Astro.props as { items: Item[] };
+---
+
+<nav class="atlas-breadcrumbs content-grid" aria-label="Навигационная цепочка">
+  <ol>
+    {items.map((item, index) => <li>
+      <span class="atlas-breadcrumbs__knot" aria-hidden="true"></span>
+      {item.href ? <a href={item.href}>{item.label}</a> : <span aria-current="page">{item.label}</span>}
+      {index < items.length - 1 && <span class="atlas-breadcrumbs__line" aria-hidden="true"></span>}
+    </li>)}
+  </ol>
+</nav>
+
+<style>
+  .atlas-breadcrumbs { padding-top: 34px; }
+  ol { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
+  ol::-webkit-scrollbar { display: none; }
+  li { display: flex; align-items: center; flex: 0 0 auto; color: var(--text-muted); font-size: 12px; }
+  a, li > span[aria-current] { padding: 8px 9px; color: inherit; text-decoration: none; white-space: nowrap; }
+  a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }
+  li > span[aria-current] { color: var(--deep); font-weight: 750; }
+  .atlas-breadcrumbs__knot { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid #78918a; border-radius: 50%; background: var(--paper); }
+  li:last-child .atlas-breadcrumbs__knot { border-color: #6f922d; background: var(--lime); box-shadow: 0 0 0 4px #c9f45b26; }
+  .atlas-breadcrumbs__line { width: clamp(18px, 3vw, 42px); height: 1px; background: repeating-linear-gradient(90deg,#9aaca5 0 5px,transparent 5px 8px); }
+  @media (max-width: 720px) { .atlas-breadcrumbs { width: calc(100% - 28px); padding-top: 22px; } a, li > span[aria-current] { padding-inline: 7px; } }
+</style>