From c7f579f9abacb544be7a1e1cec7ea4bd8152b457 Mon Sep 17 00:00:00 2001
From: Dmitry Gusev <gen.director@hhivp.com>
Date: Sun, 24 May 2026 07:00:25 +0300
Subject: [PATCH] =?UTF-8?q?feat(footer):=20hover-pill=20credit=20=C2=AB?=
 =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=BE=20=D0=B2=20hhivp.com?=
 =?UTF-8?q?=C2=BB=20=D1=81=20border=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=20=D0=BF=D0=BB=D0=BE=D1=82=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=84?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Паттерн 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        |  5 ++---
 src/layouts/BaseLayout.astro |  8 ++++---
 src/styles/global.css        | 41 ++++++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/public/hhivp-mark.svg b/public/hhivp-mark.svg
index 2f8187a..3b3e504 100644
--- a/public/hhivp-mark.svg
+++ b/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">
-  <rect width="100" height="100" rx="22" fill="#0a0a0a"/>
-  <g transform="translate(4 8)" fill="#fff">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92" role="img" aria-label="hhivp" fill="currentColor">
+  <g transform="translate(-4 -2)">
     <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"/>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fc542fd..f2ec911 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -151,9 +151,11 @@ const jsonLd = [
         <a href="/kontakty/">Контакты</a>
       </p>
       <p class="dev-credit">
-        <a href="https://hhivp.com/" target="_blank" rel="noopener" class="dev-credit-link">
-          <img src="/hhivp-mark.svg" alt="" width="22" height="22" class="dev-credit-mark" />
-          <span>Разработка&nbsp;— hhivp.com</span>
+        <a href="https://hhivp.com/" target="_blank" rel="noopener" class="hhivp-credit" aria-label="Сделано в hhivp.com">
+          <span class="hhivp-credit-mark" aria-hidden="true">
+            <img src="/hhivp-mark.svg" alt="" width="20" height="20" />
+          </span>
+          <span class="hhivp-credit-text">Сделано&nbsp;в&nbsp;hhivp.com</span>
         </a>
       </p>
     </footer>
diff --git a/src/styles/global.css b/src/styles/global.css
index eb912b2..21aecde 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -734,22 +734,41 @@ pre {
   border-bottom: 1px dashed currentColor;
 }
 .site-footer .dev-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }
-.site-footer .dev-credit-link {
+/* hhivp-credit — pill mark + slide-out text on hover */
+.hhivp-credit {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  border-bottom: none;
+  vertical-align: middle;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 3px;
+  gap: 0;
+  line-height: 1;
+  opacity: 0.65;
+  transition: gap 240ms ease, padding-right 240ms ease, opacity 240ms ease;
 }
-.site-footer .dev-credit-link:hover { border-bottom: none; color: var(--accent); }
-.site-footer .dev-credit-link:hover span { border-bottom-color: var(--accent); }
-.site-footer .dev-credit-link span {
-  border-bottom: 1px dashed currentColor;
+.hhivp-credit:hover,
+.hhivp-credit:focus-visible {
+  opacity: 1;
+  gap: 8px;
+  padding-right: 12px;
+  outline: none;
+  border-bottom: 1px solid currentColor;
 }
-.site-footer .dev-credit-mark {
-  flex-shrink: 0;
-  display: block;
-  color: currentColor;
+.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; }
 .footer-ornament {
   display: block;
   width: 60px;