feat(footer): hover-pill credit «Сделано в hhivp.com» с border вместо плотного фона

Паттерн Cuberto: только mark по умолчанию, при hover/focus раскрывается с текстом справа. SVG-mark в currentColor наследует цвет родителя — гармонирует с любой темой. Border 1px solid currentColor вместо плотного чёрного фона.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

public/hhivp-mark.svg

@@ -1,6 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="hhivp">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92" role="img" aria-label="hhivp" fill="currentColor">
-  <rect width="100" height="100" rx="22" fill="#0a0a0a"/>
+  <g transform="translate(-4 -2)">
-  <g transform="translate(4 8)" fill="#fff">
     <path d="M86.316,43.946V26.322h-8.331v9.961H70.46c-0.845-7.146-6.931-12.711-14.301-12.711H39.842c-7.37,0-13.456,5.564-14.301,12.711h-7.527v-6.162c3.013-1.554,4.934-4.675,4.934-8.083c0-3.775-2.382-7.199-5.928-8.519l-1.012-0.377v10.897H11.69V13.142l-1.012,0.376c-3.546,1.32-5.929,4.744-5.929,8.52c0,3.408,1.921,6.529,4.934,8.083v17.623h8.331v-9.96h7.428c-0.001,0.067-0.01,0.132-0.01,0.199v18.024c0,5.872,3.535,10.926,8.584,13.169l-1.052,4.606c-1.821,1.184-3.031,3.232-3.031,5.561c0,2.352,3.573,3.186,6.632,3.186c3.059,0,6.632-0.834,6.632-3.186c0-2.168-1.05-4.091-2.664-5.302l2.324-3.625h10.283l2.324,3.625c-1.614,1.211-2.664,3.133-2.664,5.301c0,2.352,3.573,3.186,6.632,3.186c3.06,0,6.632-0.834,6.632-3.186c0-2.33-1.209-4.378-3.03-5.562l-1.05-4.606c5.049-2.244,8.583-7.297,8.583-13.169V37.982c0-0.067-0.009-0.132-0.01-0.199h7.427v6.163c-3.012,1.553-4.932,4.674-4.932,8.083c0,3.775,2.382,7.199,5.928,8.52l1.012,0.377V50.027h4.317v10.898l1.012-0.377c3.545-1.32,5.928-4.744,5.928-8.52C91.25,48.62,89.329,45.5,86.316,43.946z M16.957,28.966l-0.442,0.199v17.079h-5.331V29.165l-0.442-0.199C8.013,27.74,6.25,25.021,6.25,22.038c0-2.778,1.546-5.329,3.94-6.649v10.151h7.318V15.388c2.394,1.321,3.939,3.872,3.939,6.649C21.448,25.021,19.685,27.74,16.957,28.966z M41.698,79.343c0,0.814-2.062,1.686-5.132,1.686c-3.07,0-5.132-0.872-5.132-1.686c0-2.83,2.303-5.132,5.133-5.132C39.396,74.211,41.698,76.513,41.698,79.343z M64.566,79.343c0,0.814-2.062,1.686-5.132,1.686c-3.07,0-5.132-0.872-5.132-1.686c0-2.83,2.303-5.132,5.133-5.132C62.264,74.211,64.566,76.513,64.566,79.343z M69.069,56.006c0,7.119-5.792,12.911-12.911,12.911H39.842c-7.119,0-12.91-5.792-12.91-12.911V37.982c0-7.119,5.792-12.91,12.91-12.91h16.316c7.119,0,12.911,5.792,12.911,12.91V56.006z M85.811,58.679V48.527h-7.317v10.151c-2.394-1.322-3.939-3.872-3.939-6.65c0-2.983,1.762-5.703,4.489-6.928l0.443-0.199v-17.08h5.331v17.08l0.443,0.199c2.728,1.226,4.491,3.945,4.491,6.928C89.75,54.808,88.205,57.358,85.811,58.679z"/>
     <circle cx="40.222" cy="40.07" r="3.8"/>
     <circle cx="55.78" cy="40.07" r="3.8"/>

src/components/Footer.astro

@@ -11,9 +11,11 @@ const year = new Date().getFullYear();
       <a href="/privacy/">Конфиденциальность</a>
     </nav>
     <p class="developer">
-      <a href="https://hhivp.com/" rel="noopener" target="_blank" class="dev-credit">
+      <a href="https://hhivp.com/" rel="noopener" target="_blank" class="hhivp-credit" aria-label="Сделано в hhivp.com">
-        <img src="/hhivp-mark.svg" alt="" width="22" height="22" class="dev-credit-mark" />
+        <span class="hhivp-credit-mark" aria-hidden="true">
-        <span>Разработка&nbsp;— hhivp.com</span>
+          <img src="/hhivp-mark.svg" alt="" width="20" height="20" />
+        </span>
+        <span class="hhivp-credit-text">Сделано&nbsp;в&nbsp;hhivp.com</span>
       </a>
     </p>
   </div>

src/styles/global.css

@@ -185,27 +185,50 @@ section h2::before {
   font-size: 0.78rem;
   opacity: 0.6;
 }
-.footer-inner .developer a {
+/* hhivp-credit — pill с border, по умолчанию только mark; при hover/focus
-  color: inherit;
+   раскрывается с текстом справа (паттерн Cuberto). Currentcolor — наследует
-  border-bottom: 1px dashed currentColor;
+   цвет родителя, чтобы гармонировать с любой темой футера. */
-}
+.hhivp-credit {
-.footer-inner .developer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
-.footer-inner .developer .dev-credit {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  border-bottom: none;
-}
-.footer-inner .developer .dev-credit:hover { color: var(--accent); }
-.footer-inner .developer .dev-credit:hover span { border-bottom-color: var(--accent); }
-.footer-inner .developer .dev-credit span {
-  border-bottom: 1px dashed currentColor;
-}
-.footer-inner .developer .dev-credit-mark {
-  flex-shrink: 0;
-  display: block;
   vertical-align: middle;
-  color: currentColor;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 3px;
+  gap: 0;
+  line-height: 1;
+  opacity: 0.6;
+  transition: gap 240ms ease, padding-right 240ms ease, opacity 240ms ease, border-color 240ms ease;
+}
+.hhivp-credit:hover,
+.hhivp-credit:focus-visible {
+  opacity: 1;
+  gap: 8px;
+  padding-right: 12px;
+  outline: none;
+}
+.hhivp-credit-mark {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.hhivp-credit-mark img {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.hhivp-credit-text {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 0;
+  font-size: 0.75rem;
+  transition: max-width 240ms ease;
+}
+.hhivp-credit:hover .hhivp-credit-text,
+.hhivp-credit:focus-visible .hhivp-credit-text {
+  max-width: 200px;
 }
 
 /* ── Reading pages (privacy) ────────────────────────────────────── */