cv-site/static/css/04-interactive/_buttons.css

/* =============================================================================
   KEYBOARD SHORTCUTS BUTTON & MODAL
   ============================================================================= */

/* Shortcuts Button (Fixed Left) - Mirrors info-button on opposite side */
/* Zoom Toggle Button (above shortcuts button) */
.zoom-toggle-btn {
    position: fixed;
    bottom: 10rem; /* Above shortcuts button */
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar); /* Dark by default like other buttons */
    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; /* Match shortcuts button opacity */
}

.zoom-toggle-btn:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: #5c59b6; /* Purple hover - distinct from info button blue */
}

.zoom-toggle-btn.at-bottom {
    opacity: 1;
    background: #5c59b6; /* Purple - matches hover, distinct from info button */
}

/* No special styling for active state - button looks same whether zoom is on or off */

.shortcuts-btn {
    position: fixed;
    bottom: 6rem; /* Above back-to-top button (2rem + 50px + gap) */
    left: 2rem; /* LEFT SIDE instead of right */
    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);
    z-index: 99;
    transition: all 0.3s ease;
    opacity: 0.6; /* Increased from 0.2 for better discoverability */
}

.shortcuts-btn:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: #f39c12; /* Orange hover */
}

.shortcuts-btn.at-bottom {
    opacity: 1;
    background: #f39c12; /* Orange when at bottom */
}

.shortcuts-btn:active {
    transform: translateY(-1px);
}

/* Print-Friendly Button (second from top) */
.print-friendly-btn {
    position: fixed;
    bottom: 18rem; /* Below download button (22rem) */
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar); /* Dark background by default */
    color: white; /* White icon by default */
    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 iconify-icon {
    color: white; /* White icon by default */
}

.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: white !important; /* White background on hover */
    color: #27ae60; /* Green icon on hover */
}

.print-friendly-btn:hover iconify-icon,
.print-friendly-btn.print-hover-sync iconify-icon {
    color: #27ae60; /* Green icon on hover */
}

.print-friendly-btn.at-bottom {
    opacity: 1;
    background: white !important; /* White background - matches hover */
    color: #27ae60; /* Green - matches hover */
}

.print-friendly-btn.at-bottom iconify-icon {
    color: #27ae60; /* Green icon when at bottom */
}

/* Download Button (TOP POSITION) */
.download-btn {
    position: fixed;
    bottom: 22rem; /* Top button position */
    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 */
}

.download-btn.at-bottom {
    opacity: 1;
    background: #cd6060 !important; /* PDF red - matches hover */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .shortcuts-btn {
        bottom: 5.5rem; /* Above back-to-top button (1.5rem + 45px + gap) */
        left: 1.5rem; /* LEFT SIDE on mobile too */
        width: 45px;
        height: 45px;
    }
}