/* --- Clean, uniform site stylesheet per user request --- */ :root{ --bg: #FFFFFF; /* dominant background */ --muted-bg: #F0F0F0; /* section backgrounds */ --text: #000000; /* primary text color */ --accent: #C8AE72; /* muted gold accent */ --radius: 6px; /* standard rounded corners */ --border-gray: rgba(0,0,0,0.08); --easing: cubic-bezier(.22,1,.36,1); } /* Reset and global styles */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:0.02em; overflow-x: hidden; } /* Hero section */ .hero-section { position: relative; height: 100vh; overflow: hidden; background: var(--bg-light); } /* Floating equations background */ .equations-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .equation { position: absolute; font-family: 'Cambria Math', serif; color: rgba(0, 0, 0, 0.25); font-size: 28px; font-weight: bold; white-space: nowrap; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: opacity 0.3s ease; } .equation:hover { opacity: 1; } @keyframes bounce1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(100px, 50px) rotate(5deg); } 50% { transform: translate(50px, 100px) rotate(-5deg); } 75% { transform: translate(-50px, 50px) rotate(3deg); } } @keyframes bounce2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-80px, 60px) rotate(-3deg); } 50% { transform: translate(60px, -70px) rotate(4deg); } 75% { transform: translate(30px, 80px) rotate(-2deg); } } @keyframes bounce3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(70px, -40px) rotate(-4deg); } 50% { transform: translate(-50px, -60px) rotate(2deg); } 75% { transform: translate(40px, 30px) rotate(-3deg); } } .equation:nth-child(3n+1) { animation: bounce1 15s infinite ease-in-out; } .equation:nth-child(3n+2) { animation: bounce2 18s infinite ease-in-out; } .equation:nth-child(3n+3) { animation: bounce3 20s infinite ease-in-out; } /* Theme control: default plain background (light) with optional dark theme */ :root{ --bg-light: #FFFFFF; --bg-dark: #0b0d17; } body{background:var(--bg-light);} /* Add .theme-dark to to switch */ body.theme-dark{background:var(--bg-dark);color:#ffffff} /* Fallback for 'hidden' class used by the mobile toggle (works without Tailwind) */ .hidden{display:none !important} /* Nav/menu baseline so navigation is usable without external utility classes */ nav { background: var(--accent); position: sticky; top: 0; z-index: 60; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .nav-inner { padding: 2px 8px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; } .nav-inner .logo-text { color: var(--bg-light); font-size: 1.5rem; font-weight: 700; } /* Hide hamburger button on desktop */ #nav-toggle { display: block; color: var(--bg-light); padding: 6px; } @media(min-width: 768px) { #nav-toggle { display: none; } } #nav-menu { background: var(--bg-light); padding: 4px 12px; } @media(min-width: 768px) { #nav-menu { display: flex !important; gap: 2px; background: transparent; padding: 0; } .nav-link { padding: 6px 12px; border-radius: var(--radius); font-weight: 500; transition: all 0.2s var(--easing); color: var(--bg-light); font-size: 0.95rem; } .nav-link:hover { background: rgba(255,255,255,0.1); } .nav-link.active { background: var(--bg-light); color: var(--accent); } } /* Mobile nav specific styles */ @media(max-width: 767px) { #nav-menu { position: absolute; top: 100%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .nav-link { display: block; padding: 10px 16px; margin: 2px 0; font-weight: 500; transition: all 0.2s var(--easing); color: var(--text); } .nav-link:hover { background: var(--muted-bg); } .nav-link.active { background: var(--accent); color: var(--bg-light); } } /* Centered layout containers */ .max-w-7xl{max-width:1200px;margin:0 auto;padding:24px 16px} .container-centered{max-width:1100px;margin:0 auto;padding:20px 16px} /* Headings styling */ h1,h2,h3{margin:0} h2,h3{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;letter-spacing:0.04em} .hero-title { font-family: 'Space Grotesk', sans-serif; font-size: 72px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent) 0%, #2D3748 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } @media (max-width: 768px) { .hero-title { font-size: 48px; } } h2{font-size:26px;margin-bottom:1rem} h3{font-size:20px} /* Body typography */ p,li,a,span,button{font-family:'Montserrat',sans-serif;letter-spacing:0.03em;color:var(--text);line-height:1.6} /* Section styling */ section{padding:24px 16px} .section-muted{ background:var(--muted-bg); border-radius:var(--radius); margin: 0.5rem 0; } /* Cards and content blocks */ .glass { background: var(--bg); border-radius: var(--radius); box-shadow: 0 6px 14px rgba(16,24,40,0.08); border: 1px solid var(--border-gray); padding: 20px; transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing); } .glass:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.12); } /* Content sections */ .section-container { background: var(--muted-bg); border-radius: var(--radius); padding: 1.5rem; margin: 0.5rem 0; } /* Faculty advisor styles */ .faculty-section { background: var(--bg-light); padding: 2rem 1rem; } .advisor-card { background: var(--bg-light); border-radius: var(--radius); padding: 1.5rem; margin: 0.5rem; border: 1px solid var(--border-gray); transition: all 0.3s var(--easing); height: 100%; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .advisor-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .advisor-card h3 { color: var(--accent); font-size: 1.25rem; margin-bottom: 0.5rem; } .advisor-card p { color: var(--text); font-size: 0.9rem; line-height: 1.5; opacity: 0.85; } .advisor-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(200,174,114,0.1); } .advisor-card img { border: 4px solid var(--accent); transition: transform 0.3s var(--easing); } .advisor-card:hover img { transform: scale(1.05); } .advisor-card h3 { color: var(--accent); margin: 1rem 0 0.5rem; } /* Event card styles */ .event-card { background: var(--bg-light); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--border-gray); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s var(--easing); height: 100%; display: flex; flex-direction: column; } .event-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); } .event-card h3 { color: var(--accent); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; } .event-card p { color: var(--text); opacity: 0.85; margin-bottom: 1.25rem; line-height: 1.5; flex-grow: 1; } .event-card a { color: var(--accent); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; transition: transform 0.2s var(--easing); margin-top: auto; } .event-card a:hover { transform: translateX(4px); } /* Scroll reveal animations */ [data-aos] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--easing), transform 0.6s var(--easing); } [data-aos].aos-animate { opacity: 1; transform: translateY(0); } /* Stagger child animations */ .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--easing), transform 0.6s var(--easing); } .stagger-children > *:nth-child(1) { transition-delay: 0.1s; } .stagger-children > *:nth-child(2) { transition-delay: 0.2s; } .stagger-children > *:nth-child(3) { transition-delay: 0.3s; } .stagger-children > *:nth-child(4) { transition-delay: 0.4s; } .stagger-children > *:nth-child(5) { transition-delay: 0.5s; } /* Navigation */ nav{background:var(--bg);padding:2px 1px;border-bottom:1px solid var(--border-gray);} .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;gap:12px} .nav-inner a{color:var(--text);text-decoration:none;margin-left:12px;font-weight:600;padding:2px 1px;border-radius:var(--radius);transition:background .18s var(--easing),color .18s var(--easing)} .nav-inner a:hover{background:var(--muted-bg);color:var(--text)} .nav-link{display:inline-block} /* Mobile nav behavior */ #nav-menu{display:none;background:var(--bg);border-top:1px solid var(--border-gray)} .mobile-nav-item{display:block;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,0.03)} @media(min-width:768px){#nav-menu{display:block;background:transparent;border-top:0} .mobile-nav-item{display:inline-block;border-bottom:0;padding:0;margin-left:8px}} /* Officers grid */ .officers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} .officer-card{background:var(--bg);border-radius:var(--radius);padding:16px 18px;text-align:center;cursor:pointer;transition:transform .18s var(--easing),box-shadow .18s var(--easing),border-color .18s} .officer-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 20px rgba(0,0,0,0.06);border-color:transparent} .officer-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:12px} .officer-name{font-weight:700} .officer-role{color:#444;font-size:0.95rem;margin-top:6px} /* Modal styles */ #officer-modal{transition:opacity .18s var(--easing);} #officer-modal .glass{background:var(--bg);border-radius:var(--radius);padding:18px;transform:translateY(6px);opacity:0;transition:transform .22s var(--easing),opacity .22s var(--easing)} /* when modal is visible (not hidden) animate inner card */ #officer-modal:not(.hidden) .glass{transform:translateY(0);opacity:1} /* Buttons */ .btn{display:inline-block;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--border-gray);background:transparent;color:var(--text);cursor:pointer;transition:transform .18s var(--easing),box-shadow .18s var(--easing)} .btn-accent{background:transparent;border:1px solid var(--border-gray)} .btn-accent:hover{color:var(--accent);box-shadow:0 8px 20px rgba(200,174,114,0.06);transform:translateY(-2px)} /* Swiper arrows use accent */ .swiper-button-next, .swiper-button-prev{color:var(--accent) !important} /* Utility classes */ .text-center{text-align:center} .mb-6{margin-bottom:24px} /* Semantic color helpers (replace Tailwind utility colors) */ .text-muted{color:rgba(0,0,0,0.45)} .text-accent{color:var(--accent)} .avatar-border{border:4px solid var(--accent)} .hover-accent:hover{color:var(--accent);} /* Smooth subtle motion for interactive elements only */ *{transition-timing-function:var(--easing)} /* Responsive adjustments */ @media (max-width:768px){h1{font-size:34px}.max-w-7xl{padding:24px}.glass{padding:14px}} /* Arrow link styles */ .arrow-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px; font-size: 3em; font-weight: 600; transition: all 0.3s var(--easing); text-decoration: none; line-height: 1; transform-origin: center; } .arrow-link:hover { transform: translateX(15px) scale(1.1); color: var(--accent) !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } /* Keep stylesheet focused and performant */