/* ========================================================================== 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('mobile-spacing-standards.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: 100%; /* IMPORTANT: overflow must NOT be hidden on — breaks position:fixed */ overflow: visible; } body { margin: 0; padding: 0; min-height: 100%; font-family: 'Outfit', sans-serif; background-color: var(--bg-main); color: var(--text-main); overflow-x: hidden; /* safe on body only */ 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; } } /* ========================================================================== BACKGROUND GLOW & ORBS ========================================================================== */ .bg-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 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(251, 191, 36, 0.5); 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) ========================================================================== */ .page-layout { display: flex; flex: 1; min-height: calc(100vh - 64px); width: 100%; position: relative;} /* Sidebar Overlay for Mobile */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 99; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .sidebar-overlay.active { display: block; opacity: 1; } .hero-sidebar { width: 300px; min-width: 300px; background: var(--gradient-dark); position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; padding: 32px 20px; z-index: 100; border-right: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hero-sidebar::-webkit-scrollbar { width: 6px; } .hero-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Sidebar Buttons */ .sidebar-hover-btn, .sidebar-group-btn { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 18px; width: 100%; text-align: left; font-weight: 500; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-smooth); cursor: pointer; margin-bottom: 8px; } .sidebar-hover-btn:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.05)); border-color: rgba(16, 185, 129, 0.3); color: #fff; transform: translateY(-2px); } .sidebar-group-btn:hover, .sidebar-group.open .sidebar-group-btn { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.05)); border-color: rgba(59, 130, 246, 0.3); color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .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 { display: none; background: rgba(15, 23, 42, 0.5); border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.2); padding: 10px; margin-top: 5px; margin-bottom: 10px; } .open-item .sidebar-hover-content { display: block; animation: slideDownFade 0.3s forwards; } .sidebar-hover-content a { display: block; color: rgba(255, 255, 255, 0.65); text-decoration: none; padding: 10px 14px; border-radius: 8px; margin-bottom: 4px; transition: var(--transition-smooth); } .sidebar-hover-content a:hover { color: var(--primary); background: rgba(16, 185, 129, 0.1); padding-left: 18px; } /* Main Content */ .main-content { flex: 1; overflow-y: auto; padding: 20px; 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); } }