/* Toppers List — card grid, sections, animations (styles from original + enhancements) */ @keyframes mlwa-toppers-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes mlwa-toppers-shine { to { background-position: 200% center; } } .mlwa-toppers-page .about-section-two { background: linear-gradient(180deg, #e8dfc0 0%, #f5f0e4 45%, #faf8f4 100%) !important; padding: 3rem 0 4rem !important; } .mlwa-toppers-page .about-section-two > .auto-container { background: #fff; border-radius: 20px; padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 3rem; margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(88, 8, 104, 0.04), 0 16px 40px rgba(88, 8, 104, 0.1); border: 1px solid rgba(88, 8, 104, 0.08); } .mlwa-toppers-page .section-title { color: #580868; border-bottom: 3px solid #d8a040; padding: 0 0 1.25rem; margin: 0 0 2rem; font-size: clamp(1.75rem, 3vw, 2.25rem); text-align: center; font-weight: 700; letter-spacing: -0.02em; } .mlwa-toppers-page .class-group { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(88, 8, 104, 0.1); } .mlwa-toppers-page .class-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .mlwa-toppers-page .class-title { color: #1e2b5c; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; margin: 0 0 1.5rem; text-align: center; position: relative; padding-bottom: 0.75rem; } .mlwa-toppers-page .class-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #580868, #d8a040); } .mlwa-toppers-page .student-list, .mlwa-toppers-page .nmms-winners { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 1.75rem); justify-items: center; margin-bottom: 0; } .mlwa-toppers-page .student-card { background: #fff; border-radius: 16px; padding: 1.25rem 1.25rem 1.5rem; width: 100%; max-width: 320px; text-align: center; box-shadow: 0 2px 8px rgba(30, 43, 92, 0.06), 0 8px 24px rgba(88, 8, 104, 0.08); border: 1px solid rgba(88, 8, 104, 0.08); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; animation: mlwa-toppers-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .mlwa-toppers-page .student-list .student-card:nth-child(1) { animation-delay: 0.05s; } .mlwa-toppers-page .student-list .student-card:nth-child(2) { animation-delay: 0.12s; } .mlwa-toppers-page .student-list .student-card:nth-child(3) { animation-delay: 0.19s; } .mlwa-toppers-page .student-list .student-card:nth-child(4) { animation-delay: 0.26s; } .mlwa-toppers-page .student-list .student-card:nth-child(5) { animation-delay: 0.33s; } .mlwa-toppers-page .student-card:hover { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(30, 43, 92, 0.08), 0 20px 40px rgba(88, 8, 104, 0.14); } .mlwa-toppers-page .student-image { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 1rem; border: 4px solid #580868; background: linear-gradient(135deg, #f3eef8 0%, #e6f0ff 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 12px rgba(88, 8, 104, 0.15); transition: transform 0.35s ease; } .mlwa-toppers-page .student-card:hover .student-image { transform: scale(1.04); } .mlwa-toppers-page .student-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Staff achievement posters (no .student-image wrapper) */ .mlwa-toppers-page .student-card > div:first-child:not(.student-image) { border-radius: 12px; overflow: hidden; margin-bottom: 0; line-height: 0; } .mlwa-toppers-page .student-card > div:first-child:not(.student-image) img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .mlwa-toppers-page .student-card:hover > div:first-child:not(.student-image) img { transform: scale(1.03); } .mlwa-toppers-page .student-name { font-weight: 700; font-size: 1.0625rem; margin: 0 0 0.35rem; color: #1e2b5c; line-height: 1.35; } .mlwa-toppers-page .student-class { color: #5c5c6a; font-size: 0.9375rem; } .mlwa-toppers-page .student-roll { background: linear-gradient(135deg, #f3eef8 0%, #e8f0ff 100%); color: #580868; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; display: inline-block; margin-top: 0.65rem; border: 1px solid rgba(88, 8, 104, 0.12); } .mlwa-toppers-page .tamil-title { color: #8b1530; font-size: clamp(1.25rem, 2.5vw, 1.5rem); text-align: center; margin: 2.5rem 0 0.5rem; font-weight: 700; } .mlwa-toppers-page .tamil-section { background: linear-gradient(135deg, #fff8f8 0%, #fff5f5 100%); padding: 2rem 1.5rem; border-radius: 16px; margin: 1.5rem 0 2rem; border: 1px solid rgba(139, 21, 48, 0.12); display: block; } .mlwa-toppers-page .tamil-section .class-group { border-bottom-color: rgba(139, 21, 48, 0.1); } .mlwa-toppers-page .achievement-section { background: linear-gradient(135deg, #f4f8ff 0%, #eef4fc 100%); padding: 2rem 1.5rem 2.25rem; border-radius: 16px; margin-bottom: 2rem; border: 1px solid rgba(30, 43, 140, 0.1); box-shadow: 0 4px 20px rgba(30, 43, 140, 0.06); } .mlwa-toppers-page .achievement-title { color: #1e2b8c; font-size: clamp(1.125rem, 2vw, 1.375rem); margin: 0 0 0.5rem; text-align: center; font-weight: 700; } .mlwa-toppers-page .achievement-note { font-style: italic; color: #5c5c6a; text-align: center; margin: 0 0 1.5rem; font-size: 1rem; } @media (max-width: 767.98px) { .mlwa-toppers-page .about-section-two { padding: 2rem 0 2.5rem !important; } .mlwa-toppers-page .about-section-two > .auto-container { padding: 1.5rem 1rem 2rem; border-radius: 14px; } .mlwa-toppers-page .student-list, .mlwa-toppers-page .nmms-winners { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .mlwa-toppers-page .student-image { width: 100px; height: 100px; } } @media (prefers-reduced-motion: reduce) { .mlwa-toppers-page .student-card { animation: none; } .mlwa-toppers-page .student-card, .mlwa-toppers-page .student-image, .mlwa-toppers-page .student-card img { transition: none; } }