/* ⚠️ Important: Please add the Poppins Font link to the section if you are using this font, as shown in the fixed HTML code. */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', sans-serif; margin: 0; overflow-x: hidden; } /* ✅ Page layout fix */ .page-wrapper { padding-top: 80px; /* header space */ padding-bottom: 70px; /* footer space */ max-width: 600px; margin: auto; padding-left: 15px; padding-right: 15px; } /* ✅ Class list container */ .class-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px; /* Increased gap */ } /* Base item animation setup */ .class-list li { animation: fadeIn 0.5s ease forwards; /* 'forwards' keeps the final state (opacity: 1) */ opacity: 0; /* Start invisible */ } /* Class Link Card */ .class-list li a { display: flex; align-items: center; justify-content: space-between; background: #ffffff; color: #1e3a8a; font-weight: 600; text-decoration: none; padding: 16px 18px; border-radius: 12px; /* Smoother border */ border: 1px solid #e2e8f0; /* Subtle border */ box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; } /* Class Icon Styling */ .class-icon { font-size: 20px; color: #3b82f6; margin-right: 15px; min-width: 20px; /* Ensures consistent spacing */ text-align: center; } .class-name-text { flex-grow: 1; /* Allows name to take up available space */ } .list-arrow { font-size: 16px; color: #94a3b8; margin-left: 15px; /* Spacing before the arrow */ } /* Hover Effect - Uses a Gradient for a Premium Feel */ .class-list li a:hover { background: linear-gradient(to right, #3b82f6, #60a5fa); color: #ffffff; transform: translateY(-3px); /* Lifts the card slightly */ box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); /* Stronger blue shadow */ border-color: #3b82f6; /* Removes subtle white line */ } .class-list li a:hover .class-icon, .class-list li a:hover .list-arrow { color: #fff; } /* Keyframes for smooth entry */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ✅ Empty Content Box (No Content) */ .no-content-box { text-align: center; padding: 40px 20px; margin-top: 50px; border: 2px dashed #a5b4fc; border-radius: 10px; background: #f8fafc; color: #64748b; } .no-content-box i { font-size: 36px; color: #818cf8; margin-bottom: 10px; display: block; } .no-content-box p { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .no-content-box small { font-size: 14px; color: #94a3b8; display: block; }