/* ============================================================ style.css — Annammal College of Education For Women Global Stylesheet · All pages import this file ============================================================ */ /* ──────── GOOGLE FONTS (also in for faster render) ──────── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap'); /* ──────── CSS VARIABLES ──────── */ :root { --primary: #f8fafc; --accent: #0066ff; --accent2: #00b894; --accent-light: rgba(0, 102, 255, 0.08); --accent-glow: rgba(0, 102, 255, 0.15); --gold: #ff9f43; --light: #ffffff; --white: #1e293b; --grad1: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 60%, #cbd5e1 100%); --grad2: linear-gradient(135deg, #0066ff 0%, #0097ff 100%); --grad3: linear-gradient(135deg, #00b894 0%, #00cec9 100%); --grad-lavender: linear-gradient(135deg, #0066ff 0%, #0097ff 100%); --grad-soft: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); } /* ──────── RESET ──────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; background: var(--primary); color: var(--white); overflow-x: hidden; } /* ──────── SCROLLBAR ──────── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--primary); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; } /* ──────── LOADER ──────── */ #loader { position: fixed; inset: 0; background: var(--primary); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity .6s, visibility .6s; } #loader.hide { opacity: 0; visibility: hidden; } .loader-circle { width: 70px; height: 70px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent2); animation: spin 1s linear infinite; } .loader-text { position: absolute; font-family: 'Bebas Neue'; font-size: 14px; letter-spacing: 4px; color: var(--gold); } @keyframes spin { to { transform: rotate(360deg); } } /* ──────── TOPBAR ──────── */ .topbar { background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); position: relative; z-index: 200; } .topbar-inner { max-width: 1300px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .topbar .admission-badge { background: var(--grad2); padding: 4px 14px; border-radius: 30px; font-weight: 700; font-size: 12px; letter-spacing: 1px; animation: pulse 2s infinite; } .topbar .contact { font-size: 13px; color: rgba(0, 0, 0, .75); display: flex; gap: 15px; } .topbar .contact a { color: var(--gold); text-decoration: none; font-weight: 600; } .topbar .socials a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .1); color: var(--white); font-size: 12px; text-decoration: none; transition: background .3s, transform .3s; } .topbar .socials a:hover { background: var(--accent); transform: scale(1.2); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, .5); } 50% { box-shadow: 0 0 0 8px rgba(255, 107, 0, 0); } } /* ──────── NAVBAR ──────── */ nav { position: sticky; top: 0; z-index: 300; background: rgba(255, 255, 255, .9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); transition: all .4s; } nav.scrolled { background: rgba(255, 255, 255, .98); box-shadow: 0 4px 30px rgba(0, 0, 0, .12); } .nav-inner { max-width: 1300px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; height: 72px; } /* Logo */ .logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } .logo-icon { width: 58px; height: 58px; /* Increased slightly for image logo */ display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .logo-icon img { width: 100%; height: 100%; object-fit: contain; } .logo:hover .logo-icon { transform: rotate(5deg) scale(1.1); } .logo-text .name { font-family: 'Bebas Neue'; font-size: 20px; letter-spacing: 2px; color: var(--white); line-height: 1; } .logo-text .tagline { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 2px; } /* Nav links — equal-width flex items */ .nav-links { display: flex; list-style: none; gap: 0; flex: 1; justify-content: space-evenly; } .nav-links>li { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; } .nav-links>li>a { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; border-radius: 8px; width: 100%; text-decoration: none; color: rgba(0, 0, 0, .8); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color .3s, background .3s; text-align: center; } .nav-links>li>a:hover, .nav-links>li>a.active { color: var(--white); background: rgba(130, 10, 212, .08); } .nav-links>li>a::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent); border-radius: 99px; transition: width .3s; } .nav-links>li>a:hover::after, .nav-links>li>a.active::after { width: 80%; } /* Dropdowns */ .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; background: rgba(255, 255, 255, .98); backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; padding: 8px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .3s; z-index: 500; box-shadow: 0 20px 60px rgba(0, 0, 0, .12); } .nav-links>li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { display: block; padding: 9px 14px; border-radius: 8px; text-decoration: none; color: rgba(0, 0, 0, .75); font-size: 13px; transition: all .2s; } .dropdown-menu a:hover { background: rgba(130, 10, 212, .08); color: var(--accent); padding-left: 20px; } /* Nested submenu */ .dropdown-item-has-submenu { position: relative; } .dropdown-item-has-submenu>a { display: flex; justify-content: space-between; align-items: center; } .dropdown-submenu { position: absolute; top: 0; left: 100%; background: rgba(255, 255, 255, .98); backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; padding: 8px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateX(-10px); transition: all .3s; z-index: 501; box-shadow: 0 20px 60px rgba(0, 0, 0, .12); } .dropdown-item-has-submenu:hover .dropdown-submenu { opacity: 1; visibility: visible; transform: translateX(0); } .nav-links>li:nth-last-child(-n+4) .dropdown-submenu { left: auto; right: 100%; transform: translateX(10px); } .nav-links>li:nth-last-child(-n+4) .dropdown-item-has-submenu:hover .dropdown-submenu { transform: translateX(0); } /* CTA button */ .nav-cta.glacier-btn { background: linear-gradient(135deg, rgba(192, 132, 252, .15), rgba(130, 10, 212, .15)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(132, 194, 252, 0.5); padding: 8px 16px; border-radius: 30px; color: #0066ff; font-family: 'Outfit'; font-weight: 800; font-size: 13px; cursor: pointer; letter-spacing: .5px; white-space: nowrap; animation: glacier-blink 1.5s infinite alternate; transition: transform .3s; } .nav-cta.glacier-btn:hover { transform: translateY(-4px) scale(1.05); } @keyframes glacier-blink { 0% { box-shadow: 0 0 10px rgba(189, 141, 236, 0.3), inset 0 0 5px rgba(255, 255, 255, .5); border-color: rgba(129, 165, 241, 0.5); } 100% { box-shadow: 0 0 25px rgba(132, 188, 252, 0.8), 0 0 20px rgba(10, 91, 212, 0.6), inset 0 0 15px rgba(255, 255, 255, .9); border-color: rgba(10, 155, 212, 0.8); } } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .hamburger span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: .3s; } /* ──────── SECTION BASICS ──────── */ section { padding: 30px 0; } .container { max-width: 1300px; margin: 0 auto; padding: 0 30px; } .section-tag { display: inline-block; padding: 5px 16px; border-radius: 30px; background: rgba(130, 10, 212, .08); border: 1px solid rgba(255, 107, 0, .25); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); margin-bottom: 14px; } .responsive-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; } @media (max-width: 900px) { .responsive-grid { grid-template-columns: 1fr; gap: 30px; } } .section-title { font-family: 'Bebas Neue'; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: 2px; margin-bottom: 14px; } .section-title span { color: var(--accent); } .section-sub { font-size: 16px; color: rgba(0, 0, 0, .55); max-width: 520px; line-height: 1.6; } /* ──────── HERO ──────── */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; } .hero-slideshow { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; z-index: 0; transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1); } .hero-slide { width: 33.3333%; height: 100%; background-size: cover; background-position: center; position: relative; } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(130, 10, 212, .1), rgba(192, 132, 252, .1), rgba(255, 159, 67, .1)); background-size: 300% 300%; animation: colorShift 8s ease-in-out infinite; mix-blend-mode: overlay; } .hero-slide:nth-child(1) { background-image: url('https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=1920&auto=format&fit=crop'); } .hero-slide:nth-child(2) { background-image: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1920&auto=format&fit=crop'); } .hero-slide:nth-child(3) { background-image: url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1920&auto=format&fit=crop'); } @keyframes colorShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .3) 50%, transparent 100%); backdrop-filter: none; -webkit-mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%); mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%); } .hero-content { position: relative; z-index: 3; max-width: 1300px; margin: 0 auto; padding: 0 30px; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(130, 10, 212, .08); border: 1px solid rgba(130, 10, 212, .3); padding: 6px 16px; border-radius: 30px; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--accent); margin-bottom: 24px; animation: fadeUp .8s ease both; } .hero-badge::before { content: '★'; color: var(--accent); } .hero-title { font-family: 'Bebas Neue'; font-size: clamp(52px, 8vw, 110px); line-height: .95; letter-spacing: 2px; margin-bottom: 20px; animation: fadeUp .8s .15s ease both; } .hero-title .line1 { display: block; color: var(--white); } .hero-title .line2 { display: block; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--gold), var(--accent)); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textGradientPulse 4s linear infinite; } .hero-title .line3 { display: block; color: #1e293b; font-weight: 600; font-size: 60%; } @keyframes textGradientPulse { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .hero-desc { max-width: 520px; font-size: 16px; color: #1e293b; font-weight: 600; line-height: 1.7; margin-bottom: 36px; animation: fadeUp .8s .3s ease both; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .8s .45s ease both; } .hero-stats { display: flex; gap: 30px; margin-top: 50px; flex-wrap: wrap; animation: fadeUp .8s .6s ease both; } .hero-stat { text-align: center; } .hero-stat .num { font-family: 'Bebas Neue'; font-size: 42px; color: var(--accent); line-height: 1; } .hero-stat .label { font-size: 12px; color: rgba(0, 0, 0, .5); letter-spacing: 1px; } .hero-stat-divider { width: 1px; background: rgba(0, 0, 0, .1); align-self: stretch; } .slide-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; } .slide-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .3); cursor: pointer; transition: .3s; } .slide-dot.active { background: var(--accent); width: 28px; border-radius: 4px; } .scroll-hint { position: absolute; bottom: 30px; right: 50px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 2px; color: rgba(0, 0, 0, .4); animation: bounce 2s infinite; } .scroll-hint .arrow { width: 24px; height: 24px; border-right: 2px solid rgba(0, 0, 0, .3); border-bottom: 2px solid rgba(0, 0, 0, .3); transform: rotate(45deg); } /* ──────── INNER PAGE HERO (non-index pages) ──────── */ .page-hero { position: relative; padding: 120px 0 100px; background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 102, 255, 0.02)); overflow: hidden; border-bottom: 1px solid rgba(0, 102, 255, 0.08); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.03), transparent); z-index: 0; } .page-hero-inner { position: relative; z-index: 3; max-width: 1300px; margin: 0 auto; padding: 0 30px; } .page-hero .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(0, 0, 0, .45); margin-bottom: 16px; } .page-hero .breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 600; } .page-hero .breadcrumb a:hover { text-decoration: underline; } .page-hero .breadcrumb .sep { color: rgba(0, 0, 0, .25); } .page-hero h1 { font-family: 'Bebas Neue'; font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: 2px; color: #111; margin-bottom: 10px; } .page-hero h1 span { color: var(--accent); } .page-hero p { font-size: 16px; color: rgba(0, 0, 0, .55); max-width: 560px; line-height: 1.7; } /* Page content wrapper */ .page-content { max-width: 1300px; margin: 0 auto; padding: 70px 30px; } /* ──────── ABOUT STRIP ──────── */ .about-strip { background: linear-gradient(135deg, rgba(0, 201, 167, .08), rgba(0, 148, 255, .08)); border-top: 1px solid rgba(0, 201, 167, .15); border-bottom: 1px solid rgba(0, 201, 167, .15); padding: 30px 0; } .strip-inner { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } .strip-item { display: flex; align-items: center; gap: 10px; } .strip-icon { font-size: 22px; } .strip-item strong { font-size: 15px; font-weight: 700; color: var(--accent2); } .strip-item span { font-size: 13px; color: rgba(0, 0, 0, .55); } .strip-div { width: 1px; height: 30px; background: rgba(0, 0, 0, .12); } /* ──────── STATS ──────── */ .stats-section { background: var(--grad1); padding: 80px 0; border-top: 1px solid rgba(0, 0, 0, .05); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .stat-card { background: rgba(0, 0, 0, .03); padding: 50px 30px; text-align: center; border: 1px solid rgba(0, 0, 0, .05); position: relative; overflow: hidden; transition: transform .4s, box-shadow .4s; box-shadow: 0 4px 15px rgba(0, 0, 0, .02); } .stat-card:hover { box-shadow: 0 20px 40px rgba(130, 10, 212, .15); transform: translateY(-8px) scale(1.03); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad2); transform: scaleX(0); transition: .4s; transform-origin: left; } .stat-card:hover::before { transform: scaleX(1); } .stat-card .icon { font-size: 36px; margin-bottom: 16px; display: block; } .stat-card .count { font-family: 'Bebas Neue'; font-size: 62px; color: var(--accent); line-height: 1; } .stat-card .count-suffix { font-family: 'Bebas Neue'; font-size: 36px; color: var(--accent); } .stat-card .stat-label { font-size: 14px; color: rgba(0, 0, 0, .55); margin-top: 6px; letter-spacing: 1px; } /* ──────── PROGRAMS ──────── */ .programs-section { background: #f8fafc; } .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; } .prog-card { background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .07); border-radius: 16px; padding: 30px; position: relative; overflow: hidden; transition: transform .4s, border-color .4s, background .4s; cursor: pointer; } .prog-card:hover { transform: translateY(-10px) scale(1.02); border-color: rgba(130, 10, 212, .3); box-shadow: 0 20px 40px rgba(130, 10, 212, .15); } .prog-card .prog-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--grad2); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; flex-shrink: 0; box-shadow: 0 6px 20px rgba(130, 10, 212, .3); } .prog-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .prog-card p { font-size: 13px; color: rgba(0, 0, 0, .5); line-height: 1.6; margin-bottom: 18px; } .prog-card .prog-tags { display: flex; gap: 8px; flex-wrap: wrap; } .prog-tag { padding: 3px 10px; border-radius: 20px; background: rgba(0, 201, 167, .1); color: var(--accent2); font-size: 11px; font-weight: 600; } .prog-card .arrow-btn { position: absolute; bottom: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; transition: .3s; font-size: 14px; } .prog-card:hover .arrow-btn { background: var(--accent); } /* ──────── CAMPUS LIFE ──────── */ .campus-section { background: var(--primary); } .campus-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-top: 50px; } .campus-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; gap: 12px; } .mosaic-item { border-radius: 12px; overflow: hidden; position: relative; background: rgba(0, 0, 0, .05); transition: transform .5s, box-shadow .5s; } .mosaic-item.tall { grid-row: span 2; } .mosaic-item:hover { transform: scale(1.03); z-index: 2; box-shadow: 0 20px 40px rgba(0, 0, 0, .15); } .mosaic-inner { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(to top, rgba(255, 255, 255, .9) 0%, transparent 60%); transition: transform .5s; } .mosaic-item:hover .mosaic-inner { transform: scale(1.04); } .mosaic-label { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--gold); } .m1 { background: linear-gradient(135deg, #c3cfe2, #c3cfe2); } .m2 { background: linear-gradient(135deg, #fdfbfb, #ebedee); } .m3 { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); } .m4 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); } .campus-text .tag-list { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; } .campus-feat { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: rgba(0, 0, 0, .03); border-radius: 12px; border: 1px solid rgba(0, 0, 0, .06); transition: .3s; } .campus-feat:hover { background: rgba(130, 10, 212, .06); border-color: rgba(130, 10, 212, .2); } .campus-feat .feat-icon { font-size: 22px; flex-shrink: 0; } .campus-feat h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .campus-feat p { font-size: 13px; color: rgba(0, 0, 0, .5); } /* ──────── RESEARCH ──────── */ .research-section { background: #f8fafc; overflow: hidden; } .research-marquee-wrap { overflow: hidden; margin-top: 50px; position: relative; } .research-marquee-wrap::before, .research-marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; } .research-marquee-wrap::before { left: 0; background: linear-gradient(to right, #f8fafc, transparent); } .research-marquee-wrap::after { right: 0; background: linear-gradient(to left, #f8fafc, transparent); } .research-marquee { display: flex; gap: 20px; animation: marquee 25s linear infinite; width: max-content; } .research-marquee:hover { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .r-card { width: 280px; flex-shrink: 0; background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .07); border-radius: 16px; padding: 26px; transition: .3s; } .r-card:hover { border-color: rgba(130, 10, 212, .35); box-shadow: 0 20px 40px rgba(130, 10, 212, .15); transform: translateY(-6px) scale(1.02); } .r-card .r-icon { font-size: 32px; margin-bottom: 14px; } .r-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .r-card p { font-size: 13px; color: rgba(0, 0, 0, .5); line-height: 1.6; } .r-card .r-stat { margin-top: 16px; font-family: 'Bebas Neue'; font-size: 28px; color: var(--accent2); } /* ──────── RECRUITERS ──────── */ .recruiters-section { background: var(--primary); padding: 80px 0; } .recruiter-logos { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 40px; } .recruiter-logo { padding: 12px 24px; background: rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; font-weight: 700; font-size: 14px; color: rgba(0, 0, 0, .5); transition: .3s; cursor: default; } .recruiter-logo:hover { background: rgba(130, 10, 212, .1); border-color: var(--accent); color: var(--white); } /* ──────── TESTIMONIALS ──────── */ .testimonials { background: #f8fafc; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; } .testi-card { background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); border-radius: 16px; padding: 30px; position: relative; overflow: hidden; transition: .4s; } .testi-card::before { content: '"'; position: absolute; top: -10px; right: 20px; font-family: 'DM Serif Display'; font-size: 120px; color: rgba(130, 10, 212, .08); line-height: 1; } .testi-card:hover { border-color: rgba(130, 10, 212, .3); box-shadow: 0 20px 40px rgba(130, 10, 212, .15); transform: translateY(-8px) scale(1.02); } .stars { color: var(--gold); font-size: 14px; margin-bottom: 14px; } .testi-text { font-size: 14px; color: rgba(0, 0, 0, .65); line-height: 1.7; margin-bottom: 20px; } .testi-person { display: flex; align-items: center; gap: 12px; } .testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .testi-name { font-size: 14px; font-weight: 700; } .testi-role { font-size: 12px; color: rgba(0, 0, 0, .4); } /* ──────── EVENTS ──────── */ .events-section { background: var(--primary); } .events-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-top: 50px; align-items: start; } .event-card { display: flex; gap: 16px; padding: 20px; background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; margin-bottom: 14px; transition: .3s; cursor: pointer; } .event-card:hover { border-color: var(--accent); box-shadow: 0 20px 40px rgba(130, 10, 212, .15); transform: translateX(10px); } .event-date { background: rgba(130, 10, 212, .08); border: 1px solid rgba(130, 10, 212, .3); border-radius: 10px; padding: 10px; min-width: 52px; text-align: center; flex-shrink: 0; } .event-date .day { font-family: 'Bebas Neue'; font-size: 28px; color: var(--accent); line-height: 1; } .event-date .mon { font-size: 11px; color: rgba(0, 0, 0, .5); font-weight: 600; letter-spacing: 1px; } .event-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .event-info p { font-size: 13px; color: rgba(0, 0, 0, .5); } .event-info .event-tag { margin-top: 8px; display: inline-block; padding: 2px 10px; border-radius: 20px; background: rgba(0, 201, 167, .1); color: var(--accent2); font-size: 11px; font-weight: 600; } .highlight-box { background: linear-gradient(135deg, rgba(130, 10, 212, .08), rgba(255, 107, 0, .04)); border: 1px solid rgba(255, 107, 0, .25); border-radius: 20px; padding: 36px; } .highlight-box h3 { font-family: 'Bebas Neue'; font-size: 40px; color: var(--white); margin-bottom: 10px; } .highlight-box p { font-size: 14px; color: rgba(0, 0, 0, .55); line-height: 1.7; margin-bottom: 20px; } .highlight-nums { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } .h-num .val { font-family: 'Bebas Neue'; font-size: 36px; color: var(--accent); } .h-num .lbl { font-size: 12px; color: rgba(0, 0, 0, .45); } /* ──────── BUTTONS ──────── */ .btn-primary2 { background: var(--grad2); padding: 14px 32px; border-radius: 30px; color: #fff; font-weight: 700; text-decoration: none; font-size: 15px; box-shadow: 0 6px 30px rgba(130, 10, 212, .3); transition: transform .3s, box-shadow .3s; display: inline-block; } .btn-primary2:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(130, 10, 212, .4); } .btn-outline2 { background: transparent; padding: 14px 32px; border-radius: 30px; color: var(--white); font-weight: 700; text-decoration: none; font-size: 15px; border: 2px solid rgba(0, 0, 0, .3); transition: all .3s; display: inline-block; } .btn-outline2:hover { border-color: var(--accent2); color: var(--accent2); } /* ──────── CTA BAND ──────── */ .cta-band { background: var(--grad2); padding: 70px 30px; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(0, 0, 0, .2) 10px, rgba(0, 0, 0, .2) 11px); } .cta-band h2 { font-family: 'Bebas Neue'; font-size: clamp(38px, 6vw, 72px); color: #fff; letter-spacing: 2px; margin-bottom: 14px; position: relative; } .cta-band p { font-size: 16px; color: rgba(0, 0, 0, .8); max-width: 500px; margin: 0 auto 30px; position: relative; } .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; } .cta-btn-white { background: #fff; color: var(--accent); padding: 14px 32px; border-radius: 30px; font-weight: 800; text-decoration: none; font-size: 15px; transition: transform .3s, box-shadow .3s; } .cta-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .cta-btn-dark { background: rgba(0, 0, 0, .25); color: #fff; padding: 14px 32px; border-radius: 30px; font-weight: 700; text-decoration: none; font-size: 15px; border: 2px solid rgba(0, 0, 0, .4); transition: .3s; } .cta-btn-dark:hover { background: rgba(0, 0, 0, .4); } /* ──────── FOOTER ──────── */ footer { background: linear-gradient(to bottom, rgba(241, 245, 249, 0.8), #f1f5f9); backdrop-filter: blur(10px); padding: 80px 0 0; border-top: 1px solid rgba(0, 0, 0, .05); position: relative; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; } .footer-brand .logo-text .name { font-size: 22px; } .footer-desc { font-size: 14px; color: rgba(0, 0, 0, .45); line-height: 1.7; margin: 16px 0 24px; } .footer-contact p { font-size: 13px; color: rgba(0, 0, 0, .5); margin-bottom: 6px; } .footer-contact a { color: var(--accent2); text-decoration: none; } .footer-col h4 { font-weight: 700; font-size: 15px; margin-bottom: 18px; color: var(--gold); letter-spacing: 1px; } .footer-col a { display: block; font-size: 13px; color: rgba(0, 0, 0, .5); text-decoration: none; margin-bottom: 10px; transition: .2s; } .footer-col a:hover { color: var(--accent); padding-left: 4px; } .footer-bottom { border-top: 1px solid rgba(0, 0, 0, .05); padding: 24px 0; margin: 0 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer-bottom p { font-size: 13px; color: rgba(0, 0, 0, .35); } .footer-socials { display: flex; gap: 10px; } .footer-socials a { width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .06); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; transition: .3s; } .footer-socials a:hover { background: var(--accent); transform: translateY(-3px); } /* ──────── BACK TO TOP ──────── */ #btt { position: fixed; bottom: 30px; right: 30px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(130, 10, 212, .3); opacity: 0; transform: translateY(20px); transition: .4s; } #btt.show { opacity: 1; transform: translateY(0); } #btt:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(130, 10, 212, .5); background: var(--accent2); } /* ──────── REVEAL ANIMATIONS ──────── */ .reveal { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity .8s cubic-bezier(0.165, .84, .44, 1), transform .8s cubic-bezier(0.165, .84, .44, 1); will-change: transform, opacity; } .reveal.left { transform: translateX(-40px) scale(0.98); } .reveal.right { transform: translateX(40px) scale(0.98); } .reveal.visible { opacity: 1 !important; transform: none !important; } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ──────── INNER PAGE CONTENT STYLES ──────── */ /* Generic prose content */ .prose h2 { font-family: 'Bebas Neue'; font-size: 36px; color: var(--white); margin: 36px 0 12px; letter-spacing: 1px; } .prose h3 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; } .prose p { font-size: 15px; color: rgba(0, 0, 0, .65); line-height: 1.8; margin-bottom: 16px; } .prose ul { padding-left: 20px; margin-bottom: 16px; } .prose ul li { font-size: 15px; color: rgba(0, 0, 0, .65); line-height: 1.8; margin-bottom: 6px; } .prose strong { color: var(--white); font-weight: 700; } /* Info cards (used on About, Administration pages etc.) */ .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; } .info-card { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 28px; transition: .3s; position: relative; overflow: hidden; z-index: 1; } .info-card::before { content: ''; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; opacity: 0.1; z-index: -1; transition: opacity 0.3s; } .info-card:hover::before { opacity: 0.2; } .info-card:hover { border-color: rgba(0, 102, 255, .25); box-shadow: 0 16px 40px rgba(0, 102, 255, .12); transform: translateY(-6px); } .info-card .ic-icon { font-size: 32px; margin-bottom: 14px; position: relative; } .info-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; position: relative; } .info-card p { font-size: 13px; color: rgba(0, 0, 0, .5); line-height: 1.6; position: relative; } /* Timeline (History page) */ .timeline { position: relative; padding-left: 40px; margin-top: 40px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--accent), var(--accent2)); border-radius: 2px; } .tl-item { position: relative; margin-bottom: 36px; } .tl-item::before { content: ''; position: absolute; left: -36px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--primary); box-shadow: 0 0 0 3px rgba(130, 10, 212, .25); } .tl-year { font-family: 'Bebas Neue'; font-size: 22px; color: var(--accent); letter-spacing: 1px; margin-bottom: 4px; } .tl-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .tl-desc { font-size: 14px; color: rgba(0, 0, 0, .55); line-height: 1.7; } /* Table styles (Committees etc.) */ .styled-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 24px; } .styled-table thead tr { background: var(--grad2); color: #fff; } .styled-table th { padding: 14px 18px; text-align: left; font-weight: 700; letter-spacing: .5px; } .styled-table td { padding: 13px 18px; border-bottom: 1px solid rgba(0, 0, 0, .06); color: rgba(0, 0, 0, .7); } .styled-table tbody tr:hover td { background: rgba(0, 102, 255, 0.04); } /* ========================================= CREATIVE TIMELINE V2 ========================================= */ .timeline-v2 { position: relative; max-width: 1200px; margin: 100px auto; padding: 40px 0; } .timeline-v2::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, var(--accent), var(--accent2), transparent); opacity: 0.3; } .tl-v2-item { display: flex; justify-content: flex-end; padding-right: 50%; position: relative; margin-bottom: 100px; width: 100%; } .tl-v2-item:nth-child(even) { justify-content: flex-start; padding-right: 0; padding-left: 50%; } .tl-v2-content { width: 90%; max-width: 450px; padding: 40px; background: var(--glass); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); border-radius: 30px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); position: relative; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; z-index: 1; } .tl-v2-content::before { content: ''; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; opacity: 0.15; transition: opacity 0.6s, transform 0.6s; z-index: -1; } .tl-v2-item:hover .tl-v2-content { transform: translateY(-10px) scale(1.02); } .tl-v2-item:hover .tl-v2-content::before { opacity: 0.3; transform: scale(1.1); } .tl-v2-dot { position: absolute; top: 40px; right: -10px; width: 20px; height: 20px; background: var(--accent); border: 4px solid var(--primary); border-radius: 50%; z-index: 10; box-shadow: 0 0 20px var(--accent); } .tl-v2-item:nth-child(even) .tl-v2-dot { right: auto; left: -10px; } /* Creative variations for timeline items */ .tl-v2-item.wide { justify-content: center; padding: 0; } .tl-v2-item.wide .tl-v2-content { max-width: 800px; } .tl-v2-item.wide .tl-v2-dot { left: 50%; transform: translateX(-50%); top: -10px; } .tl-v2-year { font-family: 'Bebas Neue'; font-size: 64px; line-height: 1; color: var(--accent); margin-bottom: 15px; opacity: 0.8; } .tl-v2-title { font-size: 24px; font-weight: 800; margin-bottom: 15px; color: var(--white); letter-spacing: -0.5px; } .tl-v2-desc { font-size: 15px; line-height: 1.8; color: rgba(0, 0, 0, 0.6); } /* Background shapes for creative feel */ .bg-shape { position: fixed; border-radius: 50%; filter: blur(80px); z-index: -1; opacity: 0.15; pointer-events: none; } .shape-1 { width: 400px; height: 400px; background: var(--accent); top: -100px; left: -100px; } .shape-2 { width: 300px; height: 300px; background: var(--accent2); bottom: 100px; right: -50px; } @media (max-width: 900px) { .timeline-v2::before { left: 20px; transform: none; } .tl-v2-item { justify-content: flex-start !important; padding: 0 0 0 50px !important; } .tl-v2-dot { left: -40px !important; right: auto !important; } .tl-v2-content { width: 100%; max-width: none; padding: 25px 20px; } } /* ========================================= INFINITE AUTO-PLAYING TIMELINE ========================================= */ .horizontal-timeline-wrap { position: relative; padding: 80px 0; overflow: hidden; background: var(--grad1); } .ht-container { display: flex; gap: 40px; width: max-content; animation: marquee-scroll 40s linear infinite; } .ht-container:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ht-slide { flex-shrink: 0; width: 320px; height: 220px; position: relative; border-radius: 24px; overflow: hidden; background: var(--glass); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .ht-slide::after { content: ''; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; opacity: 0.3; transition: transform 0.8s, opacity 0.5s; z-index: -1; } .ht-slide:hover::after { transform: scale(1.1); opacity: 0.5; } .ht-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 0; } .ht-content { position: relative; z-index: 1; } .ht-year { font-family: 'Bebas Neue'; font-size: 52px; color: #fff; line-height: 1; margin-bottom: 8px; opacity: 0.9; } .ht-title { font-size: 16px; font-weight: 800; color: var(--accent2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; } .ht-desc { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 100%; } @media (max-width: 900px) { .ht-slide { width: 85vw; height: 50vh; padding: 30px; } .ht-year { font-size: 80px; } .ht-title { font-size: 24px; } .ht-desc { font-size: 14px; } } .stats-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .stats-grid-mini { grid-template-columns: 1fr; } } /* ──────── PRE-ADMISSION BANNER ──────── */ .pre-admission-banner { background: var(--grad2); padding: 18px 30px; position: relative; overflow: hidden; z-index: 10; } .pre-admission-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(255, 255, 255, .05) 12px, rgba(255, 255, 255, .05) 13px); } .pab-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; } .pab-left { display: flex; align-items: center; gap: 16px; } .pab-icon { font-size: 36px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5)); animation: wobble 3s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } } .pab-title { font-family: 'Bebas Neue'; font-size: 26px; color: #fff; letter-spacing: 2px; line-height: 1.1; } .pab-sub { font-size: 13px; color: rgba(255, 255, 255, .85); margin-top: 2px; } .pab-right { display: flex; align-items: center; gap: 20px; } .qr-box { background: #fff; border-radius: 10px; padding: 8px; text-align: center; width: 80px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } .qr-svg { width: 64px; height: 64px; display: block; margin: 0 auto; } .qr-label { font-size: 7px; font-weight: 800; letter-spacing: 1px; color: var(--accent); margin-top: 4px; line-height: 1.2; } .pab-btn { background: #fff; color: var(--accent); padding: 12px 28px; border-radius: 30px; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 4px 20px rgba(0, 0, 0, .2); white-space: nowrap; transition: transform .3s, box-shadow .3s; animation: glow-pulse 2s ease-in-out infinite alternate; } .pab-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } @keyframes glow-pulse { 0% { box-shadow: 0 4px 20px rgba(0, 0, 0, .2) } 100% { box-shadow: 0 4px 30px rgba(255, 255, 255, .5), 0 0 40px rgba(130, 10, 212, .3) } } /* ──────── NEWS & EVENTS ──────── */ .news-section { background: #f8fafc; padding: 100px 0; } .news-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .news-card { background: linear-gradient(to bottom right, #ffffff, #fafbff); border-radius: 24px; padding: 35px; border: 1px solid rgba(130, 10, 212, .05); position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; gap: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .02); overflow: hidden; } .news-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 60px rgba(130, 10, 212, .15); border-color: rgba(130, 10, 212, .2); } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--grad2); transform: scaleX(0); transition: transform 0.4s; } .news-card:hover::before { transform: scaleX(1); } .news-date { width: 65px; height: 65px; border-radius: 16px; background: var(--grad2); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Bebas Neue'; font-size: 26px; line-height: 1; } .news-date span { font-size: 11px; letter-spacing: 1px; margin-top: 2px; opacity: 0.9; } .news-content h3 { font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 12px; line-height: 1.3; } .news-content p { font-size: 15px; color: rgba(0, 0, 0, .55); line-height: 1.7; } .news-link { font-size: 14px; font-weight: 800; color: var(--accent); text-decoration: none; display: inline-block; margin-top: auto; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .news-link:hover { gap: 12px; color: var(--accent2); } @media (max-width: 992px) { .news-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .news-cards-grid { grid-template-columns: 1fr; } } /* ──────── EVENT MODAL (BIG CARD) ──────── */ .event-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.4s ease; } .event-modal.active { opacity: 1; pointer-events: auto; } .modal-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0, 20, 50, 0.7); backdrop-filter: blur(8px); } .big-card { position: relative; width: 90%; max-width: 800px; background: #fff; border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); transform: translateY(50px) scale(0.9); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .event-modal.active .big-card { transform: translateY(0) scale(1); } .big-card-img { width: 100%; height: 100%; min-height: 400px; overflow: hidden; } .big-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 10s linear; } .event-modal.active .big-card-img img { transform: scale(1.2); } .big-card-content { padding: 50px; display: flex; flex-direction: column; gap: 20px; } .modal-date { font-family: 'Bebas Neue'; font-size: 20px; color: var(--accent); letter-spacing: 2px; } .big-card-content h2 { font-size: 36px; font-weight: 900; color: var(--white); line-height: 1.1; } .big-card-content p { font-size: 16px; color: rgba(0, 0, 0, 0.6); line-height: 1.8; } .modal-footer { margin-top: auto; display: flex; gap: 10px; } .modal-footer .tag { padding: 6px 16px; background: rgba(130, 10, 212, 0.1); border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--accent); } .modal-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #fff; border: none; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .modal-close:hover { transform: rotate(90deg); background: var(--accent); color: #fff; } @media (max-width: 768px) { .big-card { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; } .big-card-img { min-height: 250px; } .big-card-content { padding: 30px; } } /* ──────── VISION & MISSION ──────── */ .vision-section { background: linear-gradient(135deg, rgba(130, 10, 212, .04), rgba(192, 132, 252, .04)); } .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .vm-card { background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); border: 1px solid rgba(130, 10, 212, .15); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; transition: transform .4s, box-shadow .4s, border-color .4s; } .vm-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(130, 10, 212, .14); border-color: rgba(130, 10, 212, .35); } .vm-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad2); transform: scaleX(0); transition: transform .4s; transform-origin: left; } .vm-card:hover::before { transform: scaleX(1); } .vm-icon { font-size: 42px; margin-bottom: 16px; display: block; } .vm-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); margin-bottom: 14px; } .vm-text { font-size: 16px; line-height: 1.8; color: rgba(0, 0, 0, .7); } .vm-text strong { color: var(--white); } .vm-deco { position: absolute; bottom: -10px; right: -10px; font-family: 'Bebas Neue'; font-size: 80px; color: rgba(130, 10, 212, .05); letter-spacing: 4px; user-select: none; } /* ──────── FACILITIES ──────── */ .facilities-section { background: #f8fafc; } .fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fac-card { background: #fff; border: 1px solid rgba(0, 0, 0, .07); border-radius: 18px; padding: 32px 28px; position: relative; overflow: hidden; transition: transform .4s, box-shadow .4s, border-color .4s; display: flex; flex-direction: column; gap: 14px; } .fac-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 24px 50px rgba(130, 10, 212, .15); border-color: rgba(130, 10, 212, .3); } .fac-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--grad2); transform: scaleX(0); transition: transform .4s; transform-origin: center; } .fac-card:hover::after { transform: scaleX(1); } .fac-icon-wrap { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, rgba(130, 10, 212, .1), rgba(192, 132, 252, .1)); display: flex; align-items: center; justify-content: center; transition: .4s; } .fac-card:hover .fac-icon-wrap { background: var(--grad2); transform: rotate(5deg) scale(1.1); } .fac-icon { font-size: 28px; transition: .3s; } .fac-card h3 { font-size: 17px; font-weight: 700; color: var(--white); } .fac-card p { font-size: 13px; color: rgba(0, 0, 0, .55); line-height: 1.65; flex: 1; } .fac-link { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; display: inline-block; transition: .3s; margin-top: auto; } .fac-link:hover { letter-spacing: 1px; } /* ──────── WELCOME NOTE ──────── */ .welcome-section { background: var(--primary); } .welcome-card { background: linear-gradient(135deg, rgba(130, 10, 212, .06) 0%, rgba(192, 132, 252, .06) 100%); border: 1px solid rgba(130, 10, 212, .12); border-radius: 24px; padding: 60px; position: relative; overflow: hidden; } .welcome-quote-mark { position: absolute; top: -20px; left: 20px; font-family: 'DM Serif Display'; font-size: 200px; color: rgba(130, 10, 212, .06); line-height: 1; user-select: none; pointer-events: none; } .welcome-content { position: relative; z-index: 1; max-width: 800px; } .welcome-text { font-size: 16px; color: rgba(0, 0, 0, .65); line-height: 1.85; margin-bottom: 18px; } .welcome-sig { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, .08); } .sig-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--grad2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; flex-shrink: 0; } .sig-name { font-size: 15px; font-weight: 700; color: var(--white); } .sig-title { font-size: 12px; color: rgba(0, 0, 0, .45); margin-top: 2px; } /* ──────── GRIEVANCE CTA ──────── */ .grievance-section { background: #f8fafc; } .grievance-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; background: linear-gradient(135deg, rgba(130, 10, 212, .06), rgba(192, 132, 252, .06)); border: 1px solid rgba(130, 10, 212, .12); border-radius: 24px; padding: 48px; } .grv-cta-icon { font-size: 64px; flex-shrink: 0; animation: wobble 3s ease-in-out infinite; } .grv-cta-text { flex: 1; min-width: 220px; } .grievance-badges { display: flex; flex-wrap: wrap; gap: 10px; } .grv-badge { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(130, 10, 212, .07); border: 1px solid rgba(130, 10, 212, .15); border-radius: 30px; font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .65); } .grv-cta-btn { background: var(--grad2); color: #fff; padding: 16px 36px; border-radius: 30px; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 6px 24px rgba(130, 10, 212, .3); white-space: nowrap; flex-shrink: 0; transition: transform .3s, box-shadow .3s; animation: glow-pulse 2s ease-in-out infinite alternate; } .grv-cta-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 36px rgba(130, 10, 212, .45); } /* Mid-range: shrink nav text before hamburger kicks in */ @media (max-width: 1200px) { .nav-links>li>a { font-size: 12px; padding: 7px 6px; } .nav-cta.glacier-btn { padding: 7px 12px; font-size: 12px; } .nav-inner { padding: 0 16px; } } @media (max-width: 900px) { .nav-links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(255, 255, 255, .98); padding: 20px 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); backdrop-filter: blur(20px); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all .3s ease; max-height: calc(100vh - 72px); overflow-y: auto; flex: unset; justify-content: flex-start; } .nav-links.active { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-links>li { flex: unset; width: 100%; margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); justify-content: flex-start; } .nav-links>li:last-child { border-bottom: none; } .nav-links>li>a { font-size: 14px; padding: 8px 14px; justify-content: flex-start; width: 100%; text-align: left; } .dropdown-menu, .dropdown-submenu { position: static; max-height: 0; overflow: hidden; opacity: 0; visibility: visible; padding: 0 15px; background: transparent; box-shadow: none; border: none; transform: none; transition: max-height .4s ease, opacity .4s ease, padding .4s ease; pointer-events: none; min-width: 100%; } .nav-links>li:hover>.dropdown-menu, .dropdown-item-has-submenu:hover>.dropdown-submenu { max-height: 800px; opacity: 1; padding: 10px 15px; pointer-events: auto; } .nav-cta { display: block; width: 100%; margin-top: 10px; } .hamburger { display: flex; } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .programs-grid { grid-template-columns: 1fr; } .campus-grid { grid-template-columns: 1fr; } .testi-grid { grid-template-columns: 1fr; } .events-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .hero-stats { gap: 20px; } .hero-title { font-size: clamp(44px, 12vw, 80px); } .page-hero h1 { font-size: clamp(36px, 10vw, 60px); } /* New sections */ .pab-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .pab-right { width: 100%; justify-content: space-between; } .news-layout { grid-template-columns: 1fr; } .vm-grid { grid-template-columns: 1fr; } .fac-grid { grid-template-columns: repeat(2, 1fr); } .welcome-card { padding: 36px 24px; } .welcome-quote-mark { font-size: 120px; } .grievance-inner { grid-template-columns: 1fr; gap: 36px; } .gf-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .info-grid { grid-template-columns: 1fr; } .fac-grid { grid-template-columns: 1fr; } .pab-title { font-size: 20px; } .grievance-form-wrap { padding: 24px 18px; } } /* ──────── COMMITTEE CARDS ──────── */ .committee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin: 0 auto 60px; max-width: 1000px; /* Capped width to make cards smaller */ } .committee-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(0, 0, 0, 0.05); border-top: 4px solid var(--accent); } .committee-card:nth-child(2) { border-top-color: var(--accent2); } .committee-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(130, 10, 212, 0.12); } .committee-img-wrap { width: 100%; height: 380px; /* Reduced from 480px */ overflow: hidden; background: linear-gradient(135deg, #f8fafc, #f1f5f9); display: flex; align-items: center; justify-content: center; position: relative; } .committee-img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(255, 255, 255, 0.6), transparent); pointer-events: none; } .committee-img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s ease; display: block; } .committee-card:hover img { transform: scale(1.05); } .committee-content { padding: 25px 20px; /* Reduced padding */ text-align: center; position: relative; z-index: 1; } .committee-content .ic-icon { font-size: 28px; /* Slightly smaller icon */ margin-bottom: 12px; color: var(--accent); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); } .committee-content h4 { font-family: 'Bebas Neue'; font-size: 32px; letter-spacing: 1px; margin-bottom: 8px; color: #1e293b; /* Dark color for readability */ line-height: 1.1; } .committee-content h4 span { display: block; font-family: 'Outfit'; font-size: 15px; font-weight: 500; color: #64748b; margin-top: 6px; letter-spacing: 0; } .committee-content p { font-size: 16px; color: #475569; line-height: 1.6; } .committee-content strong { color: var(--accent); font-weight: 700; } /* ──────── COMMITTEE TABLE ──────── */ .committee-table-wrap { width: 100%; overflow-x: auto; margin-top: 40px; background: #fff; border-radius: 20px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); animation: tableFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes tableFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .committee-table { width: 100%; border-collapse: collapse; min-width: 850px; } .committee-table th { background: linear-gradient(135deg, #f8fafc, #f1f5f9); padding: 24px 25px; text-align: left; font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 1.5px; color: #0f172a; border-bottom: 2px solid #e2e8f0; } .committee-table td { padding: 22px 25px; border-bottom: 1px solid #f1f5f9; font-size: 16px; color: #475569; vertical-align: middle; } .committee-table tr:hover { background: rgba(130, 10, 212, 0.03); transform: scale(1.002); } .committee-table .member-name { font-weight: 700; color: #1e293b; font-size: 18px; display: block; } /* Category Badges */ .member-role { display: inline-block; padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } /* Specific Role Colors */ .role-principal { background: linear-gradient(135deg, #6366f1, #818cf8); /* Indigo */ color: #fff; } .role-member { background: linear-gradient(135deg, #0ea5e9, #38bdf8); /* Sky Blue */ color: #fff; } .role-vice-principal { background: linear-gradient(135deg, #ec4899, #f472b6); /* Pink */ color: #fff; } .role-teacher { background: linear-gradient(135deg, #f59e0b, #fbbf24); /* Amber */ color: #fff; } .committee-table .member-qual { font-size: 14px; color: #94a3b8; display: block; margin-top: 4px; font-weight: 400; } @media (max-width: 992px) { .committee-grid { grid-template-columns: 1fr; } .committee-img-wrap { height: 420px; } } @media (max-width: 600px) { .committee-content { padding: 25px 20px; } .committee-content h4 { font-size: 28px; } }