juanatsap
568 lines
18 KiB
CSS
568 lines
18 KiB
CSS
/* ========================================
|
|
Scroll Direction - Hide/Show Header
|
|
======================================== */
|
|
|
|
/* Add smooth transition to header elements */
|
|
.action-bar,
|
|
.navigation-menu {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Hide header when scrolling down */
|
|
.action-bar.header-hidden {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.navigation-menu.header-hidden {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
/* ========================================
|
|
Back to Top Button
|
|
======================================== */
|
|
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 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);
|
|
z-index: 99;
|
|
transition: all 0.3s ease;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #555555;
|
|
}
|
|
|
|
.back-to-top.at-bottom {
|
|
opacity: 1;
|
|
background: #555555;
|
|
}
|
|
|
|
.back-to-top:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px) {
|
|
.back-to-top {
|
|
bottom: 1.5rem;
|
|
right: 1.5rem;
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Info Button (Bottom Left)
|
|
======================================== */
|
|
|
|
.info-button {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
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);
|
|
z-index: 99;
|
|
transition: all 0.3s ease;
|
|
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
|
}
|
|
|
|
.info-button:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #3498db; /* Blue - different from back-to-top green */
|
|
}
|
|
|
|
.info-button.at-bottom {
|
|
opacity: 1;
|
|
background: #3498db; /* Blue - different from back-to-top green */
|
|
}
|
|
|
|
.info-button:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Default icon sizes for floating buttons (desktop) */
|
|
.download-btn iconify-icon,
|
|
.print-friendly-btn iconify-icon,
|
|
.fixed-btn.contact-btn iconify-icon,
|
|
.shortcuts-btn iconify-icon,
|
|
.info-button iconify-icon,
|
|
.back-to-top iconify-icon,
|
|
.color-theme-switcher iconify-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Floating Button Icon Hover Animations
|
|
- Rotate: PDF, leaf, info, theme, close (symmetric icons)
|
|
- Wiggle: email (envelope notification feel)
|
|
- Pulse: keyboard (key press feel)
|
|
- Bounce up: back-to-top arrow (reinforces direction)
|
|
========================================================================== */
|
|
|
|
/* All floating icons: smooth transition */
|
|
.download-btn iconify-icon,
|
|
.print-friendly-btn iconify-icon,
|
|
.fixed-btn.contact-btn iconify-icon,
|
|
.shortcuts-btn iconify-icon,
|
|
.info-button iconify-icon,
|
|
.back-to-top iconify-icon,
|
|
.color-theme-switcher iconify-icon,
|
|
.chat-toggle-btn iconify-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Rotate 45°: PDF */
|
|
.download-btn:hover iconify-icon {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Rotate 90°: leaf, theme */
|
|
.print-friendly-btn:hover iconify-icon,
|
|
.color-theme-switcher:hover iconify-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Wiggle: email, info, keyboard, chat bot */
|
|
.fixed-btn.contact-btn:hover iconify-icon,
|
|
.info-button:hover iconify-icon,
|
|
.shortcuts-btn:hover iconify-icon {
|
|
animation: iconWiggle 0.5s ease;
|
|
}
|
|
|
|
@keyframes iconWiggle {
|
|
0% { transform: rotate(0deg); }
|
|
20% { transform: rotate(-12deg); }
|
|
40% { transform: rotate(10deg); }
|
|
60% { transform: rotate(-8deg); }
|
|
80% { transform: rotate(5deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
/* Bounce up: back-to-top arrow */
|
|
.back-to-top:hover iconify-icon {
|
|
animation: iconBounceUp 0.4s ease;
|
|
}
|
|
|
|
@keyframes iconBounceUp {
|
|
0% { transform: translateY(0); }
|
|
40% { transform: translateY(-4px); }
|
|
70% { transform: translateY(1px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
|
|
.is-mobile-device .shortcuts-btn,
|
|
.is-mobile-device .zoom-toggle-btn,
|
|
.is-mobile-device .zoom-control {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Mobile adjustments - Flexbox button layout at bottom center */
|
|
@media (max-width: 900px) {
|
|
/* Hide zoom control on mobile (keyboard shortcuts now visible on desktop mobile view) */
|
|
.zoom-toggle-btn,
|
|
.zoom-control {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
|
|
/* Use fluid sizing: at 900px = 50px, at 380px = 36px, scales linearly */
|
|
/* Formula: 2.7vw + 25.7px gives 36px at 380px and 50px at 900px */
|
|
.download-btn,
|
|
.print-friendly-btn,
|
|
.fixed-btn.contact-btn,
|
|
.shortcuts-btn,
|
|
.info-button {
|
|
position: fixed !important;
|
|
bottom: 1.5rem !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
/* Fluid button size: 36px at 380px, 50px at 900px */
|
|
width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
|
|
height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
|
|
/* Removed opacity: 1 !important to allow .footer-hovered to work */
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Also apply fluid sizing to back-to-top */
|
|
.back-to-top {
|
|
width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
|
|
height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
|
|
}
|
|
|
|
/* Scale icons to fit buttons properly */
|
|
/* Icons ~50% of button size: 18px at 36px button, 24px at 50px button */
|
|
/* Formula: 1.15vw + 13.6px gives 18px at 380px and 24px at 900px */
|
|
.download-btn iconify-icon,
|
|
.print-friendly-btn iconify-icon,
|
|
.fixed-btn.contact-btn iconify-icon,
|
|
.shortcuts-btn iconify-icon,
|
|
.info-button iconify-icon,
|
|
.back-to-top iconify-icon,
|
|
.color-theme-switcher iconify-icon {
|
|
width: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
|
|
height: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
|
|
font-size: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
|
|
/* Force override HTML width/height attributes */
|
|
min-width: 0 !important;
|
|
max-width: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
|
|
}
|
|
|
|
/* Mobile: Show colors at full opacity (no transparency with blur bar) */
|
|
.download-btn {
|
|
background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.print-friendly-btn {
|
|
background: rgba(255, 255, 255, 1) !important; /* White - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.print-friendly-btn iconify-icon {
|
|
color: #27ae60 !important; /* Green icon */
|
|
}
|
|
|
|
.fixed-btn.contact-btn {
|
|
background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.shortcuts-btn {
|
|
background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.info-button {
|
|
background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity, different from back-to-top */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.back-to-top {
|
|
background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
|
|
opacity: 1 !important; /* Full opacity (no transparency with blur bar) */
|
|
}
|
|
|
|
/* Flexbox container behavior - buttons arrange themselves */
|
|
/* Fluid positioning that scales with viewport */
|
|
/* 7 buttons: At 900px: 7 * 50px + 6 * 8px = 398px total, start at -199px */
|
|
/* At 380px: 7 * 36px + 6 * 4px = 276px total, start at -138px */
|
|
|
|
.download-btn {
|
|
/* First button: -199px at 900px, -138px at 380px */
|
|
left: calc(50% - clamp(138px, calc(138px + (199 - 138) * ((100vw - 380px) / (900 - 380))), 199px)) !important;
|
|
}
|
|
|
|
.print-friendly-btn {
|
|
/* Second button: -141px at 900px, -98px at 380px */
|
|
left: calc(50% - clamp(98px, calc(98px + (141 - 98) * ((100vw - 380px) / (900 - 380))), 141px)) !important;
|
|
}
|
|
|
|
.fixed-btn.contact-btn {
|
|
/* Third button: -83px at 900px, -58px at 380px */
|
|
left: calc(50% - clamp(58px, calc(58px + (83 - 58) * ((100vw - 380px) / (900 - 380))), 83px)) !important;
|
|
}
|
|
|
|
.shortcuts-btn {
|
|
/* Fourth button: -25px at 900px, -18px at 380px */
|
|
left: calc(50% - clamp(18px, calc(18px + (25 - 18) * ((100vw - 380px) / (900 - 380))), 25px)) !important;
|
|
}
|
|
|
|
/* Theme switcher button - fifth position (defined in _themes.css) */
|
|
/* +33px at 900px, +22px at 380px */
|
|
|
|
.info-button {
|
|
/* Sixth button: +91px at 900px, +62px at 380px */
|
|
left: calc(50% + clamp(62px, calc(62px + (91 - 62) * ((100vw - 380px) / (900 - 380))), 91px)) !important;
|
|
}
|
|
|
|
/* Back-to-top button - now part of the button row (seventh button) */
|
|
.back-to-top {
|
|
position: fixed !important;
|
|
bottom: 1.5rem !important;
|
|
/* Seventh button: +149px at 900px, +102px at 380px */
|
|
left: calc(50% + clamp(102px, calc(102px + (149 - 102) * ((100vw - 380px) / (900 - 380))), 149px)) !important;
|
|
right: auto !important; /* Override previous right positioning */
|
|
/* Fluid size already set above, no need to repeat */
|
|
display: flex !important; /* Ensure it's always displayed */
|
|
}
|
|
|
|
/* REAL MOBILE DEVICES: 6 buttons without shortcuts */
|
|
/* At 900px: 6 * 50px + 5 * 8px = 340px, start at -170px */
|
|
/* At 380px: 6 * 36px + 5 * 4px = 236px, start at -118px */
|
|
.is-mobile-device .download-btn {
|
|
left: calc(50% - clamp(118px, calc(118px + (170 - 118) * ((100vw - 380px) / (900 - 380))), 170px)) !important;
|
|
}
|
|
|
|
.is-mobile-device .print-friendly-btn {
|
|
left: calc(50% - clamp(78px, calc(78px + (112 - 78) * ((100vw - 380px) / (900 - 380))), 112px)) !important;
|
|
}
|
|
|
|
.is-mobile-device .fixed-btn.contact-btn {
|
|
left: calc(50% - clamp(38px, calc(38px + (54 - 38) * ((100vw - 380px) / (900 - 380))), 54px)) !important;
|
|
}
|
|
|
|
/* Theme switcher on mobile - fourth position (see _themes.css for override) */
|
|
/* +4px at 900px, +2px at 380px */
|
|
|
|
.is-mobile-device .info-button {
|
|
left: calc(50% + clamp(42px, calc(42px + (62 - 42) * ((100vw - 380px) / (900 - 380))), 62px)) !important;
|
|
}
|
|
|
|
.is-mobile-device .back-to-top {
|
|
left: calc(50% + clamp(82px, calc(82px + (120 - 82) * ((100vw - 380px) / (900 - 380))), 120px)) !important;
|
|
}
|
|
|
|
/* Always show back-to-top on mobile (don't wait for scroll) */
|
|
.back-to-top:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Hover effects - Full color opacity on hover */
|
|
.download-btn:hover,
|
|
.download-btn.pdf-hover-sync {
|
|
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.print-friendly-btn:hover,
|
|
.print-friendly-btn.print-hover-sync {
|
|
background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.fixed-btn.contact-btn:hover {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.shortcuts-btn:hover {
|
|
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.info-button:hover {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
background: rgba(39, 174, 96, 1) !important; /* Full green opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
/* Keep at-bottom state - full opacity colors for each button */
|
|
.download-btn.at-bottom {
|
|
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.print-friendly-btn.at-bottom {
|
|
background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.fixed-btn.contact-btn.at-bottom {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.shortcuts-btn.at-bottom {
|
|
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.info-button.at-bottom {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.back-to-top.at-bottom {
|
|
background: rgba(39, 174, 96, 1) !important; /* Full green opacity - NO transparency */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Make all buttons semi-transparent when footer is hovered (applied via JS) */
|
|
.download-btn.footer-hovered,
|
|
.print-friendly-btn.footer-hovered,
|
|
.fixed-btn.contact-btn.footer-hovered,
|
|
.shortcuts-btn.footer-hovered,
|
|
.info-button.footer-hovered,
|
|
.back-to-top.footer-hovered,
|
|
.color-theme-switcher.footer-hovered {
|
|
opacity: 0.2 !important; /* Make buttons very transparent to see footer */
|
|
pointer-events: none !important; /* Prevent interaction when footer is hovered */
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Very Small Screens: iPhone 13 mini (375px) and smaller
|
|
Tighter button spacing to prevent overflow
|
|
======================================== */
|
|
@media (max-width: 400px) {
|
|
/* Smaller buttons for very small screens */
|
|
.download-btn,
|
|
.print-friendly-btn,
|
|
.fixed-btn.contact-btn,
|
|
.shortcuts-btn,
|
|
.info-button,
|
|
.back-to-top,
|
|
.color-theme-switcher {
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
}
|
|
|
|
/* Smaller icons */
|
|
.download-btn iconify-icon,
|
|
.print-friendly-btn iconify-icon,
|
|
.fixed-btn.contact-btn iconify-icon,
|
|
.shortcuts-btn iconify-icon,
|
|
.info-button iconify-icon,
|
|
.back-to-top iconify-icon,
|
|
.color-theme-switcher iconify-icon {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
font-size: 16px !important;
|
|
max-width: 16px !important;
|
|
}
|
|
|
|
/* REAL MOBILE DEVICES: 6 buttons tightly spaced */
|
|
/* 6 buttons * 34px + 5 gaps * 6px = 234px total, center offset = -117px */
|
|
.is-mobile-device .download-btn {
|
|
left: calc(50% - 117px) !important;
|
|
}
|
|
|
|
.is-mobile-device .print-friendly-btn {
|
|
left: calc(50% - 77px) !important;
|
|
}
|
|
|
|
.is-mobile-device .fixed-btn.contact-btn {
|
|
left: calc(50% - 37px) !important;
|
|
}
|
|
|
|
/* Theme switcher - fourth position: +3px from center */
|
|
.is-mobile-device .color-theme-switcher {
|
|
left: calc(50% + 3px) !important;
|
|
}
|
|
|
|
.is-mobile-device .info-button {
|
|
left: calc(50% + 43px) !important;
|
|
}
|
|
|
|
.is-mobile-device .back-to-top {
|
|
left: calc(50% + 83px) !important;
|
|
}
|
|
|
|
/* Non-mobile (desktop in mobile emulation): 7 buttons */
|
|
/* 7 buttons * 34px + 6 gaps * 6px = 274px total, center offset = -137px */
|
|
.download-btn {
|
|
left: calc(50% - 137px) !important;
|
|
}
|
|
|
|
.print-friendly-btn {
|
|
left: calc(50% - 97px) !important;
|
|
}
|
|
|
|
.fixed-btn.contact-btn {
|
|
left: calc(50% - 57px) !important;
|
|
}
|
|
|
|
.shortcuts-btn {
|
|
left: calc(50% - 17px) !important;
|
|
}
|
|
|
|
.color-theme-switcher {
|
|
left: calc(50% + 23px) !important;
|
|
}
|
|
|
|
.info-button {
|
|
left: calc(50% + 63px) !important;
|
|
}
|
|
|
|
.back-to-top {
|
|
left: calc(50% + 103px) !important;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Mobile: Keep action bar visible (prevent hiding on scroll)
|
|
======================================== */
|
|
@media (max-width: 900px) {
|
|
/* Prevent action bar from hiding on scroll on mobile */
|
|
.action-bar.header-hidden {
|
|
transform: translateY(0) !important; /* Override hide behavior */
|
|
}
|
|
|
|
.navigation-menu.header-hidden {
|
|
transform: translateY(0) !important; /* Override hide behavior */
|
|
}
|
|
|
|
/* Add bottom padding to footer so text isn't hidden behind button bar */
|
|
footer.no-print {
|
|
padding-bottom: 100px !important; /* Clearance for 7 buttons + spacing */
|
|
transition: all 0.3s ease;
|
|
z-index: 1 !important; /* Keep footer behind buttons (buttons have z-index: 99) */
|
|
position: relative;
|
|
}
|
|
|
|
/* Footer hover effect - enlarge text when touched (for button transparency) */
|
|
footer.no-print.footer-hovered {
|
|
/* Only used for button transparency interaction */
|
|
}
|
|
|
|
/* Footer text automatically enlarges when at page bottom */
|
|
footer.no-print.at-bottom {
|
|
padding-bottom: 110px !important; /* Extra space when enlarged */
|
|
}
|
|
|
|
footer.no-print.at-bottom p,
|
|
footer.no-print.at-bottom a {
|
|
font-size: 1.2em !important;
|
|
font-weight: 500 !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|