background-image slides, the section had no intrinsic height
and collapsed to ~0 pixels.
The .hero rule below restores the height. Paste this entire file at the
END of your existing main stylesheet (after all other rules), and the
hero will render correctly.
========================================================================= */
/* 1. Base hero — establishes height + positioning context.
This is the rule that stops the hero from collapsing.
Without it, the section had no intrinsic height once the
![]()
was
removed in favour of the Swiper background slider. */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--navy-dark, #0E1A3E); /* fallback while slides load */
}
/* 2. Make .hero.hero-slider a positioning context for the slider background */
.hero.hero-slider {
position: relative;
overflow: hidden;
}
/* 3. Slider track — fills the hero area, sits BEHIND the overlay & content */
.hero-bg-swiper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-bg-swiper .swiper-wrapper {
height: 100%;
}
.hero-bg-swiper .swiper-slide {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform;
}
/* 4. Ken Burns slow-zoom on the active slide (8s ease-out, 1.0 -> 1.12) */
.hero-bg-swiper .swiper-slide {
transform: scale(1.0);
transition: transform 8s ease-out;
}
.hero-bg-swiper .swiper-slide.kb-running {
transform: scale(1.12);
}
/* 5. Make sure overlay and content stack above the slider */
.hero.hero-slider .hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero.hero-slider .container,
.hero.hero-slider .hero-scroll {
position: relative;
z-index: 2;
}
/* 6. Hero slider pagination (dots) — pill style, bottom center */
.hero-pagination {
position: absolute;
bottom: 2.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 0.6rem;
pointer-events: auto;
}
.hero-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
opacity: 1;
transition: width 0.35s ease, background 0.35s ease, border-radius 0.35s ease;
cursor: pointer;
border: 2px solid transparent;
}
.hero-pagination .swiper-pagination-bullet-active {
width: 36px;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}
/* 7. On hover, pause hint (subtle ring) */
.hero-pagination .swiper-pagination-bullet:hover {
background: rgba(255, 255, 255, 0.75);
}
/* 8. Mobile tweaks — keep dots visible above hero scroll cue */
@media (max-width: 768px) {
.hero {
min-height: 90vh; /* slightly shorter on mobile */
}
.hero-pagination {
bottom: 5.5rem; /* lift above the "scroll to explore" cue */
}
.hero-pagination .swiper-pagination-bullet {
width: 9px;
height: 9px;
}
.hero-pagination .swiper-pagination-bullet-active {
width: 28px;
}
/* Slightly faster zoom on mobile so users see motion sooner */
.hero-bg-swiper .swiper-slide {
transition: transform 6s ease-out;
}
}
/* 9. Reduced motion — disable Ken Burns for accessibility */
@media (prefers-reduced-motion: reduce) {
.hero-bg-swiper .swiper-slide,
.hero-bg-swiper .swiper-slide.kb-running {
transform: none;
transition: none;
}
}
/* 10. Welcome / curriculum image — subtle float-in (works with existing data-aos) */
.about-image-wrap img,
.curr-card-img img {
transition: transform 0.6s ease, filter 0.6s ease;
}
.about-image-wrap:hover img,
.curr-card:hover .curr-card-img img {
transform: scale(1.04);
}
/* 11. Facility card image — slow Ken Burns on hover (reuses same idea) */
.facility-card img {
transition: transform 1.6s ease-out;
}
.facility-card:hover img {
transform: scale(1.10);
}