/* ================================================= SHAHEEN AIR FORCE COLLEGE - MAIN STYLESHEET Author: Senior Frontend Team Version: 1.0 ================================================= */ /* ============ ROOT VARIABLES ============ */ :root { --primary-color: #0a2647; /* Deep Navy Blue */ --primary-dark: #061a35; --primary-light: #144272; --secondary-color: #205295; --accent-color: #d4a017; /* Gold */ --accent-light: #f4c430; --accent-dark: #b8860b; --crest-maroon: #8b1e2d; /* Tertiary accent from crest triangle */ --crest-maroon-dark: #6d1622; --text-dark: #1a1a2e; --text-light: #6c757d; --bg-light: #f8f9fc; --bg-light-blue: #eef2f9; --white: #ffffff; --border-color: #e3e6f0; --shadow-sm: 0 2px 4px rgba(10, 38, 71, 0.06); --shadow-md: 0 4px 20px rgba(10, 38, 71, 0.08); --shadow-lg: 0 10px 40px rgba(10, 38, 71, 0.12); --shadow-xl: 0 20px 60px rgba(10, 38, 71, 0.18); --gradient-primary: linear-gradient(135deg, #0a2647 0%, #205295 100%); --gradient-accent: linear-gradient(135deg, #d4a017 0%, #f4c430 100%); --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.2s ease; --font-primary: 'Poppins', system-ui, -apple-system, sans-serif; --font-heading: 'Playfair Display', Georgia, serif; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; } /* ============ GLOBAL RESET ============ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 160px; /* Contain horizontal overflow from AOS fade-left/right pre-animation transforms. Must be on (the viewport's overflow is taken from , NOT — a scroll container on would break the sticky navbar. On the root a scroll container still sticks to the viewport, so the navbar stays put. */ overflow-x: hidden; } body { font-family: var(--font-primary); font-size: 16px; line-height: 1.7; color: var(--text-dark); background-color: var(--white); /* NOTE: do NOT set overflow-x here — it makes a scroll container (overflow-x:hidden computes overflow-y:auto), which breaks the sticky navbar (it would stick to instead of the viewport and scroll away). Horizontal overflow is contained on via overflow-x:hidden. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--text-dark); line-height: 1.3; } p { color: var(--text-light); line-height: 1.8; } a { text-decoration: none; color: var(--primary-color); transition: var(--transition); } a:hover { color: var(--accent-color); } img { max-width: 100%; height: auto; } ul { list-style: none; } ::selection { background-color: var(--accent-color); color: var(--white); } /* ============ UTILITY CLASSES ============ */ .section-padding { padding: 90px 0; } .bg-light-blue { background-color: var(--bg-light-blue); } .section-header { max-width: 720px; margin: 0 auto 60px; } .section-tag { display: inline-block; padding: 6px 18px; background: rgba(212, 160, 23, 0.15); color: var(--accent-color); font-size: 13px; font-weight: 600; border-radius: 50px; margin-bottom: 18px; letter-spacing: 1px; text-transform: uppercase; } .section-title { font-size: 2.5rem; margin-bottom: 18px; color: var(--primary-color); font-weight: 700; } .section-subtitle { font-size: 1.05rem; color: var(--text-light); } .lead-text { font-size: 1.15rem; font-weight: 500; color: var(--primary-color); margin-bottom: 1.2rem; } /* Custom Buttons */ .btn-primary-custom { background: var(--gradient-primary); color: var(--white); border: none; padding: 12px 32px; border-radius: 50px; font-weight: 600; transition: var(--transition); position: relative; overflow: hidden; } .btn-primary-custom:hover { background: var(--gradient-accent); color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn-warning { background: var(--gradient-accent); border: none; color: var(--primary-color); font-weight: 600; padding: 12px 32px; border-radius: 50px; transition: var(--transition); } .btn-warning:hover { background: var(--accent-color); color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn-outline-light { border-radius: 50px; padding: 12px 32px; font-weight: 600; border-width: 2px; transition: var(--transition); } .btn-outline-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn-link { color: var(--primary-color); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); } .btn-link:hover { color: var(--accent-color); gap: 10px; } /* ============ PRELOADER ============ */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-primary); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } .preloader-inner { text-align: center; } #preloader.fade-out { opacity: 0; visibility: hidden; } /* ============ TOP HEADER BAR ============ */ .top-header { --top-header-height: 42px; background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-color) 55%, var(--primary-light) 100%); color: rgba(255, 255, 255, 0.92); font-size: 13.5px; border-bottom: 2px solid var(--accent-color); } .top-header-inner { display: flex; align-items: stretch; min-height: var(--top-header-height); } /* ---- quick contact (left) ---- */ .top-contact { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0 22px 0 0; list-style: none; flex-shrink: 0; } .top-contact li { display: flex; align-items: center; } .top-contact a { color: rgba(255, 255, 255, 0.9); font-size: 13.5px; font-weight: 400; display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s ease; } .top-contact a:hover { color: var(--accent-light); } .top-contact i { color: var(--accent-color); font-size: 13px; } /* ---- latest notice strip (center) ---- */ .latest-notice-strip { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(255, 255, 255, 0.12); } .latest-notice-label { background: var(--gradient-accent); color: var(--primary-dark); font-weight: 700; padding: 0 26px 0 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; flex-shrink: 0; letter-spacing: 0.3px; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } .latest-notice-label i { font-size: 13px; } .latest-notice-marquee { overflow: hidden; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .latest-notice-track { display: inline-flex; white-space: nowrap; animation: latestNoticeScroll 34s linear infinite; padding-left: 16px; } .latest-notice-marquee:hover .latest-notice-track { animation-play-state: paused; } .latest-notice-item { color: rgba(255, 255, 255, 0.92); font-weight: 500; font-size: 13.5px; padding: 0 28px; position: relative; } .latest-notice-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent-color); } @keyframes latestNoticeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- right cluster: social + Login EMS (right) ---- */ .top-header-right { display: flex; align-items: center; gap: 16px; padding-left: 22px; flex-shrink: 0; } .social-icons { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .social-icons a { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); font-size: 14px; line-height: 1; background: rgba(255, 255, 255, 0.14); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .social-icons a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .social-icons .social-yt:hover { background: #ff0000; } .social-icons .social-fb:hover { background: #1877f2; } .social-icons .social-k { font-weight: 800; font-size: 13px; font-family: var(--font-primary); } .social-icons .social-k:hover { background: linear-gradient(135deg, #a23ab8 0%, #c23ba8 100%); } .social-icons .social-k span { line-height: 1; } .btn-Login-top { display: inline-flex; align-items: center; gap: 7px; background: var(--gradient-accent); border: none; color: var(--primary-dark); padding: 6px 22px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 1.4; box-shadow: 0 2px 8px rgba(212, 160, 23, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .btn-Login-top:hover { color: var(--primary-dark); transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 5px 14px rgba(212, 160, 23, 0.5); } /* ============ NAVBAR ============ */ .navbar-main { background: var(--white); box-shadow: var(--shadow-sm); padding: 0; transition: box-shadow 0.35s ease; z-index: 1030; display: block; /* Promote the sticky navbar to its own compositor layer so it repaints cleanly while scrolling. Without this, sub-pixel rounding of the sticky offset leaves a flickering 1px hairline at the seam with .top-header. NOTE: do NOT add `will-change: transform` here. A permanent will-change keeps the layer perpetually invalidated; on the home page the auto-playing carousel-fade hero composites every frame and the navbar layer drops a frame -> visible blink. translateZ(0) alone gives a stable layer. */ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .navbar-main > .brand-bar, .navbar-main > .nav-row { width: 100%; } /* ---- brand bar ---- */ .brand-bar { background: var(--white); padding: 16px 0; transition: padding 0.3s ease; } .brand-bar-inner { display: flex; align-items: center; justify-content: center; gap: 24px; } .brand-logo-img { flex-shrink: 0; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--white); border: 3px solid var(--bg-light-blue); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; padding: 4px; transition: width 0.3s ease, height 0.3s ease; } .brand-logo-img img { width: 100%; height: 100%; object-fit: contain; } .brand-logo-left { margin-right: 2px; } .brand-logo-right { margin-left: 2px; } .brand-text { flex: 0 1 auto; min-width: 0; text-align: center; } .brand-title { font-family: var(--font-heading); font-weight: 1000; color: var(--primary-color); /* font-size: 2rem; */ letter-spacing: 4.5px; line-height: 1.1; margin: 0; text-transform: uppercase; transition: font-size 0.3s ease; } .brand-sub { color: var(--text-light); font-size: 0.95rem; margin: 7px 0 0; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 7px; transition: opacity 0.25s ease, margin 0.3s ease; } .brand-sub i { color: var(--accent-color); } .brand-sub-divider { color: var(--border-color); } /* ---- nav row (navy bar, gold underline indicator) ---- */ .nav-row { background: var(--primary-color); border-top: 3px solid var(--accent-color); } .main-nav-links { display: flex; align-items: stretch; justify-content: center; margin: 0; padding: 0; flex-wrap: nowrap; } .main-nav-links .nav-item { display: flex; align-items: stretch; position: relative; } .main-nav-links .nav-link { display: flex; align-items: center; gap: 7px; padding: 15px 22px !important; color: rgba(255, 255, 255, 0.88); font-weight: 500; font-size: 14.5px; line-height: 1; letter-spacing: 0.2px; position: relative; transition: color 0.2s ease, background 0.2s ease; } /* gold underline lives on ::before so Bootstrap's ::after caret is untouched */ .main-nav-links .nav-link::before { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; background: var(--accent-color); transition: left 0.25s ease, right 0.25s ease; } /* Keep the parent menu highlighted while hovering the item OR its open submenu (the dropdown is a child of .nav-item, so .nav-item:hover stays true). */ .main-nav-links .nav-link:hover, .main-nav-links .nav-link.active, .main-nav-links .nav-item:hover > .nav-link, .main-nav-links .nav-item.show > .nav-link, .main-nav-links .nav-link.show { color: var(--white); background: rgba(255, 255, 255, 0.07); } .main-nav-links .nav-link:hover::before, .main-nav-links .nav-link.active::before, .main-nav-links .nav-item:hover > .nav-link::before, .main-nav-links .nav-item.show > .nav-link::before, .main-nav-links .nav-link.show::before { left: 14px; right: 14px; } .main-nav-links .dropdown-toggle::after { margin-left: 7px; vertical-align: middle; border-top-width: 5px; border-right-width: 4px; border-left-width: 4px; opacity: 0.8; } .main-nav-links .dropdown-menu { margin-top: 0; border: none; border-top: 3px solid var(--accent-color); border-radius: 0 0 var(--radius-md) var(--radius-md); min-width: 232px; padding: 8px; box-shadow: var(--shadow-lg); } /* ---- compact state on scroll ---- */ /* Scrolled state is PAINT-ONLY (box-shadow). Do NOT change the navbar's height/padding/logo size here: the navbar is sticky, so animating its height while the static .top-header re-enters the viewport on scroll-up makes the browser recompute the stuck position every frame -> the navbar jumps/dances and shifts layout (CLS). A constant-height navbar lets the native sticky transition stay perfectly smooth. */ .navbar-main.scrolled { box-shadow: var(--shadow-md); } .logo-wrap { display: flex; align-items: center; gap: 12px; } .logo-badge { width: 50px; height: 50px; background: var(--gradient-primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 12px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .logo-badge::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.6s; } .navbar-brand:hover .logo-badge::after { left: 100%; } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--primary-color); } .logo-sub { font-size: 11px; color: var(--accent-color); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .dropdown-menu { border: none; box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 10px; min-width: 220px; margin-top: 12px; border-top: 3px solid var(--accent-color); animation: fadeInDown 0.3s ease; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-item { padding: 9px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-dark); transition: var(--transition-fast); display: flex; align-items: center; gap: 9px; } .dropdown-item i { color: var(--accent-dark); width: 18px; text-align: center; } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-light-blue); color: var(--primary-color); padding-left: 20px; } .dropdown-item.active, .dropdown-item:active { background: var(--primary-color); color: var(--white); } .dropdown-item.active i, .dropdown-item:active i { color: var(--accent-light); } /* ---- animated hamburger toggler ---- */ .navbar-toggler { border: none; padding: 0; width: 46px; height: 40px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; flex-shrink: 0; } .navbar-toggler:focus { box-shadow: none; outline: none; } .navbar-toggler .toggler-bar { display: block; width: 27px; height: 3px; border-radius: 3px; background: var(--primary-color); transition: transform 0.3s ease, opacity 0.2s ease; } .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) { opacity: 0; } .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============ HERO SECTION ============ */ .hero-section { position: relative; } .carousel-item { aspect-ratio: 16 / 9; max-height: 90vh; min-height: 360px; background-size: cover; background-position: center; background-repeat: no-repeat; } .carousel-indicators { margin-bottom: 30px; z-index: 3; } .carousel-indicators button { width: 40px !important; height: 4px !important; border-radius: 2px !important; background: rgba(255, 255, 255, 0.5) !important; border: none !important; margin: 0 4px !important; transition: var(--transition); } .carousel-indicators button.active { background: var(--accent-color) !important; width: 60px !important; } .carousel-control-prev, .carousel-control-next { width: 5%; opacity: 0.8; z-index: 3; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 50px; height: 50px; background-color: rgba(212, 160, 23, 0.7); border-radius: 50%; background-size: 50%; transition: var(--transition); } .carousel-control-prev:hover .carousel-control-prev-icon, .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--accent-color); } /* ============ QUICK ACTION CARDS ============ */ .quick-actions { position: relative; margin-top: -80px; z-index: 5; padding-bottom: 60px; } .quick-card { background: var(--white); padding: 24px 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; display: block; height: 100%; max-width: 280px; margin-left: auto; margin-right: auto; transition: var(--transition); border-bottom: 4px solid var(--primary-color); color: var(--text-dark); } .quick-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-bottom-color: var(--accent-color); color: var(--text-dark); } .quick-icon { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; margin-bottom: 14px; transition: var(--transition); } .quick-card:hover .quick-icon { transform: rotateY(180deg); } .bg-primary-soft { background: rgba(10, 38, 71, 0.1); color: var(--primary-color); } .bg-warning-soft { background: rgba(212, 160, 23, 0.15); color: var(--accent-color); } .bg-success-soft { background: rgba(40, 167, 69, 0.12); color: #28a745; } .bg-danger-soft { background: rgba(220, 53, 69, 0.12); color: #dc3545; } .quick-card h4 { font-size: 1.05rem; margin-bottom: 6px; color: var(--primary-color); } .quick-card p { font-size: 13px; line-height: 1.55; margin-bottom: 10px; color: var(--text-light); } .quick-link { color: var(--accent-color); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); } .quick-card:hover .quick-link { gap: 12px; } /* ============ PRINCIPAL / CHAIRMAN WELCOME MESSAGE ============ */ .principal-welcome-section { padding: 30px 0 30px; background: var(--white); } .principal-welcome-section--stacked { padding-top: 0; padding-bottom: 50px; } .welcome-photo-card, .welcome-msg-card { background: var(--white); border: 1px solid #d8e3ef; border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(10, 38, 71, 0.04); height: 100%; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .welcome-photo-card:hover, .welcome-msg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent-color); } .welcome-photo-card { padding: 14px; display: flex; flex-direction: column; } .welcome-photo-frame { position: relative; width: 100%; /* Grow to fill the card height (which is driven by the message card), so the photo card height tracks the message card. min-height keeps the photo reasonable when stacked on mobile / very short messages. */ flex: 1 1 0; min-height: 260px; background: var(--bg-light-blue); border-radius: var(--radius-sm); overflow: hidden; } .welcome-photo-frame img { /* Absolute so the image never contributes intrinsic height — the frame's height comes purely from the flex fill, matching the message card. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; } .welcome-photo-card:hover .welcome-photo-frame img { transform: scale(1.06); } .welcome-photo-caption { text-align: center; margin: 14px 0 4px; font-size: 14px; color: var(--text-dark); font-weight: 500; } .welcome-msg-card { padding: 26px 32px 22px; display: flex; flex-direction: column; position: relative; border-left: 4px solid var(--accent-color); } .welcome-quote { color: var(--accent-color); font-size: 2.6rem; line-height: 0.6; opacity: 0.55; margin-bottom: 4px; transition: opacity 0.35s ease, transform 0.35s ease; } .welcome-msg-card:hover .welcome-quote { opacity: 0.95; transform: translateY(-2px); } .welcome-msg-title { font-family: var(--font-primary); color: var(--text-dark); font-weight: 700; font-size: 1.4rem; line-height: 1.2; margin: 0; } .welcome-msg-role { color: #2a90d0; font-family: var(--font-primary); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin: 4px 0 14px; } .welcome-msg-body { color: var(--text-dark); line-height: 1.95; text-align: justify; margin: 0 0 16px; font-size: 17px; } .welcome-msg-actions { display: flex; justify-content: flex-end; } .btn-read-more { display: inline-flex; align-items: center; border: 1.5px solid #2a90d0; color: #2a90d0; background: var(--white); padding: 8px 26px; border-radius: 50px; font-weight: 500; font-size: 14px; line-height: 1.4; transition: var(--transition-fast); } .btn-read-more:hover { background: #2a90d0; color: var(--white); } @media (max-width: 991px) { .welcome-msg-card { padding: 20px; } .welcome-msg-title { font-size: 1.2rem; } .welcome-msg-role { font-size: 1.05rem; } } /* ============ NOTICE SECTION ============ */ .notice-section { background: var(--bg-light); } .notice-ticker { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; box-shadow: var(--shadow-md); margin-bottom: 60px; border-left: 5px solid var(--accent-color); } .ticker-label { background: var(--gradient-primary); color: var(--white); padding: 18px 28px; font-weight: 600; white-space: nowrap; font-size: 15px; } .ticker-label i { margin-right: 6px; color: var(--accent-color); } .ticker-content { flex: 1; overflow: hidden; padding: 0 20px; } .ticker-wrap { display: flex; gap: 50px; animation: tickerScroll 40s linear infinite; white-space: nowrap; will-change: transform; } .ticker-item { color: var(--text-dark); font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; } .ticker-item i { color: var(--accent-color); font-size: 20px; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .notice-ticker:hover .ticker-wrap { animation-play-state: paused; } .notice-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); display: flex; gap: 22px; transition: var(--transition); height: 100%; border: 1px solid var(--border-color); } .notice-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--accent-color); } .notice-date { background: var(--gradient-primary); color: var(--white); width: 75px; min-width: 75px; height: 90px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .notice-date::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-color); } .notice-date .day { font-size: 26px; font-weight: 800; line-height: 1; } .notice-date .month { font-size: 12px; font-weight: 600; text-transform: uppercase; margin-top: 4px; } .notice-date .year { font-size: 11px; opacity: 0.8; margin-top: 2px; } .notice-body { flex: 1; } .notice-badge { display: inline-block; background: var(--primary-color); color: var(--white); font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .notice-body h5 { font-size: 1.05rem; margin-bottom: 8px; line-height: 1.4; } .notice-body h5 a { color: var(--primary-color); } .notice-body h5 a:hover { color: var(--accent-color); } .notice-body p { font-size: 13.5px; line-height: 1.6; margin-bottom: 12px; } .notice-read { color: var(--accent-color); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; transition: var(--transition); } .notice-read:hover { gap: 10px; color: var(--primary-color); } /* ============ ABOUT SECTION ============ */ .about-image-wrap { position: relative; padding: 30px 30px 0 0; } .about-img-main { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 100%; } .about-img-small { position: absolute; bottom: -30px; right: -10px; width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius-lg); border: 6px solid var(--white); box-shadow: var(--shadow-lg); } .about-experience { position: absolute; top: 0; left: 0; background: var(--gradient-accent); color: var(--primary-color); padding: 20px 25px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .about-experience h3 { font-size: 2.2rem; margin: 0; font-weight: 800; color: var(--primary-color); } .about-experience p { font-size: 13px; margin: 0; font-weight: 600; color: var(--primary-color); } .about-features { margin: 25px 0; } .about-features li { padding: 8px 0; color: var(--text-dark); font-weight: 500; display: flex; align-items: center; gap: 10px; } .about-features li i { color: var(--accent-color); font-size: 20px; } /* ============ MESSAGE SECTION ============ */ .message-card { background: var(--white); border-radius: var(--radius-lg); padding: 35px; box-shadow: var(--shadow-md); text-align: center; transition: var(--transition); height: 100%; border: 1px solid var(--border-color); position: relative; overflow: hidden; } .message-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--gradient-accent); } .message-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .message-img { width: 130px; height: 130px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; border: 4px solid var(--white); box-shadow: var(--shadow-md); position: relative; } .message-img::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed var(--accent-color); animation: rotate 20s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .message-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .message-content h4 { color: var(--primary-color); font-size: 1.3rem; margin-bottom: 5px; } .designation { display: block; color: var(--accent-color); font-size: 14px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .quote-icon { font-size: 2.5rem; color: var(--accent-color); opacity: 0.4; line-height: 1; margin-bottom: 5px; } .message-content p { font-style: italic; margin-bottom: 18px; color: var(--text-dark); line-height: 1.7; } /* ============ TEAM SECTION ============ */ .team-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); text-align: center; height: 100%; } .team-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .team-img { position: relative; text-align: center; padding-top: 42px; } .team-img img { width: 100%; max-width: 230px; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; border: 5px solid rgba(212, 160, 23, 0.45); box-shadow: var(--shadow-md); background: var(--bg-light-blue); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease; } .team-card:hover .team-img img { transform: scale(1.05); border-color: var(--accent-color); } .team-info { padding: 24px 18px 38px; } .team-info h5 { font-size: 1.05rem; margin-bottom: 8px; color: var(--primary-color); } .team-info span { display: inline-block; padding: 3px 14px; border-radius: 50px; background: rgba(212, 160, 23, 0.12); color: var(--accent-dark); font-size: 13px; font-weight: 600; } /* ============ STAFF DIRECTORY (Teaching / Non-Teaching) ============ */ .staff-group { margin-bottom: 55px; } .staff-group:last-child { margin-bottom: 0; } .staff-group-title { font-weight: 700; color: var(--primary-color); margin-bottom: 30px; padding-left: 16px; border-left: 4px solid var(--accent-color); font-size: 1.5rem; } /* staff directory filter bar (teaching staff) */ .staff-filter-bar { margin-bottom: 45px; } .staff-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0 0 26px; } .staff-tab { font-weight: 600; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 50px; padding: 9px 30px; background: transparent; transition: var(--transition); } .staff-tab span { opacity: 0.7; font-weight: 500; } .staff-tab:hover { background: rgba(10, 38, 71, 0.08); } .staff-tab.active { background: var(--primary-color); color: var(--white); } .staff-controls { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; max-width: 900px; margin: 0 auto; } .staff-controls .staff-search { position: relative; flex: 1 1 280px; min-width: 230px; } .staff-controls .staff-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--accent-dark); } .staff-controls .staff-search input { padding-left: 42px; } .staff-controls .form-select { flex: 1 1 190px; min-width: 170px; } .staff-count { text-align: center; margin: 24px 0 0; color: #6c757d; font-weight: 500; } .staff-col.hide { display: none !important; } .staff-dept { font-size: 13px; color: #6c757d; margin: 0 0 10px; } .staff-empty { text-align: center; padding: 60px 0; color: #6c757d; } .staff-empty i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5; } /* icon placeholder avatar (used until real photos are added) */ .team-img .avatar-ph { width: 100%; max-width: 230px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; border: 5px solid rgba(212, 160, 23, 0.45); background: var(--bg-light-blue); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 4.5rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease; } .team-card:hover .team-img .avatar-ph { transform: scale(1.05); border-color: var(--accent-color); } /* ============ FEATURES SECTION ============ */ .feature-card { background: var(--white); padding: 35px 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); height: 100%; border: 1px solid var(--border-color); position: relative; overflow: hidden; } .feature-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background: var(--gradient-accent); transition: width 0.4s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: transparent; } .feature-card:hover::after { width: 100%; } .feature-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: var(--gradient-primary); color: var(--white); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 36px; transition: var(--transition); } .feature-card:hover .feature-icon { background: var(--gradient-accent); color: var(--primary-color); transform: rotate(-10deg) scale(1.05); } .feature-card h4 { color: var(--primary-color); font-size: 1.2rem; margin-bottom: 12px; } .feature-card p { font-size: 14.5px; line-height: 1.7; margin: 0; } /* ============ STATS SECTION ============ */ .stats-section { position: relative; background: url('../images/bafsk-campus.jpg') no-repeat center / cover; padding: 90px 0; background-attachment: fixed; } .stats-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 38, 71, 0.95), rgba(32, 82, 149, 0.92)); } .stats-section .container { position: relative; z-index: 2; } .stat-item { color: var(--white); padding: 30px 15px; transition: var(--transition); } .stat-item:hover { transform: translateY(-8px); } .stat-icon { width: 75px; height: 75px; margin: 0 auto 18px; border-radius: 50%; background: rgba(212, 160, 23, 0.2); border: 2px solid var(--accent-color); color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: var(--transition); } .stat-item:hover .stat-icon { background: var(--accent-color); color: var(--white); transform: rotateY(180deg); } .stat-item h2 { font-size: 3.2rem; color: var(--white); margin-bottom: 8px; font-weight: 800; display: inline-block; } .counter-suffix { font-size: 3.2rem; color: var(--white); font-weight: 800; font-family: var(--font-heading); } .stat-item p { color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* ---- Auto-rotating SSC / HSC results panel inside the stats section ---- */ .stats-rotator { position: relative; border-left: 1px solid rgba(255, 255, 255, 0.18); min-height: 200px; } .stats-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } .stats-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: none; } .stats-slide-tag { display: inline-block; background: var(--accent-color); color: var(--primary-color); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 16px; border-radius: 50px; margin-bottom: 6px; } .stats-rotator-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; } .stats-rotator-dots .srd { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: var(--transition-fast); } .stats-rotator-dots .srd.active { background: var(--accent-color); width: 24px; border-radius: 50px; } @media (max-width: 991px) { .stats-rotator { border-left: 0; min-height: 0; margin-top: 10px; } } /* ============ RESULTS / WHAT WILL YOU DISCOVER ============ */ .discover-section { background: linear-gradient(135deg, #f4f8fc 0%, #eef4f0 100%); } .discover-group { height: 100%; border: 2px solid; border-radius: 16px; padding: 30px 20px 25px; transition: var(--transition); } .discover-group:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .discover-group-title { text-align: center; font-weight: 700; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 2px solid; } /* HSC = blue */ .discover-group--hsc { border-color: #1083b8; background: rgba(16, 131, 184, 0.04); } .discover-group--hsc .discover-group-title { color: #1083b8; border-bottom-color: rgba(16, 131, 184, 0.25); } /* SSC = green */ .discover-group--ssc { border-color: #1f9254; background: rgba(31, 146, 84, 0.04); } .discover-group--ssc .discover-group-title { color: #1f9254; border-bottom-color: rgba(31, 146, 84, 0.25); } .discover-chart { text-align: center; } .discover-chart canvas { max-width: 220px; margin: 0 auto; } .discover-label { margin-top: 18px; margin-bottom: 0; font-weight: 600; color: var(--primary-color); font-size: 15px; } /* ============ GALLERY SECTION ============ */ .gallery-grid .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 38, 71, 0.92)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 25px; opacity: 0; transition: var(--transition); color: var(--white); } .gallery-overlay i { width: 55px; height: 55px; background: var(--accent-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; transform: scale(0); transition: transform 0.3s 0.1s ease; } .gallery-overlay h5 { color: var(--white); margin: 0; transform: translateY(20px); transition: transform 0.3s 0.15s ease; } .gallery-item:hover img { transform: scale(1.15); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item:hover .gallery-overlay i { transform: scale(1); } .gallery-item:hover .gallery-overlay h5 { transform: translateY(0); } /* ============ CTA SECTION ============ */ .cta-section { position: relative; background: url('https://images.unsplash.com/photo-1519452575417-564c1401ecc0?w=1920&q=80') no-repeat center / cover; padding: 70px 0; color: var(--white); } .cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 38, 71, 0.95), rgba(20, 66, 114, 0.88)); } .cta-section .container { position: relative; z-index: 2; } .cta-tag { display: inline-block; padding: 6px 18px; background: var(--accent-color); color: var(--primary-color); font-size: 13px; font-weight: 600; border-radius: 50px; margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase; } .cta-section h2 { color: var(--white); font-size: 2.4rem; margin-bottom: 12px; } .cta-section p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; margin: 0; } /* ============ MAP SECTION ============ */ .map-section { line-height: 0; } .map-wrap iframe { display: block; width: 100%; filter: grayscale(20%) contrast(1.05); } /* ============ FOOTER ============ */ .footer { background: var(--primary-dark); color: rgba(255, 255, 255, 0.75); padding-top: 70px; } .footer-top { padding-bottom: 40px; } .footer-widget h5 { color: var(--white); font-size: 1.15rem; margin-bottom: 22px; position: relative; padding-bottom: 12px; } .footer-widget h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--accent-color); border-radius: 3px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .footer-logo .logo-title { color: var(--white); } .footer-widget p { color: rgba(255, 255, 255, 0.7); font-size: 14.5px; line-height: 1.8; margin-bottom: 20px; } .footer-social { display: flex; gap: 10px; margin: 0; } .footer-social a { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.08); color: var(--white); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: var(--transition); } .footer-social a:hover { background: var(--accent-color); transform: translateY(-4px); } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(255, 255, 255, 0.75); font-size: 14.5px; display: inline-flex; align-items: center; gap: 5px; transition: var(--transition); } .footer-links a i { color: var(--accent-color); font-size: 12px; } .footer-links a:hover { color: var(--accent-color); gap: 10px; } .footer-contact li { display: flex; gap: 12px; margin-bottom: 16px; color: rgba(255, 255, 255, 0.75); font-size: 14.5px; line-height: 1.5; } .footer-contact li i { color: var(--accent-color); font-size: 17px; margin-top: 3px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 0; font-size: 14px; color: rgba(255, 255, 255, 0.65); } .footer-bottom p { color: rgba(255, 255, 255, 0.65); margin: 0; } /* ============ SCROLL TO TOP ============ */ #scrollToTop { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--gradient-accent); color: var(--primary-color); border: none; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999; box-shadow: var(--shadow-lg); } #scrollToTop.show { opacity: 1; visibility: visible; } #scrollToTop:hover { background: var(--gradient-primary); color: var(--white); transform: translateY(-4px); } /* ============ RESPONSIVE STYLES ============ */ /* tighten the desktop nav so all items fit on mid-size laptops */ @media (max-width: 1199px) { .brand-title { font-size: 1.7rem; } .main-nav-links .nav-link { padding: 14px 14px !important; font-size: 13.5px; } .main-nav-links .dropdown-toggle::after { margin-left: 5px; } .top-contact { gap: 16px; } .latest-notice-item { padding: 0 22px; } } /* ---- mobile / tablet navbar (<992px): slide-down white panel ---- */ @media (max-width: 991px) { .section-padding { padding: 70px 0; } .section-title { font-size: 2rem; } .carousel-item { aspect-ratio: 4 / 3; max-height: 72vh; } .navbar-main { padding: 0; } .brand-bar { padding: 12px 0; } /* mobile shows both logos flanking the title; hamburger sits at the far right */ .brand-bar-inner { gap: 10px; justify-content: flex-start; } .brand-logo-img { width: 50px; height: 50px; padding: 3px; border-width: 2px; } .brand-logo-right { display: inline-flex; margin-left: 0; } .brand-text { text-align: center; flex: 0 1 auto; } .brand-title { font-size: 0.95rem; letter-spacing: 0; line-height: 1.15; } .brand-sub { font-size: 0.7rem; margin-top: 2px; gap: 3px 5px; } .navbar-toggler { margin-left: auto; } /* the navy nav-row collapses to just the gold accent line when closed */ .nav-row { background: transparent; border-top: none; } .navbar-collapse { background: var(--white); margin: 0; border-top: 3px solid var(--accent-color); box-shadow: var(--shadow-lg); max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* subtle open animation */ .navbar-collapse.collapsing, .navbar-collapse.show { animation: navPanelDown 0.28s ease; } .main-nav-links { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px 0; } .main-nav-links .nav-item { display: block; border-top: 1px solid var(--border-color); } .main-nav-links .nav-item:first-child { border-top: none; } .main-nav-links .nav-link { padding: 13px 22px !important; justify-content: flex-start; color: var(--text-dark); font-size: 15px; font-weight: 600; } .main-nav-links .nav-link i { color: var(--accent-dark); width: 20px; } /* swap the underline indicator for a left accent bar on mobile */ .main-nav-links .nav-link::before { left: 0; right: auto; top: 0; bottom: 0; width: 0; height: auto; transition: width 0.2s ease; } .main-nav-links .nav-link:hover, .main-nav-links .nav-link.active, .main-nav-links .nav-item.show > .nav-link { color: var(--primary-color); background: var(--bg-light-blue); } .main-nav-links .nav-link:hover::before, .main-nav-links .nav-link.active::before, .main-nav-links .nav-item.show > .nav-link::before { left: 0; right: auto; width: 4px; } .main-nav-links .dropdown-toggle::after { margin-left: auto; transition: transform 0.25s ease; } .main-nav-links .nav-item.show > .dropdown-toggle::after { transform: rotate(180deg); } .main-nav-links .dropdown-menu { box-shadow: none; border: none; border-top: none; border-radius: 0; background: #f4f7fc; margin: 0; padding: 4px 0; min-width: 0; } .dropdown-item { padding: 11px 22px 11px 42px; font-size: 14px; } .dropdown-item:hover, .dropdown-item:focus { padding-left: 46px; } .nav-mega-dropdown .dropdown-divider-label { padding-left: 42px; } /* mobile menu footer: Login EMS + social */ .mobile-menu-footer { padding: 20px 22px 24px; border-top: 1px solid var(--border-color); background: var(--bg-light); text-align: center; } .btn-Login EMS-mobile { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--gradient-accent); color: var(--primary-dark); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 999px; box-shadow: 0 3px 10px rgba(212, 160, 23, 0.35); } .btn-Login EMS-mobile:hover { color: var(--primary-dark); filter: brightness(1.04); } .mobile-menu-footer .social-icons { justify-content: center; margin-top: 18px; gap: 12px; } .mobile-menu-footer .social-icons a { width: 38px; height: 38px; font-size: 17px; background: var(--primary-color); } .mobile-menu-contact { margin: 14px 0 0; font-size: 13px; color: var(--text-light); display: flex; align-items: center; justify-content: center; gap: 7px; } .mobile-menu-contact i { color: var(--accent-dark); } @keyframes navPanelDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .quick-actions { margin-top: -40px; } .quick-card { padding: 28px 20px; } .about-image-wrap { padding: 20px 20px 0 0; } .about-img-small { width: 140px; height: 140px; } .stats-section { background-attachment: scroll; } .stat-item h2, .counter-suffix { font-size: 2.5rem; } .cta-section h2 { font-size: 2rem; } .cta-section .text-lg-end { margin-top: 24px; text-align: left !important; } } @media (max-width: 767px) { .section-padding { padding: 60px 0; } .section-title { font-size: 1.7rem; } .section-header { margin-bottom: 40px; } .carousel-control-prev, .carousel-control-next { display: none; } .notice-card { flex-direction: column; } .notice-date { flex-direction: row; width: 100%; height: auto; padding: 12px; gap: 8px; } .notice-date .day { font-size: 20px; } .notice-date .month, .notice-date .year { font-size: 13px; margin-top: 0; } .ticker-label { padding: 12px 18px; font-size: 13px; } .ticker-content { padding: 0 12px; } .ticker-item { font-size: 13px; } .about-image-wrap { padding: 15px 15px 0 0; margin-bottom: 60px; } .about-img-small { width: 110px; height: 110px; bottom: -20px; } .about-experience { padding: 14px 18px; } .about-experience h3 { font-size: 1.6rem; } .message-card { padding: 25px 20px; } .stat-item h2, .counter-suffix { font-size: 2.2rem; } .cta-section h2 { font-size: 1.6rem; } #scrollToTop { width: 42px; height: 42px; font-size: 17px; bottom: 22px; right: 22px; } } @media (max-width: 575px) { .quick-card { padding: 25px 18px; } .section-title { font-size: 1.5rem; } .feature-icon, .quick-icon { width: 65px; height: 65px; font-size: 26px; } /* keep both logos + title + hamburger fitting on small phones */ .brand-bar-inner { gap: 8px; } .brand-logo-img { width: 44px; height: 44px; padding: 2px; } .brand-title { font-size: 0.82rem; } .brand-sub { font-size: 0.62rem; } .navbar-toggler { width: 40px; } .navbar-toggler .toggler-bar { width: 24px; } } /* ===================================================== ============ INNER PAGE COMPONENTS ============ ===================================================== */ /* ============ PAGE BANNER / BREADCRUMB ============ */ .page-banner { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 110px 0 70px; color: var(--white); } .page-banner-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 38, 71, 0.92), rgba(20, 66, 114, 0.85)); } .page-banner .container { position: relative; z-index: 2; } .page-banner-content h1 { color: var(--white); font-size: 2.8rem; margin-bottom: 12px; font-weight: 700; } .page-banner-content .breadcrumb { background: transparent; padding: 0; margin: 0; justify-content: flex-start; } .page-banner-content .breadcrumb-item { color: rgba(255, 255, 255, 0.8); font-weight: 500; } .page-banner-content .breadcrumb-item a { color: var(--accent-color); display: inline-flex; align-items: center; gap: 5px; } .page-banner-content .breadcrumb-item a:hover { color: var(--white); } .page-banner-content .breadcrumb-item.active { color: var(--white); } .page-banner-content .breadcrumb-item + .breadcrumb-item::before { color: var(--accent-color); content: "›"; font-weight: 700; padding: 0 4px; } /* ============ MISSION/VISION CARDS ============ */ .mv-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px 30px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; border-top: 4px solid transparent; position: relative; overflow: hidden; } .mv-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-top-color: var(--accent-color); } .mv-icon { width: 90px; height: 90px; margin: 0 auto 22px; background: var(--gradient-primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; transition: var(--transition); } .mv-card:hover .mv-icon { background: var(--gradient-accent); color: var(--primary-color); transform: rotate(360deg); } .mv-card h4 { color: var(--primary-color); margin-bottom: 12px; } /* ============ TIMELINE ============ */ .timeline { position: relative; max-width: 1100px; margin: 0 auto; padding: 30px 0; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--gradient-primary); transform: translateX(-50%); border-radius: 3px; } .timeline-item { position: relative; width: 50%; padding: 25px 40px; } .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; } .timeline-marker { position: absolute; width: 22px; height: 22px; background: var(--accent-color); border: 4px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-color); top: 35px; z-index: 2; } .timeline-item:nth-child(odd) .timeline-marker { right: -11px; } .timeline-item:nth-child(even) .timeline-marker { left: -11px; } .timeline-content { background: var(--white); padding: 24px 28px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: var(--transition); position: relative; } .timeline-content:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .timeline-year { display: inline-block; background: var(--gradient-accent); color: var(--primary-color); padding: 4px 14px; border-radius: 50px; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .timeline-content h4 { color: var(--primary-color); font-size: 1.15rem; margin-bottom: 8px; } .timeline-content p { margin: 0; font-size: 14.5px; } @media (max-width: 767px) { .timeline::before { left: 20px; } .timeline-item { width: 100%; padding-left: 55px; padding-right: 15px; text-align: left !important; left: 0 !important; } .timeline-item .timeline-marker { left: 10px !important; right: auto !important; } } /* ============ FACILITY CARDS ============ */ .facility-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; } .facility-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .facility-card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.6s ease; } .facility-card:hover img { transform: scale(1.05); } .facility-info { padding: 25px; position: relative; } .facility-info i { position: absolute; top: -30px; right: 25px; width: 55px; height: 55px; background: var(--gradient-accent); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--shadow-md); } .facility-info h5 { color: var(--primary-color); margin-bottom: 8px; font-size: 1.15rem; } .facility-info p { font-size: 14.5px; margin: 0; } /* ============ NOTICE LISTING (Filter Bar, Table) ============ */ .filter-bar { background: var(--white); padding: 22px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 30px; border: 1px solid var(--border-color); } .search-wrap { position: relative; } .search-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-light); } .search-wrap .form-control { padding-left: 45px; border-radius: var(--radius-sm); height: 46px; border: 1px solid var(--border-color); } .form-select, .form-control { border-radius: var(--radius-sm); border: 1px solid var(--border-color); padding: 10px 14px; transition: var(--transition-fast); } .form-select:focus, .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15); } .notice-table-wrap { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .notice-table { margin: 0; } .notice-table thead { background: var(--gradient-primary); color: var(--white); } .notice-table thead th { padding: 16px 20px; font-weight: 600; border: none; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .notice-table tbody tr { transition: var(--transition-fast); border-bottom: 1px solid var(--border-color); } .notice-table tbody tr:hover { background: var(--bg-light-blue); } .notice-table tbody td { padding: 18px 20px; vertical-align: middle; font-size: 14.5px; } .row-num { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: var(--bg-light-blue); color: var(--primary-color); border-radius: 50%; font-weight: 600; font-size: 13px; } .notice-title-link { color: var(--primary-color); font-weight: 500; } .notice-title-link i { color: var(--accent-color); margin-right: 6px; } .notice-title-link:hover { color: var(--accent-color); } .btn-view, .btn-download { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; margin: 2px; transition: var(--transition-fast); } .btn-view { background: var(--bg-light-blue); color: var(--primary-color); } .btn-view:hover { background: var(--primary-color); color: var(--white); } .btn-download { background: rgba(212, 160, 23, 0.15); color: var(--accent-color); } .btn-download:hover { background: var(--accent-color); color: var(--white); } /* Pagination */ .custom-pagination .page-link { color: var(--primary-color); border: 1px solid var(--border-color); margin: 0 4px; border-radius: var(--radius-sm) !important; padding: 9px 16px; font-weight: 500; transition: var(--transition-fast); } .custom-pagination .page-link:hover { background: var(--accent-color); color: var(--white); border-color: var(--accent-color); } .custom-pagination .page-item.active .page-link { background: var(--gradient-primary); border-color: transparent; color: var(--white); } .custom-pagination .page-item.disabled .page-link { color: var(--text-light); } /* ============ NOTICE DETAILS ============ */ .notice-detail-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .notice-meta { display: flex; gap: 22px; margin-bottom: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .notice-meta span { color: var(--text-light); font-size: 14px; display: inline-flex; align-items: center; gap: 5px; } .notice-meta span i { color: var(--accent-color); } .notice-detail-title { color: var(--primary-color); font-size: 2rem; margin-bottom: 25px; line-height: 1.3; } .notice-attachment { display: flex; align-items: center; gap: 16px; background: var(--bg-light-blue); padding: 20px; border-radius: var(--radius-md); margin-bottom: 30px; flex-wrap: wrap; } .attachment-icon { width: 55px; height: 55px; background: var(--white); color: #d9534f; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--shadow-sm); } .attachment-info { flex: 1; min-width: 200px; } .attachment-info h6 { color: var(--primary-color); margin-bottom: 2px; font-size: 1rem; } .attachment-info span { font-size: 13px; color: var(--text-light); } .notice-detail-body h4 { color: var(--primary-color); font-size: 1.25rem; margin: 24px 0 12px; } .notice-detail-body p { margin-bottom: 14px; color: var(--text-dark); } .notice-list { margin: 0 0 16px 0; padding-left: 0; } .notice-list li { position: relative; padding: 6px 0 6px 28px; color: var(--text-dark); } .notice-list li::before { content: '\F26B'; font-family: 'bootstrap-icons'; color: var(--accent-color); position: absolute; left: 0; top: 6px; font-size: 18px; } .signature { margin-top: 28px !important; font-style: italic; } .signature-name { margin-top: 18px; color: var(--primary-color); } .notice-share { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .notice-share span { font-weight: 600; color: var(--primary-color); margin-right: 5px; } .share-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition); } .share-fb { background: #1877f2; } .share-tw { background: #000; } .share-wa { background: #25d366; } .share-ln { background: #0a66c2; } .share-em { background: #555; } .share-btn:hover { color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Sidebar */ .sidebar-sticky { position: sticky; top: 100px; } .sidebar-widget { background: var(--white); padding: 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 25px; border: 1px solid var(--border-color); } .sidebar-title { color: var(--primary-color); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-color); font-size: 1.1rem; } .sidebar-notice-list li { border-bottom: 1px dashed var(--border-color); padding: 10px 0; } .sidebar-notice-list li:last-child { border-bottom: none; } .sidebar-notice-list a { display: flex; gap: 12px; color: var(--text-dark); transition: var(--transition-fast); } .sidebar-notice-list a:hover { color: var(--accent-color); } .sb-date { flex-shrink: 0; background: var(--gradient-accent); color: var(--primary-color); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; height: fit-content; } .sb-title { font-size: 14px; font-weight: 500; line-height: 1.4; } .sidebar-category-list li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--text-dark); border-bottom: 1px dashed var(--border-color); transition: var(--transition-fast); font-weight: 500; } .sidebar-category-list li:last-child a { border-bottom: none; } .sidebar-category-list li a:hover { color: var(--accent-color); padding-left: 8px; } .cat-count { background: var(--bg-light-blue); color: var(--primary-color); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } .sidebar-cta { background: var(--gradient-primary); color: var(--white); text-align: center; border: none; } .sidebar-cta i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 12px; } .sidebar-cta h5 { color: var(--white); margin-bottom: 8px; } .sidebar-cta p { color: rgba(255,255,255,0.85); font-size: 14px; margin-bottom: 16px; } /* ============ ADMISSION PROCESS ============ */ .process-card { background: var(--white); padding: 35px 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; height: 100%; transition: var(--transition); position: relative; border: 1px solid var(--border-color); overflow: hidden; } .process-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: transparent; } .process-num { position: absolute; top: 12px; right: 18px; font-size: 3.5rem; font-weight: 800; color: var(--bg-light-blue); line-height: 1; font-family: var(--font-heading); transition: var(--transition); } .process-card:hover .process-num { color: rgba(212, 160, 23, 0.2); } .process-icon { width: 75px; height: 75px; margin: 0 auto 20px; background: var(--gradient-accent); color: var(--primary-color); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; transition: var(--transition); position: relative; z-index: 2; } .process-card:hover .process-icon { background: var(--gradient-primary); color: var(--white); transform: rotateY(180deg); } .process-card h5 { color: var(--primary-color); margin-bottom: 10px; font-size: 1.15rem; position: relative; z-index: 2; } .process-card p { font-size: 14px; margin: 0; position: relative; z-index: 2; } /* ============ PRICE / FEE CARDS ============ */ .price-card { background: var(--white); border-radius: var(--radius-lg); padding: 35px 30px; box-shadow: var(--shadow-sm); height: 100%; transition: var(--transition); border: 1px solid var(--border-color); text-align: center; position: relative; } .price-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .price-featured { border: 2px solid var(--accent-color); box-shadow: var(--shadow-lg); transform: translateY(-10px); background: linear-gradient(180deg, var(--white) 0%, #fffaf0 100%); } .featured-badge { position: absolute; top: 0; right: 20px; background: var(--gradient-accent); color: var(--primary-color); padding: 6px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .price-header h5 { color: var(--primary-color); font-size: 1.4rem; margin-bottom: 5px; } .price-class { color: var(--text-light); font-size: 14px; } .price-amount { margin: 25px 0; display: flex; align-items: baseline; justify-content: center; gap: 5px; } .price-amount .currency { font-size: 1rem; color: var(--accent-color); font-weight: 600; } .price-amount .amount { font-size: 3rem; font-weight: 800; color: var(--primary-color); font-family: var(--font-heading); } .price-amount .period { font-size: 14px; color: var(--text-light); } .price-features { margin: 25px 0; text-align: left; } .price-features li { padding: 10px 0; color: var(--text-dark); border-bottom: 1px dashed var(--border-color); display: flex; align-items: center; gap: 8px; } .price-features li:last-child { border-bottom: none; } .price-features li i { color: #28a745; font-size: 18px; } /* ============ FORM CARD ============ */ .form-card { background: var(--white); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .form-label { font-weight: 500; color: var(--primary-color); margin-bottom: 6px; font-size: 14px; } .form-control, .form-select { background: var(--bg-light); } .form-control:focus, .form-select:focus { background: var(--white); } .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); } .form-success-msg { text-align: center; padding: 40px 20px; background: rgba(40, 167, 69, 0.08); border-radius: var(--radius-md); margin-top: 20px; } .form-success-msg i { font-size: 3.5rem; color: #28a745; margin-bottom: 12px; } .form-success-msg h4 { color: var(--primary-color); margin-bottom: 8px; } .form-success-msg p { margin: 0; color: var(--text-dark); } /* ============ FAQ ACCORDION ============ */ .custom-accordion .accordion-item { border: 1px solid var(--border-color); border-radius: var(--radius-md) !important; margin-bottom: 14px; overflow: hidden; background: var(--white); } .custom-accordion .accordion-button { padding: 18px 24px; font-weight: 600; color: var(--primary-color); background: var(--white); border: none; font-size: 1rem; display: flex; align-items: center; gap: 10px; box-shadow: none; } .custom-accordion .accordion-button i { color: var(--accent-color); font-size: 20px; } .custom-accordion .accordion-button:not(.collapsed) { background: var(--gradient-primary); color: var(--white); box-shadow: none; } .custom-accordion .accordion-button:not(.collapsed) i { color: var(--accent-color); } .custom-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a2647'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .custom-accordion .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d4a017'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .custom-accordion .accordion-body { padding: 20px 24px; color: var(--text-dark); background: var(--bg-light); line-height: 1.8; } /* ============ LEADER (Administration) ============ */ .leader-img-wrap { position: relative; padding: 20px; } .leader-img-wrap::before { content: ''; position: absolute; top: 0; left: 0; width: 70%; height: 70%; background: var(--gradient-accent); border-radius: var(--radius-lg); z-index: -1; } .leader-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .leader-badge { position: absolute; bottom: 30px; right: 30px; background: var(--gradient-primary); color: var(--white); padding: 12px 22px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg); font-weight: 600; } .leader-badge i { color: var(--accent-color); font-size: 20px; } .designation-text { color: var(--accent-color); font-weight: 600; font-size: 14px; text-align: center; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; } .quote-icon-lg { font-size: 3.5rem; color: var(--accent-color); opacity: 0.3; line-height: 1; margin-bottom: 10px; } /* Chairman & Principal message body: justified, larger type for readability (the designation line is excluded — it stays its own uppercase style). */ #chairman .col-lg-7 p:not(.designation-text), #principal .col-lg-7 p:not(.designation-text) { text-align: justify; font-size: 1.1rem; line-height: 2; } .signature-block { margin-top: 25px; padding-top: 20px; border-top: 2px solid var(--border-color); color: var(--primary-color); } /* ============ ORGANIZATIONAL CHART ============ */ .org-chart { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 30px 0; } .org-level { display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; } .org-node { background: var(--white); padding: 22px 28px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); min-width: 180px; transition: var(--transition); border-bottom: 4px solid var(--accent-color); } .org-node:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .org-node i { font-size: 2rem; color: var(--accent-color); margin-bottom: 10px; display: block; } .org-node h6 { color: var(--primary-color); margin-bottom: 4px; font-size: 1rem; } .org-node span { font-size: 12.5px; color: var(--text-light); } .org-top { background: var(--gradient-primary); color: var(--white); } .org-top h6 { color: var(--white); } .org-top span { color: rgba(255,255,255,0.85); } .org-sub { background: var(--bg-light-blue); min-width: 160px; } .org-connector { width: 3px; height: 40px; background: var(--accent-color); margin: 0 auto; } @media (max-width: 767px) { .org-level { flex-direction: column; align-items: center; } .org-node { width: 90%; } } /* ============ GOVERNING BODY HIERARCHY ============ */ .gb-hierarchy { display: flex; flex-direction: column; align-items: center; padding: 10px 0; } .gb-tier { /* width: 100%; */ display: flex; flex-direction: column; align-items: center; } .gb-tier-label { display: inline-block; padding: 6px 22px; margin-bottom: 26px; border-radius: 50px; background: var(--gradient-accent); color: var(--primary-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; box-shadow: var(--shadow-sm); } /* Branching connector from Member Secretary down into both tiers */ .gb-branch { position: relative; width: 100%; height: 44px; display: flex; margin: 0 auto; } /* Central stem dropping from the Member Secretary above */ .gb-branch::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 22px; background: var(--accent-color); } /* Horizontal bar joining the two tier drops */ .gb-branch::after { content: ""; position: absolute; top: 22px; left: 25%; right: 25%; height: 3px; background: var(--accent-color); } .gb-branch-half { flex: 1; position: relative; } /* Vertical drop into each tier (centred over each half) */ .gb-branch-half::after { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 3px; height: 22px; background: var(--accent-color); } /* Two tiers (Parent + Teacher Representatives) shown side by side, all six cards (3 + 3) on a single line */ .gb-tier-row { width: 100%; display: flex; flex-wrap: nowrap; gap: 28px; justify-content: center; align-items: flex-start; } .gb-tier-row .gb-tier { flex: 0 1 auto; min-width: 0; } .gb-tier-row .gb-tier-cards { flex-wrap: nowrap; gap: 16px; } /* Compact card size so three cards per tier fit beside the other tier; fixed height keeps all six cards identical across both tiers */ .gb-tier-row .gb-card { width: 205px; height: 345px; } .gb-tier-row .gb-photo-wrap { height: 200px; flex-shrink: 0; } .gb-tier-row .gb-photo-wrap i { font-size: 3rem; } .gb-tier-row .gb-body { padding: 14px 10px 18px; } .gb-tier-row .gb-name { font-size: 0.92rem; } .gb-tier-row .gb-cred { font-size: 11px; margin-bottom: 7px; } .gb-tier-row .gb-post { font-size: 11.5px; line-height: 1.45; } .gb-tier-cards { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; } /* Stack the two tiers and revert to full-size cards on smaller screens */ @media (max-width: 1199px) { /* Branch collapses to a single straight connector when tiers stack */ .gb-branch { height: 40px; } .gb-branch::after { display: none; } .gb-branch::before { height: 40px; } .gb-branch-half::after { display: none; } .gb-tier-row { flex-direction: column; flex-wrap: wrap; align-items: center; gap: 40px; } .gb-tier-row .gb-tier-cards { flex-wrap: wrap; gap: 26px; } .gb-tier-row .gb-card { width: 300px; height: auto; } .gb-tier-row .gb-photo-wrap { height: 340px; } .gb-tier-row .gb-photo-wrap i { font-size: 4.5rem; } .gb-tier-row .gb-body { padding: 20px 18px 24px; } .gb-tier-row .gb-name { font-size: 1.08rem; } .gb-tier-row .gb-cred { font-size: 12.5px; margin-bottom: 10px; } .gb-tier-row .gb-post { font-size: 13.5px; line-height: 1.55; } } .gb-card { background: var(--white); width: 300px; border-left: 1px solid var(--primary-color); border-right: 1px solid var(--primary-color); border-top: 1px solid; color: black; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; text-align: center; /* border-bottom: 4px solid transparent; */ } .gb-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .gb-photo-wrap { position: relative; width: 100%; height: 340px; display: flex; align-items: center; justify-content: center; background: var(--bg-light-blue); overflow: hidden; } .gb-photo-wrap i { position: absolute; font-size: 4.5rem; color: var(--primary-light); } .gb-photo { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .gb-body { padding: 20px 18px 24px; } .gb-name { font-size: 1.08rem; margin-bottom: 4px; color: var(--primary-color); } .gb-cred { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); margin-bottom: 10px; /* text-transform: uppercase; */ letter-spacing: 0.5px; } .gb-post { font-size: 13.5px; line-height: 1.55; color: var(--text-light); margin: 0; } /* Chairman card sits at the top of the hierarchy — emphasised in navy */ .gb-card--chair .gb-body { background: var(--gradient-primary); border-top: 3px solid var(--accent-light); } .gb-card--chair .gb-name { color: var(--white); } .gb-card--chair .gb-cred { color: var(--accent-light); } .gb-card--chair .gb-post { color: rgba(255, 255, 255, 0.82); } @media (max-width: 575px) { .gb-card { width: 100%; max-width: 320px; } } /* ============ GALLERY FILTER ============ */ .gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .filter-btn { background: var(--white); border: 2px solid var(--border-color); color: var(--primary-color); padding: 8px 22px; border-radius: 50px; font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--gradient-primary); color: var(--white); border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-md); } .filterable-gallery .gallery-filter-item { transition: opacity 0.4s ease, transform 0.4s ease; } .filterable-gallery .gallery-filter-item.hide { display: none; } .filterable-gallery .gallery-item { cursor: pointer; } .gallery-overlay span { background: var(--accent-color); color: var(--white); padding: 3px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; display: inline-block; transform: translateY(20px); transition: transform 0.3s 0.18s ease; } .gallery-item:hover .gallery-overlay span { transform: translateY(0); } /* ============ GALLERY MODAL ============ */ .gallery-modal .modal-content { background: transparent; border: none; overflow: visible; } .gallery-modal .modal-body { padding: 0; text-align: center; position: relative; } .gallery-modal #modalImage { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } .modal-caption { background: rgba(10, 38, 71, 0.95); color: var(--white); padding: 14px 22px; border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top: -8px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-caption h5 { color: var(--white); margin: 0; font-size: 1.1rem; } .btn-close-custom { position: absolute; top: -50px; right: 0; width: 40px; height: 40px; background: var(--accent-color); color: var(--white); border: none; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: var(--transition-fast); } .btn-close-custom:hover { background: var(--white); color: var(--primary-color); transform: rotate(90deg); } /* ============ RESULT PORTAL ============ */ .result-search-card { background: var(--white); padding: 45px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border-top: 5px solid var(--accent-color); } .result-search-header { text-align: center; margin-bottom: 30px; } .result-search-header i { font-size: 3.5rem; color: var(--accent-color); margin-bottom: 10px; } .result-search-header h3 { color: var(--primary-color); margin-bottom: 8px; } .result-search-header p { margin: 0; color: var(--text-light); } .result-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-xl); border-top: 6px solid var(--accent-color); } .result-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 2px dashed var(--border-color); margin-bottom: 25px; } .rc-logo { display: flex; align-items: center; gap: 12px; } .rc-logo h5 { color: var(--primary-color); margin: 0; font-size: 1.15rem; } .rc-logo small { color: var(--text-light); } .result-status { padding: 8px 22px; border-radius: 50px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .result-status.passed { background: rgba(40, 167, 69, 0.12); color: #28a745; border: 1px solid #28a745; } .result-status.failed { background: rgba(220, 53, 69, 0.12); color: #dc3545; border: 1px solid #dc3545; } .rc-title { color: var(--primary-color); text-align: center; margin-bottom: 25px; font-size: 1.4rem; } .rc-info { background: var(--bg-light-blue); padding: 20px; border-radius: var(--radius-md); margin-bottom: 0; } .rc-info > div { display: flex; flex-direction: column; } .rc-info span { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .rc-info strong { color: var(--primary-color); font-size: 14.5px; } .result-table thead { background: var(--gradient-primary); color: var(--white); } .result-table thead th { padding: 14px 18px; border: none; font-weight: 600; } .result-table tbody td { padding: 12px 18px; border-color: var(--border-color); } .result-table tfoot { background: rgba(212, 160, 23, 0.15); } .result-table tfoot td { padding: 14px 18px; color: var(--primary-color); border: none; } .result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .info-mini-card { background: var(--white); padding: 30px 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; border: 1px solid var(--border-color); transition: var(--transition); height: 100%; } .info-mini-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .info-mini-card i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 12px; } .info-mini-card h6 { color: var(--primary-color); margin-bottom: 8px; } .info-mini-card p { font-size: 14px; margin: 0; } /* ============ CONTACT PAGE ============ */ .contact-mini-card { background: var(--white); padding: 35px 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; height: 100%; transition: var(--transition); border: 1px solid var(--border-color); } .contact-mini-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .cmc-icon { width: 80px; height: 80px; margin: 0 auto 18px; background: var(--gradient-primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; transition: var(--transition); } .contact-mini-card:hover .cmc-icon { background: var(--gradient-accent); color: var(--primary-color); transform: rotateY(180deg); } .contact-mini-card h5 { color: var(--primary-color); margin-bottom: 10px; } .contact-mini-card p { margin: 0; font-size: 14.5px; line-height: 1.7; } .contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .contact-quick-info { display: flex; flex-wrap: wrap; gap: 10px; } .qi-item { flex: 1; min-width: 120px; background: var(--white); border: 1px solid var(--border-color); padding: 12px 16px; border-radius: var(--radius-md); color: var(--primary-color); font-weight: 600; text-align: center; transition: var(--transition-fast); font-size: 14px; } .qi-item:hover { background: var(--gradient-primary); color: var(--white); border-color: transparent; } .qi-item i { margin-right: 5px; } .dept-card { background: var(--white); padding: 28px 22px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); border: 1px solid var(--border-color); height: 100%; } .dept-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent-color); } .dept-card > i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 14px; display: block; } .dept-card h5 { color: var(--primary-color); margin-bottom: 12px; } .dept-card p { font-size: 14px; margin-bottom: 4px; color: var(--text-dark); } .dept-card p i { color: var(--accent-color); margin-right: 5px; } /* ============ RESPONSIVE (Inner pages) ============ */ @media (max-width: 991px) { .page-banner { padding: 80px 0 50px; } .page-banner-content h1 { font-size: 2.2rem; } .form-card { padding: 28px; } .notice-detail-card { padding: 28px; } .result-search-card { padding: 28px; } .result-card { padding: 25px; } .sidebar-sticky { position: static; } .price-featured { transform: translateY(0); } } @media (max-width: 767px) { .page-banner-content h1 { font-size: 1.7rem; } .notice-detail-title { font-size: 1.4rem; } .form-card { padding: 22px; } .filter-bar { padding: 16px; } .notice-table thead { display: none; } .notice-table, .notice-table tbody, .notice-table tr, .notice-table td { display: block; width: 100%; } .notice-table tr { background: var(--bg-light); margin-bottom: 14px; border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); } .notice-table td { padding: 6px 0; border: none; } .notice-table .text-end { text-align: left !important; } .leader-img-wrap { padding: 12px; } .leader-badge { bottom: 20px; right: 20px; padding: 8px 14px; font-size: 13px; } .timeline-content { padding: 18px; } .filter-btn { padding: 6px 16px; font-size: 13px; } } /* ============ PRINT STYLES (Result) ============ */ @media print { body * { visibility: hidden; } #resultCardSection, #resultCardSection * { visibility: visible; } #resultCardSection { position: absolute; left: 0; top: 0; width: 100%; } .result-actions { display: none !important; } } /* ===================================================== ============ PRINCIPAL FEEDBACK ADDITIONS ============ ===================================================== */ /* ============ AIR FORCE LOGO (Top header right) ============ */ .airforce-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(212, 160, 23, 0.15), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(212, 160, 23, 0.35); padding: 4px 12px 4px 6px; border-radius: 50px; color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 8px; } .airforce-badge .af-emblem { width: 28px; height: 28px; background: radial-gradient(circle, #c41e3a 0%, #0a2647 50%, #4caf50 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 13px; border: 2px solid var(--accent-color); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .airforce-badge span { line-height: 1.1; } /* ============ MENU MEGA (for reorganized nav) ============ */ .nav-mega-dropdown { min-width: 280px; } .dropdown-divider-label, .nav-mega-dropdown .dropdown-divider-label { padding: 6px 14px 4px; font-size: 11px; color: var(--accent-color); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; list-style: none; } /* ---- Two-column mega menu (Academic, Student Life) ---- */ .main-nav-links .nav-mega-menu { min-width: 520px; padding: 12px; } .nav-mega-menu .mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .nav-mega-menu .mega-col { min-width: 0; } .nav-mega-menu .mega-col-title { margin: 4px 0 6px; padding: 6px 14px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-color); border-bottom: 1px solid var(--border-color, #eef0f4); } @media (max-width: 991.98px) { .main-nav-links .nav-mega-menu { min-width: 100%; padding: 8px; } .nav-mega-menu .mega-inner { grid-template-columns: 1fr; gap: 0; } .nav-mega-menu .mega-col + .mega-col { margin-top: 6px; border-top: 1px solid var(--border-color, #eef0f4); padding-top: 6px; } } /* ============ BAFSK HISTORY SECTION ============ */ .bafsk-history { background: linear-gradient(135deg, #f8f5ee 0%, #eef2f9 100%); position: relative; overflow: hidden; } .bafsk-history::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(212, 160, 23, 0.15), transparent 70%); border-radius: 50%; } .history-hero { background: var(--white); padding: 50px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); position: relative; z-index: 2; } /* Image column fills its full column height (object-fit) so the photo always matches the height of the text column — even when "Read more" expands the text — instead of floating, centred, with whitespace beside long copy. */ .history-media { height: 100%; min-height: 440px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .history-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Justify the History body copy (lead paragraph + read-more text). */ .history-text p, .history-text .history-more p { text-align: justify; } @media (max-width: 991px) { .history-media { min-height: 300px; } .history-text { margin-top: 8px; } } .bafsk-history .btn-read-more { margin-top: 6px; } .history-stat-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 25px; } .history-pill { background: var(--bg-light-blue); padding: 10px 18px; border-radius: 50px; font-size: 14px; font-weight: 600; color: var(--primary-color); display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); } .history-pill:hover { background: var(--gradient-accent); transform: translateY(-3px); box-shadow: var(--shadow-md); } .history-pill i { color: var(--accent-color); font-size: 18px; } /* ============ AMBITION CARD ============ */ .ambition-section { background: var(--gradient-primary); color: var(--white); position: relative; overflow: hidden; } .ambition-section::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(212, 160, 23, 0.25), transparent 70%); border-radius: 50%; } .ambition-section .section-title, .ambition-section .lead-text { color: var(--white); } .ambition-section p { color: rgba(255, 255, 255, 0.88); } .ambition-list { list-style: none; padding: 0; margin: 20px 0; } .ambition-list li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.95); } .ambition-list li:last-child { border-bottom: none; } .ambition-list li i { width: 36px; height: 36px; background: var(--accent-color); color: var(--primary-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .ambition-visual { position: relative; } .ambition-visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 100%; } .ambition-target { position: absolute; top: -15px; right: -15px; width: 110px; height: 110px; background: var(--gradient-accent); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary-color); font-weight: 700; box-shadow: var(--shadow-lg); text-align: center; line-height: 1; } .ambition-target i { font-size: 22px; margin-bottom: 4px; } .ambition-target span { font-size: 11px; font-weight: 600; margin-top: 3px; text-transform: uppercase; } /* ============ DISCIPLINES TABS (School / College) ============ */ .disciplines-section .nav-pills { background: var(--white); padding: 8px; border-radius: 50px; display: inline-flex; flex-wrap: nowrap; box-shadow: var(--shadow-md); margin: 0 auto 40px; } .disciplines-section .nav-pills .nav-link { color: var(--primary-color); font-weight: 600; padding: 10px 30px; border-radius: 50px; transition: var(--transition); background: transparent; border: none; } .disciplines-section .nav-pills .nav-link.active { background: var(--gradient-primary); color: var(--white); box-shadow: var(--shadow-md); } .disciplines-section .nav-pills .nav-link i { margin-right: 6px; } /* Keep the School / College tabs side by side on small screens */ @media (max-width: 575.98px) { .disciplines-section .nav-pills { padding: 6px; max-width: 100%; } .disciplines-section .nav-pills .nav-link { padding: 8px 16px; font-size: 0.85rem; white-space: nowrap; } .disciplines-section .nav-pills .nav-link i { margin-right: 4px; } } /* ============ ACADEMIC CALENDAR ============ */ .calendar-block { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 40px; scroll-margin-top: 160px; } .calendar-block:last-child { margin-bottom: 0; } .calendar-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; background: var(--gradient-primary); color: var(--white); } .cbh-title { display: flex; align-items: center; gap: 16px; } .cbh-icon { flex: 0 0 auto; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 255, 255, 0.12); color: var(--accent-color); font-size: 1.6rem; } .cbh-title h3 { margin: 0; font-size: 1.3rem; color: var(--white); } .cbh-title p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.85; } .calendar-actions { display: flex; flex-wrap: wrap; gap: 10px; } .calendar-actions .btn { font-weight: 600; } .calendar-actions .btn-outline-secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.6); } .calendar-actions .btn-outline-secondary:hover { background: var(--white); color: var(--primary-color); border-color: var(--white); } .calendar-body { padding: 28px; text-align: center; background: var(--light-blue, #f4f7fb); } .calendar-page { display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--radius-md, 12px); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); } .calendar-page:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(10, 38, 71, 0.18)); } .calendar-page img { max-width: 100%; height: auto; background: var(--white); } .calendar-placeholder { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; padding: 48px 20px; border: 2px dashed var(--border-color, #c8d2df); border-radius: var(--radius-md, 12px); background: var(--white); color: var(--text-muted, #6b7280); } .calendar-placeholder i { font-size: 3rem; color: var(--accent-color); } .calendar-placeholder p { margin: 0; max-width: 460px; } .calendar-placeholder code { background: rgba(10, 38, 71, 0.06); padding: 1px 6px; border-radius: 5px; } @media (max-width: 575.98px) { .calendar-block-head { flex-direction: column; align-items: flex-start; padding: 18px 18px; } .cbh-title h3 { font-size: 1.1rem; } .calendar-actions { width: 100%; } .calendar-actions .btn { flex: 1 1 auto; } .calendar-body { padding: 18px; } } /* ============ SYLLABUS ============ */ .syllabus-card { height: 100%; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px 24px; text-align: center; border-top: 4px solid var(--accent-color); transition: var(--transition); display: flex; flex-direction: column; align-items: center; } .syllabus-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .syllabus-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light-blue, #eef3fa); color: var(--primary-color); font-size: 1.7rem; margin-bottom: 16px; } .syllabus-info { flex: 1 1 auto; } .syllabus-info h5 { margin: 0 0 6px; color: var(--primary-color); font-weight: 700; } .syllabus-info p { margin: 0; font-size: 0.88rem; color: var(--text-muted, #6b7280); } .syllabus-actions { display: flex; gap: 10px; margin-top: 20px; } .syllabus-actions .btn-outline-primary-soft { color: var(--primary-color); border: 1px solid var(--primary-color); background: transparent; font-weight: 600; } .syllabus-actions .btn-outline-primary-soft:hover { background: var(--primary-color); color: var(--white); } /* ============ CO-CURRICULAR ============ */ .cc-block { padding: 36px 0; scroll-margin-top: 160px; } .cc-block + .cc-block { border-top: 1px solid var(--border-color, #e5e9f0); } .cc-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-color); background: rgba(212, 160, 23, 0.1); padding: 5px 14px; border-radius: 30px; margin-bottom: 14px; } .cc-block h3 { color: var(--primary-color); margin-bottom: 14px; } .cc-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; gap: 12px; } .cc-img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); } .cc-gallery .cc-img-sm { max-height: 420px; } /* Uniform tab image — fills its column so it matches the description card height */ .uniform-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); display: block; } @media (max-width: 991.98px) { .uniform-img { height: auto; max-height: 480px; } } /* Discipline tab poster (rules-regulations page) */ .rules-discipline-img { width: 100%; height: auto; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); position: sticky; top: 100px; } @media (max-width: 991.98px) { .rules-discipline-img { position: static; max-width: 360px; display: block; margin: 0 auto; } } .cc-list { list-style: none; padding: 0; margin: 0 0 16px; } .cc-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--text-dark, #334155); } .cc-list li i { color: var(--accent-color); } .cc-magazine-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 3 / 4; max-width: 320px; margin: 0 auto; background: var(--gradient-primary); color: var(--white); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(10, 38, 71, 0.25)); border-left: 6px solid var(--accent-color); } .cc-magazine-cover i { font-size: 3.4rem; color: var(--accent-color); } .cc-magazine-cover span { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; } .cc-magazine-cover small { opacity: 0.85; } @media (max-width: 575.98px) { .cc-gallery { grid-template-columns: 1fr 1fr; } } /* ============ CLUBS ============ */ .club-col { scroll-margin-top: 160px; } .club-thumb-icon { display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; } .club-thumb-icon i { font-size: 3.4rem; color: rgba(255, 255, 255, 0.92); } /* ============ RULES & REGULATIONS ============ */ .rules-pills { flex-wrap: wrap; justify-content: center; gap: 6px; } .rules-card { background: var(--white); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm); padding: 30px 32px; } .rules-card h4 { color: var(--primary-color); font-size: 1.15rem; margin-bottom: 16px; } .rules-card h4 i { color: var(--accent-color); margin-right: 8px; } .rule-list { margin: 0; padding-left: 1.2rem; color: var(--text-dark, #334155); } .rule-list li { padding: 5px 0; line-height: 1.6; } .rules-table { margin-bottom: 16px; } .rules-table thead th { background: var(--primary-color); color: var(--white); } .rules-table td, .rules-table th { vertical-align: middle; } .rules-note { background: rgba(212, 160, 23, 0.1); border-left: 4px solid var(--accent-color); padding: 12px 16px; border-radius: 8px; margin: 0; font-size: 0.92rem; } .rules-note i { color: var(--accent-color); margin-right: 6px; } @media (max-width: 575.98px) { .rules-card { padding: 22px 18px; } .rules-pills .nav-link { padding: 8px 14px; font-size: 0.82rem; } } /* ============ ALUMNI ============ */ .alumni-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--light-blue, #eef3fa); color: var(--primary-color); font-size: 1.2rem; } .discipline-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; border-top: 4px solid transparent; } .discipline-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-top-color: var(--accent-color); } .discipline-img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; } .discipline-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .discipline-card:hover .discipline-img img { transform: scale(1.08); } .discipline-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 38, 71, 0.75)); } .discipline-tag { position: absolute; bottom: 14px; left: 14px; background: var(--accent-color); color: var(--primary-color); padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; } .discipline-body { padding: 22px 24px; } .discipline-body h5 { color: var(--primary-color); font-size: 1.15rem; margin-bottom: 8px; } .discipline-body p { font-size: 14px; margin-bottom: 12px; color: var(--text-light); } .discipline-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-light); } .discipline-meta span { display: inline-flex; align-items: center; gap: 4px; } .discipline-meta i { color: var(--accent-color); font-size: 14px; } /* Group chips inside the College version cards (Science / Business / Humanities). */ .discipline-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .discipline-group { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-light-blue); color: var(--primary-color); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 50px; } .discipline-group i { color: var(--accent-color); font-size: 13px; } /* ============ NEWS & EVENTS ============ */ .news-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; border: 1px solid var(--border-color); } .news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; } .news-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .news-card:hover .news-thumb img { transform: scale(1.08); } .news-date-stamp { position: absolute; top: 14px; left: 14px; background: var(--white); color: var(--primary-color); padding: 6px 12px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: var(--shadow-md); } .news-date-stamp .nds-day { font-size: 1.4rem; line-height: 1; color: var(--accent-color); } .news-date-stamp .nds-month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .news-category-tag { position: absolute; top: 14px; right: 14px; background: var(--accent-color); color: var(--primary-color); padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .news-body { padding: 22px 24px; } .news-body .news-meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-light); margin-bottom: 10px; } .news-body .news-meta i { color: var(--accent-color); margin-right: 4px; } .news-body h5 { color: var(--primary-color); font-size: 1.1rem; margin-bottom: 10px; line-height: 1.4; } .news-body h5 a { color: inherit; } .news-body h5 a:hover { color: var(--accent-color); } .news-body p { font-size: 14px; margin-bottom: 12px; } .news-thumb-carousel, .news-thumb-carousel .carousel-inner, .news-thumb-carousel .carousel-item { height: 100%; } .news-thumb-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-thumb-carousel .carousel-control-prev, .news-thumb-carousel .carousel-control-next { width: 16%; opacity: 0.95; } .news-thumb-carousel .carousel-control-prev-icon, .news-thumb-carousel .carousel-control-next-icon { width: 2rem; height: 2rem; background-size: 45% 45%; background-color: rgba(10, 38, 71, 0.5); border-radius: 999px; box-shadow: var(--shadow-sm); } .news-body p.news-excerpt-preview { margin-bottom: 8px; } .news-body .news-excerpt-rest { font-size: 14px; line-height: 1.7; color: var(--text-light); margin-bottom: 12px; } .news-body .news-read-toggle { margin-top: 2px; padding: 6px 18px; font-size: 13px; } /* ============ GOVERNING BODY ============ */ .gb-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; text-align: center; border-bottom: 4px solid var(--primary-color); } .gb-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-bottom-color: var(--accent-color); } .gb-img-wrap { position: relative; padding: 30px 30px 0; } .gb-img-wrap::before { content: ''; position: absolute; top: 30px; left: 30px; right: 30px; bottom: -30px; background: var(--gradient-accent); border-radius: 50%; opacity: 0.15; transition: var(--transition); } .gb-card:hover .gb-img-wrap::before { opacity: 0.35; } .gb-img-wrap img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--white); box-shadow: var(--shadow-md); position: relative; z-index: 2; } .gb-body { padding: 24px 22px; } .gb-body h5 { color: var(--primary-color); margin-bottom: 4px; font-size: 1.1rem; } .gb-body .gb-role { color: var(--accent-color); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 12px; } .gb-body .gb-message { font-style: italic; color: var(--text-dark); font-size: 14px; line-height: 1.7; margin-bottom: 12px; } .gb-social { display: inline-flex; gap: 8px; } .gb-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-light-blue); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition-fast); } .gb-social a:hover { background: var(--accent-color); color: var(--white); transform: translateY(-3px); } /* ============ ACHIEVEMENT SECTION (Cards) ============ */ .achievement-card { background: var(--white); padding: 30px 25px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; height: 100%; transition: var(--transition); position: relative; overflow: hidden; border-top: 4px solid var(--accent-color); } .achievement-card::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle, rgba(212, 160, 23, 0.15), transparent 70%); } .achievement-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .achievement-icon { width: 80px; height: 80px; margin: 0 auto 18px; background: var(--gradient-accent); color: var(--primary-color); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; transition: var(--transition); } .achievement-card:hover .achievement-icon { background: var(--gradient-primary); color: var(--accent-color); transform: rotate(-10deg); } .achievement-card h5 { color: var(--primary-color); font-size: 1.1rem; margin-bottom: 8px; } .achievement-card p { font-size: 14px; margin: 0; } /* ============ QR CODE + VISITOR COUNTER ============ */ .utility-strip { background: var(--primary-dark); color: var(--white); padding: 30px 0; border-top: 3px solid var(--accent-color); } .qr-block, .visitor-block { background: rgba(255, 255, 255, 0.05); padding: 22px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 18px; height: 100%; border: 1px solid rgba(255, 255, 255, 0.08); } .qr-block img { width: 100px; height: 100px; background: var(--white); padding: 6px; border-radius: var(--radius-sm); flex-shrink: 0; } .qr-block h6, .visitor-block h6 { color: var(--white); margin-bottom: 6px; font-size: 1rem; } .qr-block p, .visitor-block p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .visitor-display { width: 100px; height: 100px; background: var(--gradient-accent); color: var(--primary-color); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-family: var(--font-heading); box-shadow: var(--shadow-md); } .visitor-count { font-size: 1.6rem; line-height: 1; } .visitor-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; font-weight: 600; } .visitor-info { flex: 1; } .visitor-stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; /* minmax(0, 1fr) lets cells shrink below the width of a long number (e.g. the formatted total) instead of forcing the grid to overflow. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .visitor-stat-value { min-width: 0; } .visitor-stats li { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .visitor-stat-value { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; line-height: 1; color: var(--accent-color); } .visitor-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.65); } /* On tablet the visitor block sits in a half-width column beside the counter badge, so four stat cells are too tight — drop to two columns. */ @media (max-width: 991.98px) { .visitor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .qr-block, .visitor-block { flex-direction: column; text-align: center; } } /* ================================================= DESIGN REFINEMENT LAYER — Round 1 (site-wide) Footer logo, accessibility, and micro-interactions. Applied on every page via the shared stylesheet. ================================================= */ /* --- Footer logo as real crest image --- */ .footer .logo-badge { background: var(--white); padding: 5px; overflow: visible; } .footer .logo-badge img { width: 100%; height: 100%; object-fit: contain; } .footer-logo .logo-sub { color: var(--accent-light); } /* --- Government links sub-group under contact --- */ .footer-gov-links { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* --- Accessibility: visible keyboard focus everywhere --- */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; border-radius: var(--radius-sm); } .btn:focus-visible { box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.35); } /* --- Respect reduced-motion preferences --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Section-tag: subtle gold pill consistency + maroon variant --- */ .section-tag::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--accent-color); vertical-align: middle; margin-right: 8px; border-radius: 2px; } .section-tag--maroon { background: rgba(139, 30, 45, 0.12); color: var(--crest-maroon); } .section-tag--maroon::before { background: var(--crest-maroon); } /* --- Card hover lift: unify shadow + motion on common card classes --- */ .feature-card, .notice-card, .news-card, .gb-card, .discipline-card, .quick-action-card, .gallery-item, .achievement-card, .staff-card { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .feature-card:hover, .notice-card:hover, .news-card:hover, .gb-card:hover, .discipline-card:hover, .quick-action-card:hover, .achievement-card:hover, .staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } /* --- Smoother image zoom inside gallery/news thumbnails --- */ .gallery-item img, .news-card img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-item:hover img, .news-card:hover img { transform: scale(1.06); } /* --- Selection + scrollbar polish --- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-light-blue); } ::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; border: 2px solid var(--bg-light-blue); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } /* --- Responsive type scale: tighten large headings on small screens --- */ @media (max-width: 767.98px) { .section-title { font-size: 1.85rem; } .section-padding { padding: 60px 0; } .section-header { margin-bottom: 40px; } } @media (max-width: 575.98px) { .section-title { font-size: 1.6rem; } } /* ================================================= STUDENT INFORMATION FILTER (student-info page) ================================================= */ .student-filter { background: var(--white); border: 1px solid var(--border-color, #e6e9ef); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; max-width: 960px; margin: 0 auto 36px; } .student-filter .form-label { font-size: 13px; font-weight: 600; color: var(--primary-color); margin-bottom: 6px; } .student-filter .form-select, .student-filter .form-control { border-radius: var(--radius-sm); border: 1px solid var(--border-color, #d8dde6); padding: 10px 12px; font-size: 14px; } .student-filter .form-select:focus, .student-filter .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.2rem rgba(212, 160, 23, 0.18); } .student-filter-actions { margin-top: 8px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Hint / empty messages */ .student-finder-msg { text-align: center; color: var(--text-light); padding: 30px 16px; } .student-finder-msg i { font-size: 2.6rem; color: var(--accent-color); display: block; margin-bottom: 10px; } .student-finder-msg p { margin: 0; } .student-results-count { text-align: center; font-weight: 600; color: var(--primary-color); margin-bottom: 22px; } /* Result cards */ .student-card { background: var(--white); border: 1px solid var(--border-color, #e6e9ef); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; text-align: center; } .student-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .student-photo { position: relative; height: 220px; background: var(--bg-light-blue); display: flex; align-items: center; justify-content: center; overflow: hidden; } .student-photo i { position: absolute; font-size: 4rem; color: var(--primary-light); } .student-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .student-card-body { padding: 18px 16px 20px; } .student-name { font-size: 1.05rem; color: var(--primary-color); margin-bottom: 4px; } .student-father { font-size: 13px; color: var(--text-light); margin-bottom: 12px; } .student-father i { color: var(--accent-dark); margin-right: 2px; } .student-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; } .badge-soft { background: var(--bg-light-blue); color: var(--primary-color); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 50px; } .student-roll { font-size: 12.5px; color: var(--text-light); margin: 0; padding-top: 10px; border-top: 1px solid var(--border-color, #eef1f6); } @media (max-width: 575.98px) { .student-filter { padding: 20px 16px; } }