feat: add synchronized hover effect for PDF and print-friendly buttons

- PDF buttons (fixed, action bar, menu) now sync hover states across all instances
- Print-friendly buttons (fixed, action bar, menu) sync green hover states
- White PDF icon with red hover background (#cd6060)
- Green print button hover (#27ae60)
- Implemented using hyperscript with .pdf-hover-sync and .print-hover-sync classes
- Creates cool visual feedback showing all related buttons simultaneously

static/css/main.css

@@ -438,14 +438,38 @@ iconify-icon {
     color: #27ae60;
 }
 
+/* PDF Download button - gray by default, red on hover */
+.pdf-btn {
+    background: transparent !important; /* Transparent like other buttons */
+    color: white !important;
+}
+
+.pdf-btn:hover,
+.pdf-btn.pdf-hover-sync {
+    background: #cd6060 !important; /* PDF red on hover */
+    color: white !important;
+}
+
+.pdf-btn iconify-icon {
+    color: white !important;
+    filter: brightness(0) invert(1); /* Always white */
+    transition: filter 0.3s ease;
+}
+
+.pdf-btn:hover iconify-icon {
+    color: white !important;
+    filter: brightness(0) invert(1); /* Keep white on hover */
+}
+
 /* Print Friendly button - transparent by default, green on hover */
 .print-btn {
     background: transparent;
 }
 
-.print-btn:hover {
+.print-btn:hover,
-    background: #27ae60;
+.print-btn.print-hover-sync {
-    color: white;
+    background: #27ae60 !important;
+    color: white !important;
 }
 
 .print-btn:hover iconify-icon {
@@ -2655,6 +2679,18 @@ text-align: center;
     color: var(--accent-blue);
 }
 
+/* Print button in menu - Green hover to match other print buttons */
+.menu-print-btn:hover,
+.menu-print-btn.print-hover-sync {
+    background: rgba(39, 174, 96, 0.08) !important;
+    color: #27ae60 !important;
+}
+
+.menu-print-btn:hover iconify-icon,
+.menu-print-btn.print-hover-sync iconify-icon {
+    color: #27ae60 !important;
+}
+
 /* Section icons in titles */
 .section-icon {
     vertical-align: middle;
@@ -3861,10 +3897,21 @@ html {
     outline-offset: 2px;
 }
 
-/* Mobile Responsive - Smaller on mobile */
+/* Mobile Responsive - Hide most buttons, keep only download and info */
 @media (max-width: 768px) {
-    .zoom-control {
+    .zoom-control,
-        display: none; /* Hide zoom control on mobile - not useful on small screens */
+    .zoom-toggle-btn,
+    .shortcuts-btn,
+    .print-friendly-btn,
+    .back-to-top {
+        display: none !important; /* Hide these buttons on mobile */
+    }
+
+    /* Reposition download button to be above info button (right side) */
+    .download-btn {
+        bottom: 6rem; /* Above info button */
+        left: auto;
+        right: 2rem; /* Right side like info button */
     }
 }
 
@@ -3976,7 +4023,78 @@ html {
 
 .shortcuts-btn:active {
     transform: translateY(-1px);
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Print-Friendly Button (above shortcuts) */
+.print-friendly-btn {
+    position: fixed;
+    bottom: 14rem; /* Above zoom button */
+    left: 2rem;
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    z-index: 999;
+    opacity: 0.6;
+}
+
+.print-friendly-btn:hover,
+.print-friendly-btn.print-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #27ae60 !important; /* Green hover */
+}
+
+/* Download Button (above print-friendly) */
+.download-btn {
+    position: fixed;
+    bottom: 18rem; /* Above print-friendly button */
+    left: 2rem;
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    z-index: 999;
+    opacity: 0.6;
+}
+
+.download-btn {
+    background: var(--black-bar); /* Gray by default like other buttons */
+    opacity: 0.6; /* Match other buttons */
+}
+
+.download-btn:hover,
+.download-btn.pdf-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #cd6060 !important; /* PDF red on hover */
+}
+
+.download-btn iconify-icon {
+    filter: brightness(0) invert(1); /* Always white */
+    transition: filter 0.3s ease;
+}
+
+.download-btn:hover iconify-icon {
+    filter: brightness(0) invert(1); /* Keep white on hover */
 }
 
 /* Mobile adjustments */

templates/index.html

@@ -138,6 +138,8 @@
     {{template "error-toast" .}}
     {{template "back-to-top" .}}
     {{template "info-button" .}}
+    {{template "download-button" .}}
+    {{template "print-friendly-button" .}}
     {{template "zoom-toggle-button" .}}
     {{template "shortcuts-button" .}}
     {{template "info-modal" .}}

templates/partials/navigation/action-buttons.html

@@ -2,16 +2,31 @@
 <!-- Right: Action buttons -->
 <div class="action-buttons-right">
     <button
+        id="action-bar-pdf-btn"
         class="action-btn pdf-btn"
         onclick="document.getElementById('pdf-modal').showModal()"
-        aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
+        aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
-        <iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
+        _="on mouseenter
+             add .pdf-hover-sync to me
+             add .pdf-hover-sync to #download-button
+           on mouseleave
+             remove .pdf-hover-sync from me
+             remove .pdf-hover-sync from #download-button">
+        <iconify-icon icon="catppuccin:pdf" width="18" height="18"></iconify-icon>
         {{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
     </button>
     <button
-        class="action-btn print-btn"
+        class="action-btn print-btn action-bar-print-btn"
         aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
-        _="on click call printFriendly()">
+        _="on click call printFriendly()
+           on mouseenter
+             add .print-hover-sync to me
+             add .print-hover-sync to #print-friendly-button
+             add .print-hover-sync to .menu-print-btn
+           on mouseleave
+             remove .print-hover-sync from me
+             remove .print-hover-sync from #print-friendly-button
+             remove .print-hover-sync from .menu-print-btn">
         <iconify-icon icon="mdi:leaf" width="18" height="18"></iconify-icon>
         {{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
     </button>

templates/partials/navigation/hamburger-menu.html

@@ -205,11 +205,20 @@
             </div>
 
             <button class="menu-action-btn" onclick="document.getElementById('pdf-modal').showModal()">
-                <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
+                <iconify-icon icon="catppuccin:pdf" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
             </button>
 
-            <button class="menu-action-btn" _="on click call printFriendly()">
+            <button class="menu-action-btn menu-print-btn"
+                    _="on click call printFriendly()
+                       on mouseenter
+                         add .print-hover-sync to me
+                         add .print-hover-sync to #print-friendly-button
+                         add .print-hover-sync to .action-bar-print-btn
+                       on mouseleave
+                         remove .print-hover-sync from me
+                         remove .print-hover-sync from #print-friendly-button
+                         remove .print-hover-sync from .action-bar-print-btn">
                 <iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}</span>
             </button>

templates/partials/widgets/download-button.html

@@ -0,0 +1,17 @@
+{{define "download-button"}}
+<!-- Download PDF Button (Fixed Left) -->
+<button
+    id="download-button"
+    class="fixed-btn download-btn no-print"
+    aria-label="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
+    title="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
+    onclick="document.getElementById('pdf-modal').showModal()"
+    _="on mouseenter
+         add .pdf-hover-sync to me
+         add .pdf-hover-sync to #action-bar-pdf-btn
+       on mouseleave
+         remove .pdf-hover-sync from me
+         remove .pdf-hover-sync from #action-bar-pdf-btn">
+    <iconify-icon icon="catppuccin:pdf" width="28" height="28"></iconify-icon>
+</button>
+{{end}}

templates/partials/widgets/print-friendly-button.html

@@ -0,0 +1,19 @@
+{{define "print-friendly-button"}}
+<!-- Print-Friendly Button (Fixed Left) -->
+<button
+    id="print-friendly-button"
+    class="fixed-btn print-friendly-btn no-print"
+    aria-label="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
+    title="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
+    onclick="window.print()"
+    _="on mouseenter
+         add .print-hover-sync to me
+         add .print-hover-sync to .action-bar-print-btn
+         add .print-hover-sync to .menu-print-btn
+       on mouseleave
+         remove .print-hover-sync from me
+         remove .print-hover-sync from .action-bar-print-btn
+         remove .print-hover-sync from .menu-print-btn">
+    <iconify-icon icon="mdi:leaf" width="28" height="28"></iconify-icon>
+</button>
+{{end}}