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, #2b2b2b); /* 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, #2b2b2b);
    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: 22rem; /* Below download button (26rem) */
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar, #2b2b2b); /* 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: 26rem; /* Top button position */
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar, #2b2b2b);
    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, #2b2b2b); /* 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 */
}

/* CMD+K Command Bar Button (TOP position - first button) */
.cmd-k-btn {
    position: fixed;
    bottom: 30rem; /* TOP position - above download button */
    left: 2rem; /* Left side */
    width: 50px;
    height: 50px;
    background: var(--black-bar, #2b2b2b);
    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;
}

.cmd-k-btn:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: #00897b; /* Teal - distinct from zoom button purple */
}

.cmd-k-btn.at-bottom {
    opacity: 1;
    background: #00897b; /* Teal - distinct from zoom button purple */
}

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

/* Mobile adjustments - now handled by fluid sizing in _scroll-behavior.css
   The 900px media query there uses clamp() for smooth scaling of all buttons and icons */


/* =============================================================================
   NINJA-KEYS COMMAND BAR STYLING
   ============================================================================= */

ninja-keys {
    --ninja-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
    --ninja-accent-color: #667eea;
    --ninja-z-index: 10000;
    --ninja-width: 640px;
    --ninja-backdrop-filter: blur(8px);

    /* Light mode colors */
    --ninja-modal-background: rgba(255, 255, 255, 0.95);
    --ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
    --ninja-text-color: #1a1a1a;
    --ninja-secondary-text-color: #666;
    --ninja-actions-background: #f5f5f5;
    --ninja-selected-background: #667eea;
    --ninja-selected-text-color: white;
    --ninja-key-background: #e0e0e0;
    --ninja-key-text-color: #333;
    --ninja-footer-background: #f9f9f9;
    --ninja-placeholder-color: #999;
}

/* Dark mode colors */
[data-color-theme="dark"] ninja-keys {
    --ninja-modal-background: rgba(40, 40, 40, 0.95);
    --ninja-text-color: #e0e0e0;
    --ninja-secondary-text-color: #999;
    --ninja-actions-background: #2a2a2a;
    --ninja-key-background: #444;
    --ninja-key-text-color: #e0e0e0;
    --ninja-footer-background: #2a2a2a;
    --ninja-placeholder-color: #777;
}

/* Shortcut highlight in shortcuts modal */
.shortcut-highlight {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
}