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 {
-    background: #27ae60;
-    color: white;
+.print-btn:hover,
+.print-btn.print-hover-sync {
+    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 {
-        display: none; /* Hide zoom control on mobile - not useful on small screens */
+    .zoom-control,
+    .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 */