/* ---- Import Google Fonts (Poppins) ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* ---- Brand Tokens (single source of truth) ---- */
:root {
--brand-navy: #0a1044;
--brand-navy-alt: #0d1257;
--brand-gold: #d4a94a;
--brand-gold-alt: #c9a15a;
--brand-navy-light: #131a5e;
--brand-navy-deep: #070b30;
--text-dark: #1e293b;
--text-muted: #64748b;
--text-light: #94a3b8;
--bg-light: #f8fafc;
--bg-cream: #fdfcfa;
--section-padding: 5rem 0;
--card-radius: 0.75rem;
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ---- Universal Typography across ALL elements ---- */
*,
*::before,
*::after {
font-family: inherit;
}
html,
body {
font-family: var(--font-family-base);
color: var(--text-dark);
background-color: #ffffff;
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
p, span, a, li, blockquote, label, small, strong, em, b, i,
button, input, optgroup, select, textarea {
font-family: var(--font-family-base);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}
/* ---- Universal Media & Content Containment ---- */
img,
video,
iframe,
embed,
object {
max-width: 100%;
height: auto;
}
/* ---- Universal Editorial Rich Text Tables, Images & Embeds ---- */
.rich-text-content table,
.policy-editorial-body table,
.admission-proc-body table,
.fee-instructions-editorial-body table {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rich-text-content img,
.policy-editorial-body img,
.admission-proc-body img,
.fee-instructions-editorial-body img {
max-width: 100% !important;
height: auto !important;
}
.rich-text-content iframe,
.policy-editorial-body iframe,
.admission-proc-body iframe {
max-width: 100% !important;
}
/* =============================================
Top Strip (Contact Info & Tagline)
============================================= */
.top-strip {
background-color: var(--brand-navy);
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem;
padding: 0.45rem 0;
letter-spacing: 0.01em;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.top-strip-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.top-strip-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-weight: 500;
font-size: 0.78rem;
transition: color 0.2s ease;
}
.top-strip-item i {
color: var(--brand-gold);
font-size: 0.82rem;
display: inline-block;
}
.top-strip-item:hover {
color: var(--brand-gold);
}
.top-strip-divider {
width: 1px;
height: 12px;
background-color: rgba(255, 255, 255, 0.2);
display: inline-block;
}
.top-strip-tagline {
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
letter-spacing: 0.02em;
}
/* =============================================
Main Navbar (Sticky Header)
============================================= */
.main-navbar {
background-color: #ffffff;
box-shadow: 0 2px 12px rgba(10, 16, 68, 0.05);
border-bottom: 1px solid rgba(10, 16, 68, 0.06);
padding: 0;
z-index: 1030;
position: -webkit-sticky;
position: sticky;
top: 0;
transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.main-navbar.navbar-scrolled {
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(10, 16, 68, 0.10);
border-bottom: 1px solid rgba(10, 16, 68, 0.08);
}
/* Brand - Logo ONLY (No text/name) */
.navbar-brand-wrapper {
display: flex;
align-items: center;
text-decoration: none;
padding: 0.5rem 0;
}
.navbar-brand-wrapper:hover,
.navbar-brand-wrapper:focus,
.navbar-brand-wrapper .crest-img:hover {
transform: none !important;
opacity: 1 !important;
}
.navbar-brand-wrapper .crest-img {
height: 60px;
width: auto;
object-fit: contain;
display: block;
transition: none;
}
@media (max-width: 767.98px) {
.navbar-brand-wrapper {
padding: 0.35rem 0;
}
.navbar-brand-wrapper .crest-img {
height: 48px;
}
}
@media (max-width: 399.98px) {
.navbar-brand-wrapper .crest-img {
height: 40px;
}
}
/* Desktop Nav Links */
.main-navbar .navbar-nav {
display: flex;
align-items: center;
gap: 0.35rem;
}
.main-navbar .navbar-nav .nav-link {
font-size: 0.92rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
color: #1e293b;
padding: 1.15rem 0.85rem;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
transition: color 0.2s ease;
}
.main-navbar .navbar-nav .nav-link:hover {
color: var(--brand-gold-alt);
}
.main-navbar .navbar-nav .nav-link.active {
color: var(--brand-navy);
font-weight: 600;
}
/* Active indicator line - reduced gap directly under the text */
.main-navbar .navbar-nav .nav-link .nav-text {
position: relative;
display: inline-block;
padding-bottom: 4px;
/* Reduced gap directly under the letters */
}
.main-navbar .navbar-nav .nav-link .nav-text::after {
content: '';
position: absolute;
bottom: 0;
/* Exactly 4px under the text */
left: 0;
width: 100%;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-navbar .navbar-nav .nav-link.active .nav-text::after {
transform: scaleX(1);
}
.main-navbar .navbar-nav .nav-link:hover .nav-text::after {
transform: scaleX(1);
}
/* Remove Bootstrap's duplicate default caret */
.main-navbar .dropdown-toggle::after {
display: none !important;
}
/* Single clean Dropdown Arrow in Menu */
.main-navbar .nav-link .dropdown-arrow {
font-size: 0.65rem;
opacity: 0.65;
transition: transform 0.25s ease, opacity 0.2s ease;
display: inline-block;
}
.main-navbar .nav-item.dropdown:hover .dropdown-arrow,
.main-navbar .nav-item.dropdown.show .dropdown-arrow {
transform: rotate(180deg);
opacity: 1;
color: var(--brand-gold);
}
/* =============================================
Dropdown Menu Animation & Styling (Inspiration: Ref Image 1)
============================================= */
@media (min-width: 992px) {
.main-navbar .nav-item.dropdown {
position: relative;
}
.main-navbar .custom-dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(12px) scale(0.97);
transform-origin: top left;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
min-width: 14rem;
background: #ffffff;
border: 1px solid rgba(10, 16, 68, 0.08);
border-radius: 8px;
box-shadow: 0 16px 36px -4px rgba(10, 16, 68, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04);
padding: 0.55rem 0;
margin-top: -2px;
z-index: 1050;
}
/* Right-aligned dropdown for last items to prevent viewport overflow */
.main-navbar .navbar-nav > .nav-item:nth-last-child(-n+2) .custom-dropdown-menu {
left: auto;
right: 0;
transform-origin: top right;
}
/* Subtle top gold accent bar */
.main-navbar .custom-dropdown-menu::before {
content: '';
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 2px;
background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-alt));
border-radius: 2px 2px 0 0;
}
/* Open smoothly on hover or focus */
.main-navbar .nav-item.dropdown:hover>.custom-dropdown-menu,
.main-navbar .nav-item.dropdown.show>.custom-dropdown-menu,
.main-navbar .nav-item.dropdown:focus-within>.custom-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
}
.main-navbar .custom-dropdown-menu .dropdown-item {
font-size: 0.88rem;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
padding: 0.65rem 1.4rem;
color: #334155;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
}
.main-navbar .custom-dropdown-menu .dropdown-item:hover,
.main-navbar .custom-dropdown-menu .dropdown-item:focus {
color: var(--brand-gold-alt);
background: rgba(212, 169, 74, 0.07);
padding-left: 1.65rem;
}
.main-navbar .custom-dropdown-menu .dropdown-item.active {
color: var(--brand-navy);
font-weight: 600;
background: rgba(212, 169, 74, 0.12);
border-left: 3px solid var(--brand-gold);
padding-left: 1.5rem;
}
/* =============================================
Enquire CTA Buttons
============================================= */
.btn-enquire {
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-alt) 100%);
color: var(--brand-navy);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.6rem 1.35rem;
border: none;
border-radius: 6px;
transition: all 0.25s ease;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(212, 169, 74, 0.25);
}
.btn-enquire:hover {
background: linear-gradient(135deg, #dfb75c 0%, #d4a94a 100%);
color: var(--brand-navy);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(212, 169, 74, 0.4);
}
.btn-enquire-mobile {
font-size: 0.75rem;
padding: 0.42rem 0.85rem;
border-radius: 4px;
}
/* =============================================
Mobile Navigation & Drawer (Trending Offcanvas)
============================================= */
/* Animated Hamburger Toggle */
.mobile-nav-toggle {
display: inline-flex;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: background-color 0.2s ease;
align-items: center;
justify-content: center;
outline: none;
}
.mobile-nav-toggle:hover {
background-color: rgba(10, 16, 68, 0.05);
}
.mobile-nav-toggle .hamburger-box {
width: 24px;
height: 18px;
display: inline-block;
position: relative;
}
.mobile-nav-toggle .hamburger-inner,
.mobile-nav-toggle .hamburger-inner::before,
.mobile-nav-toggle .hamburger-inner::after {
width: 24px;
height: 2.2px;
background-color: var(--brand-navy);
border-radius: 2px;
position: absolute;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
}
.mobile-nav-toggle .hamburger-inner {
top: 50%;
transform: translateY(-50%);
}
.mobile-nav-toggle .hamburger-inner::before {
content: '';
top: -7px;
}
.mobile-nav-toggle .hamburger-inner::after {
content: '';
bottom: -7px;
}
/* Hamburger Active / Morphing to 'X' */
.mobile-nav-toggle.is-active .hamburger-inner {
background-color: transparent;
}
.mobile-nav-toggle.is-active .hamburger-inner::before {
transform: translateY(7px) rotate(45deg);
background-color: var(--brand-navy);
}
.mobile-nav-toggle.is-active .hamburger-inner::after {
transform: translateY(-7px) rotate(-45deg);
background-color: var(--brand-navy);
}
/* Backdrop */
.mobile-nav-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(7, 11, 48, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-nav-backdrop.is-open {
opacity: 1;
visibility: visible;
}
/* Slide-over Drawer */
.mobile-nav-drawer {
position: fixed;
top: 0;
right: 0;
width: min(340px, 86vw);
height: 100vh;
height: 100dvh;
background: #ffffff;
z-index: 1050;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
box-shadow: -8px 0 28px rgba(10, 16, 68, 0.15);
overflow: hidden;
}
.mobile-nav-drawer.is-open {
transform: translateX(0);
}
/* Prevent body scrolling when drawer is open */
body.mobile-nav-locked {
overflow: hidden !important;
}
body.mobile-nav-locked .scroll-to-top-btn {
display: none !important;
}
/* Drawer Header */
.mobile-drawer-header {
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f5f9;
background: #fafbfc;
}
.mobile-drawer-brand {
display: flex;
align-items: center;
text-decoration: none;
}
.mobile-drawer-brand .crest-img {
height: 38px;
width: auto;
object-fit: contain;
}
.mobile-drawer-close {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.mobile-drawer-close:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}
/* Drawer Body */
.mobile-drawer-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1rem 1.25rem 2rem;
display: flex;
flex-direction: column;
}
/* Drawer Menu List */
.mobile-menu-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.mobile-menu-item {
border-bottom: 1px solid #f1f5f9;
}
.mobile-menu-link {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0.25rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: #1e293b;
text-decoration: none;
background: none;
border: none;
text-align: left;
transition: color 0.2s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link.active {
color: var(--brand-gold-alt);
}
.mobile-menu-link.active {
font-weight: 700;
color: var(--brand-navy);
}
.mobile-menu-link .mobile-chevron {
font-size: 0.72rem;
color: #94a3b8;
transition: transform 0.25s ease, color 0.2s ease;
}
.mobile-menu-item.is-expanded .mobile-chevron {
transform: rotate(180deg);
color: var(--brand-gold);
}
/* Submenu Accordion */
.mobile-submenu {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fafbfc;
border-radius: 6px;
position: relative;
}
.mobile-submenu::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 12px;
width: 2px;
background: var(--brand-gold);
opacity: 0.4;
border-radius: 2px;
}
.mobile-submenu-item a {
display: block;
padding: 0.6rem 1rem 0.6rem 1.75rem;
font-size: 0.88rem;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
color: #475569;
text-decoration: none;
transition: all 0.2s ease;
}
.mobile-submenu-item a:hover {
color: var(--brand-gold-alt);
padding-left: 2rem;
}
.mobile-submenu-item a.active {
color: var(--brand-navy);
font-weight: 700;
padding-left: 2.15rem;
position: relative;
}
.mobile-submenu-item a.active::before {
content: '';
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: var(--brand-gold);
border-radius: 50%;
}
/* Mobile Quick Contacts Card */
.mobile-contact-card {
margin-top: 0;
margin-bottom: 1.5rem;
background: #f8fafc;
border: 1px solid #e8ecf1;
border-radius: 8px;
padding: 1rem;
}
.mobile-contact-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-gold-alt);
margin-bottom: 0.75rem;
}
.mobile-contact-link {
display: flex;
align-items: center;
gap: 0.65rem;
color: #334155;
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 0.5rem;
transition: color 0.2s ease;
}
.mobile-contact-link:last-child {
margin-bottom: 0;
}
.mobile-contact-link:hover {
color: var(--brand-navy);
}
.mobile-contact-link i {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(10, 16, 68, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-navy);
font-size: 0.78rem;
flex-shrink: 0;
}
/* =============================================
Hero Banner
============================================= */
/* =============================================
Hero Banner (Dynamic Hero Image Slider & Clean Architecture)
/* =============================================
Hero Banner (Dynamic Hero Image Slider & Clean Border Bar Architecture)
============================================= */
.hero-section {
position: relative;
width: 100%;
min-height: calc(100vh - 110px);
overflow: hidden;
margin-bottom: 0;
background-color: var(--brand-navy);
}
.hero-slider-section {
position: relative;
}
.hero-slides-wrapper {
position: relative;
width: 100%;
min-height: calc(100vh - 110px);
height: 100%;
}
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: inherit;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 2.25rem;
opacity: 0;
visibility: hidden;
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
pointer-events: none;
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 2;
pointer-events: auto;
}
/* 100% Clean and Clear Natural Background Image with Ken Burns smooth zoom */
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
transform: scale(1.06);
transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-slide.is-active .hero-bg {
transform: scale(1);
}
/* No overall dark gradient over the whole photo */
.hero-bg::after {
display: none;
}
/* Compact Horizontal Translucent Caption Bar with Top and Bottom Borders (Shifted Below) */
.hero-caption-bar {
position: relative;
z-index: 2;
width: 100%;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(255, 255, 255, 0.22);
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
padding: 0.75rem 1rem 0.65rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
transform: translateY(8px);
opacity: 0.9;
transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s, opacity 0.7s ease 0.1s;
}
.hero-slide.is-active .hero-caption-bar {
transform: translateY(0);
opacity: 1;
}
.hero-caption-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.hero-heading {
font-size: clamp(1.15rem, 1.85vw, 1.55rem);
font-weight: 700;
color: var(--brand-gold);
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.25;
margin-bottom: 0.15rem;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.75);
}
.hero-subheading {
font-size: clamp(0.72rem, 0.95vw, 0.84rem);
font-weight: 500;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
margin-bottom: 0.25rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.75);
}
.hero-bar-nav {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.15rem;
margin-top: 0.15rem;
}
.hero-nav-arrow {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
padding: 0 4px;
cursor: pointer;
line-height: 1;
transition: all 0.2s ease;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.hero-nav-arrow:hover {
color: var(--brand-gold);
transform: scale(1.18);
}
/* =============================================
Section Shared Styles
============================================= */
.frontend-section {
padding: var(--section-padding);
}
.section-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--brand-gold);
margin-bottom: 0.75rem;
}
.section-title {
font-size: 2.25rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 1rem;
line-height: 1.2;
}
.section-subtitle {
font-size: 1rem;
color: var(--text-muted);
max-width: 600px;
line-height: 1.65;
}
/* =============================================
About Us Section (Home Page Section 2)
============================================= */
.about-home-section {
position: relative;
background-color: #ffffff;
padding: 4.75rem 0 4.25rem;
}
.about-home-visual {
position: relative;
padding: 0 0 1.25rem 0;
}
.about-image-card {
position: relative;
background: transparent;
padding: 0;
border: none;
border-radius: 14px;
box-shadow: none;
transition: transform 0.35s ease;
}
.about-image-card:hover {
transform: translateY(-4px);
}
.about-image-frame {
position: relative;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16 / 11;
background-color: #f8fafc;
box-shadow: 0 16px 36px rgba(10, 16, 68, 0.12);
}
.about-main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.about-image-card:hover .about-main-img {
transform: scale(1.03);
}
.about-est-badge {
position: absolute;
bottom: -12px;
right: 18px;
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
color: #ffffff;
border: 1.5px solid var(--brand-gold);
border-radius: 8px;
padding: 0.5rem 1.15rem;
text-align: center;
z-index: 3;
box-shadow: 0 8px 22px rgba(10, 16, 68, 0.32);
transition: transform 0.3s ease;
}
.about-image-card:hover .about-est-badge {
transform: translateY(-2px);
}
.about-est-year {
font-size: 1.3rem;
font-weight: 700;
color: var(--brand-gold);
line-height: 1.1;
margin-bottom: 0.1rem;
letter-spacing: 0.02em;
}
.about-est-label {
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255, 255, 255, 0.92);
}
.about-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.about-eyebrow-line {
width: 22px;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.about-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
.about-home-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.about-home-lead {
font-size: 0.95rem;
color: #475569;
line-height: 1.72;
margin-bottom: 1.35rem;
}
.about-pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.about-pillar-item {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fdfbf7;
border: 1px solid rgba(212, 169, 74, 0.25);
border-radius: 8px;
padding: 0.85rem 1rem;
transition: all 0.25s ease;
}
.about-pillar-item:hover {
background: #ffffff;
border-color: var(--brand-gold);
box-shadow: 0 6px 18px rgba(10, 16, 68, 0.08);
transform: translateY(-2px);
}
.about-pillar-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(10, 16, 68, 0.08);
color: var(--brand-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.about-pillar-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 0.2rem;
line-height: 1.35;
}
.about-pillar-desc {
font-size: 0.78rem;
color: #64748b;
margin-bottom: 0;
line-height: 1.42;
}
.about-home-cta,
.desk-cta {
display: flex;
align-items: center;
margin-top: 1.5rem;
}
.btn-know-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.7rem 1.65rem;
background-color: var(--brand-navy);
color: #ffffff;
border: 1.5px solid var(--brand-navy);
border-radius: 6px;
font-size: 0.88rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.2);
transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-know-more:hover {
background-color: var(--brand-gold);
color: #0a1044;
border-color: var(--brand-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 169, 74, 0.4);
}
.btn-know-more i {
font-size: 0.92rem;
transition: transform 0.25s ease;
}
.btn-know-more:hover i {
transform: translateX(4px);
}
/* =============================================
Principal's Desk Section (Home Page Section 3)
============================================= */
.principal-desk-section {
position: relative;
background-color: #ffffff;
padding: 4.5rem 0 4.25rem;
}
.desk-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.85rem;
}
.desk-eyebrow-line {
width: 22px;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.desk-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
.desk-lead-quote {
font-size: 1.4rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.48;
margin-bottom: 1.25rem;
}
.desk-divider {
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--brand-gold), rgba(212, 169, 74, 0.2));
border-radius: 3px;
}
.desk-content-panel {
position: relative;
}
.desk-quote-mark {
font-size: 3.25rem;
line-height: 1;
color: var(--brand-gold);
opacity: 0.35;
margin-bottom: -0.65rem;
}
.desk-paragraph {
font-size: 0.94rem;
font-weight: 400;
line-height: 1.78;
color: #424a60;
margin-bottom: 1.15rem;
}
.desk-highlight-bar {
border-left: 3px solid var(--brand-gold);
background: rgba(212, 169, 74, 0.08);
border-radius: 0 8px 8px 0;
padding: 0.85rem 1.25rem;
}
.desk-equality-text {
font-size: 0.92rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.6;
margin-bottom: 0;
}
.desk-cta {
margin-top: 1.5rem;
}
/* =============================================
School at a Glance Section (Key Facts & Statistics)
============================================= */
.glance-section {
position: relative;
background-color: #f8fafc;
padding: 1.5rem 0 2rem;
}
.glance-header {
margin-bottom: 2.75rem;
}
.glance-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.glance-eyebrow-line {
width: 22px;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.glance-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
.glance-title {
font-size: clamp(1.75rem, 2.3vw, 1.15rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin-bottom: 0.65rem;
}
.glance-subtitle {
font-size: 0.95rem;
color: var(--text-muted);
max-width: 620px;
line-height: 1.68;
margin-bottom: 0;
}
.glance-card {
background: #ffffff;
border: 1px solid rgba(212, 169, 74, 0.28);
border-radius: 12px;
padding: 2rem 1.25rem 1.75rem;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.04);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.glance-card:hover {
background-color: #ffffff;
border-color: var(--brand-gold);
box-shadow: 0 12px 28px rgba(10, 16, 68, 0.09);
transform: translateY(-4px);
}
.glance-icon-wrap {
width: 46px;
height: 46px;
border-radius: 10px;
background: rgba(10, 16, 68, 0.05);
color: var(--brand-navy);
font-size: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.glance-card:hover .glance-icon-wrap {
background-color: var(--brand-navy);
color: var(--brand-gold);
}
.glance-value {
font-size: 1.2rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.5rem;
min-height: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.glance-value-year {
font-size: 1.85rem;
color: var(--brand-gold);
letter-spacing: 0.02em;
}
.glance-accent-line {
width: 28px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 2px;
margin: 0 auto 0.65rem;
}
.glance-label {
font-size: 0.84rem;
font-weight: 500;
color: var(--text-muted);
line-height: 1.45;
margin-bottom: 0;
}
/* =============================================
Highlights Strip (Toppers, News, Events)
============================================= */
.highlights-section {
background-color: #faf9f6;
padding: 4.25rem 0 3.75rem;
position: relative;
}
.highlights-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.highlights-eyebrow-line {
width: 22px;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.highlights-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
/* Staggered Scroll Animation */
.highlights-col {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.highlights-animated .highlights-col:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 0ms;
}
.highlights-animated .highlights-col:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 100ms;
}
.highlights-animated .highlights-col:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 200ms;
}
/* Column Header */
.highlight-col-wrapper {
background: #ffffff;
border: 1px solid #edf1f7;
border-radius: 14px;
padding: 1.5rem 1.35rem;
height: 100%;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.04);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.highlight-col-wrapper:hover {
border-color: #dce3ee;
}
.highlight-col-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.95rem;
margin-bottom: 1.25rem;
border-bottom: 1.5px solid #edf0f5;
}
.highlight-col-title-group {
display: flex;
align-items: center;
gap: 0.65rem;
}
.highlight-col-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(212, 169, 74, 0.15);
color: var(--brand-navy);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.highlight-col-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0;
line-height: 1.2;
}
/* View All Link with Animated Gold Underline */
.highlight-view-all {
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-gold);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
position: relative;
padding-bottom: 2px;
transition: color 0.25s ease, gap 0.25s ease;
}
.highlight-view-all::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background-color: var(--brand-gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.highlight-view-all:hover {
color: #b88f35;
gap: 0.55rem;
}
.highlight-view-all:hover::after {
transform: scaleX(1);
}
/* Items Stack */
.highlight-items-stack {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
/* Highlight Item Card (Distinct Hover Lift & Deepening Shadow) */
.highlight-item-card {
background: #ffffff;
border: 1px solid #edf0f5;
border-radius: 10px;
padding: 0.75rem 0.85rem;
display: flex;
align-items: center;
gap: 0.85rem;
box-shadow: 0 2px 8px rgba(10, 16, 68, 0.03);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease;
}
.highlight-item-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(10, 16, 68, 0.08);
border-color: rgba(212, 169, 74, 0.45);
}
/* Topper Avatar */
.topper-avatar-wrap {
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--brand-gold);
transition: transform 0.3s ease;
}
.topper-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.topper-initials-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
border: 2px solid var(--brand-gold);
color: var(--brand-gold);
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
}
.highlight-item-card:hover .topper-avatar-wrap,
.highlight-item-card:hover .topper-initials-avatar {
transform: scale(1.05);
}
.topper-name {
font-size: 0.92rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.25rem;
line-height: 1.3;
}
.topper-class-badge {
font-size: 0.72rem;
font-weight: 600;
color: #4a5568;
background: #eef2f7;
padding: 0.18rem 0.5rem;
border-radius: 4px;
}
.topper-score-badge {
font-size: 0.72rem;
font-weight: 700;
color: #8c6512;
background: rgba(212, 169, 74, 0.16);
padding: 0.18rem 0.5rem;
border-radius: 4px;
}
/* Media Cards (News & Events) with 16:9 Thumbnail and Inner Image Zoom */
.highlight-thumb-wrap {
width: 96px;
height: 64px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
position: relative;
background: #eef2f7;
}
.highlight-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.highlight-item-card:hover .highlight-thumb-img {
transform: scale(1.08);
}
.highlight-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-navy);
font-size: 1.35rem;
background: linear-gradient(135deg, #e8edf5, #f3f6fa);
}
.highlight-card-body {
min-width: 0;
}
.highlight-card-title {
font-size: 0.86rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.35;
margin-bottom: 0.35rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.highlight-card-meta {
font-size: 0.75rem;
color: #718096;
display: flex;
align-items: center;
}
.text-gold {
color: var(--brand-gold) !important;
}
/* Upcoming Event Badge */
.event-badge-upcoming {
position: absolute;
top: 4px;
left: 4px;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--brand-gold);
color: var(--brand-navy);
padding: 1px 6px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* =============================================
Campus Life Section (5-Card Layout)
============================================= */
.campus-life-section {
background-color: #faf9f6;
padding: 4.75rem 0 4.25rem;
position: relative;
border-bottom: 1px solid #edf0f5;
}
.campus-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.campus-eyebrow-line {
width: 22px;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.campus-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
.campus-life-card {
background: #ffffff;
border: 1px solid #edf0f5;
border-radius: 14px;
padding: 2rem 1.75rem 1.65rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.04);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
position: relative;
}
.campus-life-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 34px rgba(10, 16, 68, 0.09);
border-color: rgba(212, 169, 74, 0.45);
}
.campus-life-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.campus-life-icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(10, 16, 68, 0.06);
color: var(--brand-navy);
font-size: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.campus-life-card:hover .campus-life-icon-wrap {
background-color: var(--brand-navy);
color: var(--brand-gold);
transform: scale(1.05);
}
.campus-life-category {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--brand-gold);
}
.campus-life-card-body {
flex-grow: 1;
}
.campus-life-card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 0.65rem;
line-height: 1.3;
}
.campus-life-card-desc {
font-size: 0.88rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 1.35rem;
}
.campus-life-card-footer {
padding-top: 0.95rem;
border-top: 1px solid #f1f4f8;
}
.campus-life-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.86rem;
font-weight: 600;
color: var(--brand-navy);
text-decoration: none;
transition: color 0.25s ease, gap 0.25s ease;
}
.campus-life-cta i {
font-size: 0.95rem;
color: var(--brand-gold);
transition: transform 0.25s ease;
}
.campus-life-card:hover .campus-life-cta {
color: var(--brand-gold);
gap: 9px;
}
.campus-life-card:hover .campus-life-cta i {
transform: translateX(4px);
}
/* =============================================
Pre-Footer Global CTA Section
============================================= */
.pre-footer-cta {
background: linear-gradient(135deg, #04092b 0%, #07103d 45%, #0a1752 100%);
padding: 3.8rem 0 4.2rem;
position: relative;
overflow: hidden;
}
/* Custom Campus Background Image (Right Side - High Visibility & Centered on School Name) */
.pre-footer-bg-image {
position: absolute;
top: 0;
right: 0;
left: 42%;
width: 62%;
height: 100%;
background-size: cover;
background-position: 18% 80%;
background-repeat: no-repeat;
opacity: 0.60;
z-index: 1;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 8%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 100%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 8%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 100%);
filter: saturate(1.2) contrast(1.1);
}
/* Decorative Gold Accent Lines (Left Side) */
.pre-footer-accent-lines {
position: absolute;
top: 0;
left: 5%;
bottom: 0;
width: 28px;
z-index: 1;
display: flex;
gap: 7px;
pointer-events: none;
}
.accent-line {
display: block;
width: 1.5px;
height: 100%;
}
.accent-line-1 {
background: linear-gradient(180deg, transparent 0%, var(--brand-gold, #d4a94a) 25%, var(--brand-gold, #d4a94a) 75%, transparent 100%);
opacity: 0.25;
}
.accent-line-2 {
background: linear-gradient(180deg, transparent 10%, var(--brand-gold, #d4a94a) 35%, var(--brand-gold, #d4a94a) 65%, transparent 90%);
opacity: 0.15;
}
.accent-line-3 {
background: linear-gradient(180deg, transparent 20%, var(--brand-gold, #d4a94a) 45%, var(--brand-gold, #d4a94a) 55%, transparent 100%);
opacity: 0.09;
}
/* Gold Diagonal Wedge / Cross Border at Bottom-Right (Left Thin to Right Broad) */
.pre-footer-gold-wedge-wrap {
position: absolute;
bottom: 0;
right: 0;
width: 52%;
height: 38px;
z-index: 3;
pointer-events: none;
overflow: hidden;
}
.pre-footer-gold-wedge-svg {
width: 100%;
height: 100%;
display: block;
}
/* Layout */
.pre-footer-cta-layout {
display: flex;
align-items: flex-start;
}
/* Content */
.pre-footer-cta-content {
max-width: 720px;
}
.pre-footer-cta-eyebrow {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-gold, #d4a94a);
margin-bottom: 0.75rem;
}
.pre-footer-cta-heading {
font-size: 2.15rem;
font-weight: 600;
color: #ffffff;
line-height: 1.32;
letter-spacing: -0.01em;
margin: 0 0 1.8rem;
max-width: 680px;
}
/* CTA Button Row */
.pre-footer-cta-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.15rem;
}
/* Primary Button: Gold Filled with Shimmer Hover */
.btn-pre-footer-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: var(--brand-gold, #d4a94a);
color: var(--brand-navy, #0a1044);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.85rem 1.85rem;
border: 2px solid var(--brand-gold, #d4a94a);
border-radius: 4px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
white-space: nowrap;
z-index: 1;
}
.btn-pre-footer-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
z-index: -1;
}
.btn-pre-footer-primary:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 25px rgba(212, 169, 74, 0.45), 0 0 0 3px rgba(212, 169, 74, 0.15);
color: var(--brand-navy, #0a1044);
background: var(--brand-gold, #d4a94a);
text-decoration: none;
}
.btn-pre-footer-primary:hover::before {
left: 100%;
}
.btn-pre-footer-primary:active {
transform: translateY(-1px) scale(1.01);
}
.btn-pre-footer-primary i {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 0.9rem;
}
.btn-pre-footer-primary:hover i {
transform: translateX(4px);
}
/* Secondary Button: White Border with Glow Hover */
.btn-pre-footer-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: transparent;
color: #ffffff;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.85rem 1.85rem;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 4px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.35s ease;
white-space: nowrap;
}
.btn-pre-footer-secondary::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0);
border-radius: 4px;
transition: background 0.35s ease;
z-index: -1;
}
.btn-pre-footer-secondary:hover {
transform: translateY(-3px) scale(1.03);
border-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.25);
color: #ffffff;
text-decoration: none;
}
.btn-pre-footer-secondary:hover::before {
background: rgba(255, 255, 255, 0.08);
}
.btn-pre-footer-secondary:active {
transform: translateY(-1px) scale(1.01);
}
.btn-pre-footer-secondary i {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 0.9rem;
}
.btn-pre-footer-secondary:hover i {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 991.98px) {
.pre-footer-cta {
padding: 3.2rem 0 3.5rem;
}
.pre-footer-cta-heading {
font-size: 1.95rem;
}
.pre-footer-bg-image {
width: 70%;
opacity: 0.22;
}
.pre-footer-accent-lines {
left: 3%;
}
.pre-footer-gold-wedge-wrap {
width: 65%;
height: 30px;
}
}
@media (max-width: 575.98px) {
.pre-footer-cta {
padding: 2.6rem 0 2.8rem;
}
.pre-footer-cta-heading {
font-size: 1.55rem;
}
.pre-footer-cta-actions {
flex-direction: column;
align-items: stretch;
}
.btn-pre-footer-primary,
.btn-pre-footer-secondary {
width: 100%;
justify-content: center;
}
.pre-footer-bg-image {
opacity: 0.15;
width: 100%;
}
.pre-footer-accent-lines {
display: none;
}
.pre-footer-gold-wedge-wrap {
width: 100%;
height: 22px;
}
}
/* =============================================
Footer
============================================= */
.site-footer {
background-color: var(--brand-navy-deep);
color: rgba(255, 255, 255, 0.75);
padding-top: 3.75rem;
position: relative;
overflow: hidden;
}
/* Logo Column (Logo Only) */
.footer-col-brand {
display: flex;
align-items: flex-start;
padding-top: 0.25rem;
}
.footer-brand-container {
display: inline-flex;
padding: 0.25rem 0;
}
.footer-logo-badge {
display: inline-flex;
align-items: center;
background: #ffffff;
padding: 0.75rem 1.15rem;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
margin-bottom: 0;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-logo-badge:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.footer-crest {
height: 64px;
width: auto;
object-fit: contain;
display: block;
}
/* Footer Headings */
.footer-heading {
font-size: 0.82rem;
font-weight: 700;
color: var(--brand-gold);
text-transform: uppercase;
letter-spacing: 0.09em;
margin-bottom: 1.25rem;
position: relative;
display: inline-block;
padding-bottom: 0.5rem;
}
.footer-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--brand-gold);
border-radius: 1px;
}
/* Footer Links & Animated Gold Underline on Hover */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.65rem;
}
.footer-links a {
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
position: relative;
display: inline-block;
padding-bottom: 2px;
transition: color 0.25s ease;
}
.footer-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background-color: var(--brand-gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-links a:hover {
color: #ffffff;
}
.footer-links a:hover::after {
transform: scaleX(1);
}
/* Footer Contact Link */
.footer-contact-link {
display: inline-flex;
align-items: center;
word-break: break-all;
}
.footer-contact-link i {
flex-shrink: 0;
}
/* Footer Visit Box */
.footer-visit-box {
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.68);
line-height: 1.65;
}
.footer-address-text {
margin-bottom: 0.5rem;
}
.footer-phone-link {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.footer-phone-link:hover {
color: var(--brand-gold);
}
.footer-map-link {
display: inline-flex;
align-items: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--brand-gold);
text-decoration: none;
padding: 0.35rem 0.75rem;
border: 1px solid rgba(212, 169, 74, 0.3);
border-radius: 4px;
background: rgba(212, 169, 74, 0.06);
transition: all 0.2s ease;
}
.footer-map-link:hover {
background: var(--brand-gold);
color: var(--brand-navy);
border-color: var(--brand-gold);
}
/* Footer Columns Entrance Animation (Fade-Up on Scroll via IntersectionObserver) */
.footer-col {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer.footer-animated .footer-col {
opacity: 1;
transform: translateY(0);
}
.site-footer.footer-animated .footer-col:nth-child(1) {
transition-delay: 0.04s;
}
.site-footer.footer-animated .footer-col:nth-child(2) {
transition-delay: 0.08s;
}
.site-footer.footer-animated .footer-col:nth-child(3) {
transition-delay: 0.12s;
}
.site-footer.footer-animated .footer-col:nth-child(4) {
transition-delay: 0.16s;
}
/* Bottom Bar */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.09);
padding: 1.25rem 0;
margin-top: 2.75rem;
}
.footer-bottom-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-powered-link {
color: var(--brand-gold) !important;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.footer-powered-link:hover {
color: #ffffff !important;
text-decoration: underline;
}
@media (max-width: 767.98px) {
.site-footer {
padding-top: 2.75rem;
}
.footer-col {
margin-bottom: 1.75rem;
}
.footer-bottom {
flex-direction: column !important;
text-align: center;
gap: 0.5rem;
margin-top: 1.75rem;
padding: 1rem 0;
}
}
/* =============================================
About Page
============================================= */
.about-content-area {
padding: 3.5rem 0 4rem;
}
.about-content-area .rich-text-content {
font-size: 1rem;
line-height: 1.85;
color: var(--text-dark);
}
.about-content-area .rich-text-content h2,
.about-content-area .rich-text-content h3,
.about-content-area .rich-text-content h4 {
color: var(--brand-navy);
margin-top: 1.75rem;
margin-bottom: 0.75rem;
}
.about-content-area .rich-text-content ul,
.about-content-area .rich-text-content ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.about-content-area .about-banner-img {
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: 0 12px 36px rgba(10, 16, 68, 0.1);
margin-bottom: 2rem;
}
.about-content-area .about-banner-img img {
width: 100%;
height: auto;
object-fit: cover;
}
/* =============================================
Contact Page
============================================= */
.contact-section {
padding: 3.5rem 0 4rem;
}
.contact-info-card {
background-color: #ffffff;
border: 1px solid #e8ecf1;
border-radius: var(--card-radius);
padding: 2rem;
height: 100%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.contact-info-card .contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-alt));
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-gold);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.contact-info-card h5 {
font-size: 1rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.5rem;
}
.contact-info-card p {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0;
line-height: 1.65;
}
.contact-info-card a {
color: var(--brand-navy);
font-weight: 600;
text-decoration: none;
}
.contact-info-card a:hover {
color: var(--brand-gold);
}
.map-wrapper {
border-radius: var(--card-radius);
overflow: hidden;
border: 1px solid #e8ecf1;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.map-wrapper iframe {
width: 100%;
height: 420px;
border: 0;
}
/* =============================================
Utility
============================================= */
.placeholder-img-bg {
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-gold);
font-size: 2.5rem;
}
.img-placeholder-card {
width: 100%;
height: 180px;
background: linear-gradient(135deg, #e8ecf1 0%, #f1f5f9 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 1.5rem;
}
/* =============================================
Responsive
============================================= */
@media (max-width: 991.98px) {
.mobile-nav-toggle {
display: flex;
}
.navbar-brand-wrapper .crest-img {
height: 52px;
}
.top-strip {
padding: 0.35rem 0;
}
.hero-section {
min-height: 520px;
}
.hero-slide {
min-height: 520px;
padding-bottom: 2.25rem;
}
.hero-caption-bar {
padding: 1.1rem 0.75rem 1rem;
}
.hero-heading {
font-size: 1.65rem;
line-height: 1.22;
margin-bottom: 0.3rem;
}
.hero-subheading {
font-size: 0.92rem;
margin-bottom: 0.3rem;
}
.about-home-section {
padding: 3.5rem 0 3rem;
}
.about-home-heading {
font-size: 1.65rem;
}
.about-home-lead {
font-size: 0.95rem;
}
.section-title {
font-size: 1.75rem;
}
.principal-desk-section {
padding: 2.75rem 0;
}
.glance-section {
padding: 3.5rem 0 3rem;
}
.glance-title {
font-size: 1.65rem;
}
.glance-header {
margin-bottom: 2.25rem;
}
.highlights-section {
padding: 3.5rem 0 3rem;
}
.highlight-col-wrapper {
padding: 1.25rem 1.15rem;
}
.desk-lead-quote {
font-size: 1.25rem;
}
.desk-content-panel {
border-left: none;
padding-left: 0;
}
.cta-heading {
font-size: 1.75rem;
}
.cta-banner .d-flex {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
}
@media (max-width: 767.98px) {
:root {
--section-padding: 3rem 0;
}
.about-home-section {
padding: 2.75rem 0 2.25rem;
}
.about-est-badge {
padding: 0.55rem 0.95rem;
bottom: -10px;
right: 14px;
}
.about-est-year {
font-size: 1.2rem;
}
.about-home-heading {
font-size: 1.4rem;
line-height: 1.28;
}
.about-pillars-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.glance-section {
padding: 2.75rem 0 2.25rem;
}
.glance-title {
font-size: 1.45rem;
}
.glance-card {
padding: 1.5rem 1rem 1.35rem;
}
.glance-value {
font-size: 1.1rem;
}
.glance-value-year {
font-size: 1.6rem;
}
.hero-section {
min-height: 440px;
}
.hero-slide {
min-height: 440px;
padding-bottom: 2rem;
}
.hero-caption-bar {
padding: 0.65rem 0.5rem 0.55rem;
}
.hero-heading {
font-size: 1.25rem;
line-height: 1.22;
margin-bottom: 0.15rem;
}
.hero-subheading {
font-size: 0.78rem;
line-height: 1.35;
margin-bottom: 0.15rem;
}
.hero-bar-nav {
gap: 1rem;
margin-top: 0.15rem;
}
.hero-nav-arrow {
font-size: 1rem;
}
.section-title {
font-size: 1.5rem;
}
.principal-desk-section {
padding: 2.25rem 0;
}
.desk-lead-quote {
font-size: 1.15rem;
}
.desk-quote-mark {
font-size: 2.5rem;
margin-bottom: -0.4rem;
}
.desk-paragraph {
font-size: 0.9rem;
line-height: 1.7;
}
.desk-highlight-bar {
padding: 0.75rem 1rem;
}
.desk-equality-text {
font-size: 0.88rem;
}
.cta-heading {
font-size: 1.5rem;
}
.highlights-section {
padding: 2.75rem 0 2.25rem;
}
.highlight-col-wrapper {
padding: 1.2rem 1rem;
}
.highlight-col-title {
font-size: 1.08rem;
}
.highlight-thumb-wrap {
width: 84px;
height: 56px;
}
.highlight-card-title {
font-size: 0.82rem;
}
.top-strip-contact {
gap: 0.75rem !important;
}
.top-strip-item {
font-size: 0.72rem;
}
.footer-crest {
height: 44px;
}
}
@media (max-width: 575.98px) {
.hero-section {
min-height: 380px;
}
.hero-slide {
min-height: 380px;
padding-bottom: 1.65rem;
}
.hero-caption-bar {
padding: 0.75rem 0.4rem 0.65rem;
}
.hero-heading {
font-size: 1.15rem;
letter-spacing: 0.02em;
}
.hero-subheading {
font-size: 0.76rem;
line-height: 1.3;
letter-spacing: 0.05em;
}
.hero-bar-nav {
gap: 0.85rem;
margin-top: 0.15rem;
}
.hero-nav-arrow {
font-size: 1.05rem;
}
.btn-enquire-mobile {
display: none;
/* Keep header super clean on narrow phone screens */
}
.navbar-brand-wrapper .crest-img {
height: 46px;
}
}
/* =============================================
Inner Page Header & Rich Text Content (Canonical)
============================================= */
.page-hero {
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
padding: 4.25rem 0 3.5rem;
color: #ffffff;
border-bottom: 3.5px solid var(--brand-gold);
position: relative;
text-align: center;
}
.page-hero .breadcrumb-text {
display: inline-block;
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--brand-gold);
margin-bottom: 0.65rem;
max-width: 100%;
word-break: break-word;
}
.page-hero .breadcrumb-text a {
color: var(--brand-gold);
text-decoration: none;
}
.page-hero .breadcrumb-text a:hover {
text-decoration: underline;
}
.page-hero h1 {
font-size: clamp(1.65rem, 4vw, 2.75rem);
font-weight: 600;
color: #ffffff;
margin: 0;
line-height: 1.2;
word-break: break-word;
}
@media (max-width: 991.98px) {
.page-hero {
padding: 3.25rem 0 2.5rem;
}
}
@media (max-width: 767.98px) {
.page-hero {
padding: 2.5rem 0 2rem;
}
.page-hero .breadcrumb-text {
font-size: 0.8rem;
margin-bottom: 0.45rem;
}
}
@media (max-width: 575.98px) {
.page-hero {
padding: 2rem 0 1.65rem;
}
.page-hero h1 {
font-size: clamp(1.4rem, 5.5vw, 1.85rem);
}
}
.about-content-area {
padding: 5rem 0;
background-color: #ffffff;
}
.rich-text-content {
font-size: 1.05rem;
line-height: 1.85;
color: #334155;
}
.rich-text-content p {
margin-bottom: 1.5rem;
}
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4 {
color: var(--brand-navy);
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 700;
}
.rich-text-content strong {
color: var(--brand-navy);
}
.rich-text-content ul,
.rich-text-content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.rich-text-content li {
margin-bottom: 0.5rem;
}
/* =============================================
Responsive adjustments for Campus Life Section
============================================= */
@media (max-width: 991.98px) {
.campus-life-section {
padding: 3.75rem 0 3.25rem;
}
.campus-life-card {
padding: 1.75rem 1.5rem 1.5rem;
}
}
@media (max-width: 767.98px) {
.campus-life-section {
padding: 3.25rem 0 2.75rem;
}
.campus-life-card {
padding: 1.5rem 1.25rem 1.35rem;
}
.campus-life-card-title {
font-size: 1.15rem;
}
.campus-life-card-desc {
font-size: 0.84rem;
margin-bottom: 1.15rem;
}
}
/* =============================================
HISTORY PAGE STYLES
============================================= */
/* --- Shared Eyebrow & Heading --- */
.hist-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.55rem;
}
.hist-eyebrow__line {
width: 28px;
height: 2px;
background: var(--brand-gold);
display: inline-block;
}
.hist-eyebrow__text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-gold);
}
.hist-heading {
font-size: 1.85rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.25;
margin-bottom: 0.5rem;
}
/* =============================================
1. EMBLEM SECTION
============================================= */
.hist-emblem {
background: #ffffff;
padding: 4rem 0 3.5rem;
border-bottom: 1px solid #edf0f5;
}
.hist-emblem__visual {
display: flex;
justify-content: center;
padding: 0.5rem;
}
.hist-emblem__frame {
position: relative;
background: #faf9f6;
border: 1px solid rgba(212, 169, 74, 0.3);
border-radius: 12px;
padding: 2rem 1.75rem;
max-width: 320px;
width: 100%;
text-align: center;
box-shadow: 0 6px 24px rgba(10, 16, 68, 0.05);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.hist-emblem__frame:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(10, 16, 68, 0.09);
}
.hist-emblem__corner {
position: absolute;
width: 16px;
height: 16px;
border-color: var(--brand-gold);
border-style: solid;
pointer-events: none;
}
.hist-emblem__corner--tl {
top: 8px;
left: 8px;
border-width: 2px 0 0 2px;
}
.hist-emblem__corner--tr {
top: 8px;
right: 8px;
border-width: 2px 2px 0 0;
}
.hist-emblem__corner--bl {
bottom: 8px;
left: 8px;
border-width: 0 0 2px 2px;
}
.hist-emblem__corner--br {
bottom: 8px;
right: 8px;
border-width: 0 2px 2px 0;
}
.hist-emblem__img {
max-width: 100%;
max-height: 220px;
object-fit: contain;
display: inline-block;
transition: transform 0.35s ease;
}
.hist-emblem__frame:hover .hist-emblem__img {
transform: scale(1.03);
}
.hist-emblem__content {
padding-left: 0.25rem;
}
.hist-emblem__desc {
font-size: 0.93rem;
color: #475569;
line-height: 1.75;
}
.hist-emblem__desc p {
margin-bottom: 1rem;
}
.hist-emblem__desc strong {
color: var(--brand-navy);
font-weight: 700;
}
/* =============================================
2. PILLARS SECTION — Alternating Rows
============================================= */
.hist-pillars {
background: #faf9f6;
padding: 4rem 0 3.5rem;
border-bottom: 1px solid #edf0f5;
}
.hist-pillars__list {
max-width: 960px;
margin: 0 auto;
}
.hist-pillar-row {
padding: 0.5rem 0;
}
.hist-pillar-row__photo {
position: relative;
width: 140px;
max-width: 100%;
margin: 0 auto;
}
.hist-pillar-row__img {
width: 140px;
height: 170px;
object-fit: cover;
display: block;
border-radius: 10px;
border: 2px solid rgba(212, 169, 74, 0.35);
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.08);
background: #eef2f6;
}
.hist-pillar-row__placeholder {
width: 140px;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, #e8ecf4, #f1f3f8);
border: 2px solid #e0e4eb;
color: #94a3b8;
font-size: 2.5rem;
}
.hist-pillar-row__name-mobile {
display: none;
}
.hist-pillar-row__body h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.15rem;
line-height: 1.3;
}
.hist-pillar-row__role {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
color: var(--brand-gold);
margin-bottom: 0.65rem;
letter-spacing: 0.02em;
}
.hist-pillar-row__desc {
font-size: 0.9rem;
color: #475569;
line-height: 1.72;
}
.hist-pillar-row__desc p {
margin-bottom: 0.75rem;
}
.hist-pillar-row__desc p:last-child {
margin-bottom: 0;
}
.hist-pillar-row__divider {
border: none;
border-top: 1px solid #e2e6ed;
margin: 1.25rem 0;
opacity: 0.7;
}
/* =============================================
3 & 4. PERSON CARDS (Principals & Headmasters)
============================================= */
.hist-principals {
background: #ffffff;
padding: 4rem 0 3.5rem;
border-bottom: 1px solid #edf0f5;
}
.hist-headmasters {
background: #faf9f6;
padding: 4rem 0 3.5rem;
border-bottom: 1px solid #edf0f5;
}
.hist-person-card {
text-align: center;
padding: 1.35rem 0.75rem 1.25rem;
border-radius: 12px;
border: 1px solid #edf0f5;
background: #ffffff;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hist-person-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.07);
border-color: rgba(212, 169, 74, 0.4);
}
.hist-person-card--alt {
background: #ffffff;
border-color: #e8ecf2;
}
.hist-person-card__photo {
width: 100px;
height: 120px;
margin: 0 auto 0.85rem;
border-radius: 8px;
overflow: hidden;
border: 2px solid rgba(212, 169, 74, 0.3);
background: #eef2f6;
box-shadow: 0 3px 12px rgba(10, 16, 68, 0.06);
}
.hist-person-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hist-person-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e8ecf4, #f1f3f8);
color: #b0bcc7;
font-size: 2rem;
}
.hist-person-card__name {
font-size: 0.88rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 0.2rem;
line-height: 1.3;
}
.hist-person-card__tenure {
font-size: 0.75rem;
font-weight: 600;
color: var(--brand-gold);
}
/* =============================================
5. UNSUNG HEROES
============================================= */
.hist-heroes {
background: #ffffff;
padding: 4rem 0 3.5rem;
border-bottom: 1px solid #edf0f5;
}
.hist-hero-card {
display: flex;
gap: 1.25rem;
background: #faf9f6;
border: 1px solid #e8ecf2;
border-radius: 14px;
padding: 1.5rem;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hist-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(10, 16, 68, 0.06);
}
.hist-hero-card__photo-wrap {
flex-shrink: 0;
width: 90px;
height: 100px;
border-radius: 10px;
overflow: hidden;
border: 2px solid rgba(212, 169, 74, 0.35);
background: #eef2f6;
box-shadow: 0 3px 12px rgba(10, 16, 68, 0.06);
}
.hist-hero-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hist-hero-card__body {
flex: 1;
min-width: 0;
}
.hist-hero-card__name {
font-size: 1.1rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.4rem;
line-height: 1.3;
}
.hist-hero-card__desc {
font-size: 0.88rem;
color: #475569;
line-height: 1.7;
}
.hist-hero-card__desc p {
margin-bottom: 0.6rem;
}
.hist-hero-card__desc p:last-child {
margin-bottom: 0;
}
/* =============================================
HISTORY RESPONSIVE
============================================= */
@media (max-width: 991.98px) {
.hist-emblem,
.hist-pillars,
.hist-principals,
.hist-headmasters,
.hist-heroes {
padding: 3.25rem 0 2.75rem;
}
.hist-heading {
font-size: 1.55rem;
}
.hist-pillar-row__img,
.hist-pillar-row__placeholder {
width: 120px;
height: 150px;
}
}
@media (max-width: 767.98px) {
.hist-emblem,
.hist-pillars,
.hist-principals,
.hist-headmasters,
.hist-heroes {
padding: 2.5rem 0 2rem;
}
.hist-heading {
font-size: 1.35rem;
}
/* Pillars: stack photo above text on mobile */
.hist-pillar-row .col-md-3 {
text-align: center;
}
.hist-pillar-row__name-desktop {
display: none;
}
.hist-pillar-row__name-mobile {
display: block;
text-align: center;
margin-top: 0.5rem;
}
.hist-pillar-row__name-mobile h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.1rem;
}
.hist-pillar-row__img,
.hist-pillar-row__placeholder {
width: 110px;
height: 135px;
margin: 0 auto;
}
/* Person cards smaller on mobile */
.hist-person-card {
padding: 1rem 0.5rem;
}
.hist-person-card__photo {
width: 80px;
height: 96px;
}
.hist-person-card__name {
font-size: 0.8rem;
}
/* Hero cards stack on mobile */
.hist-hero-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.25rem 1rem;
}
.hist-hero-card__photo-wrap {
width: 80px;
height: 90px;
}
.hist-emblem__frame {
max-width: 260px;
padding: 1.5rem 1.25rem;
}
.hist-emblem__content {
padding-left: 0;
text-align: center;
margin-top: 0.5rem;
}
}
/* =============================================
CONTACT US PAGE STYLES
============================================= */
/* 1. Top 3 Quick Info Cards (Glance Animation Style) */
.contact-cards-section {
background: #ffffff;
padding: 3.75rem 0 2rem;
}
.contact-stat-card {
background: #ffffff;
border: 1px solid rgba(212, 169, 74, 0.28);
border-radius: 14px;
padding: 2.25rem 1.6rem 1.85rem;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.04);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.contact-stat-card:hover {
background-color: #ffffff;
border-color: var(--brand-gold);
box-shadow: 0 14px 32px rgba(10, 16, 68, 0.1);
transform: translateY(-5px);
}
.contact-stat-icon-wrap {
width: 50px;
height: 50px;
border-radius: 12px;
background: rgba(10, 16, 68, 0.05);
color: var(--brand-navy);
font-size: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.contact-stat-card:hover .contact-stat-icon-wrap {
background-color: var(--brand-navy);
color: var(--brand-gold);
transform: scale(1.08);
}
.contact-stat-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.5rem;
}
.contact-stat-accent-line {
width: 28px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 2px;
margin: 0 auto 0.85rem;
transition: width 0.3s ease;
}
.contact-stat-card:hover .contact-stat-accent-line {
width: 42px;
}
.contact-stat-text {
font-size: 0.88rem;
color: #475569;
line-height: 1.6;
margin-bottom: 0;
}
.contact-stat-link {
color: var(--brand-navy);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.contact-stat-link:hover {
color: var(--brand-gold);
}
.contact-stat-subtext {
display: block;
font-size: 0.78rem;
color: #64748b;
margin-top: 0.35rem;
}
/* 2. Main Section: Admissions Enquiry + Map & Office Hours */
.contact-main-section {
background: #faf9f6;
padding: 2.5rem 0 4.5rem;
border-top: 1px solid #edf0f5;
}
/* Admissions Enquiry Form Card */
.contact-form-card {
background: #ffffff;
border: 1px solid rgba(212, 169, 74, 0.25);
border-radius: 16px;
padding: 2.5rem 2.25rem;
box-shadow: 0 8px 30px rgba(10, 16, 68, 0.05);
height: 100%;
}
.contact-form-header {
margin-bottom: 1.75rem;
}
.contact-form-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.5rem;
}
.contact-form-eyebrow-line {
width: 24px;
height: 2px;
background-color: var(--brand-gold);
display: inline-block;
}
.contact-form-eyebrow-text {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-gold);
}
.contact-form-heading {
font-size: 1.75rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.25;
margin-bottom: 0.35rem;
}
.contact-form-subheading {
font-size: 0.9rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 0;
}
.custom-form-label {
font-size: 0.84rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 0.35rem;
}
.custom-form-control,
.custom-form-select {
background-color: #faf9f6;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.65rem 0.95rem;
font-size: 0.9rem;
color: #334155;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.custom-form-control:focus,
.custom-form-select:focus {
background-color: #ffffff;
border-color: var(--brand-gold);
box-shadow: 0 0 0 3.5px rgba(212, 169, 74, 0.2);
outline: none;
}
.custom-form-control::placeholder {
color: #94a3b8;
font-size: 0.85rem;
}
.btn-enquiry-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 0.75rem 1.85rem;
background-color: var(--brand-navy, #0a1044);
color: #ffffff;
border: 1.5px solid var(--brand-navy, #0a1044);
border-radius: 6px;
font-size: 0.88rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.2);
transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
.btn-enquiry-submit:hover {
background-color: var(--brand-gold, #d4a94a);
color: #0a1044;
border-color: var(--brand-gold, #d4a94a);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 169, 74, 0.4);
}
.btn-enquiry-submit i {
font-size: 0.92rem;
transition: transform 0.25s ease;
}
.btn-enquiry-submit:hover i {
transform: translateX(4px);
}
/* Right Column Stack */
.contact-side-stack {
display: flex;
flex-direction: column;
gap: 1.5rem;
height: 100%;
}
/* 1. Map Card */
.contact-map-card {
background: #ffffff;
border: 1px solid rgba(212, 169, 74, 0.28);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.05);
display: flex;
flex-direction: column;
}
.contact-map-embed {
width: 100%;
height: 220px;
background: #e2e8f0;
position: relative;
}
.map-floating-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
background: #ffffff;
color: var(--brand-navy);
font-size: 0.76rem;
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 6px;
border: 1px solid rgba(212, 169, 74, 0.35);
box-shadow: 0 4px 12px rgba(10, 16, 68, 0.12);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.map-floating-badge:hover {
background-color: var(--brand-navy);
color: var(--brand-gold);
transform: translateY(-2px);
}
.contact-map-embed iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.contact-map-footer {
padding: 1.15rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #ffffff;
border-top: 1px solid #edf0f5;
}
.contact-map-address {
font-size: 0.8rem;
color: #475569;
line-height: 1.45;
flex: 1;
}
.btn-open-maps {
background: var(--brand-navy);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.45rem 0.95rem;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(10, 16, 68, 0.15);
transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.btn-open-maps:hover {
background-color: var(--brand-gold);
color: var(--brand-navy);
transform: translateY(-2px);
}
/* 2. Office Hours Card */
.contact-office-card {
background: linear-gradient(145deg, #0a1044 0%, #151d5c 100%);
border: 1px solid rgba(212, 169, 74, 0.35);
border-radius: 16px;
padding: 1.85rem 1.75rem;
color: #ffffff;
box-shadow: 0 10px 30px rgba(10, 16, 68, 0.18);
}
.office-hours-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.office-hours-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--brand-gold);
color: var(--brand-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(212, 169, 74, 0.3);
}
.office-hours-title {
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0;
}
.office-hours-schedule {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.office-hours-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.86rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.office-hours-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.office-hours-row .day-label {
color: rgba(255, 255, 255, 0.85);
}
.office-hours-row .time-label {
font-weight: 600;
color: #ffffff;
}
.office-hours-row .time-label.closed {
color: var(--brand-gold);
font-weight: 700;
}
.office-hours-note {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(212, 169, 74, 0.25);
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
display: flex;
align-items: flex-start;
}
/* Responsive Adjustments for Contact Page */
@media (max-width: 991.98px) {
.contact-cards-section {
padding: 3rem 0 1.5rem;
}
.contact-main-section {
padding: 2rem 0 3.5rem;
}
.contact-form-card {
padding: 2rem 1.5rem;
}
}
@media (max-width: 767.98px) {
.contact-cards-section {
padding: 2.25rem 0 1.25rem;
}
.contact-main-section {
padding: 1.5rem 0 2.75rem;
}
.contact-stat-card {
padding: 1.75rem 1.25rem;
}
.contact-form-heading {
font-size: 1.45rem;
}
.contact-map-footer {
flex-direction: column;
align-items: flex-start;
}
.btn-open-maps {
width: 100%;
justify-content: center;
}
}
/* =============================================
HISTORY PAGE — OUR SCHOOL EMBLEM SECTION (Alternating Cream)
============================================= */
.emblem-section {
padding: 3.5rem 0 4.5rem;
background-color: #faf7f0;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ede8dc;
}
/* Left Column: Concentric Medallion Seal Showcase */
.emblem-visual-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 280px;
margin: 0 auto;
}
/* Heritage Medallion Seal (Concentric Gold Rings & Soft Ivory Radial Core) */
.emblem-seal-frame {
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, #ffffff 52%, #f7f2e6 100%);
border: 2px solid var(--brand-gold);
box-shadow: 0 0 0 6px #ffffff, 0 0 0 7.5px rgba(212, 169, 74, 0.45), 0 10px 28px rgba(10, 16, 68, 0.08);
display: flex;
align-items: center;
justify-content: center;
padding: 1.15rem;
position: relative;
flex-shrink: 0;
}
.emblem-image {
width: 140px;
height: auto;
max-height: 160px;
object-fit: contain;
display: block;
margin: 0 auto;
mix-blend-mode: multiply;
}
/* Right Column: Content Wrapper */
.emblem-content-wrapper {
position: relative;
padding: 0.5rem 0;
min-height: 280px;
}
/* Ghost / Watermark "IHS" */
.emblem-watermark {
position: absolute;
top: -1.5rem;
right: 1.5rem;
font-style: italic;
font-size: clamp(5.5rem, 12vw, 9.5rem);
font-weight: 700;
color: rgba(212, 169, 74, 0.12);
line-height: 0.85;
user-select: none;
pointer-events: none;
z-index: 0;
}
/* Dynamic Description Text Styling & Diamond Bullets */
.emblem-description {
position: relative;
z-index: 1;
margin-top: 1.5rem;
}
.emblem-description>p {
position: relative;
padding-left: 2rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid #eef1f6;
font-size: 0.88rem;
color: #475569;
line-height: 1.65;
}
.emblem-description>p:last-child,
.emblem-description>p:last-of-type {
border-bottom: none;
margin-bottom: 0.5rem;
padding-bottom: 0;
}
/* Gold Diamond Bullet on every top-level in dynamic description */
.emblem-description>p::before {
content: '';
position: absolute;
left: 0.25rem;
top: 0.35em;
width: 8px;
height: 8px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
}
/* Headings or Strong text inside dynamic description paragraphs */
.emblem-description strong,
.emblem-description b {
color: var(--brand-navy);
font-weight: 700;
font-size: 0.96rem;
display: block;
margin-bottom: 0.25rem;
line-height: 1.35;
}
/* Fallback for lists if any exist in Quill description */
.emblem-description ul,
.emblem-description ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.emblem-description li {
font-size: 0.88rem;
color: #475569;
line-height: 1.7;
margin-bottom: 0.4rem;
}
/* Points List & Diamond Bullet Items */
.emblem-points-list {
margin-top: 1.5rem;
position: relative;
z-index: 1;
}
.emblem-point-item {
display: flex;
align-items: flex-start;
gap: 1.15rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid #eef1f6;
}
.emblem-point-item--last {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.emblem-point-bullet {
width: 8px;
height: 8px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
margin-top: 0.35rem;
flex-shrink: 0;
}
.emblem-point-body {
flex: 1;
}
.emblem-point-title {
font-size: 0.96rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.25rem;
line-height: 1.35;
}
.emblem-point-desc {
font-size: 0.88rem;
color: #475569;
line-height: 1.65;
margin-bottom: 0;
}
/* IHS Acronym 3-Column Breakdown */
.emblem-ihs-breakdown {
display: flex;
align-items: flex-start;
gap: 2.25rem;
margin-top: 1.5rem;
padding-top: 0.25rem;
position: relative;
z-index: 1;
}
.ihs-col,
.ihs-breakdown-col {
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
.ihs-letter {
font-size: 2.1rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 0.95;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.ihs-letter::after,
.ihs-letter-line {
content: '';
display: block;
width: 100%;
height: 2.5px;
background-color: var(--brand-gold);
border-radius: 1px;
margin-top: 3px;
}
.ihs-labels,
.ihs-label-wrap {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.2;
}
.ihs-latin {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--brand-navy);
text-transform: uppercase;
}
.ihs-meaning {
font-size: 0.74rem;
color: #64748b;
font-weight: 500;
margin-top: 2px;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.emblem-section {
padding: 2.5rem 0 3.5rem;
}
.emblem-visual-wrapper {
margin: 0 auto 2rem;
}
.emblem-watermark {
font-size: 6rem;
top: -1rem;
opacity: 0.65;
}
.emblem-ihs-breakdown {
gap: 1.5rem;
flex-wrap: wrap;
}
}
@media (max-width: 575.98px) {
.emblem-visual-wrapper {
padding-left: 1.25rem;
}
.emblem-ihs-badge {
width: 44px;
height: 44px;
top: -14px;
right: -14px;
}
.emblem-ihs-badge span {
font-size: 0.82rem;
}
.emblem-ihs-breakdown {
gap: 1.25rem;
}
}
/* =============================================
HISTORY PAGE — THE FOUNDER SECTION
============================================= */
.founder-section {
padding: 4.5rem 0 5rem;
background-color: #ffffff;
position: relative;
border-bottom: 1px solid #f0f2f6;
}
/* Left Column: Visual Wrapper (Decreased Size) */
.founder-visual-wrapper {
position: relative;
max-width: 265px;
margin: 0 auto;
}
/* Container for Photo & its Offset Gold Outline Box */
.founder-photo-wrap {
position: relative;
display: block;
width: 100%;
margin-bottom: 1.25rem;
}
/* Layered Offset Gold Outline Box (Backdrop behind ONLY the Navy Photo Frame) */
.founder-gold-backdrop {
position: absolute;
top: 14px;
left: 14px;
right: -12px;
bottom: -12px;
border: 1.5px solid var(--brand-gold);
border-radius: 2px;
z-index: 1;
pointer-events: none;
}
/* Navy-Bordered Main Photo Card */
.founder-photo-frame {
position: relative;
z-index: 2;
background-color: #ffffff;
border: 6px solid var(--brand-navy);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.12);
}
.founder-image {
width: 100%;
height: auto;
max-height: 285px;
aspect-ratio: 4 / 4.7;
object-fit: cover;
object-position: top center;
display: block;
filter: grayscale(15%) contrast(105%);
}
/* 2-Line Caption Below Photo (Completely below photo & outside gold border) */
.founder-caption {
position: relative;
z-index: 2;
text-align: left;
margin-top: 0;
padding-left: 2px;
}
.founder-caption-name {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #475569;
line-height: 1.35;
}
.founder-caption-role {
display: block;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #94a3b8;
margin-top: 1px;
}
/* Right Column: Content Wrapper */
.founder-content-wrapper {
position: relative;
padding: 0.25rem 0;
}
.founder-heading {
font-size: clamp(1.75rem, 2.3vw, 1.15rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-top: 0.35rem;
margin-bottom: 0.45rem;
letter-spacing: -0.01em;
}
.founder-heading-line {
width: 50px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 2px;
margin-top: 0.35rem;
margin-bottom: 1.5rem;
display: block;
}
/* Drop-cap on first letter of first paragraph */
.founder-description {
font-size: 0.9rem;
color: #475569;
line-height: 1.75;
}
.founder-description>p {
margin-bottom: 1rem;
line-height: 1.75;
}
.founder-description>p:first-of-type::first-letter {
font-size: 3.25rem;
float: left;
line-height: 0.75;
margin-right: 0.65rem;
margin-top: 0.15rem;
font-weight: 600;
color: var(--brand-navy);
}
/* Stats Divider & Row */
.founder-stats-divider {
width: 100%;
height: 1px;
background-color: #edf0f5;
margin: 1.75rem 0 1.5rem;
}
.founder-stats-row {
display: flex;
align-items: flex-start;
gap: 3rem;
flex-wrap: wrap;
}
.founder-stat-block {
display: flex;
flex-direction: column;
}
.founder-stat-number {
font-size: 1.95rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1;
}
.founder-stat-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
margin-top: 0.45rem;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.founder-section {
padding: 3rem 0 3.5rem;
}
.founder-visual-wrapper {
margin: 0 auto 2rem;
}
.founder-stats-row {
gap: 2rem;
}
}
@media (max-width: 575.98px) {
.founder-visual-wrapper {
max-width: 270px;
}
.founder-gold-backdrop {
right: -10px;
bottom: -10px;
}
.founder-stats-row {
flex-direction: column;
gap: 1.25rem;
}
}
/* =============================================
HISTORY PAGE — THE PILLARS OF LOYOLA (Alternating Section)
============================================= */
.pillars-section {
padding: 5rem 0 5.5rem;
background-color: #faf7f0;
/* Warm heritage cream background */
position: relative;
border-bottom: 1px solid #ede8dc;
}
/* Header */
.pillars-header {
border-bottom: 1px solid rgba(212, 169, 74, 0.3);
padding-bottom: 1.5rem;
margin-bottom: 3.5rem;
}
.pillars-main-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-top: 0.35rem;
margin-bottom: 0;
letter-spacing: -0.01em;
}
.pillars-counter {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--brand-gold);
text-transform: uppercase;
padding-bottom: 0.25rem;
}
/* Pillar Row */
.pillar-row {
position: relative;
}
.pillar-row-divider {
width: 100%;
height: 1px;
background-color: #e8e2d4;
margin: 3.5rem 0;
}
/* Photo Wrapper & Overlapping Badge (Matching IHS Badge Design) */
.pillar-photo-wrapper {
position: relative;
max-width: 320px;
margin: 0 auto;
}
.pillar-badge {
position: absolute;
top: -16px;
right: -16px;
width: 48px;
height: 48px;
background-color: var(--brand-navy);
color: var(--brand-gold);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: 0 6px 16px rgba(10, 16, 68, 0.35);
border: 2px solid var(--brand-gold);
}
/* Photo Card Frame */
.pillar-photo-card {
position: relative;
z-index: 2;
/* background-color: #ffffff; */
padding: 12px;
border: 1px solid #e5dfd2;
border-radius: 2px;
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.06);
transition: transform 0.35s ease, box-shadow 0.35s ease;
text-align: center;
}
.pillar-photo-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(10, 16, 68, 0.1);
}
.pillar-img {
width: 100%;
height: auto;
max-height: 290px;
object-fit: contain;
object-position: center;
display: block;
margin: 0 auto;
filter: grayscale(10%) contrast(105%);
}
.pillar-placeholder {
aspect-ratio: 4 / 3.4;
min-height: 220px;
}
/* Content Area */
.pillar-content-wrapper {
position: relative;
padding: 0.5rem 0;
}
.pillar-role-eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-gold);
margin-bottom: 0.45rem;
}
.pillar-name {
font-size: clamp(1.35rem, 1.8vw, 1.65rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.85rem;
letter-spacing: -0.01em;
}
.pillar-description {
font-size: 0.88rem;
color: #475569;
line-height: 1.8;
}
.pillar-description>p {
margin-bottom: 0.85rem;
line-height: 1.8;
}
.pillar-description>p:last-child {
margin-bottom: 0;
}
/* =============================================
HISTORY PAGE — PRINCIPALS SECTION (Dynamic 5-Column Grid)
============================================= */
.principals-section {
padding: 3.5rem 0 4rem;
/* Compact, reduced whitespace */
background-color: #ffffff;
position: relative;
border-bottom: 1px solid #f0f2f6;
}
/* Header */
.principals-header {
border-bottom: 1px solid rgba(212, 169, 74, 0.25);
padding-bottom: 1.25rem;
margin-bottom: 2.5rem;
/* Reduced margin */
}
.principals-main-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-top: 0.35rem;
margin-bottom: 0;
letter-spacing: -0.01em;
}
/* 5-Column Centered Flexible Grid Container on Desktop */
.principals-grid-wrap,
.admin-staff-grid-wrap,
.headmasters-grid-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.75rem 1.25rem;
margin: 0 auto;
width: 100%;
}
/* Principals Card: Flexible & Auto-Centering */
.principal-matrix-card {
flex: 0 0 calc((100% - (4 * 1.25rem)) / 5);
max-width: calc((100% - (4 * 1.25rem)) / 5);
min-width: 155px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Compact Photo Frame (Principals, Teachers & Admin Staff) */
.principal-matrix-photo-frame,
.admin-staff-photo-frame {
position: relative;
width: 100%;
max-width: 165px;
aspect-ratio: 1 / 1.12;
background-color: #ffffff;
border: 1.5px solid var(--brand-gold);
border-radius: 3px;
padding: 3px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.principal-matrix-card:hover .principal-matrix-photo-frame,
.admin-staff-card:hover .admin-staff-photo-frame {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(10, 16, 68, 0.1);
border-color: #b8933b;
}
.principal-matrix-img,
.admin-staff-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 0;
display: block;
filter: grayscale(12%) contrast(105%);
}
/* =============================================
CANONICAL BLANK IMAGE PLACEHOLDER DESIGN
(Standardized consistently across all modules: Pillars, Principals, Headmasters, Alumni, Toppers, etc.)
============================================= */
.principal-matrix-fallback,
.admin-staff-fallback,
.headmaster-fallback,
.pillar-placeholder,
.alumni-placeholder-box,
.topper-placeholder-box,
.founder-placeholder-fallback,
.activity-media-placeholder,
.activity-rect-ph,
.award-archive-placeholder,
.award-bento-ph,
.ref-news-placeholder,
.ref-event-placeholder,
.uniform-fallback-box,
.universal-image-fallback {
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 40%, #ffffff 0%, #faf6ec 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.uniform-fallback-box {
min-height: 180px;
}
.principal-fallback-seal,
.admin-staff-fallback-seal,
.headmaster-fallback-seal,
.pillar-fallback-seal,
.alumni-fallback-seal,
.universal-fallback-seal {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px dashed rgba(212, 169, 74, 0.45);
background: rgba(212, 169, 74, 0.07);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: var(--brand-gold);
flex-shrink: 0;
box-sizing: border-box;
}
/* Details Directly Below Photo: Simple & Clean Typography */
.principal-matrix-details {
margin-top: 0.65rem;
text-align: center;
width: 100%;
max-width: 175px;
}
.principal-matrix-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.18rem;
letter-spacing: -0.01em;
}
.principal-matrix-tenure {
font-size: 0.76rem;
font-weight: 600;
color: var(--brand-gold);
line-height: 1.25;
display: block;
margin-bottom: 0;
}
/* =============================================
HISTORY PAGE — ADMIN STAFF SECTION (Arched Heritage Grid)
============================================= */
.admin-staff-section,
.headmasters-section {
padding: 3.5rem 0 4rem;
/* Compact layout */
background-color: #faf7f0;
/* Alternating warm heritage cream */
position: relative;
border-top: none;
border-bottom: 1px solid #ede8dc;
}
/* Header */
.admin-staff-header,
.headmasters-header {
border-bottom: 1px solid rgba(212, 169, 74, 0.25);
padding-bottom: 1.25rem;
margin-bottom: 2.5rem;
}
.admin-staff-main-heading,
.headmasters-main-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-top: 0.35rem;
margin-bottom: 0;
letter-spacing: -0.01em;
}
/* Admin Staff Card: Flexible & Auto-Centering */
.admin-staff-card,
.headmaster-card {
flex: 0 0 calc((100% - (4 * 1.25rem)) / 5);
max-width: calc((100% - (4 * 1.25rem)) / 5);
min-width: 155px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Legacy Headmaster Arched Frame (Preserved for compatibility) */
.headmaster-photo-frame {
position: relative;
width: 100%;
max-width: 160px;
aspect-ratio: 1 / 1.2;
background-color: #ffffff;
border: 1.5px solid var(--brand-gold);
border-radius: 80px 80px 4px 4px;
/* Distinct Arch shape */
padding: 3px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.headmaster-card:hover .headmaster-photo-frame {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(212, 169, 74, 0.22);
border-color: #b8933b;
}
.headmaster-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 76px 76px 2px 2px;
display: block;
filter: grayscale(10%) contrast(105%);
}
/* Clean Fallback when Image is Blank */
.headmaster-fallback {
border-radius: 76px 76px 2px 2px;
}
/* Details Directly Below Photo (Clean Typography) */
.admin-staff-details,
.headmaster-details {
margin-top: 0.65rem;
text-align: center;
width: 100%;
max-width: 175px;
}
.admin-staff-name,
.headmaster-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.18rem;
letter-spacing: -0.01em;
}
.admin-staff-department {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--brand-navy);
background: rgba(10, 16, 68, 0.05);
border: 1px solid rgba(212, 169, 74, 0.35);
border-radius: 20px;
padding: 0.12rem 0.6rem;
margin-bottom: 0.22rem;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-staff-tenure,
.headmaster-tenure {
font-size: 0.76rem;
font-weight: 600;
color: var(--brand-gold);
line-height: 1.25;
display: block;
margin-bottom: 0;
}
/* Responsive Breakpoints for Both Sections */
@media (max-width: 1199.98px) {
.principals-grid-wrap,
.admin-staff-grid-wrap,
.headmasters-grid-wrap {
gap: 1.5rem 1rem;
}
.principal-matrix-card,
.admin-staff-card,
.headmaster-card {
flex: 0 0 calc((100% - (3 * 1rem)) / 4);
max-width: calc((100% - (3 * 1rem)) / 4);
}
}
@media (max-width: 991.98px) {
.principals-section,
.admin-staff-section,
.headmasters-section {
padding: 3rem 0 3.5rem;
}
.principals-header,
.admin-staff-header,
.headmasters-header {
margin-bottom: 2rem;
}
.principals-grid-wrap,
.admin-staff-grid-wrap,
.headmasters-grid-wrap {
gap: 1.5rem 1rem;
}
.principal-matrix-card,
.admin-staff-card,
.headmaster-card {
flex: 0 0 calc((100% - (2 * 1rem)) / 3);
max-width: calc((100% - (2 * 1rem)) / 3);
}
.principal-matrix-photo-frame,
.admin-staff-photo-frame {
max-width: 155px;
}
.headmaster-photo-frame {
max-width: 150px;
}
}
@media (max-width: 575.98px) {
.principals-grid-wrap,
.admin-staff-grid-wrap,
.headmasters-grid-wrap {
gap: 1.25rem 0.85rem;
}
.principal-matrix-card,
.admin-staff-card,
.headmaster-card {
flex: 0 0 calc((100% - 0.85rem) / 2);
max-width: calc((100% - 0.85rem) / 2);
min-width: 130px;
}
.principal-matrix-photo-frame,
.admin-staff-photo-frame {
max-width: 145px;
}
.headmaster-photo-frame {
max-width: 140px;
}
.principal-matrix-name,
.admin-staff-name,
.headmaster-name {
font-size: 0.82rem;
}
.principal-matrix-tenure,
.admin-staff-tenure,
.headmaster-tenure {
font-size: 0.72rem;
}
}
@media (max-width: 359.98px) {
.principal-matrix-card,
.admin-staff-card,
.headmaster-card {
flex: 0 0 100%;
max-width: 100%;
min-width: 0;
}
}
/* =============================================
HISTORY PAGE — THE UNSUNG HEROES (Text Tribute Showcase)
============================================= */
.unsung-heroes-section {
padding: 3.75rem 0 4.25rem;
background-color: #ffffff;
/* Alternating clean white */
position: relative;
border-bottom: 1px solid #f0f2f6;
}
.unsung-header {
margin-bottom: 2.25rem;
}
.unsung-main-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-top: 0.35rem;
margin-bottom: 0;
letter-spacing: -0.01em;
}
/* Responsive 2-Column Grid / Flex Wrapper for Tribute Cards */
.unsung-heroes-wrapper {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 1.75rem;
width: 100%;
}
/* Individual Elegant Tribute Card: 2-Column Row Side-by-Side */
.unsung-tribute-card {
flex: 1 1 440px;
max-width: 530px;
min-width: 300px;
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
border: 1.5px solid rgba(212, 169, 74, 0.35);
border-radius: 8px;
padding: 2.25rem 1.85rem 1.85rem;
text-align: center;
box-shadow: 0 6px 20px rgba(10, 16, 68, 0.04);
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.unsung-tribute-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(212, 169, 74, 0.14);
border-color: var(--brand-gold);
}
/* When only 1 entry exists, keep it properly centered */
.unsung-heroes-wrapper>.unsung-tribute-card:only-child {
flex: 0 1 820px;
max-width: 820px;
}
/* Top Subtle Quote Badge */
.unsung-card-badge {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--brand-navy);
color: var(--brand-gold);
border: 1.5px solid var(--brand-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(10, 16, 68, 0.2);
}
/* Card Title */
.unsung-card-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.4;
margin-top: 0.15rem;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
/* Subtle Gold Divider */
.unsung-card-divider {
width: 40px;
height: 2px;
background: var(--brand-gold);
border-radius: 2px;
margin: 0 auto 1.15rem;
}
/* Card Body / Text Paragraphs */
.unsung-card-body {
font-size: 0.9rem;
color: #475569;
line-height: 1.8;
text-align: center;
width: 100%;
}
.unsung-card-body p {
margin-bottom: 0.95rem;
line-height: 1.8;
}
.unsung-card-body p:last-child {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.unsung-heroes-section {
padding: 3rem 0 3.5rem;
}
.unsung-tribute-card {
flex: 1 1 100%;
max-width: 100%;
padding: 2rem 1.5rem 1.65rem;
}
}
@media (max-width: 767.98px) {
.unsung-tribute-card {
padding: 2rem 1.25rem 1.5rem;
}
.unsung-card-title {
font-size: 1.05rem;
}
.unsung-card-body {
font-size: 0.88rem;
line-height: 1.7;
}
}
@media (max-width: 575.98px) {
.unsung-tribute-card {
min-width: 0;
width: 100%;
}
.pillar-photo-wrapper {
max-width: 280px;
}
.pillar-badge {
width: 40px;
height: 40px;
font-size: 0.85rem;
top: -12px;
left: -12px;
}
}
/* =============================================
ABOUT US PAGE — SIMPLE CLEAN CONTENT LAYOUT (No Card, No Badges)
============================================= */
.about-page-section {
padding: 3.5rem 0 4.5rem;
background-color: #ffffff;
border-bottom: 1px solid #f0f2f6;
position: relative;
}
.about-main-header {
margin-bottom: 2.5rem;
}
.about-main-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.about-eyebrow-line {
width: 24px;
height: 2px;
background-color: var(--brand-gold);
display: inline-block;
}
.about-eyebrow-text {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-gold);
}
.about-main-heading {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-bottom: 0;
letter-spacing: -0.01em;
}
.about-page-content {
background-color: #ffffff;
}
.about-content-body {
font-size: 0.94rem;
line-height: 1.85;
color: #475569;
}
.about-content-body p {
margin-bottom: 1.15rem;
line-height: 1.85;
}
.about-content-body p:last-child {
margin-bottom: 0;
}
.about-content-body strong,
.about-content-body b {
color: var(--brand-navy);
font-weight: 600;
}
.about-content-body ul,
.about-content-body ol {
margin: 0.5rem 0 1.25rem 1.5rem;
padding-left: 0;
}
.about-content-body li {
margin-bottom: 0.4rem;
}
/* =============================================
MESSAGES FROM THE DESK — MODERN ACCORDION
============================================= */
.principal-page-section {
padding: 3.5rem 0 4.5rem;
background-color: #faf7f0;
position: relative;
border-bottom: 1px solid #ede8dc;
}
.desk-accordion-container {
max-width: 960px;
margin: 0 auto;
}
.desk-accordion {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.desk-accordion-item {
background-color: #ffffff;
border: 1px solid #e8e3d8;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px -2px rgba(10, 16, 68, 0.05);
transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
.desk-accordion-item:hover {
box-shadow: 0 8px 24px -4px rgba(10, 16, 68, 0.09);
border-color: #dfd8c7;
}
.desk-accordion-item.active {
border-color: rgba(212, 169, 74, 0.5);
box-shadow: 0 10px 28px -4px rgba(10, 16, 68, 0.1);
}
.desk-accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.35rem 1.75rem;
text-align: left;
background: #ffffff;
border: none;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
gap: 1.25rem;
}
.desk-accordion-item.active .desk-accordion-header {
background: linear-gradient(to right, #faf8f3, #ffffff);
border-bottom: 1px solid #f1ece1;
}
.desk-accordion-title {
font-size: 1.18rem;
font-weight: 700;
color: #111827; /* Clean black/dark font */
line-height: 1.4;
flex: 1;
margin: 0;
transition: color 0.2s ease;
}
.desk-accordion-header:hover .desk-accordion-title {
color: #000000;
}
.desk-accordion-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #faf6ed;
color: var(--brand-gold, #c9a15a);
font-size: 1.05rem;
font-weight: 700;
flex-shrink: 0;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.desk-accordion-item.active .desk-accordion-icon,
.desk-accordion-header:not(.collapsed) .desk-accordion-icon {
background-color: var(--brand-gold, #c9a15a);
color: #ffffff;
transform: rotate(180deg);
}
.desk-accordion-body {
padding: 2.25rem 2rem 2.25rem;
background-color: #ffffff;
}
.desk-message-content {
position: relative;
}
/* Floating Gallery Photo Frame (Clean Pure White Frame & Soft Deep Shadow) */
.desk-message-float-image {
float: left;
margin: 0.25rem 2.25rem 1.75rem 0;
}
.desk-gallery-frame,
.desk-message-image-frame {
width: 260px;
height: 380px;
background-color: #ffffff;
padding: 12px;
border-radius: 4px;
border: none;
box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.desk-gallery-frame:hover,
.desk-message-image-frame:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -4px rgba(0, 0, 0, 0.16), 0 6px 14px -2px rgba(0, 0, 0, 0.07);
}
.desk-gallery-inner {
width: 100%;
height: 100%;
border: none;
border-radius: 2px;
background-color: #ffffff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.desk-gallery-img,
.desk-message-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: center top;
display: block;
border-radius: 2px;
}
/* Content Body */
.desk-message-body {
font-size: 1rem;
line-height: 1.85;
color: #334155;
}
.desk-message-body p {
margin-bottom: 1.15rem;
line-height: 1.85;
}
.desk-message-body p:last-child {
margin-bottom: 0;
}
.desk-message-body strong,
.desk-message-body b {
color: #0f172a;
font-weight: 600;
}
.desk-message-body em,
.desk-message-body i {
color: #1e293b;
}
.desk-message-body blockquote {
border-left: 3px solid var(--brand-gold, #d4a94a);
padding-left: 1.25rem;
margin: 1.25rem 0;
color: #475569;
font-style: italic;
}
.desk-message-body ul,
.desk-message-body ol {
margin-bottom: 1.15rem;
padding-left: 1.5rem;
}
.desk-message-body li {
margin-bottom: 0.35rem;
}
/* Signature Block - Cleared Below Image and Description */
.desk-signature-block {
clear: both;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid #ede8dc;
}
.desk-sign-name {
font-size: 1.15rem;
font-weight: 700;
color: #0a1044;
margin-bottom: 0.25rem;
letter-spacing: -0.2px;
}
/* St. Xavier’s High School, Loyola Hall in Theme Gold Color */
.desk-sign-school {
font-size: 0.95rem;
font-weight: 600;
color: var(--brand-gold, #d4a94a);
margin-bottom: 0.15rem;
}
.desk-sign-location {
font-size: 0.88rem;
color: #64748b;
}
@media (max-width: 767.98px) {
.principal-page-section {
padding: 2.5rem 0 3.5rem;
}
.desk-accordion-header {
padding: 1.15rem 1.25rem;
}
.desk-accordion-title {
font-size: 1.05rem;
}
.desk-accordion-body {
padding: 1.5rem 1.25rem 1.75rem;
}
.desk-message-float-image {
float: none;
margin: 0 auto 1.5rem auto;
text-align: center;
}
.desk-gallery-frame,
.desk-message-image-frame {
max-width: 240px;
height: 340px;
padding: 10px;
margin: 0 auto;
}
}
.school-guide-section {
padding: 3.5rem 0 4.5rem;
background-color: #ffffff;
position: relative;
border-bottom: 1px solid #ede8dc;
}
.school-sidebar-col {
width: 100%;
}
.school-content-col {
width: 100%;
}
@media (min-width: 992px) {
.school-sidebar-col {
width: 330px;
flex: 0 0 330px;
max-width: 330px;
}
.school-content-col {
flex: 1 1 0%;
min-width: 0;
max-width: calc(100% - 330px);
}
}
/* Sidebar Navigation Card */
.school-sidebar-nav-card {
background-color: #ffffff;
border: 1px solid #ede8dc;
border-radius: 8px;
padding: 1.15rem 0.85rem 1rem;
box-shadow: 0 4px 20px rgba(10, 16, 68, 0.03);
position: sticky;
top: 95px;
height: auto;
height: -moz-fit-content;
height: fit-content;
align-self: flex-start;
display: flex;
flex-direction: column;
}
.school-nav-header {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}
.school-nav-eyebrow {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-gold);
display: block;
margin-bottom: 0.15rem;
}
.school-nav-title {
font-size: 1.12rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin: 0;
word-break: normal;
overflow-wrap: break-word;
letter-spacing: -0.01em;
}
/* Vertical Tab List */
.school-nav-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0;
margin: 0;
}
.school-nav-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 0.75rem;
border-radius: 6px;
border: 1px solid #f1ece1;
background: #faf7f0;
color: var(--brand-navy);
font-size: 0.84rem;
font-weight: 500;
letter-spacing: -0.012em;
text-align: left;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.school-nav-indicator {
display: none;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
background-color: var(--brand-gold);
border-radius: 0 3px 3px 0;
}
.school-nav-btn-text {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
line-height: 1.25;
}
.school-nav-arrow {
font-size: 0.75rem;
color: #94a3b8;
transition: transform 0.2s ease, color 0.2s ease;
margin-left: 0.4rem;
flex: 0 0 auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Inactive Hover State */
.school-nav-btn:hover:not(.active) {
background-color: #f5f0e6;
color: var(--brand-navy);
border-color: rgba(212, 169, 74, 0.35);
}
.school-nav-btn:hover:not(.active) .school-nav-arrow {
color: var(--brand-gold);
transform: translateX(2px);
}
/* Active State — Clear, Bold & Attractive (Arrow strictly inside button box) */
.school-nav-btn.active {
background-color: var(--brand-navy);
color: #ffffff;
font-weight: 600;
border-color: var(--brand-navy);
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.16);
padding: 0.65rem 0.75rem;
}
.school-nav-btn.active .school-nav-indicator {
display: block;
}
.school-nav-btn.active .school-nav-arrow {
color: var(--brand-gold);
transform: none;
}
/* Right Column: Tab Panes Wrapper */
.school-panes-wrapper {
position: relative;
}
.school-tab-pane {
display: none;
animation: fadeInSchoolPane 0.3s ease forwards;
background-color: #ffffff;
}
.school-tab-pane.active {
display: block;
}
@keyframes fadeInSchoolPane {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============================================
THE SCHOOL — UNIFORM SECTION (CLEAN EDITORIAL LAYOUT)
============================================= */
.uniform-page-header {
margin-bottom: 2.25rem;
padding-bottom: 0;
border-bottom: none;
}
.uniform-page-title {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin: 0;
letter-spacing: -0.01em;
}
.uniform-title-accent-line {
width: 48px;
height: 3px;
background: linear-gradient(90deg, #d4a94a 0%, #e8c676 100%);
border-radius: 2px;
margin-top: 0.65rem;
}
.uniform-page-lead {
font-size: 0.92rem;
line-height: 1.7;
color: #64748b;
margin: 0.35rem 0 0;
}
.uniform-page-content {
background-color: #ffffff;
}
/* Main Divisions: Boys and Girls */
.uniform-gender-section {
margin-bottom: 0;
}
.uniform-gender-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.uniform-gender-title {
font-size: 1.45rem;
font-weight: 600;
color: var(--brand-navy);
margin: 0;
white-space: nowrap;
}
.uniform-title-line {
display: none;
}
/* Standard Item */
.uniform-std-block {
margin-bottom: 1rem;
}
.uniform-std-title {
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-gold);
margin-bottom: 0.85rem;
padding-bottom: 0.35rem;
border-bottom: 1px dashed #ede8dc;
}
/* Image Display without Cropping */
.uniform-image-wrap {
margin-bottom: 1.15rem;
background-color: #ffffff;
border: 1px solid #ede8dc;
border-radius: 6px;
padding: 0.65rem;
text-align: center;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.uniform-image-wrap:hover {
border-color: rgba(212, 169, 74, 0.45);
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.04);
}
.uniform-image-preview {
max-height: 240px;
width: auto;
max-width: 100%;
object-fit: contain;
display: inline-block;
border-radius: 3px;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.uniform-image-wrap:hover .uniform-image-preview {
transform: scale(1.02);
}
/* Season Rows */
.uniform-season-rows {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.uniform-season-row {
position: relative;
}
.season-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-navy);
display: block;
margin-bottom: 0.25rem;
}
.season-desc {
font-size: 0.91rem;
line-height: 1.8;
color: #334155;
}
.season-desc p {
margin-bottom: 0;
line-height: 1.8;
}
/* Section Separator */
.uniform-section-divider {
width: 100%;
height: 1px;
background-color: #ede8dc;
margin: 2.75rem 0;
display: block;
}
/* General Guidelines (Editorial Single Description, School Emblem Diamond Bullets) */
.uniform-general-policies {
margin-top: 0;
padding-top: 0;
}
.uniform-policies-editorial-body {
color: #475569;
}
.uniform-policies-editorial-body ul {
list-style: none;
padding-left: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.35rem 2.5rem;
}
.uniform-policies-editorial-body ul li {
position: relative;
padding-left: 1.45rem;
font-size: 0.9rem;
line-height: 1.75;
color: #475569;
}
/* Exact same gold diamond bullet icon as School Emblem section */
.uniform-policies-editorial-body ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
flex-shrink: 0;
}
.uniform-policies-editorial-body ul li strong,
.uniform-policies-editorial-body ul li b {
color: var(--brand-navy);
font-weight: 600;
display: inline-block;
margin-right: 0.25rem;
}
.uniform-policies-editorial-body p {
font-size: 0.91rem;
line-height: 1.8;
color: #475569;
margin-bottom: 0.85rem;
}
.uniform-policies-editorial-body>p {
position: relative;
padding-left: 1.45rem;
}
.uniform-policies-editorial-body>p::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.6rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
}
.uniform-policies-editorial-body p:last-child {
margin-bottom: 0;
}
.uniform-policies-editorial-body p strong,
.uniform-policies-editorial-body p b {
color: var(--brand-navy);
font-weight: 600;
}
/* =============================================
THE SCHOOL — RULES OF DISCIPLINE / ATTENDANCE / HOME STUDY / EXAMINATION / TRADITION
(REUSABLE EDITORIAL HYPHEN & BULLET FLOW)
============================================= */
.discipline-page-header {
margin-bottom: 2.25rem;
padding-bottom: 0;
}
.discipline-page-title {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin: 0;
letter-spacing: -0.01em;
}
.discipline-page-content {
background-color: #ffffff;
}
.discipline-editorial-body {
color: #334155;
border-top: 1px solid #ede8dc;
}
/* 1. Paragraphs (
) & Numbered lists (
- ) → Dash + Divider Design */
.discipline-editorial-body ol {
list-style: none;
padding-left: 0;
margin: 0;
}
.discipline-editorial-body ol li,
.discipline-editorial-body > p {
position: relative;
padding: 1.25rem 1.5rem 1.25rem 3.5rem;
margin: 0;
border-bottom: 1px solid #ede8dc;
font-size: 0.925rem;
line-height: 1.8;
color: #334155;
background-color: transparent;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Small Gold Hyphen on
and
- */
.discipline-editorial-body ol li::before,
.discipline-editorial-body > p::before {
content: '';
position: absolute;
left: 1.15rem;
top: 1.85rem;
width: 18px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 1px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
/* Interactive Hover Effects on
and
- */
.discipline-editorial-body ol li:hover,
.discipline-editorial-body > p:hover {
background-color: #faf8f5;
padding-left: 3.85rem;
}
.discipline-editorial-body ol li:hover::before,
.discipline-editorial-body > p:hover::before {
width: 25px;
background-color: var(--brand-gold-alt, #c9a15a);
}
/* 2. Bulleted Lists (
- ) → Small Gold Diamond Bullet, NO Divider, Compact Spacing */
.discipline-editorial-body ul {
list-style: none;
padding: 0.85rem 0 0.5rem 0;
margin: 0;
border: none;
}
.discipline-editorial-body ul li {
position: relative;
padding: 0.35rem 0.5rem 0.35rem 1.65rem;
margin: 0 0 0.45rem 0;
border: none;
font-size: 0.915rem;
line-height: 1.75;
color: #334155;
background-color: transparent;
transition: color 0.2s ease;
}
.discipline-editorial-body ul li::before {
content: '';
position: absolute;
left: 0.2rem;
top: 0.82rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold, #d4a94a);
transform: rotate(45deg);
border-radius: 1px;
}
.discipline-editorial-body ul li:hover {
background-color: transparent;
color: var(--brand-navy);
}
.discipline-editorial-body ol li strong,
.discipline-editorial-body ol li b,
.discipline-editorial-body ul li strong,
.discipline-editorial-body ul li b,
.discipline-editorial-body p strong,
.discipline-editorial-body p b {
color: var(--brand-navy);
font-weight: 600;
display: inline-block;
margin-right: 0.25rem;
}
/* =============================================
THE SCHOOL — TRADITION SECTION (EXACT GENERAL GUIDELINES LIST ICONS & ALIGNMENT)
============================================= */
.tradition-page-content {
background-color: #ffffff;
}
.tradition-editorial-body {
color: #475569;
}
/* Intro paragraph in Tradition */
.tradition-editorial-body > p {
font-size: 0.91rem;
line-height: 1.8;
color: #475569;
margin: 0 0 1.25rem 0;
padding: 0 0 0.85rem 0;
border-bottom: 1px solid #ede8dc;
background: transparent;
font-weight: 400;
}
.tradition-editorial-body > p strong,
.tradition-editorial-body > p b {
color: var(--brand-navy);
font-weight: 600;
}
/* Bullet Points with Gold Diamond Icons matching General Guidelines exactly */
.tradition-editorial-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.tradition-editorial-body ul li {
position: relative;
padding-left: 1.45rem;
margin-bottom: 0.85rem;
font-size: 0.9rem;
line-height: 1.75;
color: #475569;
border: none;
background-color: transparent;
}
.tradition-editorial-body ul li:last-child {
margin-bottom: 0;
}
.tradition-editorial-body ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
flex-shrink: 0;
}
.tradition-editorial-body ul li strong,
.tradition-editorial-body ul li b {
color: var(--brand-navy);
font-weight: 600;
display: inline-block;
margin-right: 0.25rem;
}
/* =============================================
THE SCHOOL — FAQ MODULE (MODERN ACCORDION)
============================================= */
.school-faq-accordion {
border-top: 1px solid #ede8dc;
margin-top: 0.5rem;
}
.school-faq-item {
border-bottom: 1px solid #ede8dc;
background-color: #ffffff;
transition: background-color 0.25s ease;
}
.school-faq-item.active {
background-color: #fdfcfa;
}
.school-faq-question {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.25rem 0.5rem;
text-align: left;
background: transparent;
border: none;
font-size: 0.965rem;
font-weight: 600;
color: var(--brand-navy);
cursor: pointer;
transition: color 0.2s ease;
gap: 1.25rem;
}
.school-faq-question:hover,
.school-faq-question:not(.collapsed) {
color: var(--brand-gold-alt, #c9a15a);
}
.school-faq-q-text {
flex: 1;
line-height: 1.5;
}
.school-faq-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #faf6ed;
color: var(--brand-gold);
font-size: 0.9rem;
font-weight: 700;
flex-shrink: 0;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.school-faq-question:not(.collapsed) .school-faq-icon,
.school-faq-item.active .school-faq-icon {
background-color: var(--brand-gold);
color: #ffffff;
}
.school-faq-answer {
padding: 0 0.5rem 1.35rem 0.5rem;
font-size: 0.915rem;
line-height: 1.8;
color: #475569;
}
.school-faq-answer p {
margin-bottom: 0.75rem;
}
.school-faq-answer p:last-child {
margin-bottom: 0;
}
.school-faq-answer strong,
.school-faq-answer b {
color: var(--brand-navy);
font-weight: 600;
}
.school-faq-answer ul,
.school-faq-answer ol {
margin: 0.5rem 0 0.75rem 1.25rem;
padding-left: 0;
}
.school-faq-answer li {
margin-bottom: 0.35rem;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.school-sidebar-nav-card {
position: static;
margin-bottom: 1.5rem;
}
.school-nav-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.5rem;
gap: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.school-nav-btn {
width: auto;
flex-shrink: 0;
padding: 0.6rem 1rem;
}
.school-nav-btn-text {
white-space: nowrap;
}
.school-nav-arrow {
display: none;
}
.school-pane-card {
padding: 2.25rem 1.5rem;
min-height: 280px;
}
}
@media (max-width: 991.98px) {
.about-visual-showcase {
margin-bottom: 1.5rem;
}
.about-narrative-wrap {
padding-left: 0;
}
.principal-editorial-card {
padding: 2.25rem 1.75rem 1.85rem;
}
}
@media (max-width: 767.98px) {
.about-us-showcase-section,
.about-principal-section,
.school-overview-section {
padding: 3rem 0 3.5rem;
}
.principal-editorial-card {
padding: 2rem 1.25rem 1.5rem;
}
.principal-reference-frame-wrapper {
margin-bottom: 1.5rem;
}
.principal-accent-line {
height: 100px;
margin-right: 1rem;
}
}
/* =============================================
ADMISSION PAGE STYLING
============================================= */
.admission-intro-section {
padding: 4rem 0 4.5rem;
background-color: #ffffff;
border-bottom: 1px solid #f0f2f6;
}
.admission-intro-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.admission-intro-line {
width: 24px;
height: 2px;
background-color: var(--brand-gold);
display: inline-block;
}
.admission-intro-eyebrow-text {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-gold);
}
.admission-intro-title {
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.32;
margin-bottom: 1rem;
}
.admission-intro-lead {
font-size: 0.98rem;
line-height: 1.8;
color: #475569;
margin-bottom: 2rem;
}
.admission-step-card {
background: #faf7f0;
border: 1px solid #ede8dc;
border-radius: 8px;
padding: 1.75rem 1.35rem 1.5rem;
position: relative;
height: 100%;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.admission-step-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.06);
border-color: rgba(212, 169, 74, 0.45);
}
.admission-step-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--brand-navy);
color: var(--brand-gold);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 1.15rem;
border: 1.5px solid var(--brand-gold);
}
.admission-step-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--brand-navy);
margin-bottom: 0.5rem;
}
.admission-step-desc {
font-size: 0.85rem;
line-height: 1.65;
color: #475569;
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.school-principal-section {
padding: 3rem 0 3.5rem;
}
.school-principal-card {
padding: 2rem 1.35rem 1.75rem;
}
.admission-intro-section {
padding: 3rem 0 3.5rem;
}
}
/* =============================================
PAGE PRELOADER (Highlighted Compact Orbital Circle)
============================================= */
.page-preloader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(circle at center, #ffffff 40%, #f6f8fc 100%);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
pointer-events: all;
user-select: none;
}
.page-preloader.preloader-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Central Small Highlighted Circular Stage */
.preloader-stage {
position: relative;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
/* 1. Ambient Luminous Radiant Glow Disk */
.preloader-luminous-disk {
position: absolute;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 169, 74, 0.28) 0%, rgba(10, 16, 68, 0.04) 55%, transparent 75%);
animation: preloaderLuminousPulse 2.4s ease-in-out infinite alternate;
pointer-events: none;
}
/* 2. Concentric Expanding Golden Pulse Ripples */
.preloader-pulse-wave {
position: absolute;
border-radius: 50%;
border: 1.5px solid rgba(212, 169, 74, 0.5);
width: 155px;
height: 155px;
pointer-events: none;
animation: preloaderPulseRipple 2.6s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}
.preloader-wave-1 {
animation-delay: 0s;
}
.preloader-wave-2 {
animation-delay: 1.3s;
}
/* 3. Outer Highlighted Gold Orbit Ring with Orbiting Spark */
.preloader-ring-outer {
position: absolute;
width: 210px;
height: 210px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--brand-gold);
border-right-color: #f7dd93;
border-bottom-color: rgba(212, 169, 74, 0.35);
box-shadow: 0 0 12px rgba(212, 169, 74, 0.35);
animation: preloaderSpinCW 3s linear infinite;
pointer-events: none;
}
.preloader-orbit-spark {
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 7px;
height: 7px;
background: #ffffff;
border: 1.5px solid var(--brand-gold);
border-radius: 50%;
box-shadow: 0 0 10px 2px rgba(212, 169, 74, 0.95), 0 0 3px #ffffff;
}
/* 4. Middle Counter-Spinning Segmented Navy-Gold Arc */
.preloader-ring-middle {
position: absolute;
width: 185px;
height: 185px;
border-radius: 50%;
border: 1.5px dashed rgba(10, 16, 68, 0.35);
border-left-color: var(--brand-navy);
border-top-color: var(--brand-navy);
animation: preloaderSpinCCW 4.2s linear infinite;
pointer-events: none;
}
/* 5. Inner Highlighted Gold Border Ring */
.preloader-ring-inner {
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
border: 1.5px solid rgba(212, 169, 74, 0.6);
box-shadow: inset 0 0 10px rgba(212, 169, 74, 0.2), 0 0 10px rgba(212, 169, 74, 0.25);
animation: preloaderInnerRingGlow 2.4s ease-in-out infinite alternate;
pointer-events: none;
}
/* 6. Logo Container (Frameless & Clean) */
.preloader-logo-container {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
animation: preloaderLogoFloat 2.6s ease-in-out infinite;
}
.preloader-hero-logo {
width: 145px;
max-width: 65vw;
height: auto;
max-height: 65px;
object-fit: contain;
display: block;
mix-blend-mode: multiply;
filter: drop-shadow(0 4px 12px rgba(10, 16, 68, 0.1));
}
/* Keyframe Animations */
@keyframes preloaderLuminousPulse {
0% {
transform: scale(0.88);
opacity: 0.55;
}
100% {
transform: scale(1.22);
opacity: 1;
}
}
@keyframes preloaderPulseRipple {
0% {
transform: scale(0.65);
opacity: 0.9;
}
100% {
transform: scale(1.38);
opacity: 0;
}
}
@keyframes preloaderSpinCW {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes preloaderSpinCCW {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes preloaderInnerRingGlow {
0% {
transform: scale(0.97);
border-color: rgba(212, 169, 74, 0.45);
box-shadow: inset 0 0 6px rgba(212, 169, 74, 0.15), 0 0 6px rgba(212, 169, 74, 0.15);
}
100% {
transform: scale(1.03);
border-color: rgba(212, 169, 74, 0.85);
box-shadow: inset 0 0 14px rgba(212, 169, 74, 0.35), 0 0 14px rgba(212, 169, 74, 0.45);
}
}
@keyframes preloaderLogoFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* =============================================
ALUMNI PAGE — Overview & Office Bearers Showcase
============================================= */
.alumni-section {
padding: 4rem 0 5.5rem;
background-color: #ffffff;
position: relative;
}
/* Alumni Intro & Overview (Single-Record Content) */
.alumni-intro {
max-width: 860px;
margin: 0 auto 3.5rem;
}
.alumni-intro-description {
font-size: 0.94rem;
line-height: 1.85;
color: #475569;
max-width: 800px;
margin: 0 auto;
}
.alumni-intro-description p {
margin-bottom: 1.15rem;
line-height: 1.85;
}
.alumni-intro-description p:last-child {
margin-bottom: 0;
}
.alumni-intro-description strong,
.alumni-intro-description b {
color: var(--brand-navy);
font-weight: 600;
}
.alumni-intro-description ul {
list-style: none;
padding-left: 0;
margin: 1.25rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: left;
}
.alumni-intro-description ul li {
position: relative;
padding-left: 1.5rem;
line-height: 1.75;
color: #475569;
}
.alumni-intro-description ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 6px;
height: 6px;
background-color: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
}
/* Office Bearers Heading Section Separator */
.office-bearers-header-wrapper {
position: relative;
max-width: 860px;
margin: 0 auto 2.5rem;
}
.office-bearers-divider {
width: 36px;
height: 2px;
background-color: var(--brand-gold);
margin: 0 auto 0.75rem;
border-radius: 2px;
}
.office-bearers-heading {
font-size: 1.18rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.35;
margin-bottom: 0;
letter-spacing: -0.01em;
}
/* Members Grid (4 Columns Layout matching reference image) */
.alumni-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem 1.25rem;
max-width: 1120px;
margin: 0 auto;
}
/* Unified Alumni Member Card */
.alumni-member-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 8px;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(10, 16, 68, 0.04);
opacity: 0;
transform: translateY(20px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease;
}
.alumni-member-card.alumni-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease,
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease,
border-color 0.3s ease;
transition-delay: var(--reveal-delay, 0s);
}
.alumni-member-card:hover {
transform: translateY(-4px);
border-color: #cbd5e1;
box-shadow: 0 10px 24px -4px rgba(10, 16, 68, 0.1);
}
/* Photo Container */
.alumni-card-photo {
width: 100%;
aspect-ratio: 1 / 1.06;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, #f1f3f7 0%, #e2e6ed 100%);
position: relative;
}
/* Full Photo Display */
.alumni-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform 0.4s ease;
}
.alumni-member-card:hover .alumni-img {
transform: scale(1.03);
}
/* Placeholder Container inherits canonical blank image placeholder design */
/* Info Section (Left-aligned matching reference image) */
.alumni-card-body {
padding: 0.65rem 0.35rem 0.35rem;
text-align: left;
}
.alumni-card-name {
font-size: 0.92rem;
font-weight: 600;
color: #0f172a;
margin-bottom: 0.15rem;
line-height: 1.35;
letter-spacing: -0.01em;
}
.alumni-card-role {
font-size: 0.76rem;
font-weight: 400;
color: #64748b;
margin-bottom: 0.1rem;
line-height: 1.35;
}
.alumni-card-meta {
font-size: 0.74rem;
font-weight: 500;
color: #c4932d;
margin-bottom: 0;
line-height: 1.3;
}
/* Empty State */
.alumni-empty {
padding: 3rem 1rem;
}
.alumni-empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.alumni-empty-icon i {
font-size: 1.75rem;
color: var(--brand-gold);
}
.alumni-empty p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Responsive Breakpoints */
@media (max-width: 991.98px) {
.alumni-grid-4 {
grid-template-columns: repeat(2, 1fr);
max-width: 580px;
gap: 1.25rem;
}
}
@media (max-width: 575.98px) {
.alumni-section {
padding: 3rem 0 4rem;
}
.alumni-grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
max-width: 100%;
}
.alumni-member-card {
padding: 6px;
}
.alumni-card-name {
font-size: 0.84rem;
}
.alumni-card-role {
font-size: 0.72rem;
}
.alumni-card-meta {
font-size: 0.7rem;
}
}
/* =============================================
SCROLL TO TOP BUTTON — Progress Ring Design
============================================= */
.scroll-to-top-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 990;
width: 48px;
height: 48px;
border: none;
background: var(--brand-navy);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.85);
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.25),
0 2px 6px rgba(10, 16, 68, 0.15);
}
.scroll-to-top-btn.stt-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.scroll-to-top-btn:hover {
background: var(--brand-navy-light);
box-shadow: 0 6px 24px rgba(10, 16, 68, 0.35),
0 0 0 4px rgba(212, 169, 74, 0.2);
transform: translateY(-2px) scale(1.05);
}
.scroll-to-top-btn:active {
transform: translateY(0) scale(0.95);
}
/* Progress Ring SVG */
.stt-progress-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.stt-progress-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.stt-ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 2.5;
}
.stt-ring-fill {
fill: none;
stroke: var(--brand-gold);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 131.95; /* 2 * π * 21 */
stroke-dashoffset: 131.95;
transition: stroke-dashoffset 0.15s ease-out;
}
/* Chevron Icon */
.stt-icon {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.15rem;
transition: transform 0.3s ease, color 0.3s ease;
}
.scroll-to-top-btn:hover .stt-icon {
color: var(--brand-gold);
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 767.98px) {
.scroll-to-top-btn {
bottom: 1.25rem;
right: 1.25rem;
width: 42px;
height: 42px;
}
.stt-icon {
font-size: 1rem;
}
}
/* =============================================
ADMISSIONS PAGE STYLES
============================================= */
.admission-main-section {
padding: 4.5rem 0 5rem;
background-color: #fafbfd;
}
/* Academic Year Badge */
.admission-academic-badge {
display: inline-flex;
align-items: center;
background: rgba(212, 169, 74, 0.12);
border: 1px solid rgba(212, 169, 74, 0.4);
color: #855d14;
padding: 0.35rem 0.95rem;
border-radius: 20px;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 2px 6px rgba(212, 169, 74, 0.1);
}
/* Notice Box Callout (Golden Tinted Highlight) */
.admission-notice-box {
max-width: 900px;
margin: 0 auto 3rem;
background: linear-gradient(135deg, rgba(212, 169, 74, 0.08) 0%, rgba(212, 169, 74, 0.02) 100%), #ffffff;
border: 1px solid rgba(212, 169, 74, 0.3);
border-left: 4.5px solid var(--brand-gold);
border-radius: 12px;
padding: 2rem 2.25rem;
box-shadow: 0 6px 20px -4px rgba(10, 16, 68, 0.06);
position: relative;
}
.admission-notice-header {
display: flex;
align-items: center;
gap: 1.15rem;
margin-bottom: 1.35rem;
padding-bottom: 1.15rem;
border-bottom: 1px dashed rgba(212, 169, 74, 0.35);
}
.admission-notice-icon-wrap {
width: 46px;
height: 46px;
border-radius: 10px;
background: rgba(212, 169, 74, 0.18);
color: #b58832;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.admission-notice-eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b58832;
display: block;
margin-bottom: 0.2rem;
}
.admission-notice-title {
font-size: 1.18rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.35;
margin-bottom: 0;
letter-spacing: -0.01em;
}
.admission-notice-body {
color: #334155;
font-size: 0.95rem;
line-height: 1.75;
}
.admission-notice-body p {
margin-bottom: 0.85rem;
}
.admission-notice-body ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.admission-notice-body ul > li {
position: relative;
padding-left: 1.6rem;
}
.admission-notice-body ul > li::before {
content: '';
position: absolute;
left: 0.25rem;
top: 0.58rem;
width: 7px;
height: 7px;
background: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
}
.admission-notice-body ol {
padding-left: 1.35rem;
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* Policy & Evergreen Content Wrap */
.admission-content-wrap {
max-width: 900px;
margin: 0 auto 3rem;
}
.admission-editorial-body {
color: #334155;
font-size: 0.96rem;
line-height: 1.8;
}
.admission-editorial-body h3,
.admission-editorial-body h4 {
font-size: 1.2rem;
font-weight: 600;
color: var(--brand-navy);
margin-top: 2.25rem;
margin-bottom: 0.85rem;
letter-spacing: -0.01em;
position: relative;
padding-bottom: 0.35rem;
}
.admission-editorial-body h3::after,
.admission-editorial-body h4::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.admission-editorial-body p {
margin-bottom: 1.25rem;
}
.admission-editorial-body ul {
list-style: none;
padding-left: 0;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.admission-editorial-body ul > li {
position: relative;
padding-left: 1.6rem;
}
.admission-editorial-body ul > li::before {
content: '';
position: absolute;
left: 0.25rem;
top: 0.6rem;
width: 6.5px;
height: 6.5px;
background: var(--brand-gold);
transform: rotate(45deg);
border-radius: 1px;
}
.admission-editorial-body ol {
padding-left: 1.35rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.admission-editorial-body ol > li {
padding-left: 0.35rem;
}
/* Fees Teaser Box */
.admission-fees-teaser {
max-width: 900px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.5rem 1.85rem;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.04);
}
.admission-fees-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(10, 16, 68, 0.06);
color: var(--brand-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.admission-fees-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--brand-navy);
line-height: 1.35;
}
.admission-fees-subtitle {
font-size: 0.85rem;
color: #64748b;
line-height: 1.4;
}
.btn-fees-teaser {
display: inline-flex;
align-items: center;
background: var(--brand-navy);
color: #ffffff;
padding: 0.65rem 1.35rem;
border-radius: 8px;
font-size: 0.86rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn-fees-teaser:hover {
background: var(--brand-gold);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(212, 169, 74, 0.35);
}
/* Empty State */
.admission-empty {
max-width: 600px;
margin: 0 auto;
}
.admission-empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.admission-empty-icon i {
font-size: 1.75rem;
color: var(--brand-gold);
}
.admission-empty-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--brand-navy);
}
/* Responsive */
@media (max-width: 767.98px) {
.admission-main-section {
padding: 3rem 0 3.5rem;
}
.admission-notice-box {
padding: 1.5rem 1.25rem;
}
.admission-notice-header {
gap: 0.75rem;
}
.admission-fees-teaser {
padding: 1.25rem;
}
.btn-fees-teaser {
width: 100%;
justify-content: center;
}
}
/* =============================================
HOMEPAGE 5 HIGHLIGHT SECTIONS (LOVABLE REFERENCE)
============================================= */
/* Common Section Header & Typography */
.home-section-header {
margin-bottom: 1.25rem;
}
.home-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.75rem;
}
.home-eyebrow-line {
width: 24px;
height: 2px;
background-color: var(--brand-gold);
border-radius: 2px;
}
.home-eyebrow-text {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold);
}
.home-section-heading {
font-size: clamp(1.75rem, 2.3vw, 1.15rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.home-section-subheading {
font-size: 0.94rem;
color: var(--text-muted);
max-width: 620px;
line-height: 1.6;
margin-bottom: 0;
}
.home-arrow-link {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-navy);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.25s ease;
}
.home-arrow-link i {
color: var(--brand-gold);
transition: transform 0.25s ease;
}
.home-arrow-link:hover {
color: var(--brand-gold);
}
.home-arrow-link:hover i {
transform: translateX(4px);
}
/* ---------------------------------------------
1. TOPPERS (Hall of Fame — Variant A)
--------------------------------------------- */
.home-toppers-section {
padding: 5.5rem 0 6rem;
background-color: #faf8f5;
border-bottom: 1px solid rgba(10, 16, 68, 0.04);
}
.toppers-row-wrapper {
max-width: 1040px;
margin: 0 auto;
}
.toppers-list-grid {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
flex: 1;
}
.topper-variant-a-card {
display: flex;
flex-direction: column;
align-items: center;
min-width: 140px;
max-width: 170px;
}
.topper-avatar-wrap {
position: relative;
width: 96px;
height: 96px;
margin-bottom: 1.15rem;
}
.topper-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background-color: #f1f5f9;
border: 3px solid #ffffff;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.1);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.topper-variant-a-card:hover .topper-avatar-img {
transform: scale(1.05);
box-shadow: 0 8px 22px rgba(10, 16, 68, 0.16);
}
.topper-badge-pill {
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
background: var(--brand-navy);
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.15rem 0.6rem;
border-radius: 12px;
border: 1.5px solid #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
.topper-student-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.2rem;
line-height: 1.3;
}
.topper-student-class {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0;
line-height: 1.35;
}
.toppers-action-wrap {
margin-left: auto;
padding-left: 1rem;
}
/* ---------------------------------------------
ACTIVITIES (1-Big Hero + 4-Small Rectangular Grid)
--------------------------------------------- */
.home-activities-section {
padding: 1.75rem 0 2.75rem;
background-color: #f8fafc;
}
/* Outer Mosaic: 1 Big Hero on Left (1fr) + 2x2 Grid on Right (1.05fr) */
.activity-rect-mosaic {
display: grid;
grid-template-columns: 1fr 1.08fr;
gap: 12px;
width: 100%;
align-items: start;
}
/* Dynamic Activity Layout Variations (1, 2, 3, 4, 5+ images) */
.activity-mosaic--1 {
display: block;
width: 100%;
}
.activity-mosaic--1 .activity-rect-featured {
height: 382px;
min-height: 382px;
max-width: 980px;
margin: 0 auto;
}
.activity-mosaic--2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 100%;
}
.activity-mosaic--2 .activity-rect-half {
height: 360px;
min-height: 360px;
}
.activity-mosaic--3 {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 12px;
width: 100%;
align-items: start;
}
.activity-mosaic--3 .activity-rect-featured {
height: 382px;
min-height: 382px;
}
.activity-mosaic--3 .activity-rect-grid--stacked {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 185px 185px;
gap: 12px;
width: 100%;
}
.activity-mosaic--4 {
display: grid;
grid-template-columns: 1fr 1.08fr;
gap: 12px;
width: 100%;
align-items: start;
}
.activity-mosaic--4 .activity-rect-featured {
height: 382px;
min-height: 382px;
}
.activity-mosaic--4 .activity-rect-grid--tri {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 185px 185px;
gap: 12px;
width: 100%;
}
.activity-mosaic--4 .activity-rect-grid--tri .activity-rect-item:first-child {
grid-column: 1 / span 2;
}
/* Left Hero Column (Balanced Compact Height ~382px) */
.activity-rect-featured {
height: 382px;
min-height: 382px;
}
/* Right 2x2 Grid Column */
.activity-rect-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 185px 185px;
gap: 12px;
width: 100%;
}
/* Shared Rectangular Box (No Curved Pill Borders — Crisp Edges) */
.activity-rect-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #0a1044;
border-radius: 0px;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.08);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.activity-rect-box:hover,
.activity-rect-box:focus {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 16, 68, 0.16);
}
.activity-rect-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0px;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.4s ease;
}
.activity-rect-img-lead {
object-position: center 25%;
}
.activity-rect-box:hover .activity-rect-img,
.activity-rect-box:focus .activity-rect-img {
transform: scale(1.05);
filter: brightness(0.92);
}
/* Activity Rectangle Placeholder inherits canonical blank image placeholder design */
/* Permanent High-Legibility Scrim Overlay */
.activity-rect-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.15rem 1.15rem 0.95rem;
background: linear-gradient(180deg, rgba(10, 16, 68, 0) 25%, rgba(10, 16, 68, 0.68) 65%, rgba(10, 16, 68, 0.95) 100%);
opacity: 1;
pointer-events: none;
transition: background 0.35s ease;
}
.activity-rect-box:hover .activity-rect-overlay,
.activity-rect-box:focus .activity-rect-overlay {
background: linear-gradient(180deg, rgba(10, 16, 68, 0.08) 15%, rgba(10, 16, 68, 0.74) 60%, rgba(10, 16, 68, 0.98) 100%);
}
.activity-rect-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.65rem;
margin-bottom: 0.3rem;
}
/* Eyebrow Badge Accent */
.activity-rect-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--brand-gold, #c9a84c);
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 1;
transform: none;
}
.activity-rect-badge::before {
content: '';
display: inline-block;
width: 10px;
height: 2px;
background-color: var(--brand-gold, #c9a84c);
border-radius: 1px;
}
.activity-rect-date {
color: rgba(255, 255, 255, 0.85);
font-size: 0.72rem;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.activity-rect-date i {
color: var(--brand-gold, #c9a84c);
}
/* Activity Title */
.activity-rect-title {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
line-height: 1.3;
margin: 0 0 0.35rem 0;
max-width: 100%;
opacity: 1;
transform: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.25s ease;
}
.activity-rect-box:hover .activity-rect-title,
.activity-rect-box:focus .activity-rect-title {
color: #fce7a2;
}
/* Home Activities Know More Link (Separate Clickable Link matching News style) */
.activity-home-readmore {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
pointer-events: auto;
cursor: pointer;
transition: color 0.2s ease;
text-transform: uppercase;
}
.activity-home-readmore i {
color: var(--brand-gold, #c9a84c);
transition: transform 0.2s ease;
}
.activity-home-readmore:hover {
color: var(--brand-gold, #c9a84c);
text-decoration: none;
}
.activity-home-readmore:hover i {
transform: translateX(4px);
}
/* Big Featured Specific Typography & Padding */
.activity-rect-featured .activity-rect-overlay {
padding: 1.75rem 1.6rem 1.4rem;
}
.activity-rect-featured .activity-rect-title {
font-size: 1.25rem;
font-weight: 700;
-webkit-line-clamp: 3;
}
/* Tablet & Mobile Responsiveness */
@media (max-width: 991.98px) {
.activity-rect-mosaic,
.activity-mosaic--3,
.activity-mosaic--4 {
grid-template-columns: 1fr;
gap: 12px;
}
.activity-mosaic--1 .activity-rect-featured {
height: 280px;
min-height: 280px;
}
.activity-mosaic--2 .activity-rect-half {
height: 260px;
min-height: 260px;
}
.activity-rect-featured,
.activity-mosaic--3 .activity-rect-featured,
.activity-mosaic--4 .activity-rect-featured {
height: 260px;
min-height: 260px;
}
.activity-rect-grid {
grid-template-rows: 175px 175px;
gap: 12px;
}
.activity-mosaic--3 .activity-rect-grid--stacked {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 175px;
gap: 12px;
}
.activity-mosaic--4 .activity-rect-grid--tri {
grid-template-rows: 175px 175px;
gap: 12px;
}
}
@media (max-width: 767.98px) {
.home-activities-section {
padding: 1.5rem 0 2.25rem;
}
.activity-rect-mosaic,
.activity-mosaic--3,
.activity-mosaic--4 {
gap: 10px;
}
.activity-mosaic--1 .activity-rect-featured {
height: 220px;
min-height: 220px;
}
.activity-mosaic--2 {
grid-template-columns: 1fr;
gap: 12px;
}
.activity-mosaic--2 .activity-rect-half {
height: 210px;
min-height: 210px;
}
.activity-rect-featured,
.activity-mosaic--3 .activity-rect-featured,
.activity-mosaic--4 .activity-rect-featured {
height: 210px;
min-height: 210px;
}
.activity-rect-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 145px 145px;
gap: 10px;
}
.activity-mosaic--3 .activity-rect-grid--stacked {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 145px;
gap: 10px;
}
.activity-mosaic--4 .activity-rect-grid--tri {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 145px 145px;
gap: 10px;
}
/* On mobile, titles are permanently visible without hover */
.activity-rect-overlay {
opacity: 1;
padding: 0.85rem 0.75rem 0.65rem;
background: linear-gradient(180deg, rgba(10, 16, 68, 0) 25%, rgba(10, 16, 68, 0.88) 100%);
}
.activity-rect-featured .activity-rect-overlay {
padding: 1rem 0.85rem 0.75rem;
}
.activity-rect-badge {
opacity: 1;
transform: translateY(0);
font-size: 0.62rem;
margin-bottom: 0.2rem;
}
.activity-rect-title {
opacity: 1;
transform: translateY(0);
font-size: 0.8rem;
line-height: 1.25;
}
.activity-rect-featured .activity-rect-title {
font-size: 0.95rem;
}
.activity-rect-action {
font-size: 0.68rem;
margin-top: 0.2rem;
}
}
@media (max-width: 480px) {
.activity-rect-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.activity-mosaic--3 .activity-rect-grid--stacked {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.activity-mosaic--4 .activity-rect-grid--tri {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.activity-mosaic--4 .activity-rect-grid--tri .activity-rect-item:first-child {
grid-column: 1;
}
.activity-rect-item {
height: 155px;
}
}
/* ---------------------------------------------
3. AWARDS (Compact Bento Grid)
--------------------------------------------- */
.home-awards-section {
padding: 1.5rem 0 2.75rem;
background-color: #ffffff;
}
/* ---- Bento Grid Layout ---- */
.award-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 215px;
gap: 16px;
}
/* Dynamic variations based on number of award entries */
.award-bento--count-1 {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 240px;
max-width: 680px;
margin: 0 auto;
}
.award-bento--count-2 {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 215px;
}
@media (min-width: 992px) {
.award-bento--count-3 .award-bento-cell:nth-child(5) {
grid-column: 2;
}
.award-bento--count-3 .award-bento-cell:nth-child(6) {
grid-column: 3;
}
}
/* ---- Shared Cell ---- */
.award-bento-cell {
border-radius: 18px;
overflow: hidden;
isolation: isolate;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.award-bento-cell:hover {
transform: translateY(-4px) translateZ(0);
box-shadow: 0 14px 32px rgba(10, 16, 68, 0.12);
}
/* ---- Image Tiles ---- */
.award-bento-img {
position: relative;
background-color: #e8ecf0;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
transform: translateZ(0);
}
.award-bento-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 18px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.award-bento-img:hover img,
.award-bento-cell.award-bento-img:hover img {
transform: scale(1.06) translateZ(0);
}
/* Award Image Title Label Overlay */
.award-bento-img-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.25rem 0.85rem 0.65rem;
background: linear-gradient(to top, rgba(10, 16, 68, 0.88) 0%, rgba(10, 16, 68, 0.45) 65%, transparent 100%);
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
display: flex;
align-items: center;
gap: 0.45rem;
z-index: 2;
pointer-events: none;
transition: padding 0.35s ease, background 0.35s ease;
}
.award-bento-img-label i {
color: var(--brand-gold, #d4a94a);
font-size: 0.82rem;
flex-shrink: 0;
}
.award-bento-img-label span {
color: #ffffff;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.015em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.award-bento-cell:hover .award-bento-img-label {
padding-bottom: 0.8rem;
background: linear-gradient(to top, rgba(10, 16, 68, 0.94) 0%, rgba(10, 16, 68, 0.55) 70%, transparent 100%);
}
/* Award Bento Placeholder inherits canonical blank image placeholder design */
.award-bento-ph {
border-radius: 18px;
}
/* ---- Content / Text Tiles ---- */
.award-bento-txt {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 1.25rem 1.2rem;
border-radius: 18px;
overflow: hidden;
}
.award-bento-txt h3 {
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
margin: 0 0 0.35rem 0;
}
/* Meta block: Line 1 (Name, Section, Standard) & Line 2 (Year, Date) directly below Title */
.award-bento-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.15rem;
margin-bottom: 0.5rem;
font-size: 0.74rem;
line-height: 1.45;
}
.abm-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem;
}
.abm-line span {
font-weight: 500;
}
.abm-line-primary span:first-child {
font-weight: 600;
}
.abm-line span + span::before {
content: '\00B7';
margin: 0 0.35rem;
font-weight: 700;
}
.award-bento-txt p {
font-size: 0.76rem;
font-weight: 400;
line-height: 1.6;
margin: auto 0 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- Theme: Warm Cream ---- */
.award-bento-txt.theme-cream {
background-color: #dde1e6;
border: 1px solid #cfd4db;
}
.award-bento-txt.theme-cream h3 { color: #0f172a; }
.award-bento-txt.theme-cream .award-bento-meta { color: #475569; }
.award-bento-txt.theme-cream p { color: #475569; }
/* ---- Theme: Deep Navy / Black Card ---- */
.award-bento-txt.theme-navy {
background-color: #0f172a;
border: 1px solid #1e293b;
}
.award-bento-txt.theme-navy h3 { color: #ffffff; }
.award-bento-txt.theme-navy .award-bento-meta { color: #94a3b8; }
.award-bento-txt.theme-navy p { color: #94a3b8; }
/* ---- Theme: Muted Blue-Grey ---- */
.award-bento-txt.theme-muted {
background-color: #8ba0b4;
border: 1px solid #7a92a6;
}
.award-bento-txt.theme-muted h3 { color: #ffffff; }
.award-bento-txt.theme-muted .award-bento-meta { color: #e8edf2; }
.award-bento-txt.theme-muted p { color: #e8edf2; }
/* ---- Theme: Clean White ---- */
.award-bento-txt.theme-white {
background-color: #ffffff;
border: 1px solid #eef2f6;
}
.award-bento-txt.theme-white h3 { color: #0f172a; }
.award-bento-txt.theme-white .award-bento-meta { color: #64748b; }
.award-bento-txt.theme-white p { color: #64748b; }
/* ---- Responsive ---- */
@media (max-width: 991.98px) {
.award-bento {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
gap: 12px;
}
.award-bento--count-1 {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 200px;
max-width: 580px;
margin: 0 auto;
}
.award-heading-oneline {
white-space: normal;
}
}
@media (max-width: 575.98px) {
.award-bento {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 170px;
gap: 10px;
}
.award-bento--count-1 {
grid-template-columns: 1fr;
grid-auto-rows: auto;
max-width: 340px;
margin: 0 auto;
}
.award-bento--count-1 .award-bento-img {
height: 180px;
}
.award-bento--count-1 .award-bento-txt {
min-height: 160px;
}
.award-bento-cell,
.award-bento-img,
.award-bento-img img,
.award-bento-txt,
.award-bento-ph {
border-radius: 14px;
}
.award-bento-txt {
padding: 0.9rem 0.85rem;
}
.award-bento-txt h3 {
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.award-bento-meta {
font-size: 0.65rem;
margin-bottom: 0.3rem;
}
.award-bento-txt p {
font-size: 0.68rem;
-webkit-line-clamp: 2;
}
.award-bento-img-label {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
padding: 1rem 0.65rem 0.5rem;
gap: 0.35rem;
}
.award-bento-img-label i {
font-size: 0.72rem;
}
.award-bento-img-label span {
font-size: 0.66rem;
}
}
/* ---------------------------------------------
4. NEWS (From the Loyola Hall Journal)
--------------------------------------------- */
.home-news-section {
padding: 1.5rem 0 2rem;
background-color: #ffffff;
}
.home-news-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 12px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.04);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.home-news-card:hover {
transform: translateY(-5px);
border-color: #e2e8f0;
box-shadow: 0 14px 32px -6px rgba(10, 16, 68, 0.1);
}
.home-news-cover {
width: 100%;
aspect-ratio: 16 / 9.5;
background-color: #f1f5f9;
overflow: hidden;
position: relative;
}
.home-news-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.home-news-card:hover .home-news-img {
transform: scale(1.04);
}
.home-news-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-gold);
font-size: 2.2rem;
}
.home-news-content {
padding: 1.35rem 1.4rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
}
.home-news-date {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 0.5rem;
display: block;
}
.home-news-title {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.38;
margin-bottom: 0.65rem;
}
.home-news-title a {
color: var(--brand-navy);
text-decoration: none;
transition: color 0.2s ease;
}
.home-news-title a:hover {
color: var(--brand-gold);
}
.home-news-excerpt {
font-size: 0.86rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 1.25rem;
flex: 1;
}
.home-news-readmore {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-navy);
text-decoration: none;
display: inline-flex;
align-items: center;
margin-top: auto;
transition: all 0.2s ease;
}
.home-news-readmore i {
color: var(--brand-gold);
transition: transform 0.2s ease;
}
.home-news-readmore:hover {
color: var(--brand-gold);
}
.home-news-readmore:hover i {
transform: translateX(4px);
}
/* ---------------------------------------------
5. EVENTS SECTION (Theme Colors: Navy & Gold)
--------------------------------------------- */
.home-events-section {
padding: 1.5rem 0 2rem;
background-color: #f8fafc;
}
/* Image Cover & Pinned Date Badge */
.ref-event-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(145deg, var(--brand-navy) 0%, var(--brand-navy-alt) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-gold);
font-size: 2.5rem;
}
/* Pinned Event Date Badge (Solid Navy & Gold, No Hover Distortion) */
.ref-event-date-box {
position: absolute;
bottom: 12px;
left: 14px;
background: #0a1044;
color: #ffffff;
padding: 0.35rem 0.65rem 0.3rem;
border-radius: 6px;
border: 1px solid rgba(212, 169, 74, 0.45);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 58px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
z-index: 3;
pointer-events: none;
transform: none !important;
transition: none !important;
}
.ref-event-card:hover .ref-event-date-box {
transform: none !important;
background: #0a1044 !important;
}
.ref-date-day {
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
color: var(--brand-gold, #d4a94a);
margin-bottom: 0.1rem;
letter-spacing: -0.02em;
}
.ref-date-month-year {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
line-height: 1.15;
letter-spacing: 0.04em;
white-space: nowrap;
opacity: 0.95;
}
/* Bottom Body Area (Soft Theme Tinted) */
.ref-event-body {
background: #f8fafc;
padding: 1.45rem 1.45rem 1.35rem;
display: flex;
flex-direction: column;
flex: 1;
}
.ref-event-title {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.38;
margin-bottom: 0.6rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.85rem;
}
.ref-event-title a {
color: var(--brand-navy);
text-decoration: none;
transition: color 0.2s ease;
}
.ref-event-title a:hover {
color: var(--brand-gold);
}
.ref-event-desc {
font-size: 0.83rem;
color: #64748b;
line-height: 1.55;
margin-bottom: 1.15rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6rem;
}
.ref-event-meta-line {
font-size: 0.76rem;
font-weight: 500;
color: var(--brand-navy);
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.5rem;
border-top: 1px dashed rgba(10, 16, 68, 0.12);
}
.ref-event-meta-date {
font-weight: 600;
color: var(--brand-navy);
}
.ref-event-meta-arrow {
color: var(--brand-gold);
font-weight: 700;
transition: transform 0.25s ease;
}
.ref-event-card:hover .ref-event-meta-arrow {
transform: translateX(3px);
}
.ref-event-meta-venue {
color: #64748b;
}
/* ---------------------------------------------
Responsive Breakpoints
--------------------------------------------- */
@media (max-width: 991.98px) {
.activities-mosaic-grid {
grid-template-columns: 1fr 1fr;
height: auto;
}
.mosaic-col-center {
grid-column: span 2;
height: 260px;
}
.mosaic-card-half {
height: 200px;
}
.mosaic-card-tall {
height: 100%;
}
.honours-stat-panel {
padding-right: 0;
margin-bottom: 2rem;
text-align: center;
}
.honours-stat-desc {
max-width: 100%;
}
.honours-action-links {
justify-content: center;
}
.toppers-action-wrap {
margin: 1.5rem auto 0;
width: 100%;
text-align: center;
}
}
@media (max-width: 575.98px) {
.activities-mosaic-grid {
grid-template-columns: 1fr;
height: auto;
}
.mosaic-col-center {
grid-column: span 1;
height: 220px;
}
.mosaic-card-half {
height: 180px;
}
.toppers-list-grid {
gap: 1.5rem;
}
.topper-variant-a-card {
min-width: 120px;
}
.topper-avatar-wrap {
width: 80px;
height: 80px;
}
.honour-item-card {
padding: 0.75rem 0.85rem;
}
}
/* =============================================
EVENTS (Home & Listing Section Cards)
============================================= */
/* Home Events Section */
.home-events-section {
padding: 1.5rem 0 2rem;
background-color: #f8fafc;
}
/* 16:9 Equal-Height Clickable Event Card */
.ref-event-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.06);
border: 1px solid #eef2f6;
text-decoration: none;
color: inherit;
position: relative;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease;
}
.ref-event-card:hover,
.ref-event-card:focus {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(10, 16, 68, 0.1);
border-color: #cbd5e1;
outline: none;
color: inherit;
}
/* 16:9 Image Aspect Ratio */
.ref-event-cover-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #f1f5f9;
}
.ref-event-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-event-card:hover .ref-event-img {
transform: scale(1.04);
}
/* Event Card Placeholder inherits canonical blank image placeholder design */
/* Equal-Height Card Body */
.ref-event-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.25rem 1.35rem 1.15rem;
background: #ffffff;
}
/* Event Date inside card content (Matching Activities card style) */
.ref-event-card-date {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
display: inline-flex;
align-items: center;
letter-spacing: 0.01em;
}
.ref-event-card-date i {
color: var(--brand-gold, #d4a94a);
font-size: 0.82rem;
}
.ref-event-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.38;
margin-bottom: 0.5rem;
transition: color 0.2s ease;
}
.ref-event-card:hover .ref-event-title {
color: var(--brand-gold);
}
/* 2-line clamped description */
.ref-event-desc {
font-size: 0.86rem;
line-height: 1.55;
color: #64748b;
margin-bottom: 1.1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Bottom Meta Line */
.ref-event-meta-line {
margin-top: auto;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.78rem;
color: #64748b;
font-weight: 500;
gap: 0.5rem;
}
.ref-event-meta-date {
color: var(--brand-navy);
font-weight: 600;
white-space: nowrap;
}
.ref-event-meta-venue {
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ref-event-meta-arrow {
color: var(--brand-gold);
font-size: 0.9rem;
margin: 0 0.2rem;
}
.ref-event-action-arrow {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand-navy, #0a1044);
transition: transform 0.2s ease, color 0.2s ease;
}
.ref-event-card:hover .ref-event-action-arrow {
color: var(--brand-gold, #d4a94a);
transform: translateX(3px);
}
/* Events Listing Page */
.events-listing-page {
padding: 3.5rem 0 4.5rem;
background-color: #ffffff;
}
.events-subsection {
position: relative;
}
.events-subsection-upcoming {
margin-bottom: 3.25rem;
}
.events-subsection-past {
padding-top: 3.25rem;
border-top: 1px solid #f1f5f9;
}
.events-section-title {
font-size: clamp(1.5rem, 2.2vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.25;
margin-bottom: 0;
}
/* Empty State */
.events-empty-state {
background-color: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 14px;
padding: 3.5rem 1.5rem;
}
.events-empty-icon {
font-size: 2.75rem;
color: var(--brand-gold);
}
.events-empty-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-navy);
margin-bottom: 0.5rem;
}
.events-empty-desc {
font-size: 0.9rem;
max-width: 500px;
}
/* Events Pagination (Navy & Gold Theme) */
.events-pagination .pagination {
margin-bottom: 0;
gap: 0.35rem;
}
.events-pagination .page-item .page-link {
font-size: 0.85rem;
font-weight: 600;
color: var(--brand-navy);
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.5rem 0.9rem;
transition: all 0.2s ease;
}
.events-pagination .page-item.active .page-link {
background-color: var(--brand-navy);
border-color: var(--brand-navy);
color: var(--brand-gold);
}
.events-pagination .page-item .page-link:hover:not(.disabled) {
background-color: rgba(212, 169, 74, 0.12);
border-color: var(--brand-gold);
color: var(--brand-navy);
}
/* ---------------------------------------------
EVENT DETAIL PAGE
--------------------------------------------- */
.event-detail-body-section {
background-color: #ffffff;
}
/* Event Unique Editorial Metadata (No card, no badges, clean hairline layout) */
.event-editorial-meta {
border-top: 1px solid rgba(10, 16, 68, 0.08);
border-bottom: 1px solid rgba(10, 16, 68, 0.08);
padding: 1.25rem 0;
margin-bottom: 2.75rem;
background: transparent;
}
.event-meta-grid {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 1.5rem 3.5rem;
}
.event-meta-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.event-meta-cell .meta-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-gold);
}
.event-meta-cell .meta-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--brand-navy);
display: inline-flex;
align-items: center;
}
@media (max-width: 575.98px) {
.event-meta-grid {
gap: 1.25rem 2rem;
}
}
/* Dynamic Adaptive Event Gallery Component */
.event-dynamic-gallery {
width: 100%;
}
/* 1 Image: Large Centered Featured Layout */
.gallery-layout-single {
max-width: 680px;
margin: 0 auto;
}
.gallery-layout-single .gallery-thumb-card {
aspect-ratio: 16 / 10;
max-height: 420px;
}
/* 2 Images: 2 Balanced Columns */
.gallery-layout-double {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.gallery-layout-double .gallery-thumb-card {
aspect-ratio: 4 / 3;
}
/* 3 Images: 3 Balanced Columns */
.gallery-layout-triple {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.gallery-layout-triple .gallery-thumb-card {
aspect-ratio: 4 / 3;
}
/* 4 Images: 2x2 Balanced Grid (Prevents 3+1 Awkward Row) */
.gallery-layout-quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.gallery-layout-quad .gallery-thumb-card {
aspect-ratio: 16 / 10;
}
/* 5+ Images: 3-Column Responsive Grid */
.gallery-layout-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.gallery-layout-grid .gallery-thumb-card {
aspect-ratio: 4 / 3;
}
/* Gallery Card Base Style & Micro-Interactions */
.gallery-thumb-card {
position: relative;
border-radius: 14px;
overflow: hidden;
background-color: #f1f5f9;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.06);
border: 1px solid #eef2f6;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease;
}
.gallery-thumb-card:hover,
.gallery-thumb-card:focus {
transform: translateY(-4px);
border-color: #cbd5e1;
box-shadow: 0 14px 32px rgba(10, 16, 68, 0.12);
outline: none;
}
.gallery-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-thumb-card:hover .gallery-thumb-img {
transform: scale(1.05);
}
.gallery-thumb-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 16, 68, 0) 60%, rgba(10, 16, 68, 0.35) 100%);
opacity: 0;
transition: opacity 0.35s ease;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 1rem;
}
.gallery-thumb-card:hover .gallery-thumb-overlay {
opacity: 1;
}
.gallery-expand-badge {
width: 38px;
height: 38px;
border-radius: 50%;
background: #ffffff;
color: var(--brand-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: scale(0.85);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-thumb-card:hover .gallery-expand-badge {
transform: scale(1);
}
@media (max-width: 991.98px) {
.gallery-layout-triple,
.gallery-layout-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.gallery-layout-double,
.gallery-layout-quad {
gap: 1.25rem;
}
}
@media (max-width: 575.98px) {
.gallery-layout-double,
.gallery-layout-triple,
.gallery-layout-quad,
.gallery-layout-grid {
grid-template-columns: 1fr;
gap: 1.15rem;
}
.gallery-layout-single {
max-width: 100%;
}
}
/* ---------------------------------------------
VANILLA JS LIGHTBOX VIEWER (Clean White Theme)
--------------------------------------------- */
body.lightbox-open {
overflow: hidden !important;
}
.event-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.event-lightbox.is-active {
visibility: visible;
opacity: 1;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.lightbox-container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 4rem;
}
.lightbox-content {
display: flex;
align-items: center;
justify-content: center;
max-width: 90vw;
max-height: 88vh;
position: relative;
}
.lightbox-img-wrap {
max-width: 88vw;
max-height: 86vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img {
max-width: 88vw;
max-height: 86vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 16px 48px rgba(10, 16, 68, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Sleek Minimal Lightbox Buttons */
.lightbox-btn {
position: fixed;
background: #ffffff;
border: 1px solid #e2e8f0;
color: var(--brand-navy);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.08);
z-index: 10;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lightbox-close {
top: 20px;
right: 24px;
width: 36px;
height: 36px;
font-size: 0.95rem;
}
.lightbox-close:hover,
.lightbox-close:focus {
background: var(--brand-navy);
color: #ffffff;
border-color: var(--brand-navy);
box-shadow: 0 6px 18px rgba(10, 16, 68, 0.18);
outline: none;
}
/* Side Navigation Arrows (Clean, Static, Centered: Hover styling kept, Up-Down Motion Removed) */
.lightbox-prev,
.lightbox-next {
top: 50%;
transform: translateY(-50%) !important;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-prev:hover,
.lightbox-prev:focus,
.lightbox-prev:active,
.lightbox-next:hover,
.lightbox-next:focus,
.lightbox-next:active {
background: var(--brand-navy) !important;
color: #ffffff !important;
border-color: var(--brand-navy) !important;
box-shadow: 0 6px 18px rgba(10, 16, 68, 0.18) !important;
transform: translateY(-50%) !important;
outline: none !important;
}
@media (max-width: 767.98px) {
.lightbox-container {
padding: 1.5rem;
}
.lightbox-btn {
width: 36px;
height: 36px;
font-size: 0.95rem;
}
.lightbox-close {
top: 14px;
right: 14px;
}
.lightbox-prev {
left: 8px;
}
.lightbox-next {
right: 8px;
}
.lightbox-img-wrap {
max-width: 95vw;
max-height: 80vh;
}
.lightbox-img {
max-width: 95vw;
max-height: 80vh;
}
}
/* =============================================
NEWS SECTION & PAGES (Reference Layout & Theme Colors)
============================================= */
/* Home News Header 'View All' Button */
.btn-news-view-all {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--brand-navy);
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
padding: 0.55rem 1.35rem;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(10, 16, 68, 0.1);
}
.btn-news-view-all:hover {
background-color: var(--brand-gold);
color: var(--brand-navy);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(10, 16, 68, 0.18);
}
/* =============================================
NEWS (Home & Listing Section Cards)
============================================= */
.home-news-section {
padding: 1.5rem 0 2rem;
background-color: #ffffff;
}
.news-listing-page {
padding: 3.5rem 0 4.5rem;
background-color: #ffffff;
}
/* Reference Layout News Card with Floating Overlapping Box */
.ref-news-card {
display: flex;
flex-direction: column;
width: 100%;
text-decoration: none;
color: inherit;
position: relative;
margin-bottom: 1.5rem;
}
.ref-news-photo-wrap {
position: relative;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16 / 10;
width: 100%;
background-color: #f1f5f9;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.05);
}
.ref-news-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-news-card:hover .ref-news-img {
transform: scale(1.05);
}
/* News Card Placeholder inherits canonical blank image placeholder design */
/* Floating Overlapping White Card */
.ref-news-floating-card {
position: relative;
margin-top: -50px;
margin-left: 12px;
margin-right: 12px;
background: #ffffff;
border-radius: 12px;
padding: 1.15rem 1.25rem 1.05rem;
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.07);
border: 1px solid #eef2f6;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease;
}
.ref-news-card:hover .ref-news-floating-card {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(10, 16, 68, 0.12);
border-color: #cbd5e1;
}
.ref-news-meta-row {
font-size: 0.76rem;
color: #64748b;
font-weight: 500;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
margin-bottom: 0.5rem;
}
.ref-news-meta-item {
display: inline-flex;
align-items: center;
}
.ref-news-meta-divider {
color: #cbd5e1;
font-size: 0.8rem;
}
.ref-news-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.4;
margin-bottom: 0.65rem;
min-height: 2.8em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s ease;
}
.ref-news-card:hover .ref-news-title {
color: var(--brand-gold);
}
.ref-news-bottom-link {
margin-top: auto;
padding-top: 0.4rem;
}
.ref-card-readmore,
.ref-news-readmore {
font-size: 0.84rem;
font-weight: 600;
color: var(--brand-navy);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.ref-card-readmore i,
.ref-news-readmore i {
color: var(--brand-gold);
transition: transform 0.2s ease;
}
.ref-card-readmore:hover,
.ref-news-readmore:hover {
color: var(--brand-gold);
text-decoration: none;
}
.ref-card-readmore:hover i,
.ref-news-readmore:hover i {
transform: translateX(4px);
}
/* News & Event Detail Page Styles (Clean, No Card Box, No Side Line) */
.detail-article-title,
.detail-news-title {
font-size: clamp(1.75rem, 2.8vw, 1.95rem);
font-weight: 600;
color: var(--brand-navy);
line-height: 1.3;
margin-top: 0.5rem;
margin-bottom: 0.85rem;
}
.detail-meta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem 0.85rem;
font-size: 0.86rem;
color: #64748b;
margin-bottom: 1.75rem;
padding-bottom: 1.15rem;
border-bottom: 1px solid #eef2f6;
}
.detail-meta-item {
display: inline-flex;
align-items: center;
font-weight: 500;
}
.detail-meta-dot {
color: #cbd5e1;
font-size: 0.75rem;
}
.news-article-lead,
.news-lead {
font-size: 1.12rem;
line-height: 1.75;
color: #334155;
font-weight: 500;
margin-bottom: 1.5rem;
}
.news-detail-cover-wrap {
border-radius: 14px;
overflow: hidden;
max-height: 480px;
width: 100%;
box-shadow: 0 6px 20px rgba(10, 16, 68, 0.06);
background-color: #f1f5f9;
}
.news-detail-cover-img {
width: 100%;
height: 100%;
max-height: 480px;
object-fit: cover;
display: block;
}
@media (max-width: 767.98px) {
.ref-news-floating-card {
margin-top: -45px;
margin-left: 10px;
margin-right: 10px;
padding: 1.1rem 1.15rem 1rem;
}
.ref-news-title {
min-height: auto;
}
.detail-article-title {
font-size: 1.6rem;
}
}
/* =============================================
TOPPERS (Reference Layout & Dedicated Page)
============================================= */
/* Home Reference Layout Section */
.home-toppers-ref-section {
padding: 3.5rem 0 4rem;
background-color: #f8fafc !important;
}
/* Left Content Area */
.toppers-ref-lead-content {
padding-right: 0.5rem;
}
.toppers-ref-lead-heading {
font-size: 1.55rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.25;
margin-bottom: 0.85rem;
}
.toppers-ref-lead-text {
font-size: 0.86rem;
color: #475569;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.toppers-ref-cta-wrap {
display: flex;
align-items: center;
}
/* Topper Card (Shared by Home Section & Toppers Page) */
.toppers-page-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.25rem;
margin: 0;
}
.home-toppers-ref-section .toppers-page-grid {
justify-content: flex-start;
}
@media (max-width: 991.98px) {
.home-toppers-ref-section .toppers-page-grid {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.toppers-page-grid {
justify-content: center;
gap: 1rem;
}
}
@media (max-width: 359.98px) {
.topper-ref-card,
.topper-ref-header,
.topper-ref-photo-wrap {
width: 100% !important;
max-width: 290px;
}
.topper-ref-photo-wrap {
height: auto !important;
aspect-ratio: 300 / 360;
}
}
.topper-ref-card {
display: flex;
flex-direction: column;
width: 300px;
max-width: 100%;
margin: 0;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.topper-ref-card:hover {
transform: translateY(-4px);
}
.topper-ref-header {
width: 100%;
max-width: 300px;
margin-bottom: 0.65rem;
}
.topper-ref-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topper-ref-percentage-pill {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
white-space: nowrap;
line-height: 1.2;
}
.topper-ref-meta-line {
font-size: 0.82rem;
color: #64748b;
font-weight: 500;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.25rem;
row-gap: 0.15rem;
margin-bottom: 0;
line-height: 1.35;
}
.topper-ref-year {
font-weight: 500;
color: #64748b;
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
}
.topper-ref-std {
white-space: nowrap;
flex-shrink: 0;
}
.topper-ref-section-name {
white-space: nowrap;
}
.topper-ref-meta-dot {
color: var(--brand-gold, #c9a84c) !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
line-height: 1 !important;
margin: 0 0.12rem !important;
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
user-select: none;
flex-shrink: 0;
}
.topper-ref-card-divider {
display: block;
width: 100%;
max-width: 300px;
height: 1.5px;
background-color: #cbd5e1;
margin-top: 0.55rem;
transition: background-color 0.25s ease;
}
.topper-ref-card:hover .topper-ref-card-divider {
background-color: var(--brand-gold, #d4a94a);
}
/* Fixed 300px × 360px Photo Container */
.topper-ref-photo-wrap {
position: relative;
width: 300px;
max-width: 100%;
height: 360px;
border-radius: 10px;
overflow: hidden;
background-color: #f1f5f9;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.topper-ref-img {
width: 100%;
height: 100%;
max-width: 300px;
max-height: 360px;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.topper-ref-card:hover .topper-ref-img {
transform: scale(1.04);
}
@media (max-width: 991.98px) {
.toppers-ref-lead-content {
margin-bottom: 2rem;
padding-right: 0;
}
}
/* Dedicated Toppers Listing Page — Up to 4 Toppers per row, centered if fewer */
.toppers-listing-page {
padding: 2.5rem 0 3.25rem;
background-color: #ffffff;
}
.toppers-listing-page .toppers-page-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
width: 100%;
margin: 0 auto;
}
.toppers-listing-page .topper-ref-card {
flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
max-width: calc((100% - 3 * 1.5rem) / 4);
width: calc((100% - 3 * 1.5rem) / 4);
margin: 0;
}
.toppers-listing-page .topper-ref-header {
width: 100%;
max-width: 100%;
}
.toppers-listing-page .topper-ref-card-divider {
width: 100%;
max-width: 100%;
}
.toppers-listing-page .topper-ref-photo-wrap {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 300 / 360;
}
.toppers-listing-page .topper-ref-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: center top;
}
@media (max-width: 1199.98px) {
.toppers-listing-page .toppers-page-grid {
gap: 1rem;
}
.toppers-listing-page .topper-ref-card {
flex: 0 0 calc((100% - 3 * 1rem) / 4);
max-width: calc((100% - 3 * 1rem) / 4);
width: calc((100% - 3 * 1rem) / 4);
}
}
@media (max-width: 991.98px) {
.toppers-listing-page .toppers-page-grid {
gap: 1.25rem;
}
.toppers-listing-page .topper-ref-card {
flex: 0 0 calc((100% - 1.25rem) / 2);
max-width: calc((100% - 1.25rem) / 2);
width: calc((100% - 1.25rem) / 2);
}
}
@media (max-width: 575.98px) {
.toppers-listing-page .toppers-page-grid {
gap: 1.25rem;
}
.toppers-listing-page .topper-ref-card {
flex: 0 0 100%;
max-width: 300px;
width: 100%;
}
}
/* Academic Year Subsection Header (Centered) */
.toppers-year-group {
position: relative;
}
.toppers-year-group:not(:last-child) {
padding-bottom: 1.25rem;
margin-bottom: 2.25rem;
}
.toppers-year-header {
text-align: center;
margin-bottom: 1.25rem;
}
.toppers-year-clean-title {
font-size: 1.45rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.25;
letter-spacing: -0.01em;
text-align: center;
display: inline-block;
}
/* Academic Card in Full Listing */
.topper-academic-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.05);
border: 1px solid #eef2f6;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease;
}
.topper-academic-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(10, 16, 68, 0.1);
border-color: #cbd5e1;
}
.topper-academic-photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
overflow: hidden;
background: #f1f5f9;
}
.topper-academic-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.topper-academic-card:hover .topper-academic-img {
transform: scale(1.04);
}
.topper-academic-badge {
position: absolute;
bottom: 10px;
right: 12px;
background: var(--brand-navy);
border: 1px solid rgba(212, 169, 74, 0.5);
color: var(--brand-gold);
font-size: 0.88rem;
font-weight: 700;
padding: 0.3rem 0.65rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
z-index: 2;
}
.topper-academic-body {
padding: 1.25rem 1.35rem 1.15rem;
background: #ffffff;
flex: 1;
display: flex;
flex-direction: column;
}
.topper-academic-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.35;
margin-bottom: 0.45rem;
}
.topper-academic-meta {
font-size: 0.82rem;
color: #64748b;
font-weight: 500;
margin-bottom: 0.85rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.topper-meta-dot {
color: var(--brand-gold);
font-weight: 700;
}
.topper-academic-footer {
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
font-size: 0.78rem;
color: var(--brand-navy);
font-weight: 600;
}
/* ---------------------------------------------
Dedicated Awards Exhibition & Archive Page
(Compact, Card-free, Badge-free, Alternating)
--------------------------------------------- */
.awards-exhibit-page {
padding: 1.75rem 0 3.5rem;
background-color: #ffffff;
}
/* Year Section & Heading (Centered, Clean Typography, No Hyphen) */
.award-archive-year-group {
position: relative;
}
.award-archive-year-header {
border-bottom: none;
text-align: center;
padding-bottom: 0;
margin-bottom: 1.25rem;
}
.award-archive-year-title {
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
font-weight: 700;
color: var(--brand-navy);
line-height: 1.25;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-block;
}
/* Exhibition List & Rows (Centered 920px container for tight pairing) */
.award-archive-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.award-archive-item {
max-width: 940px;
margin: 0 auto;
width: 100%;
padding: 1rem 0;
border-bottom: none;
}
/* Compact Architectural Photo Frame */
.award-archive-media {
position: relative;
width: 100%;
max-width: 350px;
aspect-ratio: 16 / 10.5;
border-radius: 14px;
overflow: hidden;
background-color: #f8fafc;
border: 1px solid #eef2f6;
margin: 0 auto;
}
.award-archive-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.award-archive-item:hover .award-archive-img {
transform: scale(1.04);
}
/* Award Archive Placeholder inherits canonical blank image placeholder design */
/* Editorial Body & Typography (Title -> Recipient -> Date -> Narrative) */
.award-archive-body {
display: flex;
flex-direction: column;
justify-content: center;
}
/* 1. Title First */
.award-archive-title {
font-size: clamp(1.15rem, 1.55vw, 1.35rem);
font-weight: 700;
color: var(--brand-navy);
line-height: 1.3;
margin-bottom: 0.35rem;
}
/* 2. Recipient & Metadata line */
.award-archive-recipient {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.45rem;
line-height: 1.4;
}
.award-meta-recipient-name {
font-weight: 600;
color: var(--brand-navy);
}
.award-archive-recipient span + span::before {
content: '\00B7';
margin: 0 0.35rem;
font-weight: 700;
color: var(--brand-gold, #c9a84c);
}
/* 3. Date Line */
.award-archive-date-line {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.76rem;
font-weight: 600;
color: #94a3b8;
margin-bottom: 0.65rem;
}
.award-archive-date-line i {
color: var(--brand-gold, #c9a84c);
font-size: 0.8rem;
}
/* 4. Narrative Paragraphs */
.award-archive-narrative {
font-size: 0.86rem;
color: #506176;
line-height: 1.68;
margin-bottom: 0;
}
.award-archive-narrative p {
margin-bottom: 0.5rem;
}
.award-archive-narrative p:last-child {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.award-archive-item {
padding: 1.1rem 0;
}
.award-archive-media {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
.awards-exhibit-page {
padding: 1.25rem 0 2.5rem;
}
.award-archive-year-header {
margin-bottom: 1rem;
}
.award-archive-item {
padding: 0.85rem 0;
}
.award-archive-media {
aspect-ratio: 16 / 10;
border-radius: 12px;
}
.award-archive-title {
font-size: 1.08rem;
}
.award-archive-narrative {
font-size: 0.82rem;
line-height: 1.6;
}
}
/* =============================================
ACTIVITIES 2-COLUMN GRID PAGE (/activities)
============================================= */
.activities-page-section {
padding: 2.25rem 0 3.75rem;
background-color: #ffffff;
}
.activities-page-section .container {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.activity-year-block {
border-bottom: none;
margin-bottom: 2.75rem;
}
.activity-year-block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Centered Academic Year Title (No Borders) */
.activity-year-heading {
text-align: center;
position: relative;
padding-bottom: 0.25rem;
border: none;
}
.activity-year-title {
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
font-weight: 700;
color: var(--brand-navy);
letter-spacing: -0.01em;
display: inline-block;
border: none;
}
/* Individual Activity Card Item (Balanced equal side-by-side spacing across full page) */
.activity-card-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 100%;
}
/* Straight-Edged Media Frame (Matching Reference Image Proportions) */
.activity-media-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 0px;
overflow: hidden;
background-color: #0a1044;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.activity-card-item:hover .activity-media-box {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.activity-media-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0px;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.4s ease;
}
.activity-card-item:hover .activity-media-img {
transform: scale(1.04);
}
/* Activity Media Placeholder inherits canonical blank image placeholder design */
/* Dark Scrim Dimming on Hover */
.activity-media-box .activity-scrim-layer {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.48);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
.activity-card-item:hover .activity-media-box .activity-scrim-layer {
opacity: 1;
}
/* Ribbon Bar on Image: Stays at the bottom at all times (not moving to center on hover) */
.activity-media-box .activity-ribbon-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48px;
background: rgba(160, 118, 55, 0.75);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 0 1.25rem;
text-align: center;
z-index: 2;
border-radius: 0px;
pointer-events: none;
transition: background 0.35s ease;
}
/* On Hover: Keep ribbon at bottom as is, only image zooms */
.activity-card-item:hover .activity-media-box .activity-ribbon-bar {
bottom: 0;
height: 48px;
background: rgba(145, 100, 35, 0.88);
}
/* Title inside Ribbon */
.activity-media-box .activity-ribbon-title {
font-size: 1rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
transition: color 0.3s ease;
}
.activity-card-item:hover .activity-media-box .activity-ribbon-title {
color: #ffd700;
}
/* Content Area Directly Below Image */
.activity-content-box {
padding: 0.75rem 0.15rem 0;
display: flex;
flex-direction: column;
}
/* Metadata Line (Date · Section · Standard with Theme Gold Dots and Icons) */
.activity-meta-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem;
font-size: 0.82rem;
font-weight: 500;
color: #475569;
line-height: 1.4;
margin-bottom: 0.45rem;
}
.activity-meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #334155;
font-weight: 500;
}
.activity-meta-item i,
.activity-meta-item .text-gold {
color: var(--brand-gold, #c9a84c) !important;
font-size: 0.95rem;
}
.activity-meta-text {
color: #334155;
}
/* Universal Theme Gold Dot Separators */
.meta-separator-dot,
.detail-meta-dot {
color: var(--brand-gold, #c9a84c) !important;
font-weight: 700 !important;
font-size: 1rem;
line-height: 1;
margin: 0 0.45rem;
display: inline-flex;
align-items: center;
vertical-align: middle;
user-select: none;
}
/* Narrative Description Text */
.activity-narrative-text {
font-size: 0.86rem;
color: #475569;
line-height: 1.62;
margin: 0;
}
.activity-narrative-text p {
margin-bottom: 0.45rem;
}
.activity-narrative-text p:last-child {
margin-bottom: 0;
}
/* Responsive Styles */
@media (max-width: 767.98px) {
.activities-page-section {
padding: 1.5rem 0 2.5rem;
}
.activity-media-box {
aspect-ratio: 16 / 10.5;
}
.activity-media-box .activity-ribbon-bar {
height: 42px;
padding: 0 0.75rem;
}
.activity-media-box .activity-ribbon-title {
font-size: 0.88rem;
}
.activity-card-item:hover .activity-media-box .activity-ribbon-title {
font-size: 0.96rem;
}
.activity-content-box {
padding-top: 0.6rem;
}
.activity-meta-line {
font-size: 0.76rem;
}
.activity-narrative-text {
font-size: 0.82rem;
line-height: 1.55;
}
}
/* =============================================
ADMISSIONS EDITORIAL STYLES (Procedure, Enquiry, Pay Fees)
============================================= */
/* 1. Shared Editorial Eyebrow & Indicators */
.admission-editorial-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.admission-editorial-eyebrow .eyebrow-accent-bar {
width: 24px;
height: 2.5px;
background-color: var(--brand-gold, #d4a94a);
border-radius: 2px;
display: inline-block;
}
.admission-editorial-eyebrow .eyebrow-text {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-gold-alt, #b8860b);
}
.admission-year-indicator {
font-size: 0.95rem;
color: var(--brand-navy, #0a1044);
}
/* 2. Admission Procedure Dynamic Content */
.admission-dynamic-content {
font-size: 1.02rem;
line-height: 1.85;
color: #334155;
}
.admission-dynamic-content p {
margin-bottom: 1.35rem;
}
.admission-dynamic-content h2,
.admission-dynamic-content h3,
.admission-dynamic-content h4 {
color: var(--brand-navy, #0a1044);
font-weight: 700;
margin-top: 2rem;
margin-bottom: 0.85rem;
}
.admission-dynamic-content ul,
.admission-dynamic-content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.admission-dynamic-content li {
margin-bottom: 0.55rem;
}
/* 3. Editorial Current Admission Notice */
.admission-notice-editorial {
background: #fafaf8;
border: 1px solid #e8e5dc;
border-left: 4px solid var(--brand-gold, #d4a94a);
border-radius: 4px;
padding: 1.75rem 2rem;
}
.notice-editorial-header {
margin-bottom: 1rem;
border-bottom: 1px solid #ede8de;
padding-bottom: 0.75rem;
}
.notice-editorial-title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-navy, #0a1044);
margin-bottom: 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
.notice-gold-bar {
width: 8px;
height: 8px;
background-color: var(--brand-gold, #d4a94a);
border-radius: 2px;
display: inline-block;
}
.notice-editorial-body {
font-size: 0.96rem;
line-height: 1.75;
color: #475569;
}
.notice-editorial-body p:last-child {
margin-bottom: 0;
}
/* 4. Editorial View Fee Structure Button */
.btn-editorial-view-fees {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-navy, #0a1044);
background: transparent;
border: 1.5px solid var(--brand-navy, #0a1044);
border-radius: 4px;
padding: 0.65rem 1.4rem;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-editorial-view-fees:hover {
background: var(--brand-navy, #0a1044);
color: var(--brand-gold, #d4a94a);
border-color: var(--brand-navy, #0a1044);
}
/* 5. Simple Admission Enquiry Form */
.enquiry-form-container {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 2.5rem 2.25rem;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.03);
}
.enquiry-form-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
margin-bottom: 0.35rem;
}
.enquiry-input {
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 0.65rem 0.95rem;
font-size: 0.92rem;
color: #1e293b;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.enquiry-input:focus {
border-color: var(--brand-gold, #d4a94a);
box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.15);
}
.btn-submit-enquiry {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0.75rem 2rem;
background-color: var(--brand-navy, #0a1044);
color: #ffffff;
border: 1.5px solid var(--brand-navy, #0a1044);
border-radius: 6px;
font-size: 0.88rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.2);
transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
.btn-submit-enquiry:hover {
background-color: var(--brand-gold, #d4a94a);
color: #0a1044;
border-color: var(--brand-gold, #d4a94a);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 169, 74, 0.4);
}
.btn-submit-enquiry i {
font-size: 0.92rem;
transition: transform 0.25s ease;
}
.btn-submit-enquiry:hover i {
transform: translateX(4px);
}
/* 6. Pay Fees Page & Fee Structure Tables */
.fee-editorial-year-pills .nav-link {
border-radius: 4px;
padding: 0.4rem 1.15rem;
font-size: 0.86rem;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.fee-editorial-year-pills .nav-link.active {
background: var(--brand-navy, #0a1044);
color: #ffffff;
border-color: var(--brand-navy, #0a1044);
}
.fee-table-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 1.75rem 1.85rem;
box-shadow: 0 4px 16px rgba(10, 16, 68, 0.03);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.fee-table-card:hover {
border-color: var(--brand-gold, #d4a94a);
box-shadow: 0 8px 24px rgba(10, 16, 68, 0.06);
}
.fee-table-header {
padding-bottom: 0.85rem;
border-bottom: 2px solid var(--brand-navy, #0a1044);
margin-bottom: 1.15rem;
}
.fee-table-header .fee-section-title {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-navy, #0a1044);
}
.fee-year-tag {
font-size: 0.88rem;
font-weight: 700;
color: var(--brand-gold-alt, #b8860b);
letter-spacing: 0.03em;
}
.fee-clean-table {
width: 100%;
font-size: 0.92rem;
border-collapse: collapse;
}
.fee-th-row th {
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
font-weight: 700;
padding-bottom: 0.65rem;
border-bottom: 1px solid #e2e8f0;
}
.fee-clean-table tbody tr {
border-bottom: 1px solid #f1f5f9;
}
.fee-clean-table tbody tr:last-child {
border-bottom: none;
}
.fee-clean-table .fee-label-cell {
padding: 0.85rem 0;
font-weight: 500;
color: #334155;
vertical-align: middle;
}
.fee-label-text {
color: #334155;
}
.fee-clean-table .fee-val-cell {
padding: 0.85rem 0;
font-weight: 700;
color: var(--brand-navy, #0a1044);
white-space: nowrap;
vertical-align: middle;
}
.btn-fee-payment-action {
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-navy, #0a1044);
color: #ffffff;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.85rem 1.25rem;
border: 1.5px solid var(--brand-navy, #0a1044);
border-radius: 4px;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-fee-payment-action:hover {
background: var(--brand-gold, #d4a94a);
color: var(--brand-navy, #0a1044);
border-color: var(--brand-gold, #d4a94a);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(212, 169, 74, 0.3);
}
/* 7. Fee Instructions Point-Wise Section (Matching Tradition Section on The School Page) */
.fee-instructions-editorial-body {
color: #475569;
font-size: 0.92rem;
line-height: 1.8;
}
.fee-instructions-editorial-body > p {
font-size: 0.92rem;
line-height: 1.8;
color: #475569;
margin: 0 0 1.25rem 0;
}
.fee-instructions-editorial-body > p strong,
.fee-instructions-editorial-body > p b {
color: var(--brand-navy, #0a1044);
font-weight: 600;
}
.fee-instructions-editorial-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.fee-instructions-editorial-body ul li {
position: relative;
padding-left: 1.45rem;
margin-bottom: 0.9rem;
font-size: 0.91rem;
line-height: 1.75;
color: #475569;
border: none;
background-color: transparent;
}
.fee-instructions-editorial-body ul li:last-child {
margin-bottom: 0;
}
.fee-instructions-editorial-body ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold, #d4a94a);
transform: rotate(45deg);
border-radius: 1px;
flex-shrink: 0;
}
.fee-instructions-editorial-body ul li strong,
.fee-instructions-editorial-body ul li b {
color: var(--brand-navy, #0a1044);
font-weight: 600;
display: inline-block;
margin-right: 0.25rem;
}
/* =============================================
Admission Procedure Editorial Presentation
============================================= */
.admission-proc-header {
text-align: center;
margin-bottom: 2rem;
}
.admission-proc-main-title {
font-size: 2.1rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.3;
margin-bottom: 0.4rem;
}
.admission-proc-session-text {
font-size: 1.02rem;
font-weight: 500;
color: #64748b;
margin-bottom: 0.85rem;
}
.admission-proc-session-text span {
color: var(--brand-gold-alt, #b8860b);
font-weight: 700;
}
.admission-proc-accent-bar {
width: 48px;
height: 3px;
background-color: var(--brand-gold, #d4a94a);
margin: 0 auto;
border-radius: 2px;
}
/* Themed Clean Important Notice Panel (No left border, no badges) */
.admission-notice-panel {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 1.35rem 1.65rem;
margin-bottom: 2rem;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.03);
}
.admission-notice-panel-header {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--brand-navy, #0a1044);
text-transform: uppercase;
padding-bottom: 0.65rem;
border-bottom: 1px solid #f1f5f9;
margin-bottom: 1rem;
}
.admission-notice-panel-body {
font-size: 0.92rem;
line-height: 1.75;
color: #475569;
}
.admission-notice-panel-body ul,
.admission-notice-panel-body ol {
padding-left: 0;
list-style: none;
margin: 0;
}
.admission-notice-panel-body ul li,
.admission-notice-panel-body ol li {
position: relative;
padding-left: 1.45rem;
margin-bottom: 0.65rem;
font-size: 0.91rem;
line-height: 1.7;
color: #475569;
}
.admission-notice-panel-body ul li:last-child,
.admission-notice-panel-body ol li:last-child {
margin-bottom: 0;
}
.admission-notice-panel-body ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 7px;
height: 7px;
background-color: var(--brand-gold, #d4a94a);
transform: rotate(45deg);
border-radius: 1px;
}
.admission-notice-panel-body strong,
.admission-notice-panel-body b {
color: var(--brand-navy, #0a1044);
font-weight: 600;
}
/* Dynamic Admission Editorial Description */
.admission-proc-body {
font-size: 0.94rem;
line-height: 1.75;
color: #334155;
}
.admission-proc-body h1,
.admission-proc-body h2,
.admission-proc-body h3,
.admission-proc-body h4,
.admission-proc-body h5,
.admission-proc-body h6 {
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
margin-top: 1.85rem;
margin-bottom: 0.85rem;
padding-left: 0.75rem;
border-left: 3.5px solid var(--brand-gold, #d4a94a);
line-height: 1.35;
}
.admission-proc-body p {
font-size: 0.94rem;
line-height: 1.75;
color: #475569;
margin-bottom: 0.95rem;
}
.admission-proc-body p strong,
.admission-proc-body p b,
.admission-proc-body strong,
.admission-proc-body b {
color: var(--brand-navy, #0a1044);
font-weight: 600;
}
.admission-proc-body ul {
list-style: none;
padding: 0;
margin: 0 0 1.35rem 0;
}
.admission-proc-body ul li {
position: relative;
padding-left: 1.45rem;
margin-bottom: 0.65rem;
font-size: 0.92rem;
line-height: 1.7;
color: #475569;
}
.admission-proc-body ul li:last-child {
margin-bottom: 0;
}
.admission-proc-body ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 6.5px;
height: 6.5px;
background-color: var(--brand-gold, #d4a94a);
transform: rotate(45deg);
border-radius: 1px;
}
.admission-proc-body ol {
padding-left: 1.35rem;
margin: 0 0 1.35rem 0;
}
.admission-proc-body ol li {
padding-left: 0.35rem;
margin-bottom: 0.65rem;
font-size: 0.92rem;
line-height: 1.7;
color: #475569;
}
.admission-proc-body ol li::marker {
color: var(--brand-gold-alt, #b8860b);
font-weight: 700;
}
.admission-proc-body a {
color: var(--brand-navy, #0a1044);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s ease;
}
.admission-proc-body a:hover {
color: var(--brand-gold, #d4a94a);
}
.admission-proc-body table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
overflow: hidden;
}
.admission-proc-body table th,
.admission-proc-body table td {
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
font-size: 0.9rem;
color: #475569;
}
.admission-proc-body table th {
background-color: #f8fafc;
color: var(--brand-navy, #0a1044);
font-weight: 600;
}
.admission-proc-body blockquote {
border-left: 3.5px solid var(--brand-gold, #d4a94a);
padding: 0.75rem 1.25rem;
background: #f8fafc;
margin: 1.25rem 0;
color: #475569;
font-style: italic;
border-radius: 0 6px 6px 0;
}
/* Fee Structure CTA Box */
.admission-fee-cta-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 2rem 2.25rem;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.admission-fee-cta-box:hover {
border-color: var(--brand-gold, #d4a94a);
box-shadow: 0 6px 20px rgba(10, 16, 68, 0.05);
}
.admission-fee-cta-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.35;
}
.admission-fee-cta-desc {
font-size: 0.9rem;
color: #64748b;
line-height: 1.6;
}
@media (max-width: 767.98px) {
.enquiry-form-container {
padding: 1.75rem 1.25rem;
}
.admission-notice-editorial {
padding: 1.25rem 1.25rem;
}
.admission-proc-main-title {
font-size: 1.6rem;
}
.admission-notice-panel {
padding: 1.15rem 1.15rem;
}
.admission-fee-cta-box {
padding: 1.5rem 1.25rem;
text-align: center;
}
.admission-fee-cta-box .btn-fee-payment-action {
width: 100%;
justify-content: center;
}
.fee-table-card {
padding: 1.25rem 1rem;
}
.btn-fee-payment-action {
font-size: 0.76rem;
padding: 0.75rem 1rem;
}
}
/* =============================================
DYNAMIC SECTION ALTERNATING BACKGROUND UTILITIES
Ensures seamless alternating backgrounds even
when dynamic sections are missing or empty.
============================================= */
/* Home Page Alternating Sections */
.home-section-white {
background-color: #ffffff !important;
}
.home-section-alt {
background-color: #f8fafc !important;
}
/* History Page Alternating Sections */
.history-section-cream {
background-color: #faf7f0 !important;
border-bottom: 1px solid #ede8dc;
}
.history-section-white {
background-color: #ffffff !important;
border-bottom: 1px solid #f0f2f6;
}
/* =============================================
UNIVERSAL SECTION-SPECIFIC ANCHOR REDIRECTION
Ensures section anchors are never obscured by
the sticky header and clearly identified.
============================================= */
#emblem,
#founder,
#pillars,
#principals,
#admin-staff,
#headmasters,
#unsung-heroes,
#alumni-info,
#office-bearers,
#fee-structure,
#fee-instructions,
#heroSlider,
#toppers,
#awards,
#news,
#events,
.school-guide-section {
scroll-margin-top: 95px;
}
.section-preview-highlight {
outline: 2px dashed var(--brand-gold, #d4a94a) !important;
outline-offset: 6px !important;
border-radius: 4px;
transition: outline 0.4s ease;
}
/* =============================================
SHINING STARS OF LOYOLA — ALTERNATING SHOWCASE
Creative Frame, Alternating Backgrounds & Gold Accents
============================================= */
.shining-stars-lead-header {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding: 3.5rem 1rem 3rem;
}
.shining-stars-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brand-gold, #c9a84c);
margin-bottom: 0.85rem;
}
.shining-stars-main-title {
font-size: clamp(2rem, 3.2vw, 2.75rem);
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.2;
margin-bottom: 1rem;
}
.shining-stars-lead-desc {
font-size: 1.05rem;
color: #506176;
line-height: 1.8;
max-width: 680px;
margin: 0 auto;
}
/* Alternating Showcase Container */
.shining-stars-exhibit-list {
width: 100%;
}
/* Individual Star Item / Strip */
.star-exhibit-item {
position: relative;
width: 100%;
padding: 4.5rem 0;
transition: background-color 0.3s ease;
}
/* Background 1: Pure Crisp White (First section & even items) */
.star-item-bg-primary {
background-color: #ffffff;
}
/* Background 2: Warm Gold-Tinted Tone #faf7f0 (Following & odd items) */
.star-item-bg-alternate {
background-color: #faf7f0;
border-top: 1px solid rgba(212, 169, 74, 0.16);
border-bottom: 1px solid rgba(212, 169, 74, 0.16);
}
/* =============================================
GEOMETRIC FRAME PORTRAIT WITH THIN GOLD CORNER ACCENTS
Reference Style: Sleek Thin Chamfered Brackets in Bottom-Left & Top-Right
============================================= */
.star-image-frame-wrapper {
position: relative;
width: 300px;
max-width: 100%;
height: 360px;
margin: 0 auto;
}
/* Thin Gold Corner Accent Base (Strict School Theme Gold #d4a94a) */
.star-corner-accent {
position: absolute;
width: 85px;
height: 105px;
background-color: var(--brand-gold, #d4a94a);
filter: drop-shadow(0 2px 6px rgba(212, 169, 74, 0.3));
z-index: 1;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
/* Bottom-Left Thin Chamfered Bracket (8px thickness) */
.star-corner-accent-bl {
bottom: -8px;
left: -8px;
clip-path: polygon(0 0, 8px 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 100% 100%, 0 100%);
}
/* Top-Right Thin Chamfered Bracket (8px thickness) */
.star-corner-accent-tr {
top: -8px;
right: -8px;
clip-path: polygon(0 0, 8px 8px, calc(100% - 8px) 8px, calc(100% - 8px) calc(100% - 8px), 100% 100%, 100% 0);
}
/* Hover Micro-Interactions: Subtle Outward Accent Expansion */
.star-image-frame-wrapper:hover .star-corner-accent-bl {
transform: translate(-3px, 3px);
filter: drop-shadow(0 4px 10px rgba(212, 169, 74, 0.4));
}
.star-image-frame-wrapper:hover .star-corner-accent-tr {
transform: translate(3px, -3px);
filter: drop-shadow(0 4px 10px rgba(212, 169, 74, 0.4));
}
/* Foreground Photo Card with Crisp White Border */
.star-photo-card {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
background-color: #ffffff;
border: 4px solid #ffffff;
box-shadow: 0 12px 30px -6px rgba(10, 16, 68, 0.12);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.star-image-frame-wrapper:hover .star-photo-card {
transform: translateY(-4px);
box-shadow: 0 18px 40px -8px rgba(10, 16, 68, 0.16);
}
.star-photo-card-img {
width: 100%;
height: 100%;
max-width: 300px;
max-height: 360px;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.star-image-frame-wrapper:hover .star-photo-card-img {
transform: scale(1.03);
}
/* Fallback Seal Placeholder */
.star-photo-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #0a1044 0%, #172554 100%);
color: #ffffff;
text-align: center;
padding: 1.5rem;
}
.star-fallback-seal {
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(212, 169, 74, 0.16);
border: 2px solid rgba(212, 169, 74, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: #d4a94a;
margin-bottom: 0.75rem;
}
.star-fallback-label {
font-size: 0.85rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.5px;
}
/* Content Side (No Box, Open Breathable Layout) */
.star-content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.5rem 0.5rem;
}
/* 1. Profession First — Clean Typography (NO BADGE) */
.star-profession-eyebrow {
font-size: 0.88rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--brand-gold, #c9a84c);
line-height: 1.45;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.45rem;
}
.star-profession-eyebrow i {
font-size: 0.95rem;
color: var(--brand-gold, #c9a84c);
flex-shrink: 0;
}
/* 2. Name — Website's Default Font */
.star-name-heading {
font-size: 20px;
font-weight: 700;
color: var(--brand-navy);
line-height: 1.22;
margin-bottom: 0.65rem;
}
/* 3. Batch Year (if available, display; otherwise not) — Clean text, NO badge */
.star-batch-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: #64748b;
margin-bottom: 1.15rem;
}
.star-batch-meta i {
color: var(--brand-gold, #c9a84c);
font-size: 0.9rem;
}
/* 4. Narrative Description */
.star-narrative-body {
font-size: 0.96rem;
color: #475569;
line-height: 1.8;
}
.star-narrative-body p {
margin-bottom: 0.85rem;
}
.star-narrative-body p:last-child {
margin-bottom: 0;
}
/* Responsive Breakpoints */
@media (max-width: 991.98px) {
.star-exhibit-item {
padding: 3.25rem 0;
}
.star-content-wrap {
padding: 0;
}
}
@media (max-width: 767.98px) {
.star-exhibit-item {
padding: 2.5rem 0;
}
.star-image-frame-wrapper {
width: 100%;
max-width: 270px;
height: 324px;
margin-bottom: 1.5rem;
}
.star-corner-accent {
width: 68px;
height: 84px;
}
.star-corner-accent-bl {
bottom: -6px;
left: -6px;
clip-path: polygon(0 0, 6px 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 100% 100%, 0 100%);
}
.star-corner-accent-tr {
top: -6px;
right: -6px;
clip-path: polygon(0 0, 6px 6px, calc(100% - 6px) 6px, calc(100% - 6px) calc(100% - 6px), 100% 100%, 100% 0);
}
.star-name-heading {
margin-bottom: 0.5rem;
}
}
/* =============================================
ACTIVITIES PAGE — TYPE-WISE SECTION GROUPING
============================================= */
.activity-type-group {
position: relative;
}
.activity-type-group + .activity-type-group {
margin-top: 4.5rem;
padding-top: 3.5rem;
border-top: 1px solid #f1f5f9;
}
.activity-type-section-header {
margin-bottom: 2.25rem;
}
@media (max-width: 767.98px) {
.activity-type-group + .activity-type-group {
margin-top: 3rem;
padding-top: 2rem;
}
.activity-type-section-header {
margin-bottom: 1.5rem;
}
}
/* =============================================
ACTIVITIES MODULE — EVENTS-PAGE STRUCTURED REDESIGN
============================================= */
/* Main Activities Listing Section */
.activities-listing-page {
padding: 3.5rem 0 5rem;
background-color: #ffffff;
}
.activities-subsection {
position: relative;
}
/* ─────────────────────────────────────────────
ACTIVITY CARD (MATCHING EVENTS CARD RADIUS & LAYOUT)
───────────────────────────────────────────── */
.ref-activity-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(10, 16, 68, 0.06);
border: 1px solid #eef2f6;
text-decoration: none;
color: inherit;
position: relative;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease;
}
.ref-activity-card:hover,
.ref-activity-card:focus {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(10, 16, 68, 0.1);
border-color: #cbd5e1;
outline: none;
color: inherit;
}
/* 16:9 Image Aspect Ratio (Matching Events) */
.ref-activity-cover-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #f1f5f9;
}
.ref-activity-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-activity-card:hover .ref-activity-img {
transform: scale(1.04);
}
.ref-activity-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
}
/* Equal-Height Card Body (Matching Events) */
.ref-activity-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.25rem 1.35rem 1.15rem;
background: #ffffff;
}
/* Activity Date inside card content (Matching Events style) */
.ref-activity-card-date {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
display: inline-flex;
align-items: center;
letter-spacing: 0.01em;
}
.ref-activity-card-date i {
color: var(--brand-gold, #d4a94a);
font-size: 0.82rem;
}
.ref-activity-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-navy, #0a1044);
line-height: 1.38;
margin-bottom: 0.5rem;
transition: color 0.2s ease;
}
.ref-activity-card:hover .ref-activity-title {
color: var(--brand-gold, #d4a94a);
}
.ref-activity-desc {
font-size: 0.86rem;
line-height: 1.55;
color: #64748b;
margin-bottom: 1.1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.ref-activity-meta-line {
margin-top: auto;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.78rem;
color: #64748b;
font-weight: 500;
gap: 0.5rem;
}
.ref-activity-meta-left,
.ref-event-meta-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.ref-activity-meta-item,
.ref-event-meta-venue,
.ref-event-meta-standard {
color: #64748b;
white-space: nowrap;
}
.ref-meta-dot {
color: #cbd5e1;
}
.ref-activity-action-arrow {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand-navy, #0a1044);
transition: transform 0.2s ease, color 0.2s ease;
}
.ref-activity-card:hover .ref-activity-action-arrow {
color: var(--brand-gold, #d4a94a);
transform: translateX(3px);
}
/* ─────────────────────────────────────────────
ACTIVITIES MOSAIC GALLERY SECTION
───────────────────────────────────────────── */
.activities-mosaic-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.activity-gallery-thumb {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 0px !important;
background: #0a1044;
cursor: pointer;
border: 1px solid #ede8dc;
box-shadow: 0 4px 14px rgba(10, 16, 68, 0.06);
}
.activity-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.activity-gallery-thumb:hover .activity-gallery-img {
transform: scale(1.08);
}
.activity-gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 16, 68, 0.85) 0%, rgba(10, 16, 68, 0.2) 60%, transparent 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0.85rem 1rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.activity-gallery-thumb:hover .activity-gallery-overlay,
.activity-gallery-thumb:focus .activity-gallery-overlay {
opacity: 1;
}
.activity-gallery-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.act-gallery-title {
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.act-gallery-date {
color: var(--brand-gold, #d4a94a);
font-size: 0.72rem;
font-weight: 500;
}
/* ─────────────────────────────────────────────
FULL ACTIVITY DETAIL PAGE
───────────────────────────────────────────── */
.activity-detail-body-section {
background-color: #ffffff;
}
.activity-detail-cover-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 14px;
background-color: #f1f5f9;
box-shadow: 0 6px 20px rgba(10, 16, 68, 0.06);
}
.activity-detail-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 14px;
}
.activity-rich-description {
font-size: 1.02rem;
line-height: 1.8;
color: #334155;
}
/* Responsive adjustments */
@media (max-width: 1199.98px) {
.activities-mosaic-gallery {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767.98px) {
.activities-listing-page {
padding: 2.25rem 0 3.5rem;
}
.activities-mosaic-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
}
@media (max-width: 575.98px) {
.activities-mosaic-gallery {
grid-template-columns: 1fr;
}
}
/* ─────────────────────────────────────────────
ON-SCROLL INFINITE LOAD ACTIVITIES LOADER
───────────────────────────────────────────── */
.activity-scroll-loader-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 55px;
padding: 1.5rem 0 1rem;
width: 100%;
}
.activity-scroll-spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(10, 16, 68, 0.12);
border-top-color: var(--brand-navy, #0a1044);
border-right-color: var(--brand-gold, #d4a94a);
border-radius: 50%;
animation: activitySpinLoader 0.75s linear infinite;
display: inline-block;
}
@keyframes activitySpinLoader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeInActivityCard {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============================================
WEBSITE-WIDE CONTENT & IMAGE PROTECTION
============================================= */
/* Disable text selection across all frontend elements */
body,
body *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
/* Allow text selection in form inputs and textareas so users can type and submit forms */
input, textarea, select, [contenteditable="true"] {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
/* Disable image dragging, saving, and mobile touch callout */
img, picture, svg, canvas, video, figure {
-webkit-user-drag: none !important;
-khtml-user-drag: none !important;
-moz-user-drag: none !important;
-o-user-drag: none !important;
user-drag: none !important;
-webkit-touch-callout: none !important;
}
/* Ensure links surrounding images remain fully clickable */
a img {
pointer-events: auto;
}
/* Screen Capture & Snipping Tool Blur Protection on Window Blur */
body.screen-capture-protected {
filter: blur(16px) !important;
transition: filter 0.15s ease-in-out;
}
/* Print Protection */
@media print {
html, body {
display: none !important;
visibility: hidden !important;
}
}