From 1ab72e533a9676e6344d1d9877d77397d3121da6 Mon Sep 17 00:00:00 2001
From: Local Build <build@local.dev>
Date: Thu, 13 Aug 2026 20:14:43 +0200
Subject: [PATCH] refactor(resume): use design-system fab--primary pattern for
 PDF button

- Use fab-primary__ico with mask-image (cv.svg) instead of inline SVG
- Follow same pattern as contact FAB
- Add fab-primary__spinner for loading state
- Remove custom fab--pdf styles
---
 public/css/main.css                | 35 +++++++++++-------------------
 public/resume-5.html               | 11 +++-------
 src/partials/fab-stack-resume.html | 11 +++-------
 3 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index eb6e026..40aff6f 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -954,46 +954,37 @@ a.fab--secondary:visited {
   outline-offset: 2px;
 }
 
-/* ── PDF download FAB ── */
-.fab--pdf {
-  position: relative;
-  width: 3rem;
-  min-width: 3rem;
-  min-height: 3rem;
-  padding: 0;
+/* ── 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-pdf__icon {
-  display: block;
-  width: var(--icon-fab);
-  height: var(--icon-fab);
-  transition: opacity 0.2s ease;
-}
-
-.fab-pdf__spinner {
+.fab-primary__spinner {
   display: none;
   position: absolute;
   width: 1.25rem;
   height: 1.25rem;
-  border: 2px solid color-mix(in hsl, var(--accent) 30%, transparent);
-  border-top-color: var(--accent);
+  border: 2px solid color-mix(in hsl, var(--on-accent) 25%, transparent);
+  border-top-color: var(--on-accent);
   border-radius: 50%;
-  animation: fab-pdf-spin 0.6s linear infinite;
+  animation: fab-primary-spin 0.6s linear infinite;
+  z-index: 3;
 }
 
-@keyframes fab-pdf-spin {
+@keyframes fab-primary-spin {
   to { transform: rotate(360deg); }
 }
 
-.fab--pdf[data-loading="true"] .fab-pdf__icon {
+[data-resume-pdf-btn][data-loading="true"] .fab-primary__ico--pdf {
   opacity: 0;
 }
 
-.fab--pdf[data-loading="true"] .fab-pdf__spinner {
+[data-resume-pdf-btn][data-loading="true"] .fab-primary__spinner {
   display: block;
 }
 
-.fab--pdf[data-loading="true"] {
+[data-resume-pdf-btn][data-loading="true"] {
   pointer-events: none;
 }
 
diff --git a/public/resume-5.html b/public/resume-5.html
index 5038676..30ecc08 100644
--- a/public/resume-5.html
+++ b/public/resume-5.html
@@ -293,14 +293,9 @@
     </header>
 
     <div class="fab-stack" aria-label="Быстрые действия">
-      <button type="button" class="fab fab--primary fab--pdf" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
-        <svg class="fab-pdf__icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
-          <path d="M14 2v6h6" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
-          <path d="M12 18v-6" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
-          <path d="M9 15l3 3 3-3" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span class="fab-pdf__spinner" aria-hidden="true"></span>
+      <button type="button" class="fab fab--primary" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
+        <span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
+        <span class="fab-primary__spinner" aria-hidden="true"></span>
       </button>
     </div>
 
diff --git a/src/partials/fab-stack-resume.html b/src/partials/fab-stack-resume.html
index bb185f5..cced77a 100644
--- a/src/partials/fab-stack-resume.html
+++ b/src/partials/fab-stack-resume.html
@@ -1,11 +1,6 @@
 <div class="fab-stack" aria-label="Быстрые действия">
-      <button type="button" class="fab fab--primary fab--pdf" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
-        <svg class="fab-pdf__icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
-          <path d="M14 2v6h6" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
-          <path d="M12 18v-6" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
-          <path d="M9 15l3 3 3-3" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span class="fab-pdf__spinner" aria-hidden="true"></span>
+      <button type="button" class="fab fab--primary" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
+        <span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
+        <span class="fab-primary__spinner" aria-hidden="true"></span>
       </button>
     </div>