From d7e717e2e7d2bf041f5b6d9c4ea9fb82f722899d Mon Sep 17 00:00:00 2001
From: Local Build <build@local.dev>
Date: Thu, 13 Aug 2026 20:23:03 +0200
Subject: [PATCH] fix(resume): use design-system .btn component for PDF button

- Use btn btn--primary btn--flat btn--resume (existing pattern)
- btn__icon with cv.svg mask already defined in design system
- Remove all custom fab--primary overrides
- Keep only btn__spinner and loading state CSS
---
 public/css/main.css                | 39 +++++++++---------------------
 public/resume-5.html               |  8 +++---
 src/partials/fab-stack-resume.html |  8 +++---
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 4a86ba8..fc9ed7b 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -954,46 +954,29 @@ a.fab--secondary:visited {
   outline-offset: 2px;
 }
 
-/* ── PDF download FAB icon ── */
-.fab-primary__ico--pdf {
-  mask-image: url("../assets/shared/icons/cv.svg");
-  -webkit-mask-image: url("../assets/shared/icons/cv.svg");
-}
-
-.fab--label {
-  width: auto;
-  padding: 0.65rem 1.1rem;
-  gap: 0.45rem;
-}
-
-.fab-primary__label {
-  font-size: 0.85rem;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.fab-primary__spinner {
+/* ── PDF download button: loading state ── */
+.btn__spinner {
   display: none;
-  position: absolute;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   border: 2px solid color-mix(in hsl, var(--on-accent) 25%, transparent);
   border-top-color: var(--on-accent);
   border-radius: 50%;
-  animation: fab-primary-spin 0.6s linear infinite;
-  z-index: 3;
+  animation: btn-spin 0.6s linear infinite;
+  flex-shrink: 0;
 }
 
-@keyframes fab-primary-spin {
+@keyframes btn-spin {
   to { transform: rotate(360deg); }
 }
 
-[data-resume-pdf-btn][data-loading="true"] .fab-primary__ico--pdf {
+[data-resume-pdf-btn][data-loading="true"] .btn__icon {
   opacity: 0;
+  width: 0;
+  overflow: hidden;
 }
 
-[data-resume-pdf-btn][data-loading="true"] .fab-primary__spinner {
+[data-resume-pdf-btn][data-loading="true"] .btn__spinner {
   display: block;
 }
 
diff --git a/public/resume-5.html b/public/resume-5.html
index 13f914d..9868cf7 100644
--- a/public/resume-5.html
+++ b/public/resume-5.html
@@ -293,10 +293,10 @@
     </header>
 
     <div class="fab-stack" aria-label="Быстрые действия">
-      <button type="button" class="fab fab--primary fab--label" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
-        <span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
-        <span class="fab-primary__label">Скачать в PDF</span>
-        <span class="fab-primary__spinner" aria-hidden="true"></span>
+      <button type="button" class="btn btn--primary btn--flat btn--resume" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
+        <span class="btn__icon" aria-hidden="true"></span>
+        <span>Скачать в PDF</span>
+        <span class="btn__spinner" aria-hidden="true"></span>
       </button>
     </div>
 
diff --git a/src/partials/fab-stack-resume.html b/src/partials/fab-stack-resume.html
index 8aee84c..be3bca8 100644
--- a/src/partials/fab-stack-resume.html
+++ b/src/partials/fab-stack-resume.html
@@ -1,7 +1,7 @@
 <div class="fab-stack" aria-label="Быстрые действия">
-      <button type="button" class="fab fab--primary fab--label" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
-        <span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
-        <span class="fab-primary__label">Скачать в PDF</span>
-        <span class="fab-primary__spinner" aria-hidden="true"></span>
+      <button type="button" class="btn btn--primary btn--flat btn--resume" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
+        <span class="btn__icon" aria-hidden="true"></span>
+        <span>Скачать в PDF</span>
+        <span class="btn__spinner" aria-hidden="true"></span>
       </button>
     </div>