/* ============================================================ SRE Tel-U — Global Public CSS Track 2: Scroll Reveal, Micro-interactions, Transitions ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700;900&family=Onest:wght@300;400;500;600;700&display=swap'); /* ── CSS Variables (Design Tokens) ── */ :root { --color-primary: #104334; --color-primary-light: #1D614D; --color-primary-dark: #08332A; --color-accent: #21735B; --color-bg-dark: #144A3A; --color-white: #ffffff; --color-gray-100: #f3f4f6; --color-gray-500: #6b7280; --color-text: #1f2937; --font-heading: 'Red Hat Display', sans-serif; --font-body: 'Onest', sans-serif; --transition-smooth: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --shadow-card: 0 4px 24px rgba(16, 67, 52, 0.12); --shadow-card-hover: 0 16px 48px rgba(16, 67, 52, 0.22); --radius-card: 16px; } /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); color: var(--color-text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── Custom Scrollbar ── Firefox via scrollbar-color/-width; WebKit/Blink via ::-webkit-scrollbar. Track stays near-invisible so the thumb (brand green) reads as the whole scrollbar, not a bar-inside-a-bar. */ html { scrollbar-color: var(--color-accent) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 999px; border: 3px solid var(--color-white); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary); } /* ── Page Fade Transition ── */ body.page-fade-in { animation: pageFadeIn 0.35s ease forwards; } body.page-fade-out { animation: pageFadeOut 0.28s ease forwards; pointer-events: none; } /* Opacity-only: a transform here (even translateY(0) left behind by animation-fill-mode: forwards) creates a new containing block on , which silently breaks position:fixed for every descendant -- including the site's own fixed navbars -- for the rest of the page's life. Not worth a 6px slide for that trade-off. */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageFadeOut { from { opacity: 1; } to { opacity: 0; } } /* ── Scroll Reveal ── */ [data-sr].sr-hidden { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } [data-sr="fade-left"].sr-hidden { transform: translateX(-32px); } [data-sr="fade-right"].sr-hidden { transform: translateX(32px); } [data-sr="scale"].sr-hidden { transform: scale(0.9); } [data-sr="zoom"].sr-hidden { transform: scale(0.85); opacity: 0; } [data-sr].sr-visible { opacity: 1; transform: none; } /* ── Navbar: glassmorphic once scrolled ── Translucent (not solid) so whatever's behind still shows through the blur -- that's what actually reads as "glass" rather than a flat white bar. saturate() is the usual glassmorphism trick to keep the blurred backdrop from looking washed out; the hairline border is the glass "edge" highlight. */ nav.nav-scrolled { background-color: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px rgba(8, 51, 42, 0.14); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } nav.nav-scrolled a, nav.nav-scrolled button, nav.nav-scrolled li { color: var(--color-primary) !important; } /* Swap to the dark-green logo once the nav has a light background, so it stays legible against nav.nav-scrolled's white fill. */ nav.nav-scrolled .nav-logo-default { opacity: 0; } nav.nav-scrolled .nav-logo-scrolled { opacity: 1; } /* ── Program / Article Cards ── */ .sre-card { background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; transition: var(--transition-smooth); } .sre-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); } .sre-card img { transition: transform 0.45s ease; } .sre-card:hover img { transform: scale(1.04); } /* ── Buttons ── */ .sre-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.6rem; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; cursor: pointer; transition: var(--transition-bounce); border: none; outline: none; } .sre-btn:hover { transform: scale(1.05); } .sre-btn:active { transform: scale(0.97); } .sre-btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 16px rgba(16, 67, 52, 0.3); } .sre-btn-primary:hover { background: var(--color-primary-light); } .sre-btn-outline { border: 2.5px solid var(--color-primary); color: var(--color-primary); background: transparent; } .sre-btn-outline:hover { background: var(--color-primary); color: var(--color-white); } /* ── Section Heading ── */ .sre-section-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-500); margin-bottom: 0.4rem; } .sre-section-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--color-primary-dark); line-height: 1.2; } /* ── Program List Cards (Activity / Research / Competition) ── */ .program-list-card { display: flex; gap: 0; border-radius: 14px; overflow: hidden; border: 3px solid var(--color-accent); background: var(--color-white); box-shadow: var(--shadow-card); transition: var(--transition-smooth); text-decoration: none; color: inherit; } .program-list-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: var(--color-primary); } .program-list-card img { width: 280px; min-height: 180px; object-fit: cover; flex-shrink: 0; transition: transform 0.45s ease; } .program-list-card:hover img { transform: scale(1.04); } @media (max-width: 768px) { .program-list-card { flex-direction: column; } .program-list-card img { width: 100%; height: 200px; } } /* ── Department Logo hover glow ── */ .dept-logo { transition: var(--transition-bounce); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2)); } .dept-logo:hover { transform: scale(1.12); filter: drop-shadow(0 8px 20px rgba(16,67,52,0.35)); } /* ── Carousel Item ── */ .carousel-item { transition: var(--transition-smooth); } .carousel-item:hover { transform: scale(1.03); } /* ── Focus Ring (Accessibility) ── */ a:focus-visible, button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; } /* ── Category Nav Tabs ── */ .cat-tab { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 900; color: var(--color-gray-500); transition: color 0.25s ease; text-decoration: none; } .cat-tab:hover { color: var(--color-primary); } .cat-tab.active { color: var(--color-text); } /* ── Stagger helper ── */ [data-stagger] > * { transition-duration: 0.55s; transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }