/* * ======================================================================== * WAKA BOOKS - STYLESHEET WITH NAMESPACE PROTECTION * ======================================================================== * This stylesheet uses CSS namespace scoping to prevent conflicts with * Bootstrap and other third-party libraries. * * All custom styles are scoped under the .wakabooks class. * Admin styles are isolated in admin/includes/admin_styles.php * ======================================================================== */ /* Import Playfair Display for Headings and Open Sans for Content */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); /* * Typography System: * - Playfair Display: Used for headings (h1-h6), brand name, and highlights * - Open Sans: Used for body text, buttons, and main content */ /* * ======================================================================== * NAMESPACE SCOPING - Custom styles scoped under .wakabooks class * ======================================================================== * This ensures styles don't conflict with Bootstrap or other libraries * Add class="wakabooks" to the tag in your HTML * ======================================================================== */ /* Best Buy Style Header - Scoped under namespace */ .wakabooks .top-bar, .top-bar { background-color: #003b64 !important; color: #ffffff; font-size: 0.9rem; padding: 8px 0; border-bottom: 1px solid #002a4a; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .top-bar-content { min-width: 100%; } .top-bar-links { gap: 0.75rem; flex-wrap: nowrap; min-width: max-content; } .top-bar-link { white-space: nowrap; padding: 2px 4px; transition: color 0.2s ease; font-size: 0.9rem; } .top-bar-link:hover { color: #ffc107 !important; text-decoration: underline !important; } .top-bar-separator { margin: 0 0.25rem; user-select: none; } .main-header { background-color: #003b64 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Prevent header action links from wrapping */ .main-header .d-flex.align-items-center a, .main-header .d-flex.align-items-center .dropdown-toggle { white-space: nowrap; flex-shrink: 0; } .secondary-nav { background-color: #003b64 !important; border-top: 1px solid rgba(255,255,255,0.1); } .brand-logo i { color: #ffc107 !important; } .brand-name { color: #ffffff !important; font-family: 'Playfair Display', serif; letter-spacing: 2px; font-weight: 700; font-style: normal; } .brand-tagline { color: #ffc107 !important; font-size: 0.75rem; } .search-form .form-control { border: none; box-shadow: none; font-size: 1rem; border-radius: 25px 0 0 25px !important; padding-left: 20px; background-color: #ffffff !important; color: #212529 !important; } .search-form .btn { background-color: #ffc107 !important; border-color: #ffc107 !important; color: #003b64 !important; font-weight: 600; border-radius: 0 25px 25px 0 !important; padding: 12px 20px; border-left: none; } .search-form .btn:hover { background-color: #e0a800 !important; border-color: #e0a800 !important; color: #003b64 !important; } .search-form .btn i { font-size: 1.1rem; } /* Google Search Style */ .google-search-container { width: 100%; max-width: 600px; margin: 0 auto; } .google-search-box { position: relative; display: flex; align-items: center; background: #ffffff; border: 1px solid #dfe1e5; border-radius: 24px; box-shadow: 0 2px 5px 1px rgba(64,60,67,.16); height: 44px; padding: 0 16px; transition: box-shadow 0.2s ease; } .google-search-box:hover { box-shadow: 0 2px 8px 1px rgba(64,60,67,.24); } .google-search-box:focus-within { box-shadow: 0 2px 8px 1px rgba(64,60,67,.24); border-color: #4285f4; } .search-icon { color: #9aa0a6; margin-right: 12px; font-size: 14px; } .google-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #202124; padding: 0; margin: 0; height: auto; line-height: 1.5; } .google-search-input::placeholder { color: #9aa0a6; font-size: 16px; } .search-actions { margin-left: 8px; } .google-search-btn { background: none; border: none; color: #4285f4; cursor: pointer; padding: 8px; border-radius: 50%; transition: background-color 0.2s ease; font-size: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .google-search-btn:hover { background-color: #f8f9fa; } .google-search-btn:focus { outline: none; background-color: #f8f9fa; } /* Mobile Google Search */ @media (max-width: 991.98px) { .google-search-box { height: 40px; padding: 0 12px; border-radius: 20px; } .google-search-input { font-size: 14px; } .google-search-input::placeholder { font-size: 14px; } .search-icon { font-size: 12px; margin-right: 8px; } .google-search-btn { width: 28px; height: 28px; font-size: 12px; } } .secondary-nav a { font-size: 0.9rem; font-weight: 500; transition: color 0.2s ease; color: var(--secondary-color) !important; white-space: nowrap; } /* Keep navigation items in single row */ .secondary-nav .d-flex { flex-wrap: nowrap; } /* Ensure menu stays compact on desktop */ @media (min-width: 992px) { .secondary-nav a { font-size: 0.875rem; } .secondary-nav .gap-4 { gap: 1rem !important; } } .secondary-nav a:hover { color: var(--secondary-light) !important; text-decoration: none; } /* Navigation Menu Link Styles */ .nav-menu-link { color: #ffc107 !important; text-decoration: none !important; font-weight: 500; transition: all 0.3s ease; padding: 0.5rem 0; position: relative; display: inline-block; } .nav-menu-link:hover { color: #ffffff !important; transform: translateY(-1px); } /* Active Menu Link */ .nav-menu-link.active { color: #ffffff !important; font-weight: 700; } .nav-menu-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ffc107, #ff9800); border-radius: 2px 2px 0 0; box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); } /* Don't show underline for community toggle */ .community-dropdown-simple .community-toggle.active::after { display: none !important; } /* Navigation Dropdown Styles */ .secondary-nav .dropdown { position: relative; } /* Click-based dropdowns only - no hover behavior */ .secondary-nav .nav-menu-link.dropdown-toggle { padding-right: 1.5rem; } /* Override Bootstrap's default dropdown arrow styling */ .secondary-nav .nav-menu-link.dropdown-toggle::after { border-top-color: #ffc107; transition: transform 0.3s ease; margin-left: 0.5rem; /* Override active underline styles - Bootstrap uses ::after for dropdown arrow */ background: none !important; height: auto !important; box-shadow: none !important; border-radius: 0 !important; bottom: auto !important; left: auto !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; } .secondary-nav .nav-menu-link.dropdown-toggle.active::after { border-top-color: #ffffff; } .secondary-nav .dropdown.show .nav-menu-link.dropdown-toggle::after { transform: translateY(-50%) rotate(180deg) !important; } .secondary-nav .dropdown-menu { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 0.5rem; padding: 0.5rem 0; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; display: block !important; /* Always display for transitions */ pointer-events: none; /* Prevent interaction when hidden */ position: absolute; /* Ensure proper positioning */ z-index: 1000; /* Ensure dropdown appears above other content */ max-height: calc(100vh - 120px); /* Keep dropdown within viewport */ overflow-y: auto; /* Allow scrolling if content is too tall */ } /* Dropdown visible only when clicked (show class) */ .secondary-nav .dropdown.show .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; /* Enable interaction when visible */ } .secondary-nav .dropdown-menu .dropdown-item { color: #212529; padding: 0.75rem 1.25rem; transition: all 0.2s ease; font-size: 0.95rem; } .secondary-nav .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; color: #003b64; } .secondary-nav .dropdown-menu .dropdown-item.active { background-color: #e7f3ff; color: #003b64; font-weight: 600; } /* Simple Community Dropdown - Click-based */ .secondary-nav .community-dropdown-simple { position: relative; display: inline-block; } .secondary-nav .community-dropdown-simple .community-toggle { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; user-select: none; position: relative; z-index: 1051; } .secondary-nav .community-dropdown-simple .community-toggle i { transition: transform 0.3s ease; pointer-events: none; } .secondary-nav .community-dropdown-simple.active .community-toggle i { transform: rotate(180deg); } .secondary-nav .community-dropdown-simple .community-menu { position: absolute; top: calc(100% + 0.75rem); left: 0; background: #ffffff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); padding: 0.5rem 0; min-width: 200px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 1050; pointer-events: none; display: block; } .secondary-nav .community-dropdown-simple.active .community-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .secondary-nav .community-dropdown-simple .community-menu li { margin: 0; padding: 0; list-style: none; } .secondary-nav .community-dropdown-simple .community-menu .community-item { display: block; padding: 0.75rem 1.25rem; color: #212529; text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; cursor: pointer; width: 100%; text-align: left; position: relative; } .secondary-nav .community-dropdown-simple .community-menu .community-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #003b64; transform: scaleY(0); transition: transform 0.2s ease; } .secondary-nav .community-dropdown-simple .community-menu .community-item:hover { background-color: #f8f9fa; color: #003b64; text-decoration: none; padding-left: 1.5rem; } .secondary-nav .community-dropdown-simple .community-menu .community-item:hover::before { transform: scaleY(1); } .secondary-nav .community-dropdown-simple .community-menu .community-item.active { background-color: #e7f3ff; color: #003b64; font-weight: 600; padding-left: 1.5rem; } .secondary-nav .community-dropdown-simple .community-menu .community-item.active::before { transform: scaleY(1); } /* Community Dropdown - Responsive Styles */ @media (max-width: 1199.98px) { .secondary-nav .community-dropdown-simple .community-menu { min-width: 160px; max-width: calc(100vw - 2rem); } .secondary-nav .community-dropdown-simple .community-menu .community-item { padding: 0.5rem 1rem; font-size: 0.85rem; } } @media (max-width: 991.98px) { /* Ensure dropdown is hidden on mobile (community links are in mobile menu) */ .secondary-nav .community-dropdown-simple { display: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { /* Medium screens - ensure dropdown doesn't overflow */ .secondary-nav .community-dropdown-simple .community-menu { right: 0; left: auto; min-width: 180px; } /* If dropdown would overflow, position it to the left */ .secondary-nav .community-dropdown-simple:last-child .community-menu { right: 0; left: auto; } } /* Ensure dropdown works with touch devices on tablets */ @media (min-width: 768px) and (max-width: 991.98px) { .secondary-nav .community-dropdown-simple .community-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .secondary-nav .community-dropdown-simple .community-menu { touch-action: manipulation; } } /* Simple User Dropdown - No Bootstrap */ .user-dropdown-simple { position: relative; display: inline-block; } .user-menu-simple { position: absolute; top: 100%; right: 0; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 16px; box-shadow: 0 25px 70px rgba(0, 59, 100, 0.22), 0 12px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1); margin-top: 10px; padding: 8px 0; min-width: 320px; max-width: 380px; max-height: 500px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 1000; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .user-dropdown-simple:hover .user-menu-simple, .user-dropdown-simple.active .user-menu-simple { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .user-menu-simple li { margin: 0; padding: 0; display: block; } /* Desktop: Compact user dropdown */ @media (min-width: 992px) { .user-menu-simple { max-height: 450px; } .user-menu-simple .menu-item { padding: 8px 14px; } .user-menu-simple .menu-section-title { padding: 8px 14px 6px 14px; } } /* Mobile: Make user dropdown work with touch */ @media (max-width: 991.98px) { .user-dropdown-simple:hover .user-menu-simple { /* Disable hover on mobile, use click only */ opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); pointer-events: none; } .user-dropdown-simple.active .user-menu-simple { /* Show on click (active class) */ opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .user-menu-simple { min-width: calc(100vw - 32px); max-width: calc(100vw - 32px); right: 0; left: auto; } } /* Mobile Navigation Dropdown */ .mobile-nav-section .dropdown { position: relative; } .mobile-nav-section .mobile-nav-item.dropdown-toggle::after { margin-left: auto; border-top-color: currentColor; transition: transform 0.3s ease; } .mobile-nav-section .dropdown.show .mobile-nav-item.dropdown-toggle::after { transform: rotate(180deg); } .mobile-nav-section .dropdown-menu { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 0.25rem; padding: 0.5rem 0; min-width: 100%; } .mobile-nav-section .dropdown-menu .dropdown-item { color: #212529; padding: 0.75rem 1.25rem; transition: all 0.2s ease; font-size: 0.95rem; display: flex; align-items: center; } .mobile-nav-section .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; color: #003b64; } .mobile-nav-section .dropdown-menu .dropdown-item.active { background-color: #e7f3ff; color: #003b64; font-weight: 600; } /* Ensure warning buttons in secondary nav have visible text */ .secondary-nav .btn-warning, .secondary-nav .btn-warning:hover, .secondary-nav .btn-warning:focus, .secondary-nav .btn-warning:active { color: #000000 !important; font-weight: 700 !important; } /* Mobile Menu Dropdown - Simple Style */ .mobile-menu-toggle::after, .mobile-account-toggle::after { display: none !important; /* Hide dropdown arrows for clean look */ } .mobile-menu-toggle, .mobile-account-toggle { font-size: 1.1rem; /* Slightly larger icons */ } #mobileMenuDropdown + .dropdown-menu { border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); } #mobileMenuDropdown + .dropdown-menu .dropdown-item { font-size: 0.95rem; transition: background-color 0.2s ease; } #mobileMenuDropdown + .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; } #mobileMenuDropdown + .dropdown-menu .dropdown-item.active { background-color: #e7f3ff; color: var(--primary-color); font-weight: 500; } #mobileMenuDropdown + .dropdown-menu .dropdown-divider { margin: 0.5rem 0; } /* Mobile Menu Icons Styling */ #mobileMenuDropdown + .dropdown-menu .dropdown-item i { width: 20px; text-align: center; font-size: 1rem; transition: transform 0.2s ease; display: inline-block !important; opacity: 1 !important; visibility: visible !important; } #mobileMenuDropdown + .dropdown-menu .dropdown-item:hover i { transform: scale(1.1); } #mobileMenuDropdown + .dropdown-menu .dropdown-item.active i { font-weight: bold; } /* Ensure all dropdown icons are visible */ .dropdown-menu .dropdown-item i.fas, .dropdown-menu .dropdown-item i.far { display: inline-block !important; opacity: 1 !important; visibility: visible !important; } /* Mobile Account Dropdown Styling */ #mobileAccountDropdown + .dropdown-menu { border-radius: 8px; } #mobileAccountDropdown + .dropdown-menu .dropdown-item i { width: 20px; text-align: center; font-size: 1rem; transition: transform 0.2s ease; display: inline-block !important; opacity: 1 !important; visibility: visible !important; } #mobileAccountDropdown + .dropdown-menu .dropdown-item:hover i { transform: scale(1.1); } #mobileAccountDropdown + .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; } #mobileAccountDropdown + .dropdown-menu .user-avatar { transition: transform 0.2s ease; } #mobileAccountDropdown + .dropdown-menu li:first-child:hover .user-avatar { transform: scale(1.05); } /* Desktop Account Dropdown Styling */ #accountDropdown + .dropdown-menu { border-radius: 8px; } #accountDropdown + .dropdown-menu .dropdown-item i { width: 24px; text-align: center; font-size: 1.1rem; transition: transform 0.2s ease; display: inline-block !important; opacity: 1 !important; visibility: visible !important; margin-right: 10px; } #accountDropdown + .dropdown-menu .dropdown-item:hover i { transform: scale(1.15); } #accountDropdown + .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; } #accountDropdown + .dropdown-menu .user-avatar { transition: transform 0.2s ease; } #accountDropdown + .dropdown-menu li:first-child:hover .user-avatar { transform: scale(1.05); } /* Ensure warning buttons in header and mobile menu have visible text */ .main-header .btn-warning, .main-header .btn-warning:hover, .main-header .btn-warning:focus, .main-header .btn-warning:active, #mobileMenu .btn-warning, #mobileMenu .btn-warning:hover, #mobileMenu .btn-warning:focus, #mobileMenu .btn-warning:active { color: #000000 !important; font-weight: 700 !important; background-color: var(--warning-color) !important; border-color: var(--warning-color) !important; } /* Waka Books Custom Styles */ /* Import DM Sans Font */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); :root { /* * ======================================================================== * NAMESPACED CSS CUSTOM PROPERTIES * ======================================================================== * All custom properties are prefixed with hohe- to prevent conflicts * Bootstrap variables (--bs-*) are intentionally not prefixed as they * follow Bootstrap's naming convention * ======================================================================== */ /* Primary Color - Navy Blue (Kept as requested) */ --hohe-primary-color: #003b64; --hohe-primary-dark: #002642; --hohe-primary-light: #0a5186; --hohe-primary-lighter: #1a6da8; /* Secondary Color - Coral/Salmon (Complementary warm tone) */ --hohe-secondary-color: #ff6b6b; --hohe-secondary-dark: #ee5a52; --hohe-secondary-light: #ff8787; --hohe-secondary-lighter: #ffa3a3; /* Accent Color - Golden Amber */ --hohe-accent-color: #f59e0b; --hohe-accent-dark: #d97706; --hohe-accent-light: #fbbf24; /* Success Color - Emerald Green */ --hohe-success-color: #10b981; --hohe-success-dark: #059669; --hohe-success-light: #34d399; /* Danger Color - Vibrant Red */ --hohe-danger-color: #ef4444; --hohe-danger-dark: #dc2626; --hohe-danger-light: #f87171; /* Warning Color - Amber */ --hohe-warning-color: #f59e0b; --hohe-warning-dark: #d97706; --hohe-warning-light: #fbbf24; /* Info Color - Sky Blue */ --hohe-info-color: #3b82f6; --hohe-info-dark: #2563eb; --hohe-info-light: #60a5fa; /* Neutral Colors - Namespaced */ --hohe-light-color: #f8fafc; --hohe-dark-color: #1e293b; --hohe-gray-50: #f9fafb; --hohe-gray-100: #f3f4f6; --hohe-gray-200: #e5e7eb; --hohe-gray-300: #d1d5db; --hohe-gray-400: #9ca3af; --hohe-gray-500: #6b7280; --hohe-gray-600: #4b5563; /* * Backward compatibility aliases (for existing code) * These will be gradually phased out in favor of hohe- prefixed vars */ --primary-color: var(--hohe-primary-color); --primary-dark: var(--hohe-primary-dark); --primary-light: var(--hohe-primary-light); --primary-lighter: var(--hohe-primary-lighter); --secondary-color: var(--hohe-secondary-color); --secondary-dark: var(--hohe-secondary-dark); --secondary-light: var(--hohe-secondary-light); --secondary-lighter: var(--hohe-secondary-lighter); --accent-color: var(--hohe-accent-color); --accent-dark: var(--hohe-accent-dark); --accent-light: var(--hohe-accent-light); --success-color: var(--hohe-success-color); --success-dark: var(--hohe-success-dark); --success-light: var(--hohe-success-light); --danger-color: var(--hohe-danger-color); --danger-dark: var(--hohe-danger-dark); --danger-light: var(--hohe-danger-light); --warning-color: var(--hohe-warning-color); --warning-dark: var(--hohe-warning-dark); --warning-light: var(--hohe-warning-light); --info-color: var(--hohe-info-color); --info-dark: var(--hohe-info-dark); --info-light: var(--hohe-info-light); --light-color: var(--hohe-light-color); --dark-color: var(--hohe-dark-color); --gray-50: var(--hohe-gray-50); --gray-100: var(--hohe-gray-100); --gray-200: var(--hohe-gray-200); --gray-300: var(--hohe-gray-300); --gray-400: var(--hohe-gray-400); --gray-500: var(--hohe-gray-500); --gray-600: var(--hohe-gray-600); /* Bootstrap Color Overrides (using Bootstrap's convention) */ --bs-primary: var(--hohe-primary-color); --bs-primary-rgb: 0, 59, 100; --bs-secondary: var(--hohe-secondary-color); --bs-secondary-rgb: 255, 107, 107; --bs-success: var(--hohe-success-color); --bs-success-rgb: 16, 185, 129; --bs-danger: var(--hohe-danger-color); --bs-danger-rgb: 239, 68, 68; --bs-warning: var(--hohe-warning-color); --bs-warning-rgb: 245, 158, 11; --bs-info: var(--hohe-info-color); --bs-info-rgb: 59, 130, 246; } /* Global Color Consistency */ .btn-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; } .btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: #ffffff !important; } .btn-secondary { background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; color: #ffffff !important; } .btn-secondary:hover { background-color: var(--secondary-dark) !important; border-color: var(--secondary-dark) !important; color: #ffffff !important; } .btn-success { background-color: var(--success-color) !important; border-color: var(--success-color) !important; color: #ffffff !important; } .btn-success:hover { background-color: var(--success-dark) !important; border-color: var(--success-dark) !important; color: #ffffff !important; } .btn-danger { background-color: var(--danger-color) !important; border-color: var(--danger-color) !important; color: #ffffff !important; } .btn-danger:hover { background-color: var(--danger-dark) !important; border-color: var(--danger-dark) !important; color: #ffffff !important; } .btn-warning { background-color: var(--warning-color) !important; border-color: var(--warning-color) !important; color: #000000 !important; font-weight: 600 !important; } .btn-warning:hover { background-color: var(--warning-dark) !important; border-color: var(--warning-dark) !important; color: #000000 !important; font-weight: 600 !important; } .btn-info { background-color: var(--info-color) !important; border-color: var(--info-color) !important; color: #ffffff !important; } .btn-info:hover { background-color: var(--info-dark) !important; border-color: var(--info-dark) !important; color: #ffffff !important; } /* Badge Colors */ .badge.bg-primary { background-color: var(--primary-color) !important; } .badge.bg-secondary { background-color: var(--secondary-color) !important; } .badge.bg-success { background-color: var(--success-color) !important; } .badge.bg-danger { background-color: var(--danger-color) !important; } .badge.bg-warning { background-color: var(--warning-color) !important; color: var(--dark-color) !important; } .badge.bg-info { background-color: var(--info-color) !important; } /* Card Headers */ .card-header.bg-primary { background-color: var(--primary-color) !important; color: #ffffff !important; } .card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3, .card-header.bg-primary h4, .card-header.bg-primary h5, .card-header.bg-primary h6 { color: #ffffff !important; } .card-header.bg-secondary { background-color: var(--secondary-color) !important; } .card-header.bg-success { background-color: var(--success-color) !important; } .card-header.bg-danger { background-color: var(--danger-color) !important; } .card-header.bg-warning { background-color: var(--warning-color) !important; color: var(--dark-color) !important; } .card-header.bg-info { background-color: var(--info-color) !important; } /* Alert Colors */ .alert-primary { background-color: rgba(0, 59, 100, 0.1) !important; border-color: var(--primary-color) !important; color: var(--primary-dark) !important; } .alert-secondary { background-color: rgba(255, 107, 107, 0.1) !important; border-color: var(--secondary-color) !important; color: var(--secondary-dark) !important; } .alert-success { background-color: rgba(16, 185, 129, 0.1) !important; border-color: var(--success-color) !important; color: var(--success-dark) !important; } .alert-danger { background-color: rgba(239, 68, 68, 0.1) !important; border-color: var(--danger-color) !important; color: var(--danger-dark) !important; } .alert-warning { background-color: rgba(245, 158, 11, 0.1) !important; border-color: var(--warning-color) !important; color: var(--warning-dark) !important; } .alert-info { background-color: rgba(59, 130, 246, 0.1) !important; border-color: var(--info-color) !important; color: var(--info-dark) !important; } /* Text Colors */ .text-primary { color: var(--primary-color) !important; } .text-secondary { color: var(--secondary-color) !important; } .text-success { color: var(--success-color) !important; } .text-danger { color: var(--danger-color) !important; } .text-warning { color: var(--warning-color) !important; } .text-info { color: var(--info-color) !important; } /* Background Colors */ .bg-primary { background-color: var(--primary-color) !important; } .bg-secondary { background-color: var(--secondary-color) !important; } .bg-success { background-color: var(--success-color) !important; } .bg-danger { background-color: var(--danger-color) !important; } .bg-warning { background-color: var(--warning-color) !important; } .bg-info { background-color: var(--info-color) !important; } /* Additional Gray Scale */ :root { --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Design System */ --border-radius: 0.5rem; --border-radius-sm: 0.25rem; --border-radius-lg: 0.75rem; --border-radius-xl: 1rem; --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Custom Waka Books Colors */ --hohe-primary: var(--primary-color); --hohe-secondary: var(--secondary-color); --hohe-accent: var(--accent-color); --hohe-text: var(--dark-color); --hohe-text-light: var(--gray-600); --hohe-text-muted: var(--gray-500); --hohe-bg: #ffffff; --hohe-bg-light: var(--gray-50); --hohe-bg-lighter: var(--light-color); --hohe-border: var(--gray-200); /* Backward compatibility aliases */ --bookzone-primary: var(--hohe-primary); --bookzone-secondary: var(--hohe-secondary); --bookzone-accent: var(--hohe-accent); --bookzone-text: var(--hohe-text); --bookzone-text-light: var(--hohe-text-light); --bookzone-text-muted: var(--hohe-text-muted); --bookzone-bg: var(--hohe-bg); --bookzone-bg-light: var(--hohe-bg-light); --bookzone-bg-lighter: var(--hohe-bg-lighter); --bookzone-border: var(--hohe-border); } /* Global Styles */ body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.7; color: var(--hohe-text); letter-spacing: 0.3px; background-color: var(--hohe-bg); font-size: 16px; } /* Typography - Classic & Elegant */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 0.5px; color: var(--primary-color); line-height: 1.3; } h1 { font-size: 2.5rem; margin-bottom: 1.5rem; } h2 { font-size: 2rem; margin-bottom: 1.25rem; } h3 { font-size: 1.75rem; margin-bottom: 1rem; } h4 { font-size: 1.5rem; margin-bottom: 0.875rem; } h5 { font-size: 1.25rem; margin-bottom: 0.75rem; } h6 { font-size: 1.1rem; margin-bottom: 0.625rem; } /* Paragraphs & Text */ p { margin-bottom: 1rem; line-height: 1.8; } /* Links - Classic Style */ a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--primary-dark); text-decoration: none; } /* Exception: Add underline only for text links (not cards, buttons, etc) */ .text-content a:hover, p a:hover, .alert a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Ensure book cards, categories, and authors NEVER have text decoration */ .book-card a, .book-card a:hover, .book-card a:focus, .book-card a:active, .category-card a, .category-card a:hover, .author-card a, .author-card a:hover, .book-card *, .category-card *, .author-card * { text-decoration: none !important; } /* Book card specific elements */ .book-card .card-title, .book-card .card-text, .book-card .price, .book-card small, .book-card h5, .book-card h6, .book-card p { text-decoration: none !important; } /* Buttons - Classic Literary Style */ .btn { font-family: 'Open Sans', sans-serif; font-size: 0.95rem; letter-spacing: 0.5px; font-weight: 600; padding: 0.625rem 1.75rem; border-radius: 2px; transition: all 0.3s ease; } .btn-primary { background: var(--primary-color); border: 1px solid var(--primary-color); color: #ffffff; } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 59, 100, 0.2); } /* Color Utility Classes */ .bg-hohe-primary { background-color: var(--hohe-primary) !important; } .bg-hohe-secondary { background-color: var(--hohe-secondary) !important; } .bg-hohe-accent { background-color: var(--hohe-accent) !important; } .text-hohe-primary { color: var(--hohe-primary) !important; } .text-hohe-secondary { color: var(--hohe-secondary) !important; } .text-hohe-accent { color: var(--hohe-accent) !important; } .btn-hohe-primary { background-color: var(--hohe-primary); border-color: var(--hohe-primary); color: #ffffff; transition: all 0.3s ease; } .btn-hohe-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 59, 100, 0.3); } .btn-hohe-secondary { background-color: var(--hohe-secondary); border-color: var(--hohe-secondary); color: #ffffff; transition: all 0.3s ease; } .btn-hohe-secondary:hover { background-color: var(--secondary-dark); border-color: var(--secondary-dark); color: #ffffff; box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); } .btn-hohe-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: #ffffff; transition: all 0.3s ease; } .btn-hohe-accent:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: #ffffff; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } .border-hohe-primary { border-color: var(--hohe-primary) !important; } .border-hohe-secondary { border-color: var(--hohe-secondary) !important; } /* Backward compatibility aliases */ .bg-bookzone-primary { background-color: var(--hohe-primary) !important; } .bg-bookzone-secondary { background-color: var(--hohe-secondary) !important; } .bg-bookzone-accent { background-color: var(--hohe-accent) !important; } .text-bookzone-primary { color: var(--hohe-primary) !important; } .text-bookzone-secondary { color: var(--hohe-secondary) !important; } .text-bookzone-accent { color: var(--hohe-accent) !important; } .btn-bookzone-primary { @extend .btn-hohe-primary; } .btn-bookzone-secondary { @extend .btn-hohe-secondary; } .btn-bookzone-accent { @extend .btn-hohe-accent; } .border-bookzone-primary { border-color: var(--hohe-primary) !important; } .border-bookzone-secondary { border-color: var(--hohe-secondary) !important; } /* Language Switch Styles */ .language-dropdown .btn { padding: 8px 12px; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #ffffff; transition: all 0.3s ease; } .language-dropdown .btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; } .language-dropdown .btn:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.2); } .language-dropdown .dropdown-menu { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .language-dropdown .dropdown-item { padding: 0.75rem 1rem; transition: all 0.2s ease; } .language-dropdown .dropdown-item:hover { background-color: var(--hohe-bg-light); color: var(--hohe-primary); } .language-dropdown .dropdown-item img { border-radius: 2px; object-fit: cover; } .language-dropdown .dropdown-header { color: var(--bookzone-text-light); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Mobile Search Toggle */ .mobile-search-toggle { padding: 8px 12px; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #ffffff; transition: all 0.3s ease; border-radius: 8px; } .mobile-search-toggle:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; } .mobile-search-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.2); } .mobile-search-toggle i { font-size: 1rem; } /* Mobile Search Form */ #mobileSearchForm { border-radius: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #mobileSearchForm .google-search-box { background: #ffffff; border: 1px solid #dfe1e5; border-radius: 20px; box-shadow: 0 2px 5px 1px rgba(64,60,67,.16); } #mobileSearchForm .google-search-input { color: #202124; } #mobileSearchForm .google-search-input::placeholder { color: #9aa0a6; } #mobileSearchForm .search-icon { color: #9aa0a6; } #mobileSearchForm .google-search-btn { color: #4285f4; } .section-title { position: relative; padding-bottom: 0.5rem; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--primary-color); border-radius: 2px; } /* Hero Section */ .hero-section { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-lighter) 100%); position: relative; overflow: hidden; color: #ffffff !important; } .hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6, .hero-section p, .hero-section .lead, .hero-section small, .hero-section span { color: #ffffff !important; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.1; } .hero-image { text-align: center; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } /* Search Section */ .search-section { border-bottom: 1px solid #dee2e6; } .search-form .form-control, .search-form .form-select { border-radius: var(--border-radius); border: 2px solid #dee2e6; transition: all 0.3s ease; } .search-form .form-control:focus, .search-form .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } /* Book Cards */ .book-card { transition: all 0.3s ease; border: none; border-radius: 0; overflow: hidden; } .book-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-lg); } .book-image { position: relative; aspect-ratio: 5 / 7; /* A5 ratio (148mm × 210mm) for consistent display */ width: 100%; overflow: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .book-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .book-card:hover .book-image img { transform: scale(1.05); } /* All card images should be A5 ratio */ .card-img-top { aspect-ratio: 5 / 7; width: 100%; object-fit: cover; } .no-image { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--light-color); } .book-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .book-card:hover .book-overlay { opacity: 1; } .price { font-size: 1.25rem; font-weight: bold; color: var(--success-color); background: linear-gradient(135deg, var(--success-color), var(--success-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Category Cards */ .category-card { transition: all 0.3s ease; border: none; border-radius: var(--border-radius); background: white; box-shadow: var(--box-shadow); } .category-card:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-lg); background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: white; } .category-link { text-decoration: none !important; color: inherit; } .category-link:hover { text-decoration: none !important; color: inherit; } /* Author Cards */ .author-card { padding: 1rem; border-radius: var(--border-radius); transition: all 0.3s ease; background: white; box-shadow: var(--box-shadow); } .author-card:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-lg); background: var(--hohe-bg-light); border: 1px solid var(--secondary-light); } .author-link { text-decoration: none !important; color: inherit; } .author-link:hover { text-decoration: none !important; color: inherit; } .author-name { font-size: 0.9rem; margin-bottom: 0.25rem; font-weight: 500; } /* Review Cards */ .review-card { border: none; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all 0.3s ease; } .review-card:hover { box-shadow: var(--box-shadow-lg); } .reviewer-avatar img { width: 50px; height: 50px; min-width: 50px; min-height: 50px; max-width: 50px; max-height: 50px; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; border: 2px solid var(--primary-color); display: block; } .rating i { font-size: 0.875rem; } /* Top Bar */ /* Top bar styles consolidated - see main header section above */ .top-bar a, .top-bar-link { transition: color 0.3s ease; } .top-bar a:hover, .top-bar-link:hover { color: #ffc107 !important; } /* Navigation */ .navbar { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .navbar-brand { font-size: 1.5rem; transition: transform 0.3s ease; } .navbar-brand:hover { transform: translateY(-1px); } .brand-icon i { font-size: 2rem; transition: transform 0.3s ease; } .navbar-brand:hover .brand-icon i { transform: rotate(5deg); } .brand-name { font-size: 1.5rem; line-height: 1.2; } .brand-tagline { font-size: 0.75rem; line-height: 1; } .navbar-nav .nav-link { font-weight: 500; transition: all 0.3s ease; position: relative; padding: 0.75rem 1rem !important; } .navbar-nav .nav-link:hover { color: var(--primary-color) !important; transform: translateY(-1px); } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--primary-color); transition: all 0.3s ease; transform: translateX(-50%); } .navbar-nav .nav-link:hover::after { width: 80%; } .dropdown-menu { border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: var(--border-radius); margin-top: 0.5rem; } .dropdown-item { transition: all 0.3s ease; border-radius: var(--border-radius); margin: 0.25rem; width: auto !important; } .dropdown-item:hover { background-color: var(--primary-color); color: white; transform: translateX(5px); } .dropdown-item i { width: 24px; text-align: center; display: inline-block !important; opacity: 1 !important; visibility: visible !important; margin-right: 8px; } /* Global Circular Avatar Rules - Ensure all user avatars are always circular */ .user-avatar, .user-avatar img, .user-avatar .profile-img, .profile-img, .profile-placeholder, .user-avatar-large, .user-avatar-large .profile-img, .profile-placeholder-large, .reviewer-avatar img { aspect-ratio: 1 / 1 !important; } /* User Avatar */ .user-avatar img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; border: 2px solid transparent; transition: all 0.3s ease; display: block; } .user-avatar:hover img { border-color: var(--primary-color); transform: scale(1.05); } /* Search Bar in Header */ .navbar .input-group { transition: all 0.3s ease; } .navbar .input-group:focus-within { transform: scale(1.02); } .navbar .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } /* Notification Badge - Hidden on user avatar */ .notification-badge, .notification-badge-large { display: none !important; } /* Notification Badge */ .navbar .badge { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Demo Accounts */ .demo-account { transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent !important; } .demo-account:hover { border-color: var(--primary-color) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .demo-account:hover .demo-credentials code { background-color: var(--primary-color); color: white; } .demo-credentials code { background-color: #f8f9fa; color: var(--primary-color); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.8rem; transition: all 0.3s ease; } .cursor-pointer { cursor: pointer; } .hover-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .hover-shadow:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Mobile Responsive */ @media (max-width: 991px) { .navbar-nav { padding: 1rem 0; } .navbar-nav .nav-link { padding: 0.75rem 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .navbar-nav .nav-link::after { display: none; } .navbar .input-group { margin: 1rem 0; } } /* Footer */ footer { background: linear-gradient(135deg, var(--dark-color) 0%, #343a40 100%); } footer a { transition: color 0.3s ease; } footer a:hover { color: var(--primary-color) !important; } .social-links a { transition: transform 0.3s ease; } .social-links a:hover { transform: translateY(-2px); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 1000; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow-lg); } /* Loading Spinner */ .loading-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); } /* Form Styles */ .form-control, .form-select { border-radius: var(--border-radius); border: 2px solid #dee2e6; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .btn { border-radius: var(--border-radius); font-weight: 500; transition: all 0.3s ease; } .btn:hover { transform: translateY(-1px); } /* Alert Styles */ .alert { border: none; border-radius: var(--border-radius); border-left: 4px solid; backdrop-filter: blur(10px); } .alert-success { border-left-color: var(--success-color); background-color: rgba(16, 185, 129, 0.1); color: var(--success-dark); } .alert-danger { border-left-color: var(--danger-color); background-color: rgba(239, 68, 68, 0.1); color: var(--danger-dark); } .alert-warning { border-left-color: var(--warning-color); background-color: rgba(245, 158, 11, 0.1); color: var(--warning-dark); } .alert-info { border-left-color: var(--info-color); background-color: rgba(59, 130, 246, 0.1); color: var(--info-dark); } /* Badge Styles */ .badge { font-size: 0.75rem; padding: 0.375rem 0.75rem; } /* Card Styles */ .card { border: none; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all 0.3s ease; } .card:hover { box-shadow: var(--box-shadow-lg); } .card-header { background-color: var(--light-color); border-bottom: 1px solid #dee2e6; border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } /* Table Styles */ .table { border-radius: var(--border-radius); overflow: hidden; } .table thead th { background-color: var(--light-color); border-bottom: 2px solid #dee2e6; font-weight: 600; } /* Pagination */ .pagination .page-link { border-radius: var(--border-radius); margin: 0 2px; border: 2px solid #dee2e6; color: var(--primary-color); transition: all 0.3s ease; } .pagination .page-link:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } .pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); } /* Responsive Design */ @media (max-width: 768px) { .hero-section h1 { font-size: 2rem; } .hero-section .lead { font-size: 1rem; } .book-image { aspect-ratio: 5 / 7; /* Keep A5 ratio on tablets */ } .back-to-top { bottom: 15px; right: 15px; width: 45px; height: 45px; } } @media (max-width: 576px) { .hero-section { padding: 3rem 0; } .hero-section h1 { font-size: 1.75rem; } .book-image { aspect-ratio: 5 / 7; /* Keep A5 ratio on mobile */ } } /* Utility Classes */ .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .bg-gradient-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); } .bg-gradient-secondary { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%); } .bg-gradient-accent { background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%); } .bg-gradient-success { background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%); } .bg-gradient-danger { background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%); } .bg-gradient-info { background: linear-gradient(135deg, var(--info-color) 0%, var(--info-light) 100%); } .bg-gradient-dark { background: linear-gradient(135deg, var(--dark-color) 0%, #343a40 100%); } .border-primary { border-color: var(--primary-color) !important; } .shadow-custom { box-shadow: var(--box-shadow); } .shadow-custom-lg { box-shadow: var(--box-shadow-lg); } /* Enhanced Book Card Styles */ .book-card { position: relative; overflow: hidden; border-radius: 0; } .book-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .book-card:hover::before { left: 100%; } .book-card .card-body { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%); } /* Skeleton Loading Animation */ .skeleton { animation: skeleton-loading 1s linear infinite alternate; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Smooth Page Transitions */ .page-transition { animation: fadeInUp 0.6s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Interactive Button Effects */ .btn-interactive { position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-interactive::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn-interactive:hover::before { width: 300px; height: 300px; } /* Card Flip Animation */ .card-flip { perspective: 1000px; } .card-flip-inner { transition: transform 0.6s; transform-style: preserve-3d; } .card-flip:hover .card-flip-inner { transform: rotateY(180deg); } /* Glassmorphism Effect */ .glass-effect { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } /* Neon Glow Effect */ .neon-glow { animation: neon-pulse 2s ease-in-out infinite; } @keyframes neon-pulse { 0%, 100% { box-shadow: 0 0 5px rgba(var(--primary-color), 0.5), 0 0 10px rgba(var(--primary-color), 0.3); } 50% { box-shadow: 0 0 20px rgba(var(--primary-color), 0.8), 0 0 30px rgba(var(--primary-color), 0.5); } } /* Floating Animation */ .float-animation { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } /* Hover Lift Effect */ .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } /* Image Zoom Effect */ .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .image-zoom:hover img { transform: scale(1.15) rotate(2deg); } /* Gradient Border Animation */ .gradient-border { position: relative; border: 2px solid transparent; background-clip: padding-box; } .gradient-border::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background-size: 400%; border-radius: inherit; z-index: -1; animation: gradient-rotate 3s linear infinite; opacity: 0; transition: opacity 0.3s; } .gradient-border:hover::before { opacity: 1; } @keyframes gradient-rotate { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Text Gradient */ .text-gradient { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-secondary { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-accent { background: linear-gradient(135deg, var(--accent-color), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Scroll Progress Bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%); z-index: 9999; transition: width 0.1s; } /* Tooltip Custom Styles */ .custom-tooltip { position: relative; cursor: pointer; } .custom-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 8px 12px; border-radius: 4px; white-space: nowrap; font-size: 0.875rem; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; margin-bottom: 8px; } .custom-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(-5px); } /* Badge Pulse Animation */ .badge-pulse { animation: badge-pulse-animation 2s infinite; } @keyframes badge-pulse-animation { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } /* Enhanced Card Hover */ .card-enhanced { position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-enhanced::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,59,100,0.05), rgba(255,107,107,0.05), rgba(245,158,11,0.05)); opacity: 0; transition: opacity 0.3s; pointer-events: none; border-radius: inherit; } .card-enhanced:hover::after { opacity: 1; } /* Ripple Effect */ .ripple { position: relative; overflow: hidden; } .ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .ripple:active::after { width: 200px; height: 200px; } /* Shimmer Effect */ .shimmer { position: relative; overflow: hidden; } .shimmer::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer-animation 2s infinite; } @keyframes shimmer-animation { 0% { left: -100%; } 100% { left: 100%; } } /* Price Tag Effect */ .price-tag { position: relative; display: inline-block; padding: 8px 16px; background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%); color: white; font-weight: bold; border-radius: 8px; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); transition: all 0.3s; } .price-tag::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--success-color); } .price-tag:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } /* Loading Dots Animation */ .loading-dots::after { content: '...'; animation: loading-dots-animation 1.5s infinite; } @keyframes loading-dots-animation { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } } /* Animation Classes */ .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .slide-in-left { animation: slideInLeft 0.5s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } .slide-in-right { animation: slideInRight 0.5s ease-out; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Mobile Responsiveness */ @media (max-width: 991.98px) { /* Top Bar Mobile */ .top-bar { padding: 6px 0; font-size: 0.85rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .top-bar::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .top-bar .container { padding: 0 15px; } .top-bar-links { gap: 0.5rem; padding-right: 15px; } .top-bar-link { font-size: 0.85rem; padding: 3px 6px; flex-shrink: 0; } .top-bar-separator { margin: 0 0.15rem; font-size: 0.75rem; } .main-header .container { padding: 0 15px; } .brand-section { margin-bottom: 15px; text-align: center; } .brand-logo { font-size: 2rem; margin-bottom: 5px; } .brand-name { font-size: 1.5rem; margin-bottom: 5px; } .brand-tagline { font-size: 0.7rem; } /* Search Bar Mobile */ .search-section { margin-bottom: 15px; } /* Mobile Search Icon */ .mobile-search-toggle { padding: 6px 8px; font-size: 0.8rem; } .mobile-search-toggle i { font-size: 0.9rem; } /* Mobile Search Form */ #mobileSearchForm { border-radius: 8px; margin-top: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #mobileSearchForm .search-form { flex-direction: row; gap: 0; } #mobileSearchForm .form-control { border-radius: 25px 0 0 25px !important; padding: 10px 15px; font-size: 16px; flex: 1; } #mobileSearchForm .btn { border-radius: 0 25px 25px 0 !important; padding: 10px 15px; width: auto; border-left: none; } /* Actions Mobile */ .actions-section { text-align: center; } .actions-section .btn { margin: 5px; padding: 10px 20px; font-size: 0.9rem; } /* Secondary Nav Mobile */ .secondary-nav { padding: 10px 0; } .secondary-nav .container { padding: 0 15px; } .secondary-nav .row { gap: 10px; } /* Keep mobile toggle and user icon on same row */ .secondary-nav .col-12.d-lg-none { flex-direction: row !important; } /* Mobile header - white background */ .main-header { background-color: #ffffff !important; } /* Mobile header second row - single row layout with white background */ .secondary-nav { background-color: #ffffff !important; border-bottom: 1px solid #dee2e6; border-top: 1px solid #dee2e6; } .secondary-nav .d-lg-none.d-flex { min-height: 60px; padding: 8px 0; } /* Ensure logo is centered on mobile */ .secondary-nav .navbar-brand.mx-auto { flex: 1; display: flex; justify-content: center; margin: 0 !important; } /* Mobile search icon styling - dark for white background */ .secondary-nav .mobile-search-icon { background: transparent !important; border: 2px solid #dee2e6 !important; border-radius: 8px !important; padding: 8px 12px !important; color: #003b64 !important; min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .secondary-nav .mobile-search-icon:hover { border-color: #003b64 !important; background: rgba(0, 59, 100, 0.1) !important; color: #003b64 !important; } /* Mobile menu toggle - dark for white background */ .secondary-nav .mobile-menu-toggle { border-color: #dee2e6 !important; color: #003b64 !important; } .secondary-nav .mobile-menu-toggle:hover { border-color: #003b64 !important; background: rgba(0, 59, 100, 0.1) !important; } .secondary-nav .hamburger-icon span { background: #003b64 !important; } /* User profile toggle - adjust for white background */ .secondary-nav .user-profile-toggle { color: #003b64 !important; } .secondary-nav .user-avatar { border-color: #dee2e6 !important; } .secondary-nav .profile-placeholder { color: #003b64 !important; background: rgba(0, 59, 100, 0.1) !important; } .secondary-nav .profile-placeholder i { color: #003b64 !important; } .secondary-nav .col-md-4 { text-align: center; } .secondary-nav .navbar-nav { flex-direction: column; background-color: #003b64; padding: 1rem; margin-top: 1rem; border-radius: 8px; } .secondary-nav .nav-link { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; } .secondary-nav .nav-link:last-child { border-bottom: none; } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: block !important; background: none; border: none; color: #ffffff; font-size: 1.5rem; padding: 10px; } /* Hide desktop elements on mobile */ .desktop-only { display: none !important; } } @media (max-width: 767.98px) { /* Extra small devices */ .brand-logo { font-size: 1.8rem; } .brand-name { font-size: 1.3rem; } .search-form .form-control { padding: 10px 15px; font-size: 16px; } .search-form .btn { padding: 10px 15px; } .actions-section .btn { padding: 8px 15px; font-size: 0.85rem; margin: 3px; } /* Fix search bar alignment on mobile */ .input-group { display: flex; align-items: stretch; flex-wrap: nowrap; } .input-group .form-control { height: calc(1.5em + 0.75rem + 2px); line-height: 1.5; display: block; padding: 0.375rem 0.75rem; } .input-group .btn { display: flex; align-items: center; justify-content: center; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; flex-shrink: 0; } .input-group .btn i { display: inline-block; line-height: 1; vertical-align: middle; margin: 0; } /* Fix search-form alignment specifically */ .search-form .input-group { display: flex; align-items: stretch; flex-wrap: nowrap; } .search-form .input-group .form-control { height: calc(1.5em + 0.75rem + 2px); line-height: 1.5; display: block; } .search-form .input-group .btn { height: calc(1.5em + 0.75rem + 2px); display: flex; align-items: center; justify-content: center; line-height: 1.5; vertical-align: middle; } .search-form .input-group .btn i { line-height: 1; vertical-align: middle; display: inline-block; } } @media (max-width: 575.98px) { /* Very small devices */ .top-bar { font-size: 0.75rem; padding: 5px 0; overflow-x: auto; overflow-y: hidden; } .top-bar .container { padding: 0 10px; } .top-bar-links { gap: 0.4rem; padding-right: 10px; } .top-bar-link { font-size: 0.75rem; padding: 2px 4px; } .top-bar-separator { margin: 0 0.1rem; font-size: 0.7rem; } .brand-logo { font-size: 1.5rem; } .brand-name { font-size: 1.1rem; } .brand-tagline { font-size: 0.65rem; } .search-form .form-control { padding: 8px 12px; height: calc(1.5em + 0.5rem + 2px); } .search-form .btn { padding: 8px 12px; font-size: 0.9rem; height: calc(1.5em + 0.5rem + 2px); display: flex; align-items: center; justify-content: center; } .search-form .btn i { line-height: 1; vertical-align: middle; } .actions-section .btn { padding: 6px 12px; font-size: 0.8rem; margin: 2px; } /* Ensure input-group alignment on very small screens */ .input-group .form-control, .input-group .btn { height: calc(1.5em + 0.5rem + 2px); } /* Language Switch Mobile */ .language-dropdown .btn { padding: 6px 8px; font-size: 0.8rem; } .language-dropdown .btn span { display: none !important; } .language-dropdown .dropdown-menu { min-width: 120px; } .language-dropdown .dropdown-item { padding: 0.5rem 0.75rem; font-size: 0.9rem; } } /* General Mobile Responsiveness */ @media (max-width: 991.98px) { /* Hero Section Mobile */ .hero-section { padding: 2rem 0 !important; text-align: center; } .hero-section h1 { font-size: 2rem !important; } .hero-section .lead { font-size: 1rem; } .hero-section .btn { margin: 5px; padding: 10px 20px; } /* Cards Mobile */ .card { margin-bottom: 1rem; } .card-img-top { aspect-ratio: 5 / 7; /* A5 images on mobile */ object-fit: cover; width: 100%; } /* Book Cards Mobile */ .book-card { margin-bottom: 1rem; } .book-card .card-body { padding: 0.875rem; } .book-card .card-title { font-size: 1rem; margin-bottom: 0.25rem; line-height: 1.3; } .book-card .card-text { font-size: 0.9rem; margin-bottom: 0.25rem; line-height: 1.4; } .book-card .price { margin-bottom: 0.25rem !important; } .book-card small { line-height: 1.2; } /* Forms Mobile */ .form-control { font-size: 16px; /* Prevents zoom on iOS */ } .btn { padding: 10px 20px; font-size: 0.9rem; } /* Tables Mobile */ .table-responsive { border-radius: 8px; } /* Modals Mobile */ .modal-dialog { margin: 1rem; } .modal-content { border-radius: 8px; } /* Pagination Mobile */ .pagination { justify-content: center; flex-wrap: wrap; } .page-link { padding: 0.5rem 0.75rem; font-size: 0.9rem; } /* Alerts Mobile */ .alert { margin: 1rem 0; padding: 1rem; } /* Badges Mobile */ .badge { font-size: 0.75rem; } /* Spacing Mobile */ .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 2rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } } @media (max-width: 767.98px) { /* Extra small devices */ .hero-section h1 { font-size: 1.8rem !important; } .hero-section .lead { font-size: 0.95rem; } .card-img-top { aspect-ratio: 5 / 7; /* A5 images on small tablets */ width: 100%; } .book-card .card-title { font-size: 0.95rem; margin-bottom: 0.2rem; line-height: 1.25; } .book-card .card-text { font-size: 0.85rem; margin-bottom: 0.2rem; line-height: 1.3; } .book-card .price { margin-bottom: 0.2rem !important; } .book-card small { line-height: 1.1; } .btn { padding: 8px 16px; font-size: 0.85rem; } .form-control { padding: 8px 12px; } .modal-dialog { margin: 0.5rem; } .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } } @media (max-width: 575.98px) { /* Very small devices */ .hero-section { padding: 1.5rem 0 !important; } .hero-section h1 { font-size: 1.5rem !important; } .hero-section .lead { font-size: 0.9rem; } .card-img-top { aspect-ratio: 5 / 7; /* A5 images on small mobile */ width: 100%; } .book-card .card-body { padding: 0.625rem; } .book-card .card-title { font-size: 0.9rem; margin-bottom: 0.15rem; line-height: 1.2; } .book-card .card-text { font-size: 0.8rem; margin-bottom: 0.15rem; line-height: 1.25; } .book-card .price { margin-bottom: 0.15rem !important; font-size: 1.1rem; } .book-card small { line-height: 1.1; font-size: 0.75rem; } .btn { padding: 6px 12px; font-size: 0.8rem; } .form-control { padding: 6px 10px; font-size: 16px; } .modal-dialog { margin: 0.25rem; } .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .mb-4 { margin-bottom: 1rem !important; } } /* Social Icon Styles */ .social-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50% !important; } .social-icon:hover { transform: translateY(-3px) rotate(5deg); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3); } .social-icon:hover i { animation: bounce 0.6s ease-in-out; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Text Gradient Light */ .text-gradient-light { background: linear-gradient(135deg, #ffffff 0%, var(--secondary-light) 50%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Back to Top Enhanced */ .back-to-top { animation: fadeInUp 0.3s ease-out; } .back-to-top:hover { transform: translateY(-3px) scale(1.1); } /* ============================================ Mobile Header Elements - Enhanced Styling ============================================ */ /* Mobile Search Icon Button */ .mobile-search-icon { background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%) !important; border: none !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: #ffffff !important; font-size: 1.1rem !important; box-shadow: 0 2px 8px rgba(0, 86, 179, 0.3) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .mobile-search-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; } .mobile-search-icon:hover::before { width: 100%; height: 100%; } .mobile-search-icon:hover { transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4) !important; background: linear-gradient(135deg, #0056b3 0%, var(--primary-color) 100%) !important; } .mobile-search-icon:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 1px 4px rgba(0, 86, 179, 0.3) !important; } .mobile-search-icon i { position: relative; z-index: 1; transition: transform 0.3s ease; } .mobile-search-icon:hover i { transform: scale(1.1); } .mobile-search-icon[aria-expanded="true"] { background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important; box-shadow: 0 2px 8px rgba(0, 86, 179, 0.5) !important; } /* Mobile Menu Toggle (Hamburger) */ .mobile-menu-toggle { background: transparent !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 8px !important; padding: 10px 12px !important; color: #ffffff !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; min-width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobile-menu-toggle::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transition: left 0.3s ease; } .mobile-menu-toggle:hover::before { left: 0; } .mobile-menu-toggle:hover { border-color: rgba(255, 255, 255, 0.6) !important; background: rgba(255, 255, 255, 0.1) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .mobile-menu-toggle:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .mobile-menu-toggle[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.8) !important; background: rgba(255, 255, 255, 0.15) !important; } /* Hamburger Icon Animation */ .hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; position: relative; transition: all 0.3s ease; } .hamburger-icon span { display: block; height: 3px; width: 100%; background: #ffffff; border-radius: 3px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .mobile-menu-toggle:hover .hamburger-icon span { background: rgba(255, 255, 255, 0.9); } .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* User Avatar on Mobile */ .user-profile-toggle { position: relative; transition: all 0.35s cubic-bezier(0.34, 1.35, 0.64, 1); border-radius: 50%; padding: 0; background: transparent; border: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-profile-toggle:focus { outline: none; box-shadow: none; } .user-profile-toggle:hover { filter: brightness(1.1); background-color: rgba(255, 255, 255, 0.15); transform: translateY(-1px); } .user-profile-toggle:active { transform: translateY(0); } .user-profile-toggle::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); opacity: 0; transition: opacity 0.3s ease; } .user-profile-toggle:hover::before { opacity: 1; } .user-avatar { position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; /* Keep hidden for avatar content */ border: 2.5px solid rgba(255, 255, 255, 0.5); transition: all 0.35s cubic-bezier(0.34, 1.35, 0.64, 1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12); box-sizing: border-box; flex-shrink: 0; } .user-profile-toggle:hover .user-avatar { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 123, 255, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.1); transform: scale(1.1); } .user-avatar .profile-img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; transition: transform 0.3s ease; display: block; } .user-profile-toggle:hover .user-avatar .profile-img { transform: scale(1.1); } .profile-placeholder { width: 100%; height: 100%; min-width: 100%; min-height: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%); color: #ffffff; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.9px; transition: all 0.35s cubic-bezier(0.34, 1.35, 0.64, 1); border-radius: 50%; } .user-profile-toggle:hover .profile-placeholder { background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 100%); transform: rotate(5deg) scale(1.1); } .profile-placeholder i { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); } /* User Name Display */ .user-name { font-weight: 600; font-size: 0.95rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.3px; transition: all 0.3s ease; } .user-profile-toggle:hover .user-name { color: #ffffff !important; } /* Notification Badge - Overlaid on top of user avatar */ .user-profile-toggle { position: relative; } .user-profile-toggle .notification-badge { display: none !important; } @keyframes pulse-badge { 0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4); } 50% { transform: scale(1.15); box-shadow: 0 3px 10px rgba(220, 53, 69, 0.6); } } /* ============================================ Mobile Dropdown Menus - Enhanced Styling ============================================ */ /* Two Column Dropdown Styles */ .user-dropdown-two-column { background: #ffffff !important; border-radius: 0 !important; border: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; padding: 0 !important; min-width: 100% !important; width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; margin: 0 !important; position: fixed !important; top: auto !important; bottom: 0 !important; transform: none !important; } .user-dropdown-two-column.dropdown-menu-end { left: 0 !important; right: 0 !important; } /* Desktop: Limit width and position normally */ @media (min-width: 768px) { .user-dropdown-two-column { position: absolute !important; width: 600px !important; max-width: 90vw !important; min-width: 500px !important; bottom: auto !important; top: 100% !important; left: auto !important; right: 0 !important; border-radius: 16px !important; margin-top: 10px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; animation: dropdownFadeIn 0.2s ease-out; } .user-dropdown-two-column.dropdown-menu-end { left: auto !important; right: 0 !important; } } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Mobile Backdrop */ .user-dropdown-two-column.show ~ .dropdown-backdrop, .dropdown-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; display: block; } .dropdown-header-full { padding: 20px 24px 16px 24px !important; background: linear-gradient(135deg, rgba(0, 59, 100, 0.08), rgba(0, 59, 100, 0.04)); border-bottom: 2px solid rgba(0, 59, 100, 0.1); position: relative; } .dropdown-header-full::after { content: ''; position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 59, 100, 0.2), transparent); } .dropdown-header-full .dropdown-header { margin: 0 !important; padding: 0 !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #003b64 !important; letter-spacing: 0.3px; } .dropdown-content-wrapper { padding: 0 !important; margin: 0 !important; list-style: none !important; max-height: 70vh; overflow-y: auto; } @media (max-width: 767.98px) { .dropdown-content-wrapper { max-height: 60vh; } } .dropdown-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; } .dropdown-column { padding: 20px 24px; border-right: 1px solid rgba(0, 0, 0, 0.08); background: #ffffff; } .dropdown-column:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .dropdown-column:last-child { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .dropdown-section { margin-bottom: 20px; position: relative; } .dropdown-section:last-child { margin-bottom: 0; } .dropdown-section::after { content: ''; position: absolute; bottom: -10px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); } .dropdown-section:last-child::after { display: none; } .dropdown-section .dropdown-header { padding: 0 0 12px 0 !important; margin: 0 0 12px 0 !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #495057 !important; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 2px solid rgba(0, 59, 100, 0.1) !important; background: transparent !important; position: relative; padding-bottom: 10px !important; } .dropdown-section .dropdown-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, #003b64, transparent); } .dropdown-section .dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px !important; margin-bottom: 6px; font-size: 0.925rem !important; color: #212529 !important; text-decoration: none; border-radius: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; white-space: nowrap; text-overflow: ellipsis; border: 1px solid transparent; background: #ffffff; } .dropdown-section .dropdown-item:last-child { margin-bottom: 0; } .dropdown-section .dropdown-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: linear-gradient(180deg, #003b64, #0056b3); border-radius: 0 2px 2px 0; transition: height 0.25s ease; } /* Hover effects removed - click-based only */ .dropdown-section .dropdown-item:active { transform: translateX(2px); box-shadow: 0 1px 3px rgba(0, 59, 100, 0.1); } .dropdown-section .dropdown-item i { width: 22px; text-align: center; margin-right: 10px; flex-shrink: 0; font-size: 1rem; color: #6c757d; transition: all 0.25s ease; } /* Hover effects removed - click-based only */ .dropdown-section .dropdown-item .badge { margin-left: auto; margin-right: 0; font-size: 0.75rem; padding: 4px 8px; font-weight: 600; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .dropdown-section .dropdown-item.text-danger { color: #dc3545 !important; } .dropdown-section .dropdown-item.text-danger::before { background: linear-gradient(180deg, #dc3545, #c82333); } /* Hover effects removed - click-based only */ /* Modern User Dropdown Design */ .user-dropdown-modern { min-width: 380px; max-width: 440px; padding: 0; margin-bottom: 12px; border-radius: 24px; box-shadow: 0 25px 70px rgba(0, 59, 100, 0.22), 0 12px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important; border: 1px solid rgba(0, 59, 100, 0.08); background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); animation: dropdownSlideUp 0.4s cubic-bezier(0.34, 1.35, 0.64, 1); z-index: 1050; max-height: calc(100vh - 100px) !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; backdrop-filter: blur(16px) saturate(180%); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #003b64 #f1f3f5; display: flex !important; flex-direction: column !important; /* Bootstrap handles display - hidden by default, shown with .show class */ } /* Ensure dropdown list items are flex items */ .user-dropdown-modern > li { display: block; } /* Header and quick actions should not shrink */ .user-dropdown-modern > li.user-dropdown-header, .user-dropdown-modern > li.quick-actions-section { flex-shrink: 0; flex-grow: 0; } /* Menu items section should be able to shrink to enable scrolling */ .user-dropdown-modern > li.dropdown-menu-items { flex: 1 1 auto; min-height: 0; overflow: visible; } /* Ensure scrolling works when dropdown is shown (all screen sizes) */ .user-dropdown-modern.show { overflow-y: auto !important; overflow-x: hidden !important; /* Ensure dropdown can scroll independently */ position: relative; z-index: 1050; } /* Desktop positioning - work with Bootstrap Popper.js */ @media (min-width: 768px) { .user-dropdown-modern { /* Let Bootstrap handle positioning, only constrain dimensions */ max-width: min(440px, calc(100vw - 32px)) !important; max-height: calc(100vh - 120px) !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; transform-origin: bottom right; } /* Work with Bootstrap's dropdown-menu-end positioning */ .dropdown-menu-end.user-dropdown-modern { /* Bootstrap handles left/right positioning, we just constrain size */ max-width: min(440px, calc(100vw - 32px)) !important; transform-origin: bottom right; } /* Allow Bootstrap Popper to position, but constrain viewport */ .user-dropdown-modern[data-bs-popper] { max-width: min(440px, calc(100vw - 32px)) !important; max-height: calc(100vh - 120px) !important; } /* Ensure dropdown is visible when Bootstrap adds show class */ .user-dropdown-modern.show { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: calc(100vh - 120px) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Ensure parent dropdown has proper positioning */ .secondary-nav .dropdown { position: relative; } } /* Custom scrollbar for user dropdown */ .user-dropdown-modern::-webkit-scrollbar { width: 8px; display: block !important; } .user-dropdown-modern::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 0 20px 20px 0; } .user-dropdown-modern::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #003b64 0%, #0056b3 100%); border-radius: 10px; border: 2px solid #f1f3f5; cursor: pointer; } .user-dropdown-modern::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0056b3 0%, #007bff 100%); } @keyframes dropdownSlideUp { 0% { opacity: 0; transform: translateY(20px) translateX(-15px) scale(0.88); filter: blur(4px); } 40% { opacity: 0.6; filter: blur(2px); } 70% { transform: translateY(-2px) translateX(2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); } } /* User Dropdown Header */ .user-dropdown-header { background: linear-gradient(135deg, #002744 0%, #003b64 30%, #0056b3 85%, #007bff 100%); padding: 0; position: relative; overflow: hidden; border-bottom: none; box-shadow: 0 4px 20px rgba(0, 59, 100, 0.25) inset, 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0; } .user-menu-simple .user-dropdown-header { padding: 12px 16px; } .user-menu-simple .user-dropdown-header .d-flex { gap: 12px; } .user-menu-simple .user-avatar-large { width: 50px; height: 50px; min-width: 50px; min-height: 50px; } .user-menu-simple .user-name-large { font-size: 0.95rem; } .user-menu-simple .user-dropdown-header small { font-size: 0.8rem; } .user-dropdown-header::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .user-dropdown-header::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .user-avatar-large { position: relative; z-index: 1; width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-sizing: border-box; } .user-avatar-large .profile-img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; display: block; } .profile-placeholder-large { width: 100%; height: 100%; min-width: 100%; min-height: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.25)); color: #ffffff; font-weight: 700; font-size: 1.5rem; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 1px; border-radius: 50%; } .notification-badge-large { display: none !important; } .user-name-large { color: #ffffff; font-size: 1.1rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; letter-spacing: 0.3px; } .user-dropdown-header .text-muted { color: rgba(255, 255, 255, 0.85) !important; font-size: 0.85rem; } /* Quick Actions Section */ .quick-actions-section { width: 100%; max-width: 100%; box-sizing: border-box; background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%); border-bottom: 1px solid rgba(0, 59, 100, 0.09); padding-top: 12px !important; position: relative; box-shadow: 0 2px 8px rgba(0, 59, 100, 0.03) inset; flex-shrink: 0; } .user-menu-simple .quick-actions-section { padding: 12px 12px 10px 12px !important; } .quick-actions-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 59, 100, 0.1) 50%, transparent 100%); pointer-events: none; z-index: 0; } .quick-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; z-index: 1; } .quick-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f0f2f5 100%); border: 1.5px solid rgba(0, 59, 100, 0.1); border-radius: 12px; text-decoration: none; color: #495057; font-size: 0.7rem; font-weight: 600; transition: all 0.35s cubic-bezier(0.34, 1.35, 0.64, 1); position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: visible; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 59, 100, 0.06), 0 1px 3px rgba(0, 59, 100, 0.04); min-height: 55px; z-index: 10; pointer-events: auto; } .user-menu-simple .quick-action-btn { padding: 10px 6px; font-size: 0.65rem; min-height: 50px; } .quick-action-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(0, 59, 100, 0.08) 0%, transparent 70%); transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; pointer-events: none; z-index: 0; } .quick-action-btn > * { position: relative; z-index: 1; } .quick-action-btn i { font-size: 1.1rem; color: #003b64; margin-bottom: 0; transition: all 0.3s cubic-bezier(0.34, 1.35, 0.64, 1); filter: drop-shadow(0 1px 2px rgba(0, 59, 100, 0.1)); } .user-menu-simple .quick-action-btn i { font-size: 1rem; } /* Hide text labels in quick action buttons - show only icons */ .quick-action-btn span { display: none !important; } /* Hover effects removed - click-based only */ .quick-action-btn:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 2px 8px rgba(0, 59, 100, 0.15); } /* Logout button in quick actions */ .quick-action-btn-logout { color: #dc3545 !important; } .quick-action-btn-logout i { color: #dc3545 !important; } /* Hover effects removed - click-based only */ .quick-action-btn-logout:active { transform: translateY(-1px) scale(0.98) !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important; } .quick-action-badge { position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #ff5252 0%, #dc3545 50%, #c62828 100%); color: #ffffff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; border: 2.5px solid #ffffff; box-shadow: 0 4px 10px rgba(220, 53, 69, 0.45), 0 2px 4px rgba(220, 53, 69, 0.35); animation: badgePulse 2s ease-in-out infinite; z-index: 10; } @keyframes badgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(220, 53, 69, 0.45), 0 2px 4px rgba(220, 53, 69, 0.35); } 50% { transform: scale(1.12); box-shadow: 0 6px 16px rgba(220, 53, 69, 0.6), 0 3px 8px rgba(220, 53, 69, 0.5); } } /* Menu Items Section */ .dropdown-menu-items { padding: 8px 0; flex: 1 1 auto; min-height: 0; overflow: visible; flex-shrink: 0; } /* Remove nested scrolling - let parent handle all scrolling */ .user-dropdown-modern .dropdown-menu-items { overflow: visible !important; max-height: none !important; } /* Scrollbar styles are handled by parent .user-dropdown-modern */ .menu-section { margin-bottom: 2px; } .menu-section-title { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px 16px; font-size: 0.7rem; font-weight: 700; color: #495057; text-transform: uppercase; letter-spacing: 0.8px; position: relative; } .menu-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 59, 100, 0.15) 0%, transparent 100%); margin-left: 8px; } .menu-section-title i { font-size: 0.8rem; color: #003b64; background: linear-gradient(135deg, rgba(0, 59, 100, 0.1), rgba(0, 59, 100, 0.05)); padding: 4px; border-radius: 5px; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: #212529; transition: all 0.35s cubic-bezier(0.34, 1.25, 0.64, 1); border-left: 3px solid transparent; position: relative; margin: 2px 8px; border-radius: 10px; background: transparent; } .menu-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #003b64, #0056b3); opacity: 0; transition: opacity 0.25s ease; } /* Hover effects removed - click-based only */ .menu-item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 59, 100, 0.08) 0%, rgba(0, 59, 100, 0.04) 100%); border-radius: 10px; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.34, 1.35, 0.64, 1); position: relative; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 59, 100, 0.04); } .menu-item-icon::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(255, 193, 7, 0.15), transparent); transform: rotate(45deg); transition: all 0.5s ease; opacity: 0; } .menu-item-icon i { font-size: 0.9rem; color: #003b64; transition: all 0.25s ease; } /* Hover effects removed - click-based only */ .menu-item-content { flex: 1; display: flex; flex-direction: column; gap: 0; } .menu-item-title { font-size: 0.9rem; font-weight: 600; color: inherit; line-height: 1.3; } .menu-item-desc { font-size: 0.8rem; color: #6c757d; line-height: 1.3; } .menu-item-arrow { font-size: 0.75rem; color: #adb5bd; transition: all 0.3s cubic-bezier(0.34, 1.35, 0.64, 1); flex-shrink: 0; } /* Hover effects removed - click-based only */ /* Dropdown Footer */ .dropdown-menu-footer { padding: 8px 0 0 0; border-top: 1px solid rgba(0, 0, 0, 0.06); background: #f8f9fa; } .dropdown-menu-footer .settings-btn { margin: 0 8px 8px 8px; background: #ffffff; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-menu-footer .settings-btn:hover { background: linear-gradient(90deg, rgba(0, 59, 100, 0.08), rgba(0, 59, 100, 0.04)); border-color: rgba(0, 59, 100, 0.2); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 59, 100, 0.12); } .dropdown-menu-footer .settings-btn:hover .menu-item-icon { background: linear-gradient(135deg, rgba(0, 59, 100, 0.15), rgba(0, 59, 100, 0.1)); transform: scale(1.05); } .dropdown-menu-footer .settings-btn:hover .menu-item-icon i { transform: scale(1.1); color: #0056b3; } .dropdown-menu-footer .settings-btn:hover .menu-item-arrow { color: #003b64; transform: translateX(4px); } .logout-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; text-decoration: none; color: #dc3545; font-weight: 600; font-size: 0.95rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff; margin: 0 8px 8px 8px; border-radius: 10px; border: 1px solid rgba(220, 53, 69, 0.2); } .logout-btn i { font-size: 1rem; transition: all 0.25s ease; } .logout-btn:hover { background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05)); color: #c82333; border-color: rgba(220, 53, 69, 0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15); } .logout-btn:hover i { transform: translateX(-2px); } /* Mobile/Tablet User Dropdown - Attached to user icon (same style as desktop) */ @media (max-width: 991.98px) { /* Ensure parent dropdown container has relative positioning */ .main-header .dropdown { position: relative !important; } /* Mobile/Tablet: Ensure dropdown is positioned correctly relative to user icon */ .d-lg-none .dropdown { position: relative !important; } .d-lg-none .user-profile-toggle { position: relative; z-index: 1; display: flex !important; align-items: center; } /* Remove any default Bootstrap dropdown spacing on mobile/tablet */ .d-lg-none .dropdown-toggle::after { display: none; } /* Ensure no gap between user icon and dropdown */ .d-lg-none .dropdown-menu { margin-top: 0 !important; margin-bottom: 0 !important; } .mobile-user-dropdown.user-dropdown-modern { z-index: 1055 !important; position: absolute !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; margin-left: auto !important; min-width: 280px; max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 120px) !important; border-radius: 16px; transform: translateY(0) translateX(0) !important; transform-origin: top right !important; animation: dropdownSlideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1) !important; border: 1px solid rgba(0, 0, 0, 0.08); overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; will-change: auto !important; } @keyframes dropdownSlideInRight { from { opacity: 0; transform: translateY(-10px) translateX(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) translateX(0) scale(1); } } /* Prevent Bootstrap from repositioning the dropdown */ .mobile-user-dropdown.user-dropdown-modern[data-bs-popper], .mobile-user-dropdown.user-dropdown-modern.show, .mobile-user-dropdown.user-dropdown-modern[data-bs-popper="static"] { position: absolute !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; transform: translateY(0) translateX(0) !important; transform-origin: top right !important; margin-top: 0 !important; margin-right: 0 !important; margin-left: auto !important; inset: auto !important; } /* Override any Bootstrap Popper positioning */ .mobile-user-dropdown.user-dropdown-modern[style*="position"], .mobile-user-dropdown.user-dropdown-modern[style*="top"], .mobile-user-dropdown.user-dropdown-modern[style*="inset"] { position: absolute !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; transform: translateY(0) translateX(0) !important; transform-origin: top right !important; inset: auto !important; } /* Ensure dropdown appears above other content */ .mobile-user-dropdown.user-dropdown-modern.show { display: block !important; } } /* Mobile Responsive - Small screens */ @media (max-width: 575.98px) { .user-dropdown-modern:not(.mobile-user-dropdown) { min-width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin: 8px 12px; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 59, 100, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15) !important; } .mobile-user-dropdown.user-dropdown-modern { min-width: 280px; max-width: calc(100vw - 12px) !important; margin-right: 0 !important; margin-left: auto !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; transform: translateY(0) translateX(0) !important; transform-origin: top right !important; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 59, 100, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15) !important; } .quick-actions-section { padding: 16px 12px 12px !important; width: 100%; max-width: 100%; box-sizing: border-box; } .quick-actions-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; max-width: 100%; padding: 0; margin: 0; box-sizing: border-box; } .quick-action-btn { padding: 12px 4px; font-size: 0.65rem; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; border-radius: 10px; /* Enhanced touch target size for icon-only buttons */ min-height: 60px; } /* Hover effects removed - click-based only */ .quick-action-btn:active { transform: scale(0.95); background: linear-gradient(135deg, rgba(0, 59, 100, 0.12), rgba(0, 59, 100, 0.08)); } .quick-action-btn span { display: none !important; } .quick-action-btn i { font-size: 1.1rem; margin-bottom: 0; } .menu-item { padding: 12px 16px; margin: 2px 4px; border-radius: 10px; /* Enhanced touch target */ min-height: 56px; } /* Hover effects removed - click-based only */ .menu-item:active { background: linear-gradient(135deg, rgba(0, 59, 100, 0.12), rgba(0, 59, 100, 0.06)); } .menu-item-icon { width: 40px; height: 40px; } .menu-item-title { font-size: 0.9rem; } .menu-item-desc { font-size: 0.75rem; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } /* Mobile: Slide up animation */ @media (max-width: 767.98px) { .user-dropdown-two-column.show { animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); } } /* ============================================ Mobile Menu Overlay - Enhanced Design ============================================ */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1060; } .mobile-menu-overlay:not(.show) { display: none; } .mobile-menu-overlay.show, .mobile-menu-overlay.collapsing { display: block; } .mobile-menu-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; z-index: 1061; } .mobile-menu-overlay.show .mobile-menu-backdrop, .mobile-menu-overlay.collapsing .mobile-menu-backdrop { opacity: 1; } .mobile-menu-content { position: fixed; top: 0; left: 0; bottom: 0; width: 85%; max-width: 320px; background: #ffffff; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); z-index: 1062; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .mobile-menu-overlay.show .mobile-menu-content, .mobile-menu-overlay.collapsing .mobile-menu-content { transform: translateX(0); } /* User menu content - slides from right */ .mobile-menu-content-right { left: auto !important; right: 0 !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important; transform: translateX(100%) !important; } .mobile-menu-overlay.show .mobile-menu-content-right, .mobile-menu-overlay.collapsing .mobile-menu-content-right { transform: translateX(0) !important; } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(135deg, rgba(0, 59, 100, 0.05), rgba(0, 59, 100, 0.02)); } .mobile-menu-header h5 { font-size: 1.25rem; font-weight: 700; color: #212529; margin: 0; } .btn-close-menu { background: transparent; border: none; font-size: 1.5rem; color: #6c757d; padding: 8px; line-height: 1; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .btn-close-menu:hover { background: rgba(0, 0, 0, 0.08); color: #212529; } .mobile-menu-body { flex: 1; overflow-y: auto; } .mobile-nav-section { margin-bottom: 24px; padding: 0 12px; } .mobile-nav-section:last-child { margin-bottom: 0; } .mobile-nav-section-title { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 16px 12px 16px; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 8px; } .mobile-nav-item { display: flex; align-items: center; padding: 14px 16px; margin: 4px 8px; color: #212529; text-decoration: none; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; font-weight: 500; position: relative; overflow: hidden; } .mobile-nav-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #003b64; transform: scaleY(0); transition: transform 0.2s ease; border-radius: 0 4px 4px 0; } .mobile-nav-item i { width: 24px; font-size: 1.1rem; margin-right: 12px; color: #6c757d; transition: all 0.2s ease; flex-shrink: 0; } .mobile-nav-item span { flex: 1; } .mobile-nav-item:hover { background: rgba(0, 59, 100, 0.08); color: #003b64; transform: translateX(4px); } .mobile-nav-item:hover::before { transform: scaleY(1); } .mobile-nav-item:hover i { color: #003b64; transform: scale(1.1); } .mobile-nav-item.active { background: linear-gradient(135deg, rgba(0, 59, 100, 0.12), rgba(0, 59, 100, 0.08)); color: #003b64; font-weight: 600; } .mobile-nav-item.active::before { transform: scaleY(1); } .mobile-nav-item.active i { color: #003b64; } /* Smooth scrollbar for mobile menu */ .mobile-menu-content::-webkit-scrollbar { width: 4px; } .mobile-menu-content::-webkit-scrollbar-track { background: transparent; } .mobile-menu-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; } .mobile-menu-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } /* User Dropdown Header in Mobile Menu */ .user-dropdown-header-mobile { padding: 16px; border-bottom: none; background: linear-gradient(135deg, #003b64 0%, #0056b3 100%); margin-bottom: 8px; } .user-dropdown-header-mobile .user-name-large { color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; } .user-dropdown-header-mobile .text-muted { color: rgba(255, 255, 255, 0.85) !important; } .mobile-nav-section .menu-section-title { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 16px 12px 16px; margin: 0 0 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .mobile-nav-section .menu-section-title i { font-size: 0.85rem; } .mobile-nav-item.text-danger { color: #dc3545 !important; } .mobile-nav-item.text-danger:hover { background: rgba(220, 53, 69, 0.1) !important; color: #dc3545 !important; } .mobile-nav-item.text-danger i { color: #dc3545 !important; } /* Dropdown Header */ .mobile-user-dropdown .dropdown-header { padding: 12px 16px 8px 16px !important; margin-bottom: 4px !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #495057 !important; text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); } /* Dropdown Items */ .mobile-user-dropdown .dropdown-item { padding: 12px 20px !important; font-size: 0.95rem !important; color: #212529 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; border-radius: 0 !important; margin: 2px 8px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; position: relative; overflow: hidden; } .mobile-user-dropdown .dropdown-item::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(135deg, var(--primary-color), #0056b3); transform: scaleY(0); transition: transform 0.25s ease; border-radius: 0 3px 3px 0; } .mobile-user-dropdown .dropdown-item:focus::before { transform: scaleY(1); } /* Hover effects removed - click-based only */ .mobile-user-dropdown .dropdown-item:active { transform: translateX(2px); background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(13, 110, 253, 0.08)) !important; } /* Add Book Item - Special Styling */ .mobile-user-dropdown .dropdown-item[href*="add-book"] { background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05)) !important; font-weight: 600 !important; color: var(--primary-color) !important; border: 1px solid rgba(13, 110, 253, 0.2); } /* Hover effects removed - click-based only */ .mobile-user-dropdown .dropdown-item[href*="add-book"] i { color: var(--primary-color) !important; font-size: 1.1rem !important; } /* Dropdown Icons */ .mobile-user-dropdown .dropdown-item i { width: 22px !important; text-align: center !important; font-size: 1rem !important; margin-right: 12px !important; transition: all 0.25s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #6c757d !important; } /* Hover effects removed - click-based only */ /* Dropdown Dividers */ .mobile-user-dropdown .dropdown-divider { margin: 8px 16px !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; opacity: 1 !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); } /* Logout Item - Special Styling */ .mobile-user-dropdown .dropdown-item.text-danger { color: #dc3545 !important; font-weight: 500 !important; } .mobile-user-dropdown .dropdown-item.text-danger i { color: #dc3545 !important; } /* Hover effects removed - click-based only */ /* Active State */ .mobile-user-dropdown .dropdown-item.active { background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(13, 110, 253, 0.08)) !important; color: var(--primary-color) !important; font-weight: 600 !important; } .mobile-user-dropdown .dropdown-item.active i { color: var(--primary-color) !important; } /* Focus State for Accessibility */ .mobile-user-dropdown .dropdown-item:focus { outline: 2px solid rgba(13, 110, 253, 0.3); outline-offset: -2px; } /* Responsive adjustments for mobile elements */ @media (max-width: 575.98px) { .mobile-search-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; } .mobile-menu-toggle { min-width: 44px !important; height: 44px !important; padding: 8px 10px !important; } .hamburger-icon { width: 22px; height: 16px; } .hamburger-icon span { height: 2.5px; } .user-profile-toggle { width: 40px !important; height: 40px !important; padding: 0 !important; } .user-avatar { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; aspect-ratio: 1 / 1 !important; border: 2px solid rgba(255, 255, 255, 0.4) !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .profile-placeholder { font-size: 0.9rem; } .profile-placeholder i { font-size: 1rem; } /* Mobile Dropdown Responsive Adjustments */ .mobile-user-dropdown { min-width: 220px !important; margin-top: 0 !important; margin-right: 0 !important; margin-left: auto !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; transform: translateY(0) translateX(0) !important; transform-origin: top right !important; } .mobile-user-dropdown .dropdown-item { padding: 10px 16px !important; font-size: 0.9rem !important; } .mobile-user-dropdown .dropdown-header { padding: 10px 14px 6px 14px !important; font-size: 0.8rem !important; } .mobile-user-dropdown .dropdown-item i { width: 20px !important; font-size: 0.95rem !important; margin-right: 10px !important; } } /* Print Styles */ @media print { .navbar, .hero-section, footer, .back-to-top, .btn { display: none !important; } .container { max-width: none !important; } .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; } }