/* ========================================================================== PREMIUM GLOBAL STYLES (Amber/Gold Glassmorphism) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700;800&display=swap'); @import url('/css/mobile-spacing-standards-75b8db9a7c533450e1a8ed48379cba88.css'); @import url('/css/responsive-system-1233bcff15e0f7d0284730f893c20320.css'); :root { /* Color Palette */ --primary: #059669; /* Amber 600 */ --primary-hover: #047857; /* Amber 700 */ --secondary: #0f172a; /* Slate 900 */ --secondary-hover: #1e293b; /* Slate 800 */ /* Backgrounds */ --bg-main: #f8fafc; --bg-glass-heavy: rgba(255, 255, 255, 0.85); --bg-glass-medium: rgba(255, 255, 255, 0.4); --bg-glass-light: rgba(255, 255, 255, 0.1); /* Text */ --text-main: #0f172a; --text-muted: rgba(15, 23, 42, 0.6); --text-light: #ffffff; /* Borders & Shadows */ --border-glass: rgba(255, 255, 255, 0.4); --border-glass-strong: rgba(255, 255, 255, 0.9); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05); --shadow-glow: 0 15px 35px rgba(16, 185, 129, 0.2); /* Gradients */ --gradient-gold: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-dark: linear-gradient(180deg, #1c1f30 0%, #26293d 100%); /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Base Reset */ html { margin: 0; padding: 0; min-height: 100vh; /* IMPORTANT: overflow must NOT be hidden on — breaks position:fixed */ overflow: visible; } body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Outfit', sans-serif; background-color: var(--bg-main); color: var(--text-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; } p, span, div, input, button { font-family: 'Inter', sans-serif; } /* Typography */ .text-gradient { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-dark-custom { color: var(--text-main); } .text-muted-custom { color: var(--text-muted); } /* Global Premium Typography Standards */ html { font-size: 16px; /* Base desktop size */ } body { line-height: 1.5; letter-spacing: -0.01em; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.5rem; } @media (max-width: 768px) { html { font-size: 14px; /* Scaled down for mobile to save space */ } h1 { font-size: 2rem !important; } h2 { font-size: 1.75rem !important; } h3 { font-size: 1.5rem !important; } h4 { font-size: 1.25rem !important; } h5 { font-size: 1.1rem !important; } h6 { font-size: 1rem !important; } /* Reduce excessive side padding on mobile to maximize screen usage */ .container, .container-fluid, .content-area, .main-content { padding-left: 8px !important; padding-right: 8px !important; } } /* ========================================================================== BACKGROUND GLOW & ORBS ========================================================================== */ .bg-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(135deg, #d1fae5 0%, #10b981 100%); overflow: hidden; pointer-events: none; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: pulseOrb 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); } .orb-1 { width: 500px; height: 500px; background: rgba(16, 185, 129, 0.6); top: -100px; left: -100px; } .orb-2 { width: 600px; height: 600px; background: rgba(52, 211, 153, 0.4); bottom: -150px; right: -50px; animation-delay: -5s; } .orb-3 { width: 450px; height: 450px; background: rgba(5, 150, 105, 0.4); top: 20%; left: 30%; animation-delay: -10s; } @keyframes pulseOrb { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(40px, -40px); } 100% { transform: scale(0.9) translate(-40px, 40px); } } /* ========================================================================== AUTH & PREMIUM CARDS ========================================================================== */ .auth-container { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .premium-card, .login-box { background: var(--bg-glass-light); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--border-glass); border-top: 1px solid var(--border-glass-strong); border-left: 1px solid var(--border-glass-strong); border-radius: 24px; padding: 2.5rem 2rem; width: 100%; max-width: 450px; box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.2); margin: 40px auto; transition: var(--transition-smooth); } .premium-card:hover, .login-box:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px rgba(16, 185, 129, 0.2), 0 0 0 1px rgba(16, 185, 129, 0.4); border-color: rgba(16, 185, 129, 0.5); background: rgba(255, 255, 255, 0.15); } /* Inputs & Buttons */ .premium-input { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(10px); border: 1px solid var(--border-glass) !important; color: var(--text-main) !important; border-radius: 12px !important; padding: 0.9rem 1.2rem !important; font-size: 1rem !important; font-weight: 500; transition: var(--transition-smooth) !important; width: 100%; } .premium-input:focus { background: rgba(255, 255, 255, 0.95) !important; border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 10px 20px rgba(16, 185, 129, 0.1) !important; outline: none; transform: translateY(-2px); } .premium-btn { background: var(--secondary); border: none; border-radius: 12px; padding: 1rem; width: 100%; color: var(--text-light); font-size: 1.05rem; font-weight: 700; transition: var(--transition-smooth); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2); display: flex; align-items: center; justify-content: center; gap: 8px; } .premium-btn:hover { background: linear-gradient(135deg, #10b981 0%, #059669 100%); transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4); color: white; } .btn-premium-gold { background: var(--gradient-gold); color: #fff !important; padding: 14px 28px; border-radius: 50px; border: none; font-weight: 700; transition: var(--transition-smooth); box-shadow: var(--shadow-glow); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .btn-premium-gold:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4), 0 0 0 4px rgba(16, 185, 129, 0.15); } .social-btn { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); border-radius: 12px; padding: 0.9rem; width: 100%; color: var(--text-main); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--transition-smooth); text-decoration: none; } .social-btn:hover { background: rgba(255, 255, 255, 0.7); transform: translateY(-2px); } /* ========================================================================== SIDEBAR & LAYOUT (WITH MOBILE OFFCANVAS) ========================================================================== */ /* Layout styles are now handled by responsive-system.css */ .hero-sidebar { background: #f1f5f9; /* Soft slate-100 to reduce eye strain */ backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; flex-direction: column; align-items: center; padding: 32px 20px; z-index: 100; border-right: 1px solid rgba(16, 185, 129, 0.1); box-shadow: -15px 0 40px rgba(16, 185, 129, 0.08); } /* Sidebar Buttons */ .sidebar-hover-btn, .sidebar-group-btn { background: transparent; color: #475569; border: none; border-radius: 12px; padding: 12px 18px; width: 100%; text-align: left; font-weight: 600; font-family: 'Inter', sans-serif; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; margin-bottom: 8px; } .sidebar-hover-btn:hover { background: rgba(16, 185, 129, 0.06); color: #10b981 !important; } .sidebar-group-btn:hover, .sidebar-group.open .sidebar-group-btn { background: rgba(255, 255, 255, 0.8); color: #1e293b; border: 1px solid rgba(16, 185, 129, 0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .sidebar-group-content { display: none; padding-left: 10px; border-left: 2px dashed rgba(255,255,255,0.1); margin-left: 18px; margin-bottom: 15px; margin-top: 5px; } .sidebar-group.open .sidebar-group-content { display: block; animation: simpleFadeIn 0.4s ease; } .sidebar-group.open .sidebar-group-btn .group-chevron { transform: rotate(180deg); } @keyframes simpleFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .sidebar-hover-content, .sidebar-hover-item .sidebar-hover-content.collapse { display: block !important; position: relative; width: 100%; margin-top: 0; background: rgba(255, 255, 255, 0.6); border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.1); padding: 0 10px; z-index: 10; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); } .sidebar-hover-item.open-item .sidebar-hover-content, .sidebar-hover-item.open-item .sidebar-hover-content.collapse, .sidebar-hover-content.show, .sidebar-hover-content.collapsing { max-height: 500px !important; opacity: 1 !important; margin-top: 5px !important; margin-bottom: 10px !important; padding: 10px !important; border-color: rgba(16, 185, 129, 0.2) !important; pointer-events: auto !important; } .open-item .sidebar-hover-content { display: block; animation: slideDownFade 0.3s forwards; } .sidebar-hover-content a { display: block; color: #475569 !important; text-decoration: none !important; padding: 6px 12px; border-radius: 6px; margin-bottom: 4px; transition: all 0.3s ease; font-weight: 500; } .sidebar-hover-content a:hover { color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; transform: translateX(4px); } /* Main Content */ .main-content { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; min-height: calc(100vh - 64px); z-index: 10; } /* Mobile Sidebar Toggle */ .mobile-menu-toggle { display: none; background: transparent; border: none; font-size: 1.8rem; color: var(--secondary); cursor: pointer; } @media (max-width: 991px) { .mobile-menu-toggle { display: block; margin-right: 15px; } .hero-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); /* Hidden by default */ box-shadow: 20px 0 50px rgba(0,0,0,0.5); } .hero-sidebar.active { transform: translateX(0); } /* Shown when active */ } /* ========================================================================== PREMIUM FILTER BAR (LEVEL & SEMESTER) ========================================================================== */ .premium-filter-container { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; background: #ffffff; padding: 8px 12px; border-radius: 50px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid rgba(226, 232, 240, 0.8); justify-content: space-between; } @media (max-width: 576px) { .premium-filter-container { border-radius: 20px; flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; } } .premium-level-btn { background: #f8fafc; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 50px; padding: 8px 24px; font-weight: 600; color: #475569; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; width: 100%; } @media (min-width: 577px) { .premium-level-btn { width: auto; } } .premium-level-btn:hover { background: #ffffff; color: var(--primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.2); transform: translateY(-1px); } .premium-sem-toggle { display: flex; background: #0f172a; border-radius: 50px; padding: 5px; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15); } .premium-sem-btn { flex: 1; text-align: center; color: #94a3b8; font-weight: 600; font-size: 0.8rem; padding: 8px 20px; border-radius: 50px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; letter-spacing: 0.5px; } .premium-sem-btn.active { color: #059669; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .premium-sem-btn:hover:not(.active) { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* ========================================================================== CARDS & MISC ========================================================================== */ .pop-note-card, .nta-card { background: var(--bg-glass-heavy); backdrop-filter: blur(20px); border: 1px solid var(--border-glass); border-radius: 16px; padding: 15px; text-align: center; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-main); min-height: 130px; } .pop-note-card:hover, .nta-card:hover { border-color: var(--primary); transform: translateY(-6px); box-shadow: var(--shadow-glow); color: var(--primary); } .pop-icon { font-size: 2.2rem; color: var(--primary); margin-bottom: 10px; } /* Empty States */ .empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; background: var(--bg-glass-medium); border-radius: 24px; border: 1px dashed var(--primary); margin: 40px auto; max-width: 600px; } .empty-state-icon { font-size: 4rem; color: var(--primary); margin-bottom: 20px; opacity: 0.8; } .empty-state-title { font-size: 1.5rem; font-weight: 700; color: var(--secondary); margin-bottom: 10px; } .empty-state-text { color: var(--text-muted); margin-bottom: 25px; } /* Skeleton Loaders */ .skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes slideDownFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Premium Select Styling */ .premium-select { cursor: pointer !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .premium-select:hover { border-color: #10b981 !important; background-color: #f0fdf4 !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15) !important; transform: translateY(-2px); } .premium-select:focus { border-color: #10b981 !important; background-color: #ffffff !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important; } .premium-select option { background-color: #ffffff; color: #1e293b; font-weight: 500; } .premium-select option:hover, .premium-select option:focus, .premium-select option:checked { background-color: #10b981 !important; color: #ffffff !important; } /* Mobile Optimization for Form Cards & Selects */ @media (max-width: 768px) { .premium-input-group { padding: 10px 14px !important; border-radius: 14px !important; } .premium-label { font-size: 0.85rem !important; margin-bottom: 0.4rem !important; letter-spacing: 0.5px !important; } .premium-select { padding: 0.7rem 1rem !important; font-size: 0.95rem !important; border-radius: 10px !important; } .btn-premium-search { padding: 0.8rem 1.2rem !important; font-size: 1.05rem !important; border-radius: 12px !important; } .row.g-3 > div { padding-top: 0.5rem !important; } } /* ========================================================================== PROFILE ICON / AVATAR - GLOBAL PREMIUM HOVER EFFECTS ========================================================================== */ /* All rounded-circle profile images (avatars) */ img.rounded-circle, div.rounded-circle { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; cursor: pointer; } img.rounded-circle:hover, div.rounded-circle:hover { transform: scale(1.12) translateY(-3px) !important; box-shadow: 0 12px 28px rgba(16, 185, 129, 0.3), 0 0 0 3px rgba(16, 185, 129, 0.15) !important; border-color: #10b981 !important; } /* Profile icon containers (green box with person icon, no picture) */ .nav-item-bottom[data-bs-toggle="dropdown"], .dropup.nav-item-bottom { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .nav-item-bottom[data-bs-toggle="dropdown"]:hover > div, .dropup.nav-item-bottom:hover > div:first-child { transform: scale(1.15) translateY(-3px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), 0 0 0 3px rgba(16, 185, 129, 0.12) !important; border-color: #34d399 !important; } .nav-item-bottom[data-bs-toggle="dropdown"]:hover > div .bi-person-fill, .dropup.nav-item-bottom:hover > div .bi-person-fill { animation: profileIconPulse 0.6s ease forwards !important; } /* Any container with person icon inside that acts as profile trigger */ [data-bs-toggle="dropdown"] .bi-person-fill, .dropdown-toggle .bi-person-fill { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } [data-bs-toggle="dropdown"]:hover .bi-person-fill, .dropdown-toggle:hover .bi-person-fill { transform: scale(1.2) rotate(-8deg) !important; color: #ffffff !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); } /* Dropdown profile button hover (navbar) */ .dropdown-toggle:hover img.rounded-circle, [data-bs-toggle="dropdown"]:hover img { transform: scale(1.1) translateY(-2px) !important; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25), 0 0 0 3px rgba(16, 185, 129, 0.12) !important; border-color: #10b981 !important; } /* Profile page large avatar */ img[alt="Profile Avatar"] { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } img[alt="Profile Avatar"]:hover { transform: scale(1.08) translateY(-5px) !important; box-shadow: 0 16px 40px rgba(16, 185, 129, 0.3), 0 0 0 4px rgba(16, 185, 129, 0.15), 0 0 60px rgba(16, 185, 129, 0.1) !important; border-color: #10b981 !important; } /* Sidebar profile link hover */ .sidebar-nav-item[href="/profile"]:hover .bi-person-fill, .sidebar-nav-item[href*="profile"]:hover .bi-person-fill { transform: scale(1.2) rotate(-10deg) !important; } /* Profile icon pulse animation */ @keyframes profileIconPulse { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-10deg); } 70% { transform: scale(0.95) rotate(3deg); } 100% { transform: scale(1.1) rotate(-5deg); } } /* Premium Green Glassmorphism Toast */ .premium-toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 15px; pointer-events: none; } .premium-toast { min-width: 300px; max-width: 400px; padding: 16px 24px; border-radius: 16px; background: rgba(16, 185, 129, 0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2); color: #064e3b; font-weight: 600; font-size: 0.95rem; font-family: 'Outfit', sans-serif; display: flex; align-items: center; gap: 15px; pointer-events: auto; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation: toastSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .premium-toast:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 50px rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.25); } .premium-toast.error { background: rgba(220, 38, 38, 0.15); border: 1px solid rgba(220, 38, 38, 0.3); box-shadow: 0 10px 40px rgba(220, 38, 38, 0.2); color: #7f1d1d; } .premium-toast.error:hover { background: rgba(220, 38, 38, 0.25); box-shadow: 0 15px 50px rgba(220, 38, 38, 0.3); } .premium-toast i { font-size: 1.5rem; color: #10b981; text-shadow: 0 0 15px rgba(16, 185, 129, 0.5); } .premium-toast.error i { color: #ef4444; text-shadow: 0 0 15px rgba(239, 68, 68, 0.5); } .premium-toast.fade-out { animation: toastFadeOut 0.5s ease forwards; } @keyframes toastSlideIn { from { transform: translateX(120%) rotate(2deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } } @keyframes toastFadeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } /* ============================================================ STICKY FOOTER - Universally keeps footer at the bottom ============================================================ */ /* Force body to flex column on ALL pages (overrides page-specific styles) */ body { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } /* Any direct wrapper div that is a flex column and min-vh-100 should stretch */ .d-flex.flex-column.min-vh-100 { flex: 1 !important; } /* Public pages: the main content wrapper should grow */ main, .main-content, .container-fluid.flex-grow-1, [class*="flex-grow-1"], .page-layout > .main-content { flex: 1 1 auto; } /* Footer should NOT grow - just sit at the bottom */ footer, .footer-wrapper { flex-shrink: 0; margin-top: auto; } /* Push footer to bottom in dashboard layouts */ .center-col > *:nth-last-child(2) { flex-grow: 1; } /* Sidebar Overlay Effect */ body { transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } body.sidebar-is-open { overflow: hidden; /* Prevent scrolling when sidebar is open */ } /* We removed the transform scale/translate to keep the main content fixed in place. */ .main-content, .navbar-custom, .premium-guest-navbar { transition: margin-left 0.5s; } /* Magical Hover Effect for Sidebar items */ .sidebar-hover-item.open-mobile .sidebar-hover-btn, .sidebar-hover-item.open-item .sidebar-hover-btn { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02)) !important; color: #10b981 !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15), inset 3px 0 0 #10b981 !important; border-radius: 12px !important; } /* ========================================================================== MAGIC AUTH BUTTONS (STORY & LOGIN) ========================================================================== */ .magic-auth-btn { background: #0f172a; /* Deep black/slate */ color: #ffffff !important; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; z-index: 1; padding: 6px clamp(14px, 2.5vw, 22px); height: 38px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; letter-spacing: 0.3px; gap: 6px; } .magic-auth-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); transition: all 0.45s cubic-bezier(0.25, 1, 0.35, 1); z-index: -1; border-radius: inherit; } .magic-auth-btn:hover::before { left: 0; } .magic-auth-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 25px rgba(16,185,129,0.35); border-color: transparent; } .magic-auth-btn i { transition: transform 0.4s ease; } .magic-auth-btn:hover i { transform: scale(1.1) rotate(-5deg); } /* ========================================================================== MAGIC BRAND TEXT (4LAZIE LOGO) ========================================================================== */ .magic-brand-text { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 5vw, 1.8rem); letter-spacing: -1.5px; line-height: 1; background: linear-gradient(to right, #059669 0%, #34d399 25%, #10b981 50%, #059669 75%, #047857 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineBrand 4s linear infinite; display: inline-block; position: relative; filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.4)); transition: all 0.3s ease; } .magic-brand-text:hover { transform: scale(1.05) translateY(-1px); filter: drop-shadow(0 8px 20px rgba(16, 185, 129, 0.6)); letter-spacing: -1px; } @keyframes shineBrand { to { background-position: 200% center; } } /* Floating WhatsApp Button */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; background-color: #25d366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 1000; transition: all 0.3s ease; text-decoration: none; animation: pulse-green 2s infinite; } @media (max-width: 768px) { .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 1.5rem; } } @media (max-width: 991px) { .whatsapp-float { display: none !important; } } .whatsapp-float:hover { transform: scale(1.1); color: white; } @keyframes pulse-green { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .whatsapp-tooltip { position: absolute; right: 75px; background-color: white; color: #1e293b; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.1); opacity: 0; transform: translateX(10px); transition: all 0.3s ease; pointer-events: none; font-family: 'Inter', sans-serif; } .whatsapp-float:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }