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 - now first button after cmd-k removed) */
.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 */
}

/* 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 */


/* =============================================================================
   CMD+K SEARCH BAR BUTTON (Integrated in Action Bar)
   ============================================================================= */

/* Search bar button - styled to look like a search input within the dark action bar */
.search-bar-btn {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    min-width: 140px;
    transition: all 0.2s ease;
}

.search-bar-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.search-bar-icon {
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.search-bar-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    flex-grow: 1;
    text-align: left;
}

.search-bar-keys {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.search-bar-keys kbd {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    min-width: 1.2rem;
    text-align: center;
}

/* Hide kbd keys on smaller screens to save space */
@media (max-width: 900px) {
    .search-bar-keys {
        display: none;
    }

    .search-bar-btn {
        min-width: auto;
    }
}


/* =============================================================================
   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;
}