/* =============================================================
IHU - INFINITE HORIZONS UNIVERSITY
Design System Based on TU Bergakademie Freiberg
============================================================= */
/* ==================== CSS VARIABLES ==================== */
:root {
/* Primary / Brand */
--ihu-navy: #1B2A4A;
--ihu-navy-dark: #111D33;
--ihu-navy-tint: #EEF1F5;
/* Accent */
--ihu-gold: #C9A84C;
--ihu-gold-dark: #B08F3A;
--ihu-gold-tint: #FDF8EC;
--ihu-orange: #E8862A;
/* Backgrounds */
--bg-white: #FFFFFF;
--bg-light: #F5F5F5;
--bg-off-white: #FAFAFA;
--bg-warm-gray: #E8E8E8;
/* Text */
--text-primary: #1A1A1A;
--text-secondary: #333333;
--text-tertiary: #666666;
--text-muted: #999999;
--text-white: #FFFFFF;
/* Borders */
--border-color: #DDDDDD;
--border-light: #E8E8E8;
/* Interactive */
--link-color: #1B2A4A;
--link-hover: #111D33;
--focus-color: #2376D7;
/* Functional */
--alert-red: #CC0000;
--info-blue: #0066B3;
--warning-yellow: #F0C400;
/* Footer */
--footer-bg: #1A1A2E;
--footer-text: #CCCCCC;
/* Legacy / Compatibility */
--primary-color: #1B2A4A;
--primary-rgb: 27, 42, 74;
--ihu-navy-rgb: 27, 42, 74;
/* Shadows */
--shadow-card: rgba(0, 0, 0, 0.08) 0px 2px 8px 0px;
--shadow-dropdown: rgba(0, 0, 0, 0.15) 0px 4px 16px 0px;
--shadow-hover: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px;
/* Typography */
--font-primary: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Source Code Pro', 'Courier New', monospace;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 80px;
/* Layout */
--max-width: 1200px;
--radius: 4px;
--nav-height: 60px;
--meta-height: 40px;
}
/* ==================== RESET ==================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.60;
color: var(--text-secondary);
background: var(--bg-white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
a:hover {
color: var(--link-hover);
}
a:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
color: var(--text-primary);
line-height: 1.30;
margin-bottom: var(--space-md);
}
h1 {
font-size: 32px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.15px;
}
h2 {
font-size: 26px;
font-weight: 600;
line-height: 1.30;
}
h3 {
font-size: 21px;
font-weight: 600;
line-height: 1.35;
}
h4 {
font-size: 18px;
font-weight: 600;
line-height: 1.35;
}
p {
margin-bottom: var(--space-md);
}
/* ==================== UTILITY ==================== */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.text-center {
text-align: center;
}
.lead-text {
font-size: 18px;
font-weight: 400;
line-height: 1.55;
color: var(--text-secondary);
}
/* ==================== BUTTONS ==================== */
.btn {
display: inline-block;
padding: 10px 24px;
border-radius: var(--radius);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.25;
text-align: center;
cursor: pointer;
border: 2px solid transparent;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Primary Button - Gold CTA */
.btn-primary {
background: var(--ihu-gold);
color: var(--ihu-navy);
border-color: var(--ihu-gold);
}
.btn-primary:hover {
background: var(--ihu-gold-dark);
border-color: var(--ihu-gold-dark);
color: var(--bg-white);
}
/* Secondary - Outlined Navy */
.btn-secondary {
background: transparent;
color: var(--bg-white);
border-color: var(--bg-white);
}
.btn-secondary:hover {
background: var(--bg-white);
color: var(--ihu-navy);
}
/* Outlined */
.btn-outlined {
background: transparent;
color: var(--ihu-navy);
border-color: var(--ihu-navy);
}
.btn-outlined:hover {
background: var(--ihu-navy-tint);
border-color: var(--ihu-navy-dark);
}
/* Ghost / Text Button */
.btn-ghost {
background: transparent;
color: var(--ihu-navy);
padding: 8px 4px;
border: none;
font-weight: 600;
}
.btn-ghost:hover {
text-decoration: underline;
color: var(--ihu-navy-dark);
}
/* White Button (on dark backgrounds) */
.btn-white {
background: var(--bg-white);
color: var(--ihu-navy);
border-color: var(--bg-white);
}
.btn-white:hover {
background: var(--bg-light);
}
.btn-white-outlined {
background: transparent;
color: var(--bg-white);
border-color: var(--bg-white);
}
.btn-white-outlined:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Small Button */
.btn-small {
padding: 6px 16px;
font-size: 14px;
border-radius: 3px;
background: var(--ihu-navy);
color: var(--bg-white);
border-color: var(--ihu-navy);
}
.btn-small:hover {
background: var(--ihu-navy-dark);
}
/* Apply Button (Nav) */
.btn-apply {
background: var(--ihu-gold);
color: var(--ihu-navy);
padding: 8px 20px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
border: none;
}
.btn-apply:hover {
background: var(--ihu-gold-dark);
color: var(--bg-white);
}
/* Footer CTA */
.btn-footer-cta {
background: var(--ihu-gold);
color: var(--ihu-navy);
padding: 10px 24px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
display: inline-block;
margin-top: var(--space-md);
}
.btn-footer-cta:hover {
background: var(--ihu-gold-dark);
color: var(--bg-white);
}
/* ==================== META NAVIGATION ==================== */
.meta-nav {
background: var(--bg-light);
height: var(--meta-height);
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-light);
}
.meta-nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.meta-nav-left {
display: flex;
gap: var(--space-lg);
}
.meta-nav-left a {
font-size: 13px;
font-weight: 400;
color: var(--text-tertiary);
}
.meta-nav-left a:hover {
color: var(--ihu-navy);
}
.meta-nav-right {
display: flex;
gap: var(--space-md);
}
.meta-nav-right a {
font-size: 13px;
color: var(--text-tertiary);
}
.meta-nav-right a:hover {
color: var(--ihu-navy);
}
/* ==================== PRIMARY HEADER ==================== */
.main-header {
background: var(--ihu-navy);
height: var(--nav-height);
position: sticky;
top: 0;
z-index: 1000;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
/* Logo */
.logo a {
display: flex;
align-items: center;
gap: 12px;
}
.logo img {
height: 42px;
width: auto;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.logo-name {
font-size: 16px;
font-weight: 700;
color: var(--text-white);
}
.logo-sub {
font-size: 11px;
font-weight: 600;
color: var(--ihu-gold);
letter-spacing: 2px;
text-transform: uppercase;
}
/* ==================== MAIN NAVIGATION ==================== */
.main-nav>ul {
display: flex;
height: var(--nav-height);
}
.main-nav>ul>li {
position: relative;
display: flex;
align-items: center;
}
.main-nav>ul>li>a {
display: flex;
align-items: center;
height: var(--nav-height);
padding: 0 16px;
font-size: 15px;
font-weight: 600;
color: var(--text-white);
letter-spacing: 0.2px;
border-bottom: 3px solid transparent;
}
.main-nav>ul>li>a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-white);
}
.main-nav>ul>li.active>a {
border-bottom-color: var(--ihu-gold);
}
/* ==================== MEGA MENU ==================== */
.mega-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 500px;
background: var(--bg-white);
border-top: 3px solid var(--ihu-navy);
box-shadow: var(--shadow-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 100;
}
.has-dropdown:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-menu-inner {
display: flex;
padding: var(--space-lg);
gap: var(--space-xl);
}
.mega-col {
min-width: 180px;
}
.mega-col h4 {
font-size: 13px;
font-weight: 700;
color: var(--ihu-navy);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--ihu-gold);
}
.mega-col ul li {
margin-bottom: var(--space-sm);
}
.mega-col ul li a {
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
}
.mega-col ul li a:hover {
color: var(--ihu-navy);
text-decoration: underline;
}
.mega-col ul li a i {
color: var(--ihu-gold);
font-size: 12px;
width: 16px;
}
/* ==================== HEADER RIGHT ==================== */
.header-right {
display: flex;
align-items: center;
gap: var(--space-md);
}
.search-toggle {
background: none;
border: none;
color: var(--text-white);
font-size: 16px;
cursor: pointer;
padding: 8px;
border-radius: var(--radius);
}
.search-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
.mobile-toggle {
display: none;
background: none;
border: none;
color: var(--text-white);
font-size: 22px;
cursor: pointer;
padding: 8px;
}
/* ==================== SEARCH OVERLAY ==================== */
.search-overlay {
display: none;
background: var(--bg-white);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--border-color);
}
.search-overlay.active {
display: block;
}
.search-form {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.search-form input {
flex: 1;
padding: 12px 16px;
font-size: 16px;
font-family: var(--font-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
outline: none;
}
.search-form input:focus {
border-color: var(--ihu-navy);
box-shadow: 0 0 0 2px rgba(27, 42, 74, 0.1);
}
.search-form button {
padding: 12px 16px;
background: var(--ihu-navy);
color: var(--text-white);
border: none;
border-radius: var(--radius);
font-size: 16px;
cursor: pointer;
}
.search-form button:hover {
background: var(--ihu-navy-dark);
}
.search-close {
background: none !important;
color: var(--text-tertiary) !important;
}
.search-close:hover {
color: var(--text-primary) !important;
}
/* ==================== HERO BANNER ==================== */
.hero-banner {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
background: url('assets/images/hero-bg.jpg') center/cover no-repeat;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(27, 42, 74, 0.75);
}
.hero-banner-content {
position: relative;
z-index: 2;
padding: var(--space-3xl) 0;
max-width: 700px;
}
.hero-banner h1 {
font-size: 42px;
font-weight: 700;
color: var(--text-white);
line-height: 1.20;
letter-spacing: -0.2px;
margin-bottom: var(--space-md);
}
.hero-lead {
font-size: 18px;
font-weight: 400;
color: var(--text-white);
opacity: 0.9;
line-height: 1.55;
margin-bottom: var(--space-xl);
}
.hero-actions {
display: flex;
gap: var(--space-md);
}
/* ==================== ANNOUNCEMENT BAR ==================== */
.announcement-bar {
background: var(--ihu-gold-tint);
border-bottom: 1px solid var(--ihu-gold);
padding: 12px 0;
}
.announcement-inner {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 15px;
color: var(--text-secondary);
}
.announcement-inner i {
color: var(--ihu-gold-dark);
font-size: 18px;
}
.announcement-inner a {
color: var(--ihu-navy);
font-weight: 600;
text-decoration: underline;
}
.announcement-inner a:hover {
color: var(--ihu-navy-dark);
}
/* ==================== SECTIONS ==================== */
.section {
padding: var(--space-4xl) 0;
}
.section-alt {
background: var(--bg-light);
}
.section-tag {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: var(--ihu-gold-dark);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-sm);
}
.section-intro {
font-size: 16px;
color: var(--text-tertiary);
max-width: 640px;
margin-bottom: var(--space-xl);
}
.section-header-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--space-xl);
}
.section-header-row h2 {
margin-bottom: 0;
}
/* ==================== QUICK LINKS TILES ==================== */
.quick-links-section {
padding: var(--space-2xl) 0;
border-bottom: 1px solid var(--border-light);
}
.quick-links-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-md);
}
.quick-link-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-md);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
text-align: center;
transition: border-color 0.2s ease;
}
.quick-link-tile:hover {
border-color: var(--ihu-navy);
}
.quick-link-tile:hover i {
color: var(--ihu-gold);
}
.quick-link-tile i {
font-size: 28px;
color: var(--ihu-navy);
transition: color 0.2s ease;
}
.quick-link-tile span {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
/* ==================== CONTENT WITH SIDEBAR ==================== */
.content-with-sidebar {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-2xl);
align-items: start;
}
.main-content h2 {
margin-top: 0;
}
.main-content p {
color: var(--text-secondary);
line-height: 1.60;
}
/* Sidebar */
.sidebar {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.sidebar-box {
background: var(--bg-white);
border-left: 4px solid var(--ihu-navy);
padding: var(--space-lg) var(--space-lg);
}
.sidebar-box h4 {
font-size: 16px;
font-weight: 700;
color: var(--ihu-navy);
margin-bottom: var(--space-md);
}
.sidebar-box p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.50;
}
.sidebar-highlight {
background: var(--ihu-navy-tint);
border-left-color: var(--ihu-gold);
}
/* Fact List */
.fact-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
}
.fact-list li:last-child {
border-bottom: none;
}
.fact-number {
font-size: 20px;
font-weight: 700;
color: var(--ihu-navy);
}
.fact-label {
color: var(--text-tertiary);
}
/* ==================== CARD SYSTEM ==================== */
.card-grid {
display: grid;
gap: var(--space-lg);
}
.card-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.card-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.card-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
/* Card */
.card {
display: block;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-hover);
}
.card:hover .card-title {
color: var(--ihu-navy);
}
.card-image {
width: 100%;
height: 180px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.card:hover .card-image img {
transform: scale(1.03);
}
.card-body {
padding: var(--space-lg);
}
.card-meta {
font-size: 13px;
font-weight: 400;
color: var(--text-tertiary);
display: block;
margin-bottom: var(--space-xs);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
margin-bottom: var(--space-sm);
transition: color 0.2s ease;
}
.card-body p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.50;
margin-bottom: var(--space-sm);
}
.card-link {
font-size: 14px;
font-weight: 600;
color: var(--ihu-gold-dark);
}
.card:hover .card-link {
text-decoration: underline;
}
/* ==================== STEPS ==================== */
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.step-item {
position: relative;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl) var(--space-lg) var(--space-lg);
transition: border-color 0.2s ease;
}
.step-item:hover {
border-color: var(--ihu-navy);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--ihu-navy);
color: var(--ihu-gold);
font-size: 16px;
font-weight: 700;
border-radius: 50%;
margin-bottom: var(--space-md);
}
.step-item h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.step-item p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: 0;
}
/* ==================== FEATURES (WHY IHU) ==================== */
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.feature-item {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-light);
border-radius: var(--radius);
border-left: 4px solid var(--ihu-navy);
transition: border-left-color 0.2s ease;
}
.feature-item:hover {
border-left-color: var(--ihu-gold);
}
.feature-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.feature-content h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.feature-content p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: 0;
}
/* ==================== CTA BANNER ==================== */
.cta-banner {
background: linear-gradient(135deg, var(--ihu-navy) 0%, var(--ihu-navy-dark) 100%);
padding: var(--space-3xl) 0;
}
.cta-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
}
.cta-text h2 {
font-size: 30px;
font-weight: 700;
color: var(--text-white);
margin-bottom: var(--space-sm);
}
.cta-text p {
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 0;
}
.cta-actions {
display: flex;
gap: var(--space-md);
flex-shrink: 0;
}
/* ==================== FOOTER ==================== */
.main-footer {
background: var(--footer-bg);
color: var(--footer-text);
padding: var(--space-3xl) 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
/* Footer Logo */
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--space-md);
}
.footer-logo img {
height: 190px;
width: auto;
}
.footer-logo-name {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--text-white);
line-height: 1.2;
}
.footer-logo-sub {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--ihu-gold);
letter-spacing: 2px;
text-transform: uppercase;
}
.footer-col-info p {
font-size: 14px;
line-height: 1.70;
color: var(--footer-text);
margin-bottom: var(--space-lg);
}
/* Footer Socials */
.footer-socials {
display: flex;
gap: var(--space-sm);
}
.footer-socials a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--footer-text);
font-size: 14px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-socials a:hover {
background: var(--ihu-gold);
color: var(--ihu-navy);
}
/* Footer Columns */
.footer-col h4 {
font-size: 16px;
font-weight: 700;
color: var(--text-white);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
position: relative;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: var(--ihu-gold);
border-radius: 2px;
}
.footer-col ul li {
margin-bottom: var(--space-sm);
}
.footer-col ul li a {
font-size: 14px;
font-weight: 400;
color: var(--footer-text);
transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-col ul li a:hover {
color: var(--text-white);
padding-left: 4px;
}
/* Footer Contact List */
.footer-contact-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 14px;
}
.footer-contact-list li i {
color: var(--ihu-gold);
width: 16px;
text-align: center;
flex-shrink: 0;
}
.footer-contact-list li a {
color: var(--footer-text);
}
.footer-contact-list li a:hover {
color: var(--text-white);
}
/* Footer CTA */
.footer-cta {
margin-top: var(--space-md);
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: var(--space-lg) 0;
}
.footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text-muted);
}
.footer-bottom-links {
display: flex;
gap: var(--space-lg);
}
.footer-bottom-links a {
font-size: 13px;
color: var(--text-muted);
}
.footer-bottom-links a:hover {
color: var(--text-white);
}
/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
padding: var(--space-md) 0;
border-bottom: 1px solid var(--border-light);
background: var(--bg-white);
}
.breadcrumbs-list {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
color: var(--text-tertiary);
}
.breadcrumbs-list li {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.breadcrumbs-list li a {
color: var(--ihu-navy);
font-weight: 400;
}
.breadcrumbs-list li a:hover {
text-decoration: underline;
}
.breadcrumbs-list li.current {
font-weight: 600;
color: var(--text-primary);
}
.breadcrumbs-list .separator {
color: var(--text-muted);
font-size: 11px;
}
/* ==================== PAGE HEADER (Interior Pages) ==================== */
.page-header {
background: var(--ihu-navy);
padding: var(--space-2xl) 0;
}
.page-header h1 {
color: var(--text-white);
font-size: 32px;
font-weight: 700;
margin-bottom: 0;
}
.page-header p {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
margin-top: var(--space-sm);
margin-bottom: 0;
}
/* ==================== INTERIOR PAGE LAYOUT ==================== */
.page-content {
padding: var(--space-2xl) 0 var(--space-4xl);
}
.page-content .content-with-sidebar {
align-items: start;
}
/* ==================== TABLES ==================== */
.data-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-lg);
font-size: 14px;
}
.data-table thead th {
background: var(--ihu-navy);
color: var(--text-white);
padding: 12px 16px;
font-weight: 600;
text-align: left;
font-size: 14px;
}
.data-table tbody td {
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
}
.data-table tbody tr:nth-child(even) {
background: var(--bg-off-white);
}
.data-table tbody tr:hover {
background: var(--ihu-navy-tint);
}
/* ==================== FORMS ==================== */
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.form-group label .required {
color: var(--alert-red);
}
.form-control {
width: 100%;
padding: 10px 14px;
font-size: 16px;
font-family: var(--font-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-white);
color: var(--text-primary);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
line-height: 1.50;
}
.form-control:focus {
outline: none;
border-color: var(--ihu-navy);
box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1);
}
.form-control::placeholder {
color: var(--text-muted);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.form-hint {
display: block;
font-size: 13px;
color: var(--text-tertiary);
margin-top: var(--space-xs);
}
.form-error {
display: none;
font-size: 13px;
color: var(--alert-red);
margin-top: var(--space-xs);
}
.form-error.visible {
display: block;
}
.form-control.error {
border-color: var(--alert-red);
background: #FFF5F5;
}
.form-control.error:focus {
box-shadow: 0 0 0 3px rgba(var(--ihu-navy-rgb), 0.1);
}
/* ==================== CALLOUT / NOTICE BOXES ==================== */
.callout {
padding: var(--space-md) var(--space-lg);
border-left: 4px solid var(--ihu-navy);
background: var(--ihu-navy-tint);
border-radius: 0 var(--radius) var(--radius) 0;
margin-bottom: var(--space-lg);
font-size: 14px;
}
.callout-info {
border-left-color: var(--info-blue);
background: #EBF5FF;
}
.callout-warning {
border-left-color: var(--warning-yellow);
background: #FFFDE7;
}
.callout-error {
border-left-color: var(--alert-red);
background: #FFF0F0;
}
.callout-success {
border-left-color: #28a745;
background: #F0FFF4;
}
.callout h4 {
font-size: 15px;
font-weight: 700;
margin-bottom: var(--space-xs);
}
.callout p:last-child {
margin-bottom: 0;
}
/* ==================== CERTIFICATE VERIFICATION ==================== */
.verify-section {
max-width: 600px;
margin: 0 auto;
padding: var(--space-2xl) 0;
}
.verify-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
text-align: center;
}
.verify-card .verify-icon {
width: 64px;
height: 64px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto var(--space-lg);
}
.verify-card h2 {
font-size: 24px;
margin-bottom: var(--space-sm);
}
.verify-card p {
color: var(--text-tertiary);
font-size: 14px;
margin-bottom: var(--space-lg);
}
.verify-form {
display: flex;
gap: var(--space-sm);
}
.verify-form input {
flex: 1;
padding: 12px 16px;
font-size: 16px;
font-family: var(--font-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.verify-form input:focus {
outline: none;
border-color: var(--ihu-navy);
box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1);
}
.verify-result.success {
display: block;
background: #F0FFF4;
border: 1px solid #28a745;
}
/* ==================== PAGINATION ==================== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
margin-top: var(--space-xl);
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-sm);
font-size: 14px;
font-weight: 600;
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-secondary);
transition: all 0.2s ease;
}
.pagination a:hover {
border-color: var(--ihu-navy);
color: var(--ihu-navy);
background: var(--ihu-navy-tint);
}
.pagination .active {
background: var(--ihu-navy);
color: var(--text-white);
border-color: var(--ihu-navy);
}
.pagination .disabled {
opacity: 0.4;
pointer-events: none;
}
/* ==================== TAGS / BADGES ==================== */
.tag {
display: inline-block;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tag-primary {
background: var(--ihu-navy);
color: var(--text-white);
}
.tag-gold {
background: var(--ihu-gold-tint);
color: var(--ihu-gold-dark);
}
.tag-info {
background: #EBF5FF;
color: var(--info-blue);
}
/* ==================== ACCORDION (FAQ) ==================== */
.accordion {
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid var(--border-color);
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
width: 100%;
background: var(--bg-white);
border: none;
padding: var(--space-md) var(--space-lg);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s ease;
}
.accordion-header:hover {
background: var(--bg-light);
}
.accordion-header.active {
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
}
.accordion-header i {
font-size: 12px;
transition: transform 0.3s ease;
}
.accordion-header.active i {
transform: rotate(180deg);
}
.accordion-body {
display: none;
padding: 0 var(--space-lg) var(--space-lg);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.60;
}
.accordion-body.active {
display: block;
}
/* ==================== STAFF / TEAM CARDS ==================== */
.staff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.staff-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staff-card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-hover);
}
.staff-photo {
width: 100%;
height: 220px;
overflow: hidden;
background: var(--bg-light);
position: relative;
}
.staff-photo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: var(--ihu-gold);
opacity: 0;
transition: opacity 0.2s ease;
}
.staff-card:hover .staff-photo::after {
opacity: 1;
}
.staff-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.staff-info {
padding: var(--space-md) var(--space-md) var(--space-lg);
}
.staff-info h4 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.staff-info .staff-role,
.staff-role {
display: block;
font-size: 13px;
color: var(--ihu-gold-dark);
font-weight: 600;
margin-bottom: var(--space-sm);
}
.staff-info .staff-dept,
.staff-dept {
display: block;
font-size: 12px;
color: var(--text-tertiary);
}
.staff-info .staff-email,
.staff-email {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ihu-navy);
margin-top: var(--space-sm);
}
.staff-email i {
font-size: 11px;
}
.staff-info .staff-email:hover,
.staff-email:hover {
text-decoration: underline;
color: var(--ihu-navy-dark);
}
/* ==================== SCROLLED HEADER STATE ==================== */
.main-header.scrolled {
box-shadow: var(--shadow-dropdown);
}
/* ==================== LOADING / SKELETON ==================== */
.skeleton {
background: linear-gradient(90deg, var(--bg-light) 25%, var(--bg-warm-gray) 50%, var(--bg-light) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: var(--radius);
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ==================== BACK TO TOP ==================== */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 44px;
height: 44px;
background: var(--ihu-navy);
color: var(--text-white);
border: none;
border-radius: var(--radius);
font-size: 18px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 999;
transition: background-color 0.2s ease, opacity 0.3s ease;
box-shadow: var(--shadow-card);
}
.back-to-top:hover {
background: var(--ihu-gold);
color: var(--ihu-navy);
}
.back-to-top.visible {
display: flex;
}
/* ==================== PRINT STYLES ==================== */
@media print {
.main-header,
.meta-nav,
.main-footer,
.back-to-top,
.cta-banner,
.announcement-bar {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
}
.container {
max-width: 100%;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
}
/* ==================== RESPONSIVE: TABLET LANDSCAPE ==================== */
@media (max-width: 1024px) {
.card-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.quick-links-grid {
grid-template-columns: repeat(3, 1fr);
}
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.staff-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-banner h1 {
font-size: 36px;
}
.cta-banner-inner {
flex-direction: column;
text-align: center;
}
.cta-text {
text-align: center;
}
}
/* ==================== RESPONSIVE: TABLET PORTRAIT ==================== */
@media (max-width: 768px) {
/* Header */
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--ihu-navy);
z-index: 9999;
overflow-y: auto;
padding: var(--space-4xl) var(--space-lg) var(--space-lg);
}
.main-nav.active {
display: block;
}
.main-nav>ul {
flex-direction: column;
height: auto;
}
.main-nav>ul>li {
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.main-nav>ul>li>a {
height: auto;
padding: 14px 0;
font-size: 16px;
border-bottom: none;
}
.mobile-toggle {
display: block;
}
/* Mobile Mega Menu */
.mega-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border-top: none;
background: transparent;
min-width: auto;
display: none;
}
.has-dropdown.open .mega-menu {
display: block;
}
.mega-menu-inner {
flex-direction: column;
padding: 0 0 var(--space-md) var(--space-md);
gap: var(--space-md);
}
.mega-col h4 {
color: var(--ihu-gold);
border-bottom-color: rgba(255, 255, 255, 0.15);
font-size: 12px;
}
.mega-col ul li a {
color: rgba(255, 255, 255, 0.8);
padding: 6px 0;
}
.mega-col ul li a:hover {
color: var(--text-white);
}
/* Mobile Close Button */
.mobile-nav-close {
position: absolute;
top: var(--space-md);
right: var(--space-lg);
background: none;
border: none;
color: var(--text-white);
font-size: 24px;
cursor: pointer;
}
/* Meta Nav */
.meta-nav {
display: none;
}
/* Hero */
.hero-banner h1 {
font-size: 28px;
}
.hero-lead {
font-size: 16px;
}
.hero-actions {
flex-direction: column;
gap: var(--space-sm);
}
.hero-actions .btn {
width: 100%;
text-align: center;
}
/* Content */
.content-with-sidebar {
grid-template-columns: 1fr;
}
.sidebar {
order: 2;
}
/* Cards */
.card-grid-4,
.card-grid-3,
.card-grid-2 {
grid-template-columns: 1fr;
}
/* Quick Links */
.quick-links-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Steps */
.steps-grid {
grid-template-columns: 1fr;
}
/* Staff */
.staff-grid {
grid-template-columns: 1fr;
}
/* Section Header Row */
.section-header-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
/* Announcement */
.announcement-inner {
font-size: 14px;
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
gap: var(--space-md);
}
.footer-bottom-links {
justify-content: center;
flex-wrap: wrap;
}
/* CTA */
.cta-banner-inner {
flex-direction: column;
text-align: center;
}
.cta-actions {
flex-direction: column;
width: 100%;
}
.cta-actions .btn {
width: 100%;
text-align: center;
}
/* Page Header */
.page-header h1 {
font-size: 26px;
}
/* Verify */
.verify-form {
flex-direction: column;
}
/* Tables */
.data-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Section Spacing */
.section {
padding: var(--space-2xl) 0;
}
/* Back to top */
.back-to-top {
bottom: 20px;
right: 20px;
}
}
/* ==================== RESPONSIVE: SMALL MOBILE ==================== */
@media (max-width: 375px) {
.container {
padding: 0 var(--space-md);
}
.hero-banner h1 {
font-size: 24px;
}
.hero-banner-content {
padding: var(--space-2xl) 0;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
.quick-links-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.quick-link-tile {
padding: var(--space-md) var(--space-sm);
}
.quick-link-tile i {
font-size: 22px;
}
.quick-link-tile span {
font-size: 12px;
}
.cta-text h2 {
font-size: 24px;
}
.btn {
padding: 10px 20px;
font-size: 14px;
}
}
/* ==================== ACCESSIBILITY ==================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Ensure focus is visible on all interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Reduced motion preference */
@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;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--border-color: #000000;
--text-tertiary: #333333;
--text-muted: #555555;
}
.card {
border-width: 2px;
}
.btn {
border-width: 2px;
}
}
/* =============================================================
ABOUT PAGE STYLES
============================================================= */
/* Page Header Tag */
.page-header-tag {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--ihu-gold);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-sm);
}
/* ==================== ABOUT HERO BLOCK ==================== */
.about-hero-block {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.about-hero-content h2 {
font-size: 30px;
line-height: 1.25;
}
.about-hero-image {
border-radius: var(--radius);
overflow: hidden;
}
.about-hero-image img {
width: 100%;
height: 350px;
object-fit: cover;
border-radius: var(--radius);
}
/* ==================== FACT VALUE (About Page) ==================== */
.fact-value {
font-weight: 700;
color: var(--ihu-navy);
font-size: 15px;
}
/* ==================== MISSION & VISION ==================== */
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.mv-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
border-top: 4px solid var(--ihu-navy);
}
.mv-vision {
border-top-color: var(--ihu-gold);
}
.mv-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: var(--space-lg);
}
.mv-mission .mv-icon {
background: var(--ihu-navy);
color: var(--ihu-gold);
}
.mv-vision .mv-icon {
background: var(--ihu-gold);
color: var(--ihu-navy);
}
.mv-card h2 {
font-size: 24px;
}
.mv-card p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.60;
}
.mv-highlights {
margin-top: var(--space-md);
}
.mv-highlights li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-size: 14px;
color: var(--text-secondary);
}
.mv-highlights li i {
color: var(--ihu-gold);
font-size: 12px;
margin-top: 4px;
flex-shrink: 0;
}
/* ==================== NAVY SECTION ==================== */
.section-navy {
background: linear-gradient(135deg, var(--ihu-navy) 0%, var(--ihu-navy-dark) 100%);
padding: var(--space-4xl) 0;
}
.text-white {
color: var(--text-white) !important;
}
.text-white-muted {
color: rgba(255, 255, 255, 0.8);
line-height: 1.60;
}
.section-tag-gold {
background: rgba(201, 168, 76, 0.2);
color: var(--ihu-gold);
padding: 4px 14px;
border-radius: 3px;
}
/* Name Meaning Grid */
.name-meaning-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.name-meaning-item {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: var(--space-xl) var(--space-lg);
}
.name-icon {
width: 56px;
height: 56px;
background: rgba(201, 168, 76, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
}
.name-icon i {
font-size: 22px;
color: var(--ihu-gold);
}
.name-meaning-item h3 {
color: var(--text-white);
font-size: 20px;
margin-bottom: var(--space-sm);
}
.name-meaning-item p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin-bottom: 0;
}
/* ==================== WHY DETAILED GRID ==================== */
.why-detailed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.why-detailed-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
position: relative;
transition: border-color 0.2s ease;
}
.why-detailed-card:hover {
border-color: var(--ihu-navy);
}
.why-detailed-number {
position: absolute;
top: var(--space-md);
right: var(--space-lg);
font-size: 40px;
font-weight: 700;
color: rgba(27, 42, 74, 0.06);
line-height: 1;
}
.why-detailed-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: var(--space-md);
}
.why-detailed-card h3 {
font-size: 20px;
margin-bottom: var(--space-sm);
}
.why-detailed-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.60;
}
.why-list {
margin-top: var(--space-md);
}
.why-list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 4px 0;
font-size: 13px;
color: var(--text-secondary);
}
.why-list li i {
color: var(--ihu-gold);
font-size: 12px;
margin-top: 3px;
flex-shrink: 0;
}
/* ==================== VALUE CARDS (SHARED) ==================== */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.value-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl) var(--space-lg);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.value-card:hover {
border-color: var(--ihu-navy);
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.value-icon {
width: 52px;
height: 52px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: var(--space-md);
transition: all 0.3s ease;
flex-shrink: 0;
}
.value-card:hover .value-icon {
background: var(--ihu-navy);
color: var(--ihu-gold);
}
.value-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.value-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ==================== ACCREDITATION PREVIEW ==================== */
.accreditation-preview {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.accreditation-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin: var(--space-lg) 0;
}
.acc-highlight {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
padding: 10px 14px;
background: var(--ihu-navy-tint);
border-radius: var(--radius);
}
.acc-highlight i {
color: var(--ihu-gold);
font-size: 16px;
flex-shrink: 0;
}
.acc-buttons {
display: flex;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.accreditation-preview-image {
border-radius: var(--radius);
overflow: hidden;
}
.accreditation-preview-image img {
width: 100%;
height: 380px;
object-fit: cover;
border-radius: var(--radius);
}
/* =============================================================
ACCREDITATION PAGE STYLES
============================================================= */
/* ==================== AUDIENCE BLOCKS ==================== */
.accred-audience-block {
margin-bottom: var(--space-2xl);
}
.accred-audience-block:last-child {
margin-bottom: 0;
}
.accred-audience-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--border-light);
}
.accred-audience-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.accred-audience-header h3 {
font-size: 22px;
margin-bottom: 0;
}
/* Accreditation Benefits Grid */
.accred-benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
.accred-benefit-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-lg);
transition: border-color 0.2s ease;
}
.accred-benefit-card:hover {
border-color: var(--ihu-navy);
}
.accred-benefit-icon {
width: 40px;
height: 40px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
margin-bottom: var(--space-md);
}
.accred-benefit-card h4 {
font-size: 16px;
margin-bottom: var(--space-sm);
}
.accred-benefit-card p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.55;
margin-bottom: 0;
}
/* ==================== PROGRAMS WE ACCREDIT ==================== */
.programs-accredit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.program-accredit-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-light);
border-radius: var(--radius);
border-left: 3px solid var(--ihu-navy);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
transition: border-left-color 0.2s ease;
}
.program-accredit-item:hover {
border-left-color: var(--ihu-gold);
}
.program-accredit-item i {
color: var(--ihu-gold);
font-size: 16px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
/* Sidebar Checklist */
.sidebar-check-list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
font-size: 13px;
color: var(--text-secondary);
}
.sidebar-check-list li i {
color: var(--ihu-gold);
font-size: 11px;
margin-top: 3px;
flex-shrink: 0;
}
/* ==================== PARTNER OPTIONS ==================== */
.partner-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.partner-option-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.partner-option-header {
background: var(--ihu-navy);
padding: var(--space-lg);
text-align: center;
}
.partner-option-icon {
width: 56px;
height: 56px;
background: rgba(201, 168, 76, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--ihu-gold);
margin: 0 auto var(--space-md);
}
.partner-option-header h3 {
color: var(--ihu-gold);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-xs);
}
.partner-option-label {
color: var(--text-white);
font-size: 18px;
font-weight: 600;
margin-bottom: 0 !important;
}
.partner-steps {
padding: var(--space-lg);
}
.partner-step {
display: flex;
gap: var(--space-md);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--border-light);
}
.partner-step:last-child {
border-bottom: none;
}
.partner-step-num {
width: 32px;
height: 32px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.partner-step-content h4 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.partner-step-content p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: 0;
}
.partner-option-cta {
padding: 0 var(--space-lg) var(--space-lg);
}
.partner-option-cta .btn {
width: 100%;
text-align: center;
}
/* =============================================================
RESPONSIVE - ABOUT & ACCREDITATION
============================================================= */
@media (max-width: 1024px) {
.about-hero-block {
grid-template-columns: 1fr;
}
.about-hero-image {
order: -1;
}
.mission-vision-grid {
grid-template-columns: 1fr;
}
.why-detailed-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.name-meaning-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.accreditation-preview {
grid-template-columns: 1fr;
}
.accreditation-preview-image {
order: -1;
}
.accred-benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.partner-options-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.about-hero-content h2 {
font-size: 24px;
}
.about-hero-image img {
height: 250px;
}
.values-grid {
grid-template-columns: 1fr;
}
.accreditation-highlights {
grid-template-columns: 1fr;
}
.acc-buttons {
flex-direction: column;
}
.accred-benefits-grid {
grid-template-columns: 1fr;
}
.programs-accredit-grid {
grid-template-columns: 1fr;
}
.accred-audience-header {
flex-direction: column;
text-align: center;
}
}
/* =============================================================
FACULTY PAGE STYLES
============================================================= */
/* ==================== FACULTY HERO ==================== */
.faculty-hero {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.faculty-hero-overlay {
position: absolute;
inset: 0;
background: rgba(27, 42, 74, 0.8);
}
.faculty-hero-content {
position: relative;
z-index: 2;
padding: var(--space-3xl) 0;
max-width: 700px;
}
.faculty-hero-badge {
width: 64px;
height: 64px;
background: rgba(201, 168, 76, 0.15);
border: 2px solid var(--ihu-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
}
.faculty-hero-badge i {
font-size: 26px;
color: var(--ihu-gold);
}
.faculty-hero-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--ihu-gold);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-xs);
}
.faculty-hero h1 {
font-size: 40px;
font-weight: 700;
color: var(--text-white);
line-height: 1.20;
margin-bottom: var(--space-md);
}
.faculty-hero-tagline {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
margin-bottom: var(--space-xl);
}
.faculty-hero-actions {
display: flex;
gap: var(--space-md);
}
/* ==================== FACULTY STATS BAR ==================== */
.faculty-stats-bar {
background: var(--bg-white);
border-bottom: 1px solid var(--border-color);
padding: var(--space-lg) 0;
}
.faculty-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
text-align: center;
}
.faculty-stat {
padding: var(--space-md);
border-right: 1px solid var(--border-light);
}
.faculty-stat:last-child {
border-right: none;
}
.faculty-stat-number {
display: block;
font-size: 30px;
font-weight: 700;
color: var(--ihu-navy);
line-height: 1.2;
margin-bottom: var(--space-xs);
}
.faculty-stat-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ==================== DEAN'S MESSAGE ==================== */
.dean-message-block {
display: flex;
gap: var(--space-xl);
margin-top: var(--space-2xl);
padding: var(--space-xl);
background: var(--bg-light);
border-radius: var(--radius);
border-left: 4px solid var(--ihu-gold);
}
.dean-photo {
flex-shrink: 0;
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--ihu-gold);
}
.dean-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dean-content h3 {
font-size: 18px;
color: var(--ihu-navy);
margin-bottom: var(--space-sm);
}
.dean-content blockquote {
font-size: 15px;
font-style: italic;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 var(--space-md);
padding: 0;
border: none;
}
.dean-info {
display: flex;
flex-direction: column;
}
.dean-info strong {
font-size: 15px;
color: var(--text-primary);
}
.dean-info span {
font-size: 13px;
color: var(--text-tertiary);
}
/* ==================== SIDEBAR CONTACT ==================== */
.sidebar-contact li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
}
.sidebar-contact li i {
color: var(--ihu-gold);
width: 16px;
text-align: center;
flex-shrink: 0;
}
.sidebar-contact li a {
color: var(--ihu-navy);
font-weight: 600;
}
.sidebar-contact li a:hover {
text-decoration: underline;
}
/* ==================== DEPARTMENTS ==================== */
.departments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.department-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
transition: border-color 0.2s ease;
}
.department-card:hover {
border-color: var(--ihu-navy);
}
.department-card-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.department-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.department-card-header h3 {
font-size: 18px;
margin-bottom: 0;
line-height: 1.30;
}
.department-card>p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
}
.department-focus {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
}
.department-focus h4 {
font-size: 13px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-sm);
}
.department-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.dept-tag {
display: inline-block;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: var(--ihu-navy);
background: var(--ihu-navy-tint);
border-radius: 3px;
}
/* ==================== PROGRAM TABS ==================== */
.program-tabs {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
border-bottom: 2px solid var(--border-light);
padding-bottom: 0;
overflow-x: auto;
}
.program-tab {
padding: 12px 20px;
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
color: var(--text-tertiary);
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
margin-bottom: -2px;
display: flex;
align-items: center;
gap: 8px;
}
.program-tab:hover {
color: var(--ihu-navy);
}
.program-tab.active {
color: var(--ihu-navy);
border-bottom-color: var(--ihu-gold);
}
.tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--bg-light);
color: var(--text-tertiary);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.program-tab.active .tab-count {
background: var(--ihu-navy);
color: var(--text-white);
}
/* ==================== PROGRAM CARDS ==================== */
.programs-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.program-card {
display: flex;
justify-content: space-between;
align-items: stretch;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.2s ease;
animation: fadeInUp 0.3s ease forwards;
}
.program-card:hover {
border-color: var(--ihu-navy);
}
.program-card.hidden {
display: none !important;
}
.program-card-left {
flex: 1;
padding: var(--space-lg);
}
.program-level-tag {
margin-bottom: var(--space-sm);
display: inline-block;
}
.tag-undergraduate {
background: #EBF5FF;
color: var(--info-blue);
}
.tag-postgraduate {
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
}
.tag-phd {
background: var(--ihu-gold-tint);
color: var(--ihu-gold-dark);
}
.tag-diplomas {
background: #F0FFF4;
color: #28a745;
}
.program-card-left h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.program-card-left p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.55;
margin-bottom: 0;
}
.program-card-right {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-off-white);
border-left: 1px solid var(--border-light);
min-width: 200px;
}
.program-meta-item {
display: flex;
align-items: center;
gap: 10px;
}
.program-meta-item i {
color: var(--ihu-gold);
font-size: 16px;
width: 18px;
text-align: center;
}
.program-meta-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.program-meta-value {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.btn-program-apply {
font-size: 13px;
padding: 8px 20px;
width: 100%;
text-align: center;
}
/* ==================== FACULTY RESPONSIVE ==================== */
@media (max-width: 1024px) {
.faculty-hero h1 {
font-size: 32px;
}
.faculty-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.faculty-stat {
border-right: none;
border-bottom: 1px solid var(--border-light);
}
.departments-grid {
grid-template-columns: 1fr;
}
.dean-message-block {
flex-direction: column;
align-items: center;
text-align: center;
}
.program-card {
flex-direction: column;
}
.program-card-right {
border-left: none;
border-top: 1px solid var(--border-light);
flex-direction: row;
flex-wrap: wrap;
min-width: auto;
}
}
@media (max-width: 768px) {
.faculty-hero {
min-height: 320px;
}
.faculty-hero h1 {
font-size: 26px;
}
.faculty-hero-tagline {
font-size: 16px;
}
.faculty-hero-actions {
flex-direction: column;
gap: var(--space-sm);
}
.faculty-hero-actions .btn {
width: 100%;
text-align: center;
}
.faculty-hero-badge {
width: 52px;
height: 52px;
}
.faculty-hero-badge i {
font-size: 22px;
}
.faculty-stats-grid {
grid-template-columns: 1fr 1fr;
}
.faculty-stat-number {
font-size: 24px;
}
.dean-message-block {
padding: var(--space-lg);
}
.dean-photo {
width: 100px;
height: 100px;
}
.program-tabs {
gap: 0;
}
.program-tab {
padding: 10px 14px;
font-size: 13px;
}
.program-card-right {
flex-direction: column;
}
.staff-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 375px) {
.faculty-hero h1 {
font-size: 22px;
}
.faculty-hero-tagline {
font-size: 14px;
}
.faculty-stats-grid {
grid-template-columns: 1fr;
}
.faculty-stat {
border-right: none;
}
.program-tab {
padding: 8px 10px;
font-size: 12px;
}
.tab-count {
display: none;
}
.staff-grid {
grid-template-columns: 1fr;
}
.department-card-header {
flex-direction: column;
text-align: center;
}
.department-tags {
justify-content: center;
}
}
/* fadeInUp animation — used by program-card and other components */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============================================================
FACULTY INTERNAL PAGE NAVIGATION (Sticky Sub-Nav)
============================================================= */
.faculty-subnav {
background: var(--bg-white);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: var(--nav-height);
z-index: 50;
overflow-x: auto;
}
.faculty-subnav-inner {
display: flex;
gap: 0;
}
.faculty-subnav a {
padding: 14px 20px;
font-size: 14px;
font-weight: 600;
color: var(--text-tertiary);
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.faculty-subnav a:hover,
.faculty-subnav a.active {
color: var(--ihu-navy);
border-bottom-color: var(--ihu-gold);
}
/* =============================================================
DEPARTMENT CARD — FULL WIDTH VARIANT (Single Column)
============================================================= */
.department-card-full {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
display: flex;
gap: var(--space-xl);
align-items: flex-start;
transition: border-color 0.2s ease;
margin-bottom: var(--space-md);
}
.department-card-full:hover {
border-color: var(--ihu-navy);
}
.department-card-full:last-child {
margin-bottom: 0;
}
.department-card-full .department-icon {
width: 56px;
height: 56px;
font-size: 22px;
flex-shrink: 0;
}
.department-card-full .department-body {
flex: 1;
}
.department-card-full .department-body h3 {
font-size: 20px;
margin-bottom: var(--space-sm);
}
.department-card-full .department-body p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.60;
}
/* =============================================================
PROGRAM CARD — COMPACT VARIANT (for listing pages)
============================================================= */
.program-card-compact {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
margin-bottom: var(--space-sm);
transition: border-color 0.2s ease;
}
.program-card-compact:hover {
border-color: var(--ihu-navy);
}
.program-card-compact h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
}
.program-card-compact .program-compact-meta {
display: flex;
align-items: center;
gap: var(--space-lg);
font-size: 13px;
color: var(--text-tertiary);
}
.program-card-compact .program-compact-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.program-card-compact .program-compact-meta i {
color: var(--ihu-gold);
font-size: 12px;
}
/* =============================================================
FACULTY COMPARISON TABLE (Optional)
============================================================= */
.faculty-comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-lg);
}
.faculty-comparison-table thead th {
background: var(--ihu-navy);
color: var(--text-white);
padding: 14px 16px;
font-size: 14px;
font-weight: 600;
text-align: left;
}
.faculty-comparison-table thead th:first-child {
border-radius: var(--radius) 0 0 0;
}
.faculty-comparison-table thead th:last-child {
border-radius: 0 var(--radius) 0 0;
}
.faculty-comparison-table tbody td {
padding: 12px 16px;
font-size: 14px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
}
.faculty-comparison-table tbody tr:nth-child(even) {
background: var(--bg-off-white);
}
.faculty-comparison-table tbody tr:hover {
background: var(--ihu-navy-tint);
}
.faculty-comparison-table .table-faculty-name {
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 10px;
}
.faculty-comparison-table .table-faculty-name i {
color: var(--ihu-gold);
font-size: 14px;
}
/* =============================================================
RESEARCH HIGHLIGHTS (Within Faculty Page)
============================================================= */
.research-highlights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.research-highlight-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-lg);
border-top: 3px solid var(--ihu-gold);
transition: border-color 0.2s ease;
}
.research-highlight-card:hover {
border-color: var(--ihu-navy);
}
.research-highlight-card h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.research-highlight-card p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.55;
margin-bottom: var(--space-sm);
}
.research-highlight-card .research-meta {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.research-highlight-card .research-meta i {
color: var(--ihu-gold);
font-size: 11px;
}
/* ==================== RESEARCH RESPONSIVE ==================== */
@media (max-width: 1024px) {
.research-highlights-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.research-highlights-grid {
grid-template-columns: 1fr;
}
.department-card-full {
flex-direction: column;
align-items: center;
text-align: center;
}
.program-card-compact {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.program-card-compact .program-compact-meta {
flex-wrap: wrap;
}
.faculty-subnav a {
padding: 12px 14px;
font-size: 13px;
}
}
/* =============================================================
FACULTY FEATURES — ICON GRID (Alternative Layout)
============================================================= */
.faculty-features-icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.faculty-feature-icon-card {
text-align: center;
padding: var(--space-xl) var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: border-color 0.2s ease;
}
.faculty-feature-icon-card:hover {
border-color: var(--ihu-navy);
}
.faculty-feature-icon-card .ff-icon {
width: 56px;
height: 56px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin: 0 auto var(--space-md);
transition: background-color 0.2s ease, color 0.2s ease;
}
.faculty-feature-icon-card:hover .ff-icon {
background: var(--ihu-navy);
color: var(--ihu-gold);
}
.faculty-feature-icon-card h4 {
font-size: 16px;
margin-bottom: var(--space-sm);
}
.faculty-feature-icon-card p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: 0;
}
@media (max-width: 768px) {
.faculty-features-icon-grid {
grid-template-columns: 1fr;
}
}
/* =============================================================
TESTIMONIAL CARD (Optional: Faculty Page)
============================================================= */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.testimonial-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
position: relative;
}
.testimonial-card::before {
content: '\201C';
font-size: 48px;
font-family: Georgia, serif;
color: var(--ihu-gold);
position: absolute;
top: var(--space-md);
right: var(--space-lg);
line-height: 1;
opacity: 0.3;
}
.testimonial-card blockquote {
font-size: 14px;
font-style: italic;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 var(--space-md);
border: none;
padding: 0;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.testimonial-author-photo {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.testimonial-author-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-author-info strong {
display: block;
font-size: 14px;
color: var(--text-primary);
}
.testimonial-author-info span {
display: block;
font-size: 12px;
color: var(--text-tertiary);
}
@media (max-width: 768px) {
.testimonial-grid {
grid-template-columns: 1fr;
}
}
/* =============================================================
LOADING STATE — PROGRAM CARDS
============================================================= */
.program-card.loading {
opacity: 0.5;
pointer-events: none;
}
/* =============================================================
EMPTY STATE
============================================================= */
.empty-state {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
color: var(--text-muted);
}
.empty-state i {
font-size: 48px;
color: var(--border-color);
margin-bottom: var(--space-md);
display: block;
}
.empty-state h3 {
font-size: 18px;
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
}
.empty-state p {
font-size: 14px;
max-width: 400px;
margin: 0 auto;
}
/* =============================================================
APPLICATION PAGE STYLES
============================================================= */
/* ==================== FORM PROGRESS BAR ==================== */
.application-form-wrapper {
position: relative;
}
.form-progress {
margin-bottom: var(--space-2xl);
}
.progress-bar {
width: 100%;
height: 4px;
background: var(--border-light);
border-radius: 2px;
margin-bottom: var(--space-lg);
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 20%;
background: var(--ihu-gold);
border-radius: 2px;
transition: width 0.4s ease;
}
.progress-steps {
display: flex;
justify-content: space-between;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
flex: 1;
position: relative;
}
.step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--border-color);
background: var(--bg-white);
color: var(--text-muted);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.progress-step.active .step-circle {
border-color: var(--ihu-navy);
background: var(--ihu-navy);
color: var(--text-white);
}
.progress-step.completed .step-circle {
border-color: var(--ihu-gold);
background: var(--ihu-gold);
color: var(--ihu-navy);
}
.step-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.progress-step.active .step-label {
color: var(--ihu-navy);
}
.progress-step.completed .step-label {
color: var(--ihu-gold-dark);
}
/* ==================== FORM STEPS ==================== */
.form-step {
display: none;
}
.form-step.active {
display: block;
animation: fadeInUp 0.3s ease forwards;
}
.form-step-header {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--border-light);
}
.form-step-header h2 {
font-size: 24px;
margin-bottom: var(--space-xs);
}
.form-step-header p {
color: var(--text-tertiary);
font-size: 15px;
margin-bottom: 0;
}
/* ==================== FORM GRID LAYOUTS ==================== */
.form-grid {
display: grid;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.form-grid-2 {
grid-template-columns: 1fr 1fr;
}
.form-grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
/* ==================== FORM SECTION TITLE ==================== */
.form-section-title {
font-size: 18px;
font-weight: 600;
color: var(--ihu-navy);
margin: var(--space-xl) 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-light);
}
/* ==================== FORM ELEMENTS ENHANCEMENTS ==================== */
.form-group label .required {
color: var(--alert-red);
margin-left: 2px;
}
.form-control:valid:not(:placeholder-shown) {
border-color: #28a745;
}
/* ==================== FORM NAVIGATION ==================== */
.form-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.btn-next i,
.btn-prev i {
font-size: 12px;
}
/* ==================== SUBMIT BUTTON ==================== */
.btn-submit {
background: var(--ihu-gold);
color: var(--ihu-navy);
padding: 14px 32px;
font-size: 16px;
font-weight: 700;
border: 2px solid var(--ihu-gold);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-submit:hover {
background: var(--ihu-gold-dark);
border-color: var(--ihu-gold-dark);
color: var(--bg-white);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-submit.loading {
pointer-events: none;
}
.btn-submit.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ==================== UPLOAD STYLES ==================== */
.upload-group {
margin-bottom: var(--space-lg);
padding: var(--space-lg);
background: var(--bg-off-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
}
.upload-info {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.upload-icon {
width: 44px;
height: 44px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.upload-info h4 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.upload-info p {
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 0;
}
.upload-area {
position: relative;
}
.upload-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl) var(--space-lg);
border: 2px dashed var(--border-color);
border-radius: var(--radius);
background: var(--bg-white);
cursor: pointer;
text-align: center;
transition: border-color 0.2s ease, background-color 0.2s ease;
gap: var(--space-sm);
}
.upload-label:hover {
border-color: var(--ihu-navy);
background: var(--ihu-navy-tint);
}
.upload-label i {
font-size: 28px;
color: var(--ihu-gold);
}
.upload-label span {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.upload-label small {
font-size: 12px;
color: var(--text-muted);
}
/* Upload Preview */
.upload-preview {
display: none;
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
align-items: center;
justify-content: space-between;
}
.upload-preview.active {
display: flex;
}
.upload-preview .file-info {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 13px;
}
.upload-preview .file-info i {
color: #28a745;
font-size: 16px;
}
.upload-preview .file-name {
font-weight: 600;
color: var(--text-primary);
}
.upload-preview .file-size {
color: var(--text-muted);
margin-left: var(--space-sm);
}
.upload-preview .remove-file {
background: none;
border: none;
color: var(--alert-red);
font-size: 14px;
cursor: pointer;
padding: 4px;
}
.upload-preview .remove-file:hover {
color: #990000;
}
/* Drag over state */
.upload-label.drag-over {
border-color: var(--ihu-gold);
background: var(--ihu-gold-tint);
}
/* ==================== APPLY REQUIREMENTS LIST ==================== */
.apply-requirements-list {
margin: var(--space-sm) 0;
}
.apply-requirements-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
font-size: 14px;
color: var(--text-secondary);
}
.apply-requirements-list li i {
color: var(--ihu-gold);
font-size: 12px;
flex-shrink: 0;
}
/* ==================== REVIEW SECTION ==================== */
.review-section {
margin-bottom: var(--space-lg);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) var(--space-lg);
background: var(--bg-light);
border-bottom: 1px solid var(--border-light);
}
.review-header h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 10px;
}
.review-header h3 i {
color: var(--ihu-gold);
font-size: 16px;
}
.btn-edit {
background: none;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 4px 12px;
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
}
.btn-edit:hover {
border-color: var(--ihu-navy);
color: var(--ihu-navy);
}
.review-grid {
padding: var(--space-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm) var(--space-xl);
}
.review-item {
padding: var(--space-sm) 0;
}
.review-item dt {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.review-item dd {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* Review Documents */
.review-documents {
padding: var(--space-lg);
}
.review-doc-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
}
.review-doc-item:last-child {
border-bottom: none;
}
.review-doc-item i {
color: #28a745;
font-size: 16px;
}
.review-doc-item .doc-label {
font-weight: 600;
color: var(--text-primary);
}
.review-doc-item .doc-file {
color: var(--text-tertiary);
margin-left: auto;
font-size: 13px;
}
.review-doc-item.missing i {
color: var(--text-muted);
}
.review-doc-item.missing .doc-label {
color: var(--text-muted);
}
.review-doc-item.missing .doc-file {
color: var(--text-muted);
font-style: italic;
}
/* ==================== TERMS SECTION ==================== */
.terms-section {
margin-top: var(--space-xl);
padding: var(--space-lg);
background: var(--bg-light);
border-radius: var(--radius);
border: 1px solid var(--border-light);
}
.form-checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.form-checkbox:last-of-type {
margin-bottom: 0;
}
.form-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--ihu-navy);
cursor: pointer;
}
.form-checkbox label {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.50;
cursor: pointer;
}
.form-checkbox label a {
color: var(--ihu-navy);
font-weight: 600;
text-decoration: underline;
}
.form-checkbox label a:hover {
color: var(--ihu-gold-dark);
}
/* ==================== SUCCESS STATE ==================== */
.application-success {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
}
.success-icon {
font-size: 64px;
color: #28a745;
margin-bottom: var(--space-lg);
}
.application-success h2 {
font-size: 28px;
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.application-success>p {
font-size: 16px;
color: var(--text-secondary);
max-width: 550px;
margin: 0 auto var(--space-xl);
line-height: 1.60;
}
.success-details {
display: inline-flex;
gap: var(--space-xl);
padding: var(--space-md) var(--space-xl);
background: var(--bg-light);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
}
.success-detail-item {
font-size: 14px;
}
.success-detail-item strong {
color: var(--text-primary);
margin-right: var(--space-sm);
}
.success-detail-item span {
color: var(--ihu-navy);
font-weight: 600;
}
.next-steps-list {
counter-reset: steps;
padding-left: 0;
}
.next-steps-list li {
counter-increment: steps;
padding: 6px 0 6px 32px;
font-size: 14px;
color: var(--text-secondary);
position: relative;
}
.next-steps-list li::before {
content: counter(steps);
position: absolute;
left: 0;
top: 6px;
width: 22px;
height: 22px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.success-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
margin-top: var(--space-xl);
}
/* ==================== SIDEBAR: DEADLINE LIST ==================== */
.deadline-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
}
.deadline-list li:last-child {
border-bottom: none;
}
.deadline-term {
font-weight: 600;
color: var(--text-primary);
}
.deadline-date {
font-weight: 600;
color: var(--ihu-gold-dark);
font-size: 13px;
}
/* ==================== SIDEBAR: CHECKLIST ==================== */
.checklist li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.checklist li i {
font-size: 16px;
color: var(--border-color);
transition: color 0.2s ease;
width: 18px;
text-align: center;
}
.checklist li.checked {
color: var(--text-primary);
}
.checklist li.checked i {
color: #28a745;
}
/* ==================== APPLICATION RESPONSIVE ==================== */
@media (max-width: 1024px) {
.form-grid-3 {
grid-template-columns: 1fr 1fr;
}
.review-grid {
grid-template-columns: 1fr;
}
.success-details {
flex-direction: column;
gap: var(--space-sm);
}
}
@media (max-width: 768px) {
.form-grid-2,
.form-grid-3 {
grid-template-columns: 1fr;
}
.progress-steps {
gap: var(--space-xs);
}
.step-label {
font-size: 10px;
}
.step-circle {
width: 30px;
height: 30px;
font-size: 12px;
}
.form-step-header h2 {
font-size: 20px;
}
.form-navigation {
flex-direction: column-reverse;
gap: var(--space-sm);
}
.form-navigation .btn {
width: 100%;
text-align: center;
justify-content: center;
}
.review-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.upload-info {
flex-direction: column;
text-align: center;
align-items: center;
}
.upload-label {
padding: var(--space-lg) var(--space-md);
}
.upload-label i {
font-size: 22px;
}
.terms-section {
padding: var(--space-md);
}
.application-success h2 {
font-size: 22px;
}
.success-actions {
flex-direction: column;
}
.success-actions .btn {
width: 100%;
text-align: center;
}
.upload-group {
padding: var(--space-md);
}
.review-documents {
padding: var(--space-md);
}
.review-doc-item {
flex-wrap: wrap;
}
.review-doc-item .doc-file {
margin-left: 0;
width: 100%;
padding-left: 32px;
}
}
@media (max-width: 375px) {
.step-label {
display: none;
}
.progress-steps {
justify-content: center;
gap: var(--space-md);
}
}
/* =============================================================
CERTIFICATE VERIFICATION PAGE STYLES
============================================================= */
/* ==================== MAIN VERIFICATION CARD ==================== */
.verify-main-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
margin: var(--space-xl) 0;
}
.verify-card-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 2px solid var(--border-light);
}
.verify-card-icon {
width: 56px;
height: 56px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.verify-card-header h3 {
font-size: 22px;
margin-bottom: 2px;
}
.verify-card-header p {
font-size: 14px;
color: var(--text-tertiary);
margin-bottom: 0;
}
/* ==================== VERIFICATION INPUT ==================== */
.verify-input-group {
margin-bottom: var(--space-lg);
}
.verify-input-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.verify-input-row {
display: flex;
gap: var(--space-sm);
}
.verify-input-wrapper {
flex: 1;
position: relative;
}
.verify-input-wrapper i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--ihu-gold);
font-size: 16px;
}
.verify-input {
padding-left: 42px !important;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
height: 52px;
}
.verify-input::placeholder {
text-transform: none;
font-weight: 400;
letter-spacing: 0;
}
.verify-input:focus {
border-color: var(--ihu-navy);
box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1);
}
/* Handled by consolidated verification components section */
.verify-input-group .form-hint {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--space-sm);
font-size: 13px;
color: var(--text-tertiary);
}
.verify-input-group .form-hint i {
color: var(--ihu-gold);
font-size: 12px;
margin-top: 2px;
flex-shrink: 0;
}
/* ==================== VERIFY DIVIDER ==================== */
.verify-divider {
display: flex;
align-items: center;
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.verify-divider::before,
.verify-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-light);
}
.verify-divider span {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ==================== QR UPLOAD ==================== */
.verify-qr-section {
text-align: center;
}
.qr-upload-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-xl);
border: 2px dashed var(--border-color);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.qr-upload-label:hover {
border-color: var(--ihu-navy);
background: var(--ihu-navy-tint);
}
.qr-upload-label i {
font-size: 36px;
color: var(--ihu-navy);
opacity: 0.4;
}
.qr-upload-label span {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.qr-upload-label small {
font-size: 12px;
color: var(--text-muted);
}
.qr-preview {
display: none;
margin-top: var(--space-md);
}
.qr-preview.active {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
.qr-preview img {
width: 80px;
height: 80px;
object-fit: contain;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.qr-preview .qr-file-info {
text-align: left;
font-size: 13px;
}
.qr-preview .qr-file-name {
font-weight: 600;
color: var(--text-primary);
display: block;
}
.qr-preview .qr-remove {
background: none;
border: none;
color: var(--alert-red);
font-size: 13px;
cursor: pointer;
padding: 0;
margin-top: 4px;
}
.qr-preview .qr-remove:hover {
text-decoration: underline;
}
/* ==================== VERIFICATION SYSTEM COMPONENTS ==================== */
.btn-verify {
background: var(--ihu-navy);
color: var(--text-white);
border: none;
border-radius: var(--radius);
padding: 0 var(--space-xl);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
white-space: nowrap;
transition: all 0.2s ease;
}
.btn-verify:hover {
background: var(--ihu-navy-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn-verify:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ==================== LOADING STATE ==================== */
.verify-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-3xl) 0;
text-align: center;
gap: var(--space-md);
}
.verify-spinner,
.spinner {
width: 48px;
height: 48px;
border: 4px solid var(--border-light);
border-top-color: var(--ihu-navy);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.verify-loading p {
font-size: 15px;
color: var(--text-tertiary);
font-weight: 600;
margin-top: var(--space-sm);
}
/* ==================== RESULT STATES ==================== */
.verify-result {
margin-top: var(--space-xl);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-color);
background: var(--bg-white);
animation: fadeInUp 0.3s ease-out forwards;
}
.verify-result-header {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-xl);
}
.verify-valid .verify-result-header {
background: #F0FFF4;
border-bottom: 1px solid #C6F6D5;
}
.verify-invalid .verify-result-header {
background: #FFF5F5;
border-bottom: 1px solid #FED7D7;
}
.verify-error .verify-result-header {
background: #FFFDE7;
border-bottom: 1px solid #FFF9C4;
}
.verify-result-icon {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.verify-result-icon.valid {
background: #C6F6D5;
color: #22543D;
}
.verify-result-icon.invalid {
background: #FED7D7;
color: #9B2C2C;
}
.verify-result-icon.error {
background: #FFF9C4;
color: #975A16;
}
.verify-result-header h3 {
font-size: 20px;
margin-bottom: 4px;
}
.verify-result-header p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 0;
}
.verify-result-body {
padding: var(--space-xl);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
}
/* ==================== RESULT: VALID — DETAILS ==================== */
.verify-result-badge {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--ihu-navy-tint);
border-radius: var(--radius);
margin-bottom: var(--space-xl);
}
.verify-result-badge img {
height: 48px;
width: auto;
}
.badge-status {
display: block;
font-size: 14px;
font-weight: 700;
}
.badge-status.valid {
color: #22543D;
}
.badge-date {
display: block;
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
}
/* Details Grid */
.verify-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
.verify-detail-group h4 {
font-size: 14px;
font-weight: 700;
color: var(--ihu-navy);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--ihu-gold);
}
.verify-detail-list {
margin: 0;
}
.verify-detail-item {
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--border-light);
}
.verify-detail-item:last-child {
border-bottom: none;
}
.verify-detail-item dt {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 2px;
}
.verify-detail-item dd {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* Accreditation Info */
.verify-accreditation {
padding: var(--space-lg);
background: var(--bg-light);
border-radius: var(--radius);
border-left: 4px solid var(--ihu-gold);
margin-bottom: var(--space-xl);
}
.verify-accred-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.verify-accred-header i {
color: var(--ihu-gold);
font-size: 18px;
}
.verify-accred-header h4 {
font-size: 15px;
font-weight: 700;
margin-bottom: 0;
}
.verify-accreditation p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 0;
line-height: 1.55;
}
/* Result Actions */
.verify-result-actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.btn-print {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ==================== RESULT: INVALID — DETAILS ==================== */
.verify-invalid-details h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: var(--space-md);
}
.verify-reasons-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.50;
}
.verify-reasons-list li i {
color: var(--warning-yellow);
font-size: 14px;
margin-top: 2px;
flex-shrink: 0;
}
/* ==================== HELP SECTION ==================== */
.verify-help-section {
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
border-top: 2px solid var(--border-light);
}
.verify-help-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin: var(--space-xl) 0;
}
.verify-help-card {
background: var(--bg-light);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl) var(--space-lg);
text-align: center;
position: relative;
transition: border-color 0.2s ease;
}
.verify-help-card:hover {
border-color: var(--ihu-navy);
}
.verify-help-number {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 28px;
height: 28px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: 50%;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.verify-help-icon {
width: 56px;
height: 56px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin: 0 auto var(--space-md);
}
.verify-help-card h4 {
font-size: 16px;
margin-bottom: var(--space-sm);
}
.verify-help-card p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.55;
margin-bottom: 0;
}
/* Sample Certificate */
.verify-sample-cert {
margin-top: var(--space-lg);
}
.sample-cert-card {
background: var(--bg-light);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.sample-cert-image {
max-height: 300px;
overflow: hidden;
}
.sample-cert-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sample-cert-caption {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
font-size: 13px;
color: var(--text-tertiary);
background: var(--bg-white);
border-top: 1px solid var(--border-light);
}
.sample-cert-caption i {
color: var(--ihu-gold);
margin-top: 2px;
flex-shrink: 0;
}
/* ==================== VERIFICATION TYPES ==================== */
.verify-types-section {
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
border-top: 2px solid var(--border-light);
}
.verify-types-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
margin-top: var(--space-xl);
}
.verify-type-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-lg);
text-align: center;
transition: border-color 0.2s ease;
}
.verify-type-card:hover {
border-color: var(--ihu-navy);
}
.verify-type-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 auto var(--space-md);
transition: background-color 0.2s ease, color 0.2s ease;
}
.verify-type-card:hover .verify-type-icon {
background: var(--ihu-navy);
color: var(--ihu-gold);
}
.verify-type-card h4 {
font-size: 15px;
margin-bottom: var(--space-xs);
}
.verify-type-card p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: 0;
}
/* ==================== FAQ SECTION ==================== */
.verify-faq-section {
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
border-top: 2px solid var(--border-light);
}
.verify-faq-section .accordion {
margin-top: var(--space-xl);
}
/* ==================== PRINT STYLES (Verification) ==================== */
@media print {
.verify-main-card,
.verify-result {
break-inside: avoid;
}
.verify-result-actions,
.verify-form-main,
.verify-qr-section,
.verify-divider,
.verify-loading,
.verify-help-section,
.verify-types-section,
.verify-faq-section,
.sidebar {
display: none !important;
}
.verify-result {
border: 2px solid #000;
}
.verify-result-header {
background: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.verify-result-badge {
background: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ==================== VERIFICATION RESPONSIVE ==================== */
@media (max-width: 1024px) {
.verify-details-grid {
grid-template-columns: 1fr;
}
.verify-help-grid {
grid-template-columns: 1fr;
}
.verify-types-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.verify-main-card {
padding: var(--space-lg);
}
.verify-card-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.verify-input-row {
flex-direction: column;
}
.btn-verify {
width: 100%;
justify-content: center;
height: 48px;
}
.verify-result-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.verify-result-badge {
flex-direction: column;
text-align: center;
}
.verify-result-actions {
flex-direction: column;
}
.verify-result-actions .btn {
width: 100%;
text-align: center;
justify-content: center;
}
.verify-types-grid {
grid-template-columns: 1fr;
}
.verify-accreditation {
padding: var(--space-md);
}
.qr-preview.active {
flex-direction: column;
}
}
/* =============================================================
CONTACT PAGE STYLES
============================================================= */
/* ==================== CONTACT CARDS GRID ==================== */
.contact-cards-section {
padding-bottom: 0;
}
.contact-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.contact-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl) var(--space-lg);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-hover);
}
.contact-card-highlight {
border-color: var(--ihu-gold);
border-width: 2px;
position: relative;
}
.contact-card-highlight::before {
content: 'Most Contacted';
position: absolute;
top: -10px;
right: var(--space-md);
background: var(--ihu-gold);
color: var(--ihu-navy);
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-card-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: var(--space-md);
}
.contact-card h3 {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.contact-card>p {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.50;
margin-bottom: var(--space-md);
}
.contact-card-details li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 13px;
color: var(--text-secondary);
}
.contact-card-details li i {
color: var(--ihu-gold);
font-size: 13px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.contact-card-details li a {
color: var(--ihu-navy);
font-weight: 600;
}
.contact-card-details li a:hover {
text-decoration: underline;
}
/* ==================== CONTACT FORM CARD ==================== */
.contact-form-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-xl);
margin-top: var(--space-lg);
}
.contact-form-actions {
display: flex;
gap: var(--space-md);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
}
.btn-contact-submit {
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-contact-submit.loading {
pointer-events: none;
opacity: 0.7;
}
.btn-contact-submit.loading i {
animation: spin 1s linear infinite;
}
/* Contact Upload */
.contact-upload-area {
position: relative;
}
.contact-upload-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 10px 16px;
border: 1px dashed var(--border-color);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact-upload-label:hover {
border-color: var(--ihu-navy);
background: var(--ihu-navy-tint);
}
.contact-upload-label i {
color: var(--ihu-gold);
font-size: 16px;
}
.contact-upload-label span {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.contact-upload-label small {
font-size: 12px;
color: var(--text-muted);
}
.contact-upload-preview {
display: none;
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-light);
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 13px;
align-items: center;
justify-content: space-between;
}
.contact-upload-preview.active {
display: flex;
}
.contact-upload-preview .file-info {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.contact-upload-preview .file-info i {
color: #28a745;
}
.contact-upload-preview .remove-file {
background: none;
border: none;
color: var(--alert-red);
cursor: pointer;
font-size: 14px;
}
/* ==================== CONTACT SUCCESS ==================== */
.contact-success {
text-align: center;
padding: var(--space-2xl) var(--space-lg);
}
.contact-success-icon {
font-size: 56px;
color: #28a745;
margin-bottom: var(--space-lg);
}
.contact-success h3 {
font-size: 24px;
margin-bottom: var(--space-md);
}
.contact-success p {
font-size: 15px;
color: var(--text-secondary);
max-width: 480px;
margin: 0 auto var(--space-xl);
line-height: 1.60;
}
.contact-success-details {
display: inline-flex;
gap: var(--space-xl);
padding: var(--space-md) var(--space-xl);
background: var(--bg-light);
border-radius: var(--radius);
margin-bottom: var(--space-xl);
font-size: 14px;
}
.contact-success-item strong {
color: var(--text-primary);
margin-right: var(--space-sm);
}
.contact-success-item span {
color: var(--ihu-navy);
font-weight: 600;
}
.contact-success-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
}
/* ==================== SIDEBAR: CONTACT SPECIFIC ==================== */
.contact-sidebar-address p {
font-size: 14px;
line-height: 1.60;
margin-bottom: 0;
}
.contact-sidebar-address em {
color: var(--ihu-gold-dark);
font-style: normal;
font-weight: 600;
}
.contact-sidebar-list li {
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
.contact-sidebar-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.contact-sidebar-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-sidebar-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-sidebar-item a {
font-size: 14px;
font-weight: 600;
color: var(--ihu-navy);
}
.contact-sidebar-item a:hover {
text-decoration: underline;
}
/* Response Times */
.response-times-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
font-size: 13px;
}
.response-times-list li:last-child {
border-bottom: none;
}
.rt-dept {
color: var(--text-secondary);
font-weight: 600;
}
.rt-time {
font-weight: 700;
font-size: 12px;
padding: 2px 8px;
border-radius: 3px;
}
.rt-fast {
background: #F0FFF4;
color: #22543D;
}
.rt-normal {
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
}
/* Social Grid */
.contact-social-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.contact-social-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--space-sm);
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
transition: all 0.2s ease;
}
.contact-social-item:hover {
border-color: var(--ihu-navy);
color: var(--ihu-navy);
background: var(--ihu-navy-tint);
}
.contact-social-item i {
font-size: 18px;
color: var(--ihu-navy);
}
/* Quick Links */
.sidebar-quick-links li {
margin-bottom: var(--space-sm);
}
.sidebar-quick-links li a {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
padding: 6px 0;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.sidebar-quick-links li a:hover {
color: var(--ihu-navy);
padding-left: 4px;
}
.sidebar-quick-links li a i {
font-size: 10px;
color: var(--ihu-gold);
}
/* ==================== FACULTY CONTACTS GRID ==================== */
.faculty-contacts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
.faculty-contact-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--space-lg);
transition: border-color 0.2s ease;
}
.faculty-contact-card:hover {
border-color: var(--ihu-navy);
}
.faculty-contact-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.faculty-contact-icon {
width: 42px;
height: 42px;
background: var(--ihu-navy);
color: var(--ihu-gold);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.faculty-contact-header h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 0;
line-height: 1.30;
}
.faculty-contact-details {
margin-bottom: var(--space-md);
}
.faculty-contact-details li {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
color: var(--text-secondary);
}
.faculty-contact-details li i {
color: var(--ihu-gold);
font-size: 12px;
width: 14px;
text-align: center;
}
.faculty-contact-details li a {
color: var(--ihu-navy);
font-weight: 600;
}
.faculty-contact-details li a:hover {
text-decoration: underline;
}
/* ==================== CONTACT RESPONSIVE ==================== */
@media (max-width: 1024px) {
.contact-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.faculty-contacts-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-success-details {
flex-direction: column;
gap: var(--space-sm);
}
}
@media (max-width: 768px) {
.contact-cards-grid {
grid-template-columns: 1fr;
}
.faculty-contacts-grid {
grid-template-columns: 1fr;
}
.contact-form-card {
padding: var(--space-lg);
}
.contact-form-actions {
flex-direction: column;
}
.contact-form-actions .btn {
width: 100%;
text-align: center;
justify-content: center;
}
.contact-success-actions {
flex-direction: column;
}
.contact-success-actions .btn {
width: 100%;
text-align: center;
}
.contact-social-grid {
grid-template-columns: repeat(3, 1fr);
}
.contact-upload-label {
flex-direction: column;
text-align: center;
padding: var(--space-md);
width: 100%;
}
.faculty-contact-header {
flex-direction: column;
text-align: center;
}
}
/* ===== Sticky Quick Nav ===== */
.faculty-quick-nav {
background: #fff;
border-bottom: 2px solid #eee;
padding: 10px 0;
z-index: 100;
transition: box-shadow 0.3s ease;
}
.faculty-quick-nav.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.faculty-quick-nav-inner {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 5px;
}
.quick-nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #ddd;
color: #555;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
}
.quick-nav-link:hover {
border-color: var(--ihu-navy);
color: var(--ihu-navy);
}
.quick-nav-link.active {
background: var(--ihu-navy);
color: #fff;
border-color: var(--ihu-navy);
}
/* ===== Faculty Highlights ===== */
.faculty-highlights-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 30px 0;
}
.highlight-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 10px;
transition: transform 0.3s ease;
}
.highlight-item:hover {
transform: translateX(5px);
}
.highlight-item i {
color: var(--ihu-navy);
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.highlight-item span {
font-weight: 500;
font-size: 0.95rem;
}
/* ===== FAQ ===== */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.faq-item.active {
border-color: var(--ihu-navy);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-weight: 600;
font-size: 1rem;
color: #333;
gap: 15px;
}
.faq-question:hover {
color: var(--ihu-navy);
}
.faq-icon {
transition: transform 0.3s ease;
font-size: 0.85rem;
color: #999;
flex-shrink: 0;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
color: var(--ihu-navy);
}
.faq-answer {
display: none;
padding: 0 20px 18px;
}
.faq-answer p {
color: #666;
line-height: 1.8;
margin: 0;
}
.faq-answer a {
color: var(--ihu-navy);
font-weight: 500;
}
/* ===== Faculty Contact Form ===== */
.faculty-contact-form {
margin-top: 30px;
}
.faculty-contact-form .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.faculty-contact-form .form-group {
margin-bottom: 20px;
}
.faculty-contact-form label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 6px;
color: #333;
}
.faculty-contact-form input,
.faculty-contact-form select,
.faculty-contact-form textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 0.95rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background: #fff;
}
.faculty-contact-form input:focus,
.faculty-contact-form select:focus,
.faculty-contact-form textarea:focus {
outline: none;
border-color: var(--ihu-navy);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.char-count {
display: block;
text-align: right;
font-size: 0.8rem;
color: #999;
margin-top: 5px;
}
.btn-submit {
padding: 14px 30px;
font-size: 1rem;
}
/* ===== Form Response ===== */
.form-response {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.form-response i {
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 2px;
}
.form-response-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.form-response-success i {
color: #28a745;
}
.form-response-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.form-response-error i {
color: #dc3545;
}
.form-response .ref-id {
font-size: 0.9rem;
margin-top: 5px;
}
.form-response ul {
margin: 5px 0 0;
padding-left: 20px;
}
/* ===== Sidebar Downloads ===== */
.sidebar-downloads {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-downloads li {
margin-bottom: 8px;
}
.download-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: #333;
background: #f8f9fa;
transition: all 0.3s ease;
}
.download-link:hover {
background: #e9ecef;
transform: translateX(5px);
}
.download-link i {
color: #dc3545;
font-size: 1.1rem;
}
/* ===== Sidebar Links ===== */
.sidebar-links {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-links li {
margin-bottom: 4px;
}
.sidebar-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.sidebar-links a:hover {
background: #f8f9fa;
color: var(--ihu-navy);
transform: translateX(5px);
}
.sidebar-links a i {
width: 18px;
text-align: center;
color: var(--ihu-navy);
}
/* ===== Department Counter ===== */
.department-count {
font-size: 0.8rem;
color: #999;
}
/* ===== Contact Sidebar ===== */
.sidebar-contact .contact-label {
display: block;
font-size: 0.75rem;
color: #999;
margin-bottom: 2px;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.faculty-highlights-grid {
grid-template-columns: 1fr;
}
.faculty-contact-form .form-grid {
grid-template-columns: 1fr;
}
.faculty-quick-nav-inner {
gap: 5px;
}
.quick-nav-link {
padding: 6px 12px;
font-size: 0.8rem;
}
}
/* ==================== VERIFICATION PAGE ==================== */
/* Hero */
.verify-hero {
background: linear-gradient(135deg, #0f3460, #1a1a2e);
color: #fff;
padding: 80px 0 60px;
text-align: center;
}
.verify-hero-icon {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0.8;
}
.verify-hero h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}
.verify-hero-subtitle {
font-size: 1.3rem;
opacity: 0.7;
direction: rtl;
margin-bottom: 15px;
}
.verify-hero-desc {
max-width: 600px;
margin: 0 auto;
opacity: 0.85;
line-height: 1.7;
}
/* Container */
.verify-container {
max-width: 750px;
margin: 0 auto;
}
/* Form Card */
.verify-form-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 35px;
margin-bottom: 30px;
}
.verify-form-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.verify-form-header i {
font-size: 2rem;
color: var(--ihu-navy);
}
.verify-form-header h2 {
margin: 0;
font-size: 1.4rem;
}
.verify-form-header p {
margin: 0;
color: #888;
font-size: 0.9rem;
}
/* Input */
.input-with-icon {
position: relative;
}
.input-with-icon input {
width: 100%;
padding: 16px 20px 16px 50px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.input-with-icon input:focus {
outline: none;
border-color: var(--ihu-navy);
box-shadow: 0 0 0 4px rgba(var(--ihu-navy-rgb), 0.1);
}
.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.1rem;
}
/* Verify Button */
.btn-verify {
width: 100%;
padding: 16px;
font-size: 1.1rem;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Loading */
.verify-loading {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
gap: 15px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e0e0e0;
border-top-color: var(--ihu-navy);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* ===== RESULTS ===== */
.verify-result {
margin-top: 25px;
padding: 25px;
border-radius: 12px;
border: 2px solid;
}
.verify-result-success {
border-color: #28a745;
background: #f0fdf4;
}
.verify-result-notfound {
border-color: #dc3545;
background: #fef2f2;
}
.verify-result-expired {
border-color: #ffc107;
background: #fffbeb;
}
/* Status Badge */
.result-status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 20px;
}
.status-active {
background: #d4edda;
color: #155724;
}
.status-revoked {
background: #f8d7da;
color: #721c24;
}
.status-expired {
background: #fff3cd;
color: #856404;
}
.status-pending {
background: #d1ecf1;
color: #0c5460;
}
/* Detail Rows */
.result-details {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eee;
margin: 15px 0;
}
.result-detail-row {
display: flex;
padding: 12px 18px;
border-bottom: 1px solid #f0f0f0;
}
.result-detail-row:last-child {
border-bottom: none;
}
.detail-label {
width: 40%;
font-weight: 600;
color: #555;
font-size: 0.85rem;
flex-shrink: 0;
}
.detail-value {
flex: 1;
color: #333;
font-size: 0.9rem;
line-height: 1.5;
}
.code-value {
font-family: monospace;
font-weight: 700;
letter-spacing: 1px;
}
/* Accreditation */
.result-accreditation {
background: #f8f9fa;
border-radius: 10px;
padding: 18px;
margin: 15px 0;
border-left: 4px solid var(--ihu-navy);
}
.result-accreditation h4 {
margin: 0 0 10px;
font-size: 0.95rem;
}
.result-accreditation p {
margin: 5px 0;
font-size: 0.9rem;
line-height: 1.7;
color: #555;
}
/* Help Section */
.result-help {
background: #fff;
border-radius: 10px;
padding: 18px;
margin-top: 15px;
border: 1px solid #eee;
}
.result-help ul {
padding-left: 20px;
margin: 10px 0;
}
.result-help li {
margin-bottom: 5px;
color: #555;
}
/* Actions */
.result-actions {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
/* ===== STEPS ===== */
.verify-info-section {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
padding: 30px;
margin-bottom: 25px;
}
.verify-info-section h3 {
margin-bottom: 20px;
}
.verify-steps {
display: flex;
flex-direction: column;
gap: 18px;
}
.verify-step {
display: flex;
align-items: flex-start;
gap: 15px;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ihu-navy);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.step-content h4 {
margin: 0 0 5px;
}
.step-content p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
/* ===== SAMPLE CODES ===== */
.verify-sample-codes {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
padding: 30px;
margin-bottom: 25px;
}
.sample-codes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
}
.sample-code-btn {
display: flex;
flex-direction: column;
padding: 12px 16px;
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
text-align: left;
}
.sample-code-btn:hover {
border-color: var(--ihu-navy);
background: #e8f4f8;
transform: translateY(-2px);
}
.sample-code-btn .code {
font-family: monospace;
font-weight: 700;
font-size: 0.85rem;
color: var(--ihu-navy);
}
.sample-code-btn .label {
font-size: 0.78rem;
color: #888;
margin-top: 4px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.verify-form-card {
padding: 20px;
}
.verify-hero h1 {
font-size: 1.8rem;
}
.result-detail-row {
flex-direction: column;
}
.detail-label {
width: 100%;
margin-bottom: 4px;
}
.result-actions {
flex-direction: column;
}
.sample-codes-grid {
grid-template-columns: 1fr;
}
}
/* =============================================
Vision & Mission Page
============================================= */
/* --- Page Hero --- */
.vision-mission-hero {
background: linear-gradient(135deg, #0a1628 0%, #1a365d 50%, #2d507a 100%);
padding: 120px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.vision-mission-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 30px 30px;
}
.vision-mission-hero .hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.vision-mission-hero h1 {
font-size: 3rem;
color: #ffffff;
margin-bottom: 20px;
font-weight: 700;
}
.vision-mission-hero .hero-subtitle {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
margin-bottom: 25px;
}
.vision-mission-hero .breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.9rem;
}
.vision-mission-hero .breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.vision-mission-hero .breadcrumb a:hover {
color: #ffffff;
}
.vision-mission-hero .breadcrumb .separator {
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
}
.vision-mission-hero .breadcrumb .current {
color: #64b5f6;
}
/* --- Vision & Mission Cards --- */
.vision-section,
.mission-section {
padding: 80px 0;
}
.mission-section {
background-color: #f8f9fc;
}
.vision-mission-card {
display: flex;
gap: 40px;
align-items: flex-start;
background: #ffffff;
border-radius: 16px;
padding: 50px;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
border: 1px solid #e8ecf1;
position: relative;
overflow: hidden;
}
.vision-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, #1a73e8, #4fc3f7);
}
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, #e8710a, #ffb74d);
}
.vm-icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 100px;
}
.vm-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.vision-card .vm-icon {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1a73e8;
}
.mission-card .vm-icon {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
color: #e8710a;
}
.vm-label {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.vision-card .vm-label {
color: #1a73e8;
}
.mission-card .vm-label {
color: #e8710a;
}
.vm-content {
flex: 1;
}
.vm-content h2 {
font-size: 2rem;
color: #1a2332;
margin-bottom: 20px;
font-weight: 700;
}
.vm-quote {
font-size: 1.2rem;
line-height: 1.8;
color: #2c3e50;
border-left: 4px solid #1a73e8;
padding: 20px 25px;
margin: 25px 0;
background: #f8f9fc;
border-radius: 0 10px 10px 0;
font-style: italic;
}
.mission-card .vm-quote {
border-left-color: #e8710a;
}
.vm-details p {
font-size: 1.05rem;
color: #555;
line-height: 1.8;
margin-bottom: 15px;
}
/* --- Vision Pillars --- */
.vision-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.vision-pillar {
text-align: center;
padding: 25px 15px;
background: #f8f9fc;
border-radius: 12px;
border: 1px solid #e8ecf1;
transition: all 0.3s ease;
}
.vision-pillar:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border-color: #1a73e8;
}
.vision-pillar i {
font-size: 1.8rem;
color: #1a73e8;
margin-bottom: 12px;
}
.vision-pillar h4 {
font-size: 1rem;
color: #1a2332;
margin-bottom: 8px;
font-weight: 600;
}
.vision-pillar p {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
}
/* --- Mission Commitments --- */
.mission-commitments {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
.commitment-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: #f8f9fc;
border-radius: 12px;
border: 1px solid #e8ecf1;
transition: all 0.3s ease;
}
.commitment-item:hover {
border-color: #e8710a;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.commitment-number {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #e8710a, #ffb74d);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 700;
}
.commitment-content h4 {
font-size: 1.1rem;
color: #1a2332;
margin-bottom: 8px;
font-weight: 600;
}
.commitment-content p {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
}
/* --- Core Values Section --- */
.core-values-section {
padding: 80px 0;
text-align: center;
}
.value-card .value-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.value-card[data-color] .value-icon {
background: var(--bg-light);
}
.value-card[data-color="#1a73e8"] .value-icon {
color: #1a73e8;
}
.value-card[data-color="#e8710a"] .value-icon {
color: #e8710a;
}
.value-card[data-color="#0d904f"] .value-icon {
color: #0d904f;
}
.value-card[data-color="#9c27b0"] .value-icon {
color: #9c27b0;
}
.value-card[data-color="#c62828"] .value-icon {
color: #c62828;
}
.value-card[data-color="#00838f"] .value-icon {
color: #00838f;
}
.value-card[data-color]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: currentColor;
opacity: 0.7;
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
}
.value-card:hover::before {
height: 6px;
}
.value-icon {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 15px;
}
.value-card[data-color="#1a73e8"] .value-icon {
background: #e3f2fd;
color: #1a73e8;
}
.value-card[data-color="#e8710a"] .value-icon {
background: #fff3e0;
color: #e8710a;
}
.value-card[data-color="#0d904f"] .value-icon {
background: #e8f5e9;
color: #0d904f;
}
.value-card[data-color="#9c27b0"] .value-icon {
background: #f3e5f5;
color: #9c27b0;
}
.value-card[data-color="#c62828"] .value-icon {
background: #ffebee;
color: #c62828;
}
.value-card[data-color="#00838f"] .value-icon {
background: #e0f7fa;
color: #00838f;
}
.value-number {
font-size: 0.8rem;
font-weight: 700;
color: #aaa;
letter-spacing: 1px;
margin-bottom: 8px;
}
.value-card h3 {
font-size: 1.3rem;
color: #1a2332;
margin-bottom: 12px;
font-weight: 700;
}
.value-card>p {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
flex: 1;
}
.value-footer {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
}
.value-motto {
font-size: 0.85rem;
font-style: italic;
color: #888;
}
/* --- Strategic Goals Section --- */
.strategic-goals-section {
padding: 80px 0;
background: #f8f9fc;
text-align: center;
}
.goals-timeline {
position: relative;
margin-top: 50px;
padding: 20px 0;
text-align: left;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #1a73e8, #4fc3f7, #81d4fa);
transform: translateX(-50%);
border-radius: 3px;
}
.goal-item {
display: flex;
align-items: flex-start;
margin-bottom: 50px;
position: relative;
}
.goal-item:nth-child(even) {
flex-direction: row;
}
.goal-item:nth-child(odd) {
flex-direction: row-reverse;
}
.goal-year {
width: 50%;
font-size: 2rem;
font-weight: 800;
color: #1a73e8;
position: relative;
}
.goal-item:nth-child(even) .goal-year {
text-align: right;
padding-right: 50px;
}
.goal-item:nth-child(odd) .goal-year {
text-align: left;
padding-left: 50px;
}
.goal-year::after {
content: '';
position: absolute;
top: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #1a73e8;
border: 4px solid #ffffff;
box-shadow: 0 0 0 3px #1a73e8;
z-index: 2;
}
.goal-item:nth-child(even) .goal-year::after {
right: -9px;
}
.goal-item:nth-child(odd) .goal-year::after {
left: -9px;
}
.goal-card {
width: 50%;
background: #ffffff;
border-radius: 14px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e8ecf1;
transition: all 0.3s ease;
}
.goal-item:nth-child(even) .goal-card {
margin-left: 50px;
}
.goal-item:nth-child(odd) .goal-card {
margin-right: 50px;
}
.goal-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border-color: #1a73e8;
}
.goal-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: #e3f2fd;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 15px;
}
.goal-card h3 {
font-size: 1.2rem;
color: #1a2332;
margin-bottom: 10px;
font-weight: 700;
}
.goal-card>p {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
margin-bottom: 15px;
}
.goal-targets {
list-style: none;
padding: 0;
margin: 0;
}
.goal-targets li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 0.9rem;
color: #444;
}
.goal-targets li i {
color: #0d904f;
font-size: 0.85rem;
}
/* --- Philosophy Section --- */
.philosophy-section {
padding: 80px 0;
text-align: center;
}
.philosophy-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-top: 40px;
text-align: left;
}
.philosophy-card {
background: #ffffff;
border-radius: 16px;
padding: 35px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e8ecf1;
transition: all 0.3s ease;
}
.philosophy-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border-color: #1a73e8;
}
.philosophy-icon {
width: 60px;
height: 60px;
border-radius: 14px;
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}
.philosophy-card h3 {
font-size: 1.25rem;
color: #1a2332;
margin-bottom: 12px;
font-weight: 700;
}
.philosophy-card>p {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
margin-bottom: 15px;
}
.philosophy-highlight {
padding: 15px;
background: #f8f9fc;
border-radius: 10px;
border-left: 3px solid #1a73e8;
font-size: 0.9rem;
color: #444;
line-height: 1.6;
}
.philosophy-highlight strong {
color: #1a73e8;
}
/* --- IHU Promise Section --- */
.ihu-promise-section {
padding: 80px 0;
background: linear-gradient(135deg, #0a1628 0%, #1a365d 100%);
color: #ffffff;
}
.promise-wrapper {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 50px;
align-items: center;
}
.promise-content .section-tag {
color: #64b5f6;
}
.promise-content h2 {
font-size: 2.2rem;
color: #ffffff;
margin-bottom: 20px;
}
.promise-text {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
margin-bottom: 30px;
}
.promise-points {
display: flex;
flex-direction: column;
gap: 20px;
}
.promise-point {
display: flex;
align-items: flex-start;
gap: 15px;
}
.promise-point>i {
color: #4fc3f7;
font-size: 1.2rem;
margin-top: 4px;
}
.promise-point h4 {
font-size: 1.05rem;
color: #ffffff;
margin-bottom: 5px;
font-weight: 600;
}
.promise-point p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.promise-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.promise-stat-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
}
.promise-stat-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-3px);
}
.stat-number {
font-size: 2.2rem;
font-weight: 800;
color: #4fc3f7;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* --- CTA Section --- */
.cta-section {
padding: 80px 0;
text-align: center;
}
.cta-box {
background: linear-gradient(135deg, #1a73e8, #4fc3f7);
border-radius: 20px;
padding: 60px 50px;
color: #ffffff;
max-width: 800px;
margin: 0 auto;
}
.cta-box h2 {
font-size: 2rem;
margin-bottom: 15px;
font-weight: 700;
color: #ffffff;
}
.cta-box p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin-bottom: 30px;
}
.cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
padding: 14px 30px;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
.cta-buttons .btn-primary {
background: #ffffff;
color: #1a73e8;
border: 2px solid #ffffff;
}
.cta-buttons .btn-primary:hover {
background: transparent;
color: #ffffff;
}
.cta-buttons .btn-outline {
background: transparent;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.cta-buttons .btn-outline:hover {
background: #ffffff;
color: #1a73e8;
border-color: #ffffff;
}
/* =============================================
Responsive - Vision & Mission
============================================= */
@media (max-width: 1024px) {
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.promise-wrapper {
grid-template-columns: 1fr;
}
.vision-pillars {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.vision-mission-hero h1 {
font-size: 2.2rem;
}
.vision-mission-card {
flex-direction: column;
padding: 30px 25px;
}
.vm-icon-wrapper {
flex-direction: row;
min-width: unset;
}
.values-grid {
grid-template-columns: 1fr;
}
.vision-pillars {
grid-template-columns: 1fr;
}
.philosophy-grid {
grid-template-columns: 1fr;
}
.promise-stats {
grid-template-columns: repeat(2, 1fr);
}
/* Timeline mobile */
.timeline-line {
left: 20px;
}
.goal-item,
.goal-item:nth-child(even),
.goal-item:nth-child(odd) {
flex-direction: column;
padding-left: 50px;
}
.goal-year,
.goal-item:nth-child(even) .goal-year,
.goal-item:nth-child(odd) .goal-year {
width: 100%;
text-align: left;
padding: 0;
font-size: 1.5rem;
margin-bottom: 10px;
}
.goal-year::after,
.goal-item:nth-child(even) .goal-year::after,
.goal-item:nth-child(odd) .goal-year::after {
left: -39px;
right: auto;
}
.goal-card,
.goal-item:nth-child(even) .goal-card,
.goal-item:nth-child(odd) .goal-card {
width: 100%;
margin: 0;
}
.cta-box {
padding: 40px 25px;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn {
justify-content: center;
}
}
@media (max-width: 480px) {
.vision-mission-hero h1 {
font-size: 1.8rem;
}
.vm-content h2 {
font-size: 1.5rem;
}
.vm-quote {
font-size: 1rem;
padding: 15px;
}
.promise-stats {
grid-template-columns: 1fr;
}
.stat-number {
font-size: 1.8rem;
}
.commitment-item {
flex-direction: column;
text-align: center;
}
.commitment-number {
margin: 0 auto;
}
}
/* ============================================================
LEADERSHIP PAGE — New CSS Classes
(Added to existing style.css)
============================================================ */
/* ── President Profile Block ── */
.president-profile {
display: flex;
gap: 32px;
margin-top: var(--space-lg, 24px);
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 32px;
transition: border-color 0.2s ease;
}
.president-profile:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.president-image {
flex-shrink: 0;
width: 220px;
}
.president-image img {
width: 100%;
height: 280px;
object-fit: cover;
border-radius: 4px;
background: #e8e8e8;
display: block;
}
.president-bio {
flex: 1;
}
.president-bio p {
font-size: 1rem;
line-height: 1.60;
color: #333333;
margin-bottom: 12px;
}
.president-contact {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
padding: 16px 0;
border-top: 1px solid #e8e8e8;
}
.president-contact-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: #333333;
}
.president-contact-item i {
color: var(--primary, #00543B);
font-size: 0.875rem;
}
/* ── Sidebar Quote Author ── */
.sidebar-quote-author {
display: block;
font-size: 0.813rem;
font-weight: 600;
color: var(--primary, #00543B);
margin-top: 12px;
}
/* ── Leaders Grid (Vice Presidents) ── */
.leaders-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.leader-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.leader-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.leader-card-image {
width: 100%;
height: 0;
padding-bottom: 66.67%;
/* 3:2 aspect ratio */
position: relative;
overflow: hidden;
background: #e8e8e8;
}
.leader-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.leader-card-body {
padding: 20px;
}
.leader-card-role {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary, #00543B);
margin-bottom: 8px;
}
.leader-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
color: #1a1a1a;
margin: 0 0 12px 0;
}
.leader-card-body p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0 0 16px 0;
}
.leader-card-contact {
padding-top: 12px;
border-top: 1px solid #e8e8e8;
}
.leader-card-contact span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.813rem;
color: #333333;
}
.leader-card-contact i {
color: var(--primary, #00543B);
font-size: 0.813rem;
}
/* ── Data Table (Board of Trustees) ── */
.table-responsive {
margin-top: var(--space-lg, 24px);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead th {
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
text-align: left;
padding: 12px 16px;
white-space: nowrap;
}
.data-table tbody td {
font-size: 0.875rem;
font-weight: 400;
color: #333333;
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
}
.data-table tbody tr:nth-child(even) {
background: #f9f9f9;
}
.data-table tbody tr:nth-child(odd) {
background: #ffffff;
}
.data-table tbody tr:hover {
background: #e8f5ef;
}
/* ── Deans Grid ── */
.deans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.dean-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-align: center;
}
.dean-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.dean-card-image {
width: 100%;
height: 0;
padding-bottom: 100%;
/* 1:1 square */
position: relative;
overflow: hidden;
background: #e8e8e8;
}
.dean-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dean-card-body {
padding: 20px;
}
.dean-card-faculty {
display: block;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary, #00543B);
margin-bottom: 8px;
line-height: 1.40;
}
.dean-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.dean-card-credentials {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
line-height: 1.40;
margin: 0 0 16px 0;
}
.dean-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--primary, #00543B);
text-decoration: none;
transition: color 0.2s ease;
}
.dean-card-link:hover {
color: #003D2B;
text-decoration: underline;
}
.dean-card-link i {
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.dean-card-link:hover i {
transform: translateX(4px);
}
/* ── Organizational Chart ── */
.org-chart {
margin-top: var(--space-xl, 40px);
padding: 40px 24px;
text-align: center;
}
.org-chart-level {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
.org-chart-node {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 16px 24px;
min-width: 160px;
text-align: center;
color: #ffffff;
transition: background 0.2s ease;
}
.org-chart-node:hover {
background: rgba(255, 255, 255, 0.15);
}
.org-chart-node-primary {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.6);
min-width: 240px;
}
.org-chart-node-primary i {
font-size: 1.5rem;
margin-bottom: 8px;
display: block;
color: #F0C400;
}
.org-chart-node i {
font-size: 1.125rem;
margin-bottom: 6px;
display: block;
opacity: 0.8;
}
.org-chart-node-small {
padding: 10px 16px;
min-width: 100px;
font-size: 0.813rem;
font-weight: 600;
}
.org-chart-node-small i {
font-size: 1rem;
margin-bottom: 4px;
}
.org-chart-node-title {
display: block;
font-size: 1rem;
font-weight: 700;
line-height: 1.30;
}
.org-chart-node-subtitle {
display: block;
font-size: 0.813rem;
font-weight: 400;
opacity: 0.8;
margin-top: 4px;
}
.org-chart-connector {
width: 2px;
height: 32px;
background: rgba(255, 255, 255, 0.4);
margin: 0 auto;
}
.org-chart-connector-branching {
width: 2px;
height: 24px;
background: rgba(255, 255, 255, 0.4);
margin: 0 auto;
position: relative;
}
.org-chart-connector-branching::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
min-width: 300px;
max-width: 800px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
}
/* ── Related Links Grid ── */
.related-links-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.related-link-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
display: block;
}
.related-link-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.related-link-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
}
.related-link-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.related-link-card:hover h3 {
color: var(--primary, #00543B);
}
.related-link-card p {
font-size: 0.813rem;
color: #666666;
line-height: 1.40;
margin: 0;
}
/* ============================================================
RESPONSIVE — Leadership Page
============================================================ */
/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
.president-profile {
flex-direction: column;
gap: 20px;
padding: 24px;
}
.president-image {
width: 100%;
}
.president-image img {
height: 260px;
}
.leaders-grid {
grid-template-columns: repeat(2, 1fr);
}
.deans-grid {
grid-template-columns: repeat(2, 1fr);
}
.related-links-grid {
grid-template-columns: repeat(2, 1fr);
}
.org-chart-connector-branching::after {
min-width: 200px;
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
.president-profile {
padding: 20px;
}
.president-image img {
height: 220px;
}
.president-contact {
flex-direction: column;
gap: 12px;
}
.leaders-grid {
grid-template-columns: 1fr;
}
.deans-grid {
grid-template-columns: 1fr;
}
.related-links-grid {
grid-template-columns: 1fr;
}
.data-table {
min-width: 580px;
}
/* Org chart stacking */
.org-chart-level-3,
.org-chart-level-4 {
flex-direction: column;
align-items: center;
}
.org-chart-node {
min-width: 200px;
}
.org-chart-connector-branching::after {
display: none;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.president-image img {
height: 180px;
}
.org-chart-node {
min-width: 160px;
padding: 12px 16px;
}
.org-chart-node-small {
min-width: 80px;
font-size: 0.75rem;
}
}
/* ============================================================
FACTS & FIGURES PAGE — New CSS Classes
============================================================ */
/* ── Hero Stats Grid (Navy Section) ── */
.stats-hero-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: var(--space-xl, 40px);
}
.stat-hero-item {
text-align: center;
padding: 24px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
transition: background 0.2s ease;
}
.stat-hero-item:hover {
background: rgba(255, 255, 255, 0.12);
}
.stat-hero-number {
display: block;
font-size: 2.50rem;
font-weight: 700;
color: #F0C400;
line-height: 1.10;
margin-bottom: 8px;
}
.stat-hero-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Fact Overview Cards ── */
.facts-overview-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.fact-overview-card {
display: flex;
gap: 16px;
padding: 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fact-overview-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.fact-overview-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
}
.fact-overview-body h3 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
}
.fact-overview-value {
display: block;
font-size: 1.313rem;
font-weight: 700;
color: var(--primary, #00543B);
margin-bottom: 8px;
}
.fact-overview-body p {
font-size: 0.875rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Facts Split Layout (Students Section) ── */
.facts-split-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 40px;
margin-top: var(--space-lg, 24px);
align-items: start;
}
.facts-split-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.fact-stat-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 20px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fact-stat-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.fact-stat-icon {
font-size: 1.5rem;
color: var(--primary, #00543B);
margin-bottom: 8px;
}
.fact-stat-number {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.10;
margin-bottom: 4px;
}
.fact-stat-label {
font-size: 0.813rem;
font-weight: 600;
color: #333333;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.facts-split-table h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 16px 0;
}
.facts-split-table h3+.table-responsive {
margin-bottom: 32px;
}
/* ── Data Table Footer ── */
.data-table tfoot td {
background: #f5f5f5;
font-weight: 600;
color: #1a1a1a;
border-top: 2px solid var(--primary, #00543B);
padding: 12px 16px;
}
/* ── Progress Bars ── */
.progress-bars {
margin-top: 0;
}
.progress-bar-item {
margin-bottom: 16px;
}
.progress-bar-item:last-child {
margin-bottom: 0;
}
.progress-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.progress-bar-label {
font-size: 0.875rem;
font-weight: 400;
color: #333333;
}
.progress-bar-percent {
font-size: 0.875rem;
font-weight: 700;
color: var(--primary, #00543B);
}
.progress-bar-track {
width: 100%;
height: 10px;
background: #e8e8e8;
border-radius: 5px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--primary, #00543B);
border-radius: 5px;
transition: width 1s ease;
}
/* Animate on scroll — JS sets width from data-width attribute */
.progress-bar-fill[data-width="42"] {
width: 42%;
}
.progress-bar-fill[data-width="18"] {
width: 18%;
}
.progress-bar-fill[data-width="16"] {
width: 16%;
}
.progress-bar-fill[data-width="12"] {
width: 12%;
}
.progress-bar-fill[data-width="8"] {
width: 8%;
}
.progress-bar-fill[data-width="4"] {
width: 4%;
}
/* ── Programs Stats Grid ── */
.programs-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.program-stat-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.program-stat-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.program-stat-icon {
font-size: 1.5rem;
color: var(--primary, #00543B);
margin-bottom: 12px;
}
.program-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.10;
margin-bottom: 4px;
}
.program-stat-label {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 12px;
}
.program-stat-card p {
font-size: 0.813rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Programs Summary Bar ── */
.programs-summary-bar {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
margin-top: var(--space-xl, 40px);
padding: 20px 24px;
background: #e8f5ef;
border-radius: 4px;
}
.programs-summary-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--primary, #00543B);
}
.programs-summary-item i {
font-size: 1rem;
}
/* ── People Stats Grid ── */
.people-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-xl, 40px);
}
.people-stat-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease;
}
.people-stat-card:hover {
border-color: var(--primary, #00543B);
}
.people-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary, #00543B);
margin-bottom: 4px;
}
.people-stat-label {
font-size: 0.875rem;
font-weight: 600;
color: #333333;
}
/* ── Research Stats Grid ── */
.research-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.research-stat-item {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.research-stat-item:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.research-stat-item i {
font-size: 1.5rem;
color: var(--primary, #00543B);
margin-bottom: 12px;
display: block;
}
.research-stat-number {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: var(--primary, #00543B);
margin-bottom: 4px;
}
.research-stat-label {
font-size: 0.813rem;
font-weight: 600;
color: #333333;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── Global Stats Grid (Navy Section) ── */
.global-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-xl, 40px);
margin-bottom: var(--space-xl, 40px);
}
.global-stat-item {
padding: 24px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
text-align: center;
transition: background 0.2s ease;
}
.global-stat-item:hover {
background: rgba(255, 255, 255, 0.12);
}
.global-stat-icon {
font-size: 1.5rem;
color: #F0C400;
margin-bottom: 12px;
}
.global-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.global-stat-label {
font-size: 0.813rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── Global Regions List ── */
.global-regions-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 32px;
}
.global-region {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
}
.global-region i {
color: #F0C400;
font-size: 0.75rem;
}
/* ── Infrastructure Grid ── */
.infra-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.infra-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.infra-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.infra-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.5rem;
margin: 0 auto 16px;
}
.infra-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.infra-card p {
font-size: 0.875rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Timeline ── */
.timeline {
position: relative;
margin-top: var(--space-lg, 24px);
padding-left: 40px;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 15px;
width: 3px;
height: 100%;
background: var(--primary, #00543B);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 32px;
padding-left: 24px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-marker {
position: absolute;
left: -32px;
top: 4px;
width: 16px;
height: 16px;
background: var(--primary, #00543B);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--primary, #00543B);
}
.timeline-year {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: #ffffff;
background: var(--primary, #00543B);
padding: 2px 10px;
border-radius: 3px;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.timeline-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.timeline-content p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── Accreditation Grid ── */
.accreditation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-xl, 40px);
}
.accreditation-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease;
}
.accreditation-card:hover {
border-color: var(--primary, #00543B);
}
.accreditation-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
margin: 0 auto 16px;
}
.accreditation-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.accreditation-card p {
font-size: 0.813rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Button Variants (matching about.php) ── */
.btn-small {
padding: 6px 16px;
font-size: 0.875rem;
border-radius: 3px;
}
.btn-full {
display: block;
width: 100%;
text-align: center;
}
/* ── Utility: Text Center ── */
.text-center {
text-align: center;
}
/* ============================================================
RESPONSIVE — Facts & Figures Page
============================================================ */
/* ── Tablet Landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
.stats-hero-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.global-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.accreditation-grid {
grid-template-columns: repeat(2, 1fr);
}
.people-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tablet Portrait (≤ 900px) ── */
@media (max-width: 900px) {
.facts-split-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.facts-split-stats {
grid-template-columns: repeat(4, 1fr);
}
.programs-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.infra-grid {
grid-template-columns: repeat(2, 1fr);
}
.research-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.facts-overview-grid {
grid-template-columns: 1fr;
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
.stats-hero-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.stat-hero-number {
font-size: 1.75rem;
}
.stat-hero-label {
font-size: 0.75rem;
}
.facts-split-stats {
grid-template-columns: repeat(2, 1fr);
}
.programs-stats-grid {
grid-template-columns: 1fr;
}
.people-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.global-stats-grid {
grid-template-columns: 1fr;
}
.infra-grid {
grid-template-columns: 1fr;
}
.research-stats-grid {
grid-template-columns: 1fr;
}
.accreditation-grid {
grid-template-columns: 1fr;
}
.programs-summary-bar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.global-regions-list {
flex-direction: column;
align-items: center;
gap: 8px;
}
/* Timeline left offset adjustment */
.timeline {
padding-left: 32px;
}
.timeline::before {
left: 11px;
}
.timeline-marker {
left: -28px;
width: 14px;
height: 14px;
}
.timeline-content h3 {
font-size: 1rem;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.stats-hero-grid {
grid-template-columns: 1fr;
}
.facts-split-stats {
grid-template-columns: 1fr;
}
.people-stats-grid {
grid-template-columns: 1fr;
}
.stat-hero-number {
font-size: 1.5rem;
}
}
/* ============================================================
UNDERGRADUATE PROGRAMS PAGE — New CSS Classes
============================================================ */
/* ── Hero Highlights (Intro Section) ── */
.hero-highlights {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: var(--space-lg, 24px);
}
.hero-highlight-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--primary, #00543B);
background: #e8f5ef;
padding: 6px 14px;
border-radius: 3px;
}
.hero-highlight-item i {
font-size: 0.875rem;
}
/* ── Stats Bar (Navy Section) ── */
.stats-bar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.stats-bar-item {
flex: 1;
min-width: 140px;
text-align: center;
padding: 20px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
.stats-bar-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #F0C400;
line-height: 1.10;
margin-bottom: 4px;
}
.stats-bar-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Faculty Programs Block ── */
.faculty-programs-block {
margin-bottom: 56px;
padding-bottom: 56px;
border-bottom: 1px solid #e8e8e8;
}
.faculty-programs-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.faculty-programs-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
.faculty-programs-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.5rem;
}
.faculty-programs-title h3 {
font-size: 1.313rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.35;
}
.faculty-programs-title p {
font-size: 0.875rem;
color: #666666;
margin: 0;
line-height: 1.50;
}
/* ── Program Cards Grid ── */
.programs-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.program-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
}
.program-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.program-card-badge {
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 8px 20px;
text-align: center;
}
.program-card-body {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.program-card-body h4 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 12px 0;
line-height: 1.35;
}
.program-card:hover h4 {
color: var(--primary, #00543B);
}
.program-card-body>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
flex: 1;
}
.program-card-meta {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
border-top: 1px solid #f2f2f2;
}
.program-card-meta li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.813rem;
color: #666666;
}
.program-card-meta li i {
color: var(--primary, #00543B);
font-size: 0.75rem;
width: 14px;
text-align: center;
}
.program-card-actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #f2f2f2;
}
/* ── Requirements List ── */
.requirements-list {
margin-top: var(--space-lg, 24px);
}
.requirement-item {
display: flex;
gap: 20px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #f2f2f2;
}
.requirement-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.requirement-number {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 1rem;
font-weight: 700;
border-radius: 50%;
}
.requirement-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.requirement-body p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
.requirements-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: var(--space-lg, 24px);
padding: 16px 20px;
background: #e8f5ef;
border-left: 4px solid var(--primary, #00543B);
border-radius: 0 4px 4px 0;
}
.requirements-note i {
color: var(--primary, #00543B);
font-size: 1rem;
margin-top: 2px;
flex-shrink: 0;
}
.requirements-note p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── Sidebar Contact List ── */
.sidebar-contact-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.sidebar-contact-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: #333333;
margin-bottom: 8px;
}
.sidebar-contact-list li:last-child {
margin-bottom: 0;
}
.sidebar-contact-list li i {
color: var(--primary, #00543B);
font-size: 0.813rem;
width: 16px;
text-align: center;
}
/* ── Sidebar CTA Box ── */
.sidebar-cta-box {
background: var(--primary, #00543B) !important;
border-left: none !important;
border-radius: 4px;
}
.sidebar-cta-box h4 {
color: #ffffff;
}
.sidebar-cta-box p {
color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem;
line-height: 1.50;
margin-bottom: 16px;
}
.btn-white {
background: #ffffff;
color: var(--primary, #00543B);
padding: 10px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: background 0.2s ease;
text-align: center;
}
.btn-white:hover {
background: #f2f2f2;
}
/* ── Experience Grid ── */
.experience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.experience-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.experience-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.experience-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.5rem;
margin: 0 auto 16px;
}
.experience-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.experience-card p {
font-size: 0.875rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Testimonials Grid ── */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.testimonial-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease;
}
.testimonial-card:hover {
border-color: var(--primary, #00543B);
}
.testimonial-quote {
flex: 1;
margin-bottom: 20px;
}
.testimonial-quote i {
color: var(--primary, #00543B);
font-size: 1.5rem;
opacity: 0.3;
margin-bottom: 12px;
display: block;
}
.testimonial-quote p {
font-size: 0.875rem;
color: #333333;
line-height: 1.60;
font-style: italic;
margin: 0;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #f2f2f2;
}
.testimonial-author img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: #e8e8e8;
}
.testimonial-author-info {
display: flex;
flex-direction: column;
}
.testimonial-author-info strong {
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
}
.testimonial-author-info span {
font-size: 0.75rem;
color: #666666;
line-height: 1.40;
}
.testimonial-country {
color: var(--primary, #00543B) !important;
font-weight: 600;
}
.testimonial-country i {
font-size: 0.625rem;
display: inline !important;
opacity: 1 !important;
margin-bottom: 0 !important;
}
/* ── FAQ Accordion ── */
.faq-list {
margin-top: var(--space-lg, 24px);
max-width: 840px;
}
.faq-item {
border: 1px solid #dddddd;
border-radius: 4px;
margin-bottom: 12px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item:hover {
border-color: var(--primary, #00543B);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #ffffff;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.2s ease;
}
.faq-question:hover {
background: #fafafa;
}
.faq-question span {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.40;
}
.faq-question i {
color: var(--primary, #00543B);
font-size: 0.875rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"] i {
transform: rotate(180deg);
}
.faq-question[aria-expanded="true"] {
background: #f5f5f5;
border-bottom: 1px solid #e8e8e8;
}
.faq-answer {
display: none;
padding: 16px 20px 20px;
background: #ffffff;
}
.faq-answer.is-open {
display: block;
}
.faq-answer p {
font-size: 0.875rem;
color: #333333;
line-height: 1.60;
margin: 0;
}
.faq-answer a {
color: var(--primary, #00543B);
font-weight: 600;
text-decoration: none;
}
.faq-answer a:hover {
text-decoration: underline;
}
/* ============================================================
RESPONSIVE — Undergraduate Page
============================================================ */
/* ── Tablet Landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
.programs-card-grid {
grid-template-columns: repeat(2, 1fr);
}
.experience-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tablet Portrait (≤ 900px) ── */
@media (max-width: 900px) {
.stats-bar {
flex-wrap: wrap;
justify-content: center;
}
.stats-bar-item {
min-width: 120px;
}
.programs-card-grid {
grid-template-columns: repeat(2, 1fr);
}
.experience-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
.hero-highlights {
flex-direction: column;
gap: 8px;
}
.hero-highlight-item {
width: 100%;
justify-content: flex-start;
}
.stats-bar {
flex-direction: column;
gap: 12px;
}
.stats-bar-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
text-align: left;
}
.stats-bar-number {
font-size: 1.5rem;
margin-bottom: 0;
}
.stats-bar-label {
font-size: 0.75rem;
}
.faculty-programs-header {
flex-direction: column;
gap: 12px;
}
.faculty-programs-icon {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
.faculty-programs-title h3 {
font-size: 1.125rem;
}
.programs-card-grid {
grid-template-columns: 1fr;
}
.program-card-actions {
flex-direction: column;
}
.program-card-actions .btn {
width: 100%;
text-align: center;
}
.faculty-programs-block {
margin-bottom: 40px;
padding-bottom: 40px;
}
/* Requirements */
.requirement-item {
flex-direction: column;
gap: 12px;
}
.requirement-number {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.requirements-note {
flex-direction: column;
gap: 8px;
}
/* Experience Grid */
.experience-grid {
grid-template-columns: 1fr;
}
/* Testimonials */
.testimonials-grid {
grid-template-columns: 1fr;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
/* FAQ */
.faq-question {
padding: 14px 16px;
}
.faq-question span {
font-size: 0.875rem;
}
.faq-answer {
padding: 12px 16px 16px;
}
/* Data Table */
.data-table {
min-width: 640px;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.stats-bar-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
.stats-bar-number {
font-size: 1.25rem;
}
.program-card-badge {
font-size: 0.688rem;
padding: 6px 16px;
}
.program-card-body {
padding: 16px;
}
.program-card-body h4 {
font-size: 1rem;
}
.requirement-number {
width: 32px;
height: 32px;
font-size: 0.813rem;
}
.requirement-body h3 {
font-size: 1rem;
}
.experience-icon {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
.testimonial-author img {
width: 40px;
height: 40px;
}
.faq-item {
margin-bottom: 8px;
}
.faq-question {
padding: 12px 14px;
}
}
/* ============================================================
UNDERGRADUATE PAGE — Additional Utility Classes
============================================================ */
/* ── Button: Outlined (matching about.php pattern) ── */
.btn-outlined {
background: transparent;
color: var(--primary, #00543B);
padding: 10px 24px;
font-size: 1rem;
font-weight: 600;
border: 2px solid var(--primary, #00543B);
border-radius: 4px;
text-decoration: none;
display: inline-block;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
letter-spacing: 0.3px;
cursor: pointer;
}
.btn-outlined:hover {
background: #e8f5ef;
border-color: #003D2B;
color: #003D2B;
}
.btn-outlined:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.btn-outlined.btn-small {
padding: 6px 16px;
font-size: 0.875rem;
border-width: 2px;
border-radius: 3px;
}
/* ── Button: White Outlined (CTA Banner on dark bg) ── */
.btn-white-outlined {
background: transparent;
color: #ffffff;
padding: 10px 24px;
font-size: 1rem;
font-weight: 600;
border: 2px solid #ffffff;
border-radius: 4px;
text-decoration: none;
display: inline-block;
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
letter-spacing: 0.3px;
cursor: pointer;
}
.btn-white-outlined:hover {
background: rgba(255, 255, 255, 0.15);
}
.btn-white-outlined:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ── Program Card Meta Responsive Tweaks ── */
@media (max-width: 600px) {
.program-card-meta {
gap: 4px;
padding-top: 10px;
}
.program-card-meta li {
font-size: 0.75rem;
}
.program-card-meta li i {
font-size: 0.688rem;
}
}
/* ============================================================
FAQ ACCORDION — JavaScript Support Styles
============================================================ */
/*
* The FAQ accordion requires a small JS snippet to toggle.
* Add the following to your site's main JS file:
*
* document.querySelectorAll('.faq-question').forEach(function(btn) {
* btn.addEventListener('click', function() {
* var expanded = this.getAttribute('aria-expanded') === 'true';
* // Close all others (optional — for single-open behavior)
* document.querySelectorAll('.faq-question').forEach(function(otherBtn) {
* otherBtn.setAttribute('aria-expanded', 'false');
* otherBtn.nextElementSibling.classList.remove('is-open');
* });
* // Toggle current
* if (!expanded) {
* this.setAttribute('aria-expanded', 'true');
* this.nextElementSibling.classList.add('is-open');
* }
* });
* });
*/
/* Smooth open animation */
.faq-answer {
display: none;
padding: 16px 20px 20px;
background: #ffffff;
animation: faqSlideDown 0.3s ease;
}
.faq-answer.is-open {
display: block;
}
@keyframes faqSlideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Active FAQ item styling */
.faq-item:has(.faq-answer.is-open) {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
/* ============================================================
PRINT STYLES — Undergraduate Page
============================================================ */
@media print {
.page-header,
.breadcrumbs,
.cta-banner,
.section-navy,
.sidebar-cta-box,
.faq-list,
.testimonials-grid {
display: none !important;
}
.programs-card-grid {
grid-template-columns: 1fr !important;
}
.program-card {
break-inside: avoid;
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.data-table {
font-size: 0.75rem;
}
.content-with-sidebar {
display: block !important;
}
.sidebar {
display: none !important;
}
.main-content {
width: 100% !important;
}
body {
font-size: 12pt;
color: #000000;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
}
/* ============================================================
ACCESSIBILITY ENHANCEMENTS
============================================================ */
/* Focus visible for all interactive elements */
.btn:focus-visible,
.btn-outlined:focus-visible,
.btn-white:focus-visible,
.btn-white-outlined:focus-visible,
.faq-question:focus-visible,
.program-card a:focus-visible,
.dean-card-link:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.faq-answer.is-open {
animation: none;
}
.program-card,
.experience-card,
.testimonial-card,
.faq-item,
.dean-card-link i {
transition: none !important;
}
.progress-bar-fill {
transition: none !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.program-card {
border-width: 2px;
border-color: #000000;
}
.program-card-badge {
background: #000000;
}
.btn-primary,
.btn {
border: 2px solid #000000;
}
.faq-question span {
color: #000000;
}
.progress-bar-track {
border: 1px solid #000000;
}
}
/* ============================================================
SKIP LINK (Add to header.php if not already present)
============================================================ */
/*
* Skip to main content
*/
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--primary, #00543B);
color: #ffffff;
padding: 10px 20px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 0 0 4px 4px;
z-index: 10000;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
}
/* ============================================================
POSTGRADUATE PROGRAMS PAGE — New CSS Classes
============================================================ */
/* ── Pathways Grid (Program Levels Overview) ── */
.pathways-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
align-items: stretch;
}
.pathway-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pathway-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.pathway-card-featured {
border-color: var(--primary, #00543B);
border-width: 2px;
position: relative;
}
.pathway-card-header {
padding: 24px;
text-align: center;
position: relative;
}
.pathway-card-header-bronze {
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d4 100%);
border-bottom: 3px solid #B8860B;
}
.pathway-card-header-green {
background: var(--primary, #00543B);
border-bottom: 3px solid #003D2B;
}
.pathway-card-header-gold {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border-bottom: 3px solid #F0C400;
}
.pathway-card-header-bronze .pathway-card-icon {
color: #B8860B;
}
.pathway-card-header-green .pathway-card-icon {
color: #ffffff;
}
.pathway-card-header-gold .pathway-card-icon {
color: #F0C400;
}
.pathway-card-icon {
font-size: 2rem;
margin-bottom: 12px;
display: block;
}
.pathway-card-header h3 {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 8px 0;
line-height: 1.35;
}
.pathway-card-header-bronze h3 {
color: #1a1a1a;
}
.pathway-card-header-green h3 {
color: #ffffff;
}
.pathway-card-header-gold h3 {
color: #ffffff;
}
.pathway-card-duration {
font-size: 0.813rem;
font-weight: 400;
}
.pathway-card-header-bronze .pathway-card-duration {
color: #666666;
}
.pathway-card-header-green .pathway-card-duration {
color: rgba(255, 255, 255, 0.8);
}
.pathway-card-header-gold .pathway-card-duration {
color: rgba(255, 255, 255, 0.7);
}
.pathway-card-badge-top {
position: absolute;
top: 0;
right: 0;
background: #F0C400;
color: #1a1a1a;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 0 0 0 4px;
}
.pathway-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.pathway-card-body p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.pathway-features {
list-style: none;
padding: 0;
margin: 0;
}
.pathway-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
margin-bottom: 10px;
}
.pathway-features li:last-child {
margin-bottom: 0;
}
.pathway-features li i {
color: var(--primary, #00543B);
font-size: 0.75rem;
margin-top: 3px;
flex-shrink: 0;
}
/* ── Master's Program Card Badge Variant ── */
.program-card-badge-masters {
background: #003D2B;
}
/* ── Doctoral Cards Grid ── */
.doctoral-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.doctoral-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doctoral-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.doctoral-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #1a1a1a;
}
.doctoral-card-icon {
font-size: 1.25rem;
color: #F0C400;
}
/* ── Doctoral Cards (Continued) ── */
.doctoral-card-badge {
background: #F0C400;
color: #1a1a1a;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 3px;
}
.doctoral-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.doctoral-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.35;
}
.doctoral-card-faculty {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary, #00543B);
margin: 0 0 16px 0;
}
.doctoral-card-body>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 20px 0;
}
.doctoral-card-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
padding: 16px;
background: #f5f5f5;
border-radius: 4px;
}
.doctoral-detail {
display: flex;
flex-direction: column;
gap: 2px;
}
.doctoral-detail-label {
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666666;
}
.doctoral-detail-value {
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
}
.doctoral-card-body h4 {
font-size: 0.875rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 12px 0;
padding-top: 16px;
border-top: 1px solid #e8e8e8;
}
.doctoral-research-areas {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.doctoral-research-areas li {
position: relative;
padding-left: 16px;
font-size: 0.813rem;
color: #333333;
line-height: 1.50;
margin-bottom: 8px;
}
.doctoral-research-areas li:last-child {
margin-bottom: 0;
}
.doctoral-research-areas li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
background: var(--primary, #00543B);
border-radius: 50%;
}
.doctoral-card-actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #f2f2f2;
}
/* ── Admission Tier Headings ── */
.admission-tier {
margin-bottom: 40px;
}
.admission-tier:last-of-type {
margin-bottom: 0;
}
.admission-tier>h3 {
font-size: 1.313rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 20px 0;
padding: 16px 20px;
background: #f5f5f5;
border-left: 4px solid var(--primary, #00543B);
border-radius: 0 4px 4px 0;
display: flex;
align-items: center;
gap: 12px;
line-height: 1.35;
}
.admission-tier>h3 i {
color: var(--primary, #00543B);
font-size: 1.25rem;
}
/* ── Data Table tfoot spanning (for comparison table) ── */
.data-table tfoot td[colspan] {
background: #1a1a1a;
color: #ffffff;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 16px;
border-top: none;
}
/* ============================================================
RESPONSIVE — Postgraduate Page
============================================================ */
/* ── Tablet Landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
.pathways-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.doctoral-grid {
grid-template-columns: repeat(2, 1fr);
}
.programs-card-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tablet Portrait (≤ 900px) ── */
@media (max-width: 900px) {
.pathways-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
/* Re-order to show featured (Master's) first */
.pathway-card-featured {
order: -1;
}
.doctoral-grid {
grid-template-columns: 1fr;
max-width: 600px;
}
.programs-card-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.stats-bar {
flex-wrap: wrap;
justify-content: center;
}
.stats-bar-item {
min-width: 120px;
flex: 0 0 auto;
}
.doctoral-card-details {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
/* Pathways */
.pathways-grid {
max-width: 100%;
}
.pathway-card-header {
padding: 20px;
}
.pathway-card-icon {
font-size: 1.5rem;
}
.pathway-card-header h3 {
font-size: 1rem;
}
.pathway-card-body {
padding: 20px;
}
/* Stats bar */
.stats-bar {
flex-direction: column;
gap: 12px;
}
.stats-bar-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
}
.stats-bar-number {
font-size: 1.5rem;
margin-bottom: 0;
}
/* Faculty program blocks */
.faculty-programs-header {
flex-direction: column;
gap: 12px;
}
.faculty-programs-icon {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
.faculty-programs-title h3 {
font-size: 1.125rem;
}
.programs-card-grid {
grid-template-columns: 1fr;
}
.program-card-actions {
flex-direction: column;
}
.program-card-actions .btn {
width: 100%;
text-align: center;
}
.faculty-programs-block {
margin-bottom: 40px;
padding-bottom: 40px;
}
/* Doctoral cards */
.doctoral-grid {
max-width: 100%;
}
.doctoral-card-body {
padding: 20px;
}
.doctoral-card-details {
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px;
}
.doctoral-card-actions {
flex-direction: column;
}
.doctoral-card-actions .btn {
width: 100%;
text-align: center;
}
.doctoral-research-areas li {
font-size: 0.75rem;
}
/* Admission tiers */
.admission-tier>h3 {
font-size: 1.125rem;
padding: 14px 16px;
}
.admission-tier>h3 i {
font-size: 1rem;
}
.requirement-item {
flex-direction: column;
gap: 12px;
}
.requirement-number {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.requirements-note {
flex-direction: column;
gap: 8px;
}
/* Data table */
.data-table {
min-width: 700px;
}
/* Testimonials */
.testimonials-grid {
grid-template-columns: 1fr;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
/* FAQ */
.faq-question {
padding: 14px 16px;
}
.faq-question span {
font-size: 0.875rem;
}
.faq-answer {
padding: 12px 16px 16px;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.stats-bar-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
.stats-bar-number {
font-size: 1.25rem;
}
.pathway-card-header h3 {
font-size: 0.938rem;
}
.pathway-card-badge-top {
font-size: 0.625rem;
padding: 3px 8px;
}
.pathway-card-body {
padding: 16px;
}
.pathway-features li {
font-size: 0.813rem;
}
.doctoral-card-body h3 {
font-size: 1rem;
}
.doctoral-card-details {
grid-template-columns: 1fr;
gap: 8px;
}
.doctoral-detail {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.program-card-badge,
.program-card-badge-masters {
font-size: 0.688rem;
padding: 6px 16px;
}
.program-card-body {
padding: 16px;
}
.program-card-body h4 {
font-size: 1rem;
}
.admission-tier>h3 {
font-size: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.requirement-number {
width: 32px;
height: 32px;
font-size: 0.813rem;
}
.requirement-body h3 {
font-size: 1rem;
}
.testimonial-author img {
width: 40px;
height: 40px;
}
.faq-item {
margin-bottom: 8px;
}
.faq-question {
padding: 12px 14px;
}
}
/* ============================================================
POSTGRADUATE — Additional Component Refinements
============================================================ */
/* ── Pathway Card Hover Enhancement ── */
.pathway-card:hover .pathway-card-header-bronze {
border-bottom-color: var(--primary, #00543B);
}
.pathway-card:hover .pathway-card-header-gold {
border-bottom-color: #F0C400;
}
.pathway-card-featured:hover {
box-shadow: rgba(0, 84, 59, 0.15) 0px 4px 16px;
}
/* ── Doctoral Card Hover Enhancement ── */
.doctoral-card:hover .doctoral-card-header {
background: var(--primary, #00543B);
}
.doctoral-card:hover .doctoral-card-body h3 {
color: var(--primary, #00543B);
}
/* ── Smooth Transition for Card Headers ── */
.doctoral-card-header {
transition: background 0.2s ease;
}
.pathway-card-header {
transition: border-color 0.2s ease;
}
/* ── Faculty Programs Block Border Animation ── */
.faculty-programs-block {
transition: border-color 0.2s ease;
}
/* ── Admission Tier Hover ── */
.admission-tier>h3:hover {
background: #e8f5ef;
}
/* ── Link Styles Inside FAQ Answers ── */
.faq-answer a {
color: var(--primary, #00543B);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.faq-answer a:hover {
color: #003D2B;
text-decoration: underline;
}
/* ============================================================
PRINT STYLES — Postgraduate Page
============================================================ */
@media print {
.page-header,
.breadcrumbs,
.cta-banner,
.section-navy,
.sidebar-cta-box,
.faq-list,
.testimonials-grid {
display: none !important;
}
.pathways-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.doctoral-grid {
grid-template-columns: 1fr !important;
}
.programs-card-grid {
grid-template-columns: 1fr !important;
}
.pathway-card,
.doctoral-card,
.program-card {
break-inside: avoid;
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.pathway-card-header-green {
background: #f5f5f5 !important;
color: #000000 !important;
}
.pathway-card-header-green h3,
.pathway-card-header-green .pathway-card-duration,
.pathway-card-header-green .pathway-card-icon {
color: #000000 !important;
}
.pathway-card-header-gold {
background: #f5f5f5 !important;
}
.pathway-card-header-gold h3,
.pathway-card-header-gold .pathway-card-duration,
.pathway-card-header-gold .pathway-card-icon {
color: #000000 !important;
}
.doctoral-card-header {
background: #f5f5f5 !important;
}
.doctoral-card-icon {
color: #000000 !important;
}
.doctoral-card-badge {
background: #dddddd !important;
color: #000000 !important;
}
.data-table {
font-size: 0.75rem;
}
.content-with-sidebar {
display: block !important;
}
.sidebar {
display: none !important;
}
.main-content {
width: 100% !important;
}
body {
font-size: 12pt;
color: #000000;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
}
/* ============================================================
ACCESSIBILITY — Postgraduate Page
============================================================ */
/* Focus visible for all new interactive elements */
.pathway-card:focus-within {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.doctoral-card:focus-within {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.faq-question:focus-visible {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.pathway-card,
.doctoral-card,
.doctoral-card-header,
.pathway-card-header,
.program-card,
.testimonial-card,
.faq-item,
.faq-question i,
.admission-tier>h3 {
transition: none !important;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.pathway-card {
border-width: 2px;
border-color: #000000;
}
.pathway-card-featured {
border-width: 3px;
}
.doctoral-card {
border-width: 2px;
border-color: #000000;
}
.doctoral-card-header {
background: #000000;
}
.program-card-badge,
.program-card-badge-masters {
background: #000000;
}
.pathway-card-badge-top {
background: #000000;
color: #ffffff;
}
.admission-tier>h3 {
border-left-width: 6px;
border-left-color: #000000;
}
.requirement-number {
background: #000000;
border: 2px solid #000000;
}
.faq-question span {
color: #000000;
}
.faq-item {
border-width: 2px;
border-color: #000000;
}
}
/* ============================================================
PH.D. PROGRAMS PAGE — New CSS Classes
============================================================ */
/* ── Ph.D. Value Grid ── */
.phd-value-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.phd-value-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 28px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.phd-value-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.phd-value-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
margin-bottom: 16px;
}
.phd-value-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 12px 0;
line-height: 1.35;
}
.phd-value-card>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 20px 0;
}
.phd-value-stat {
padding: 12px 16px;
background: #f5f5f5;
border-left: 4px solid var(--primary, #00543B);
border-radius: 0 4px 4px 0;
}
.phd-value-stat-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.10;
}
.phd-value-stat-label {
display: block;
font-size: 0.75rem;
color: #666666;
margin-top: 2px;
}
/* ── Ph.D. Program Block ── */
.phd-program-block {
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid #e8e8e8;
}
.phd-program-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.phd-program-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 32px;
padding: 24px;
background: #1a1a1a;
border-radius: 4px;
}
.phd-program-header-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.phd-program-icon {
font-size: 1.5rem;
color: #F0C400;
}
.phd-program-badge {
background: #F0C400;
color: #1a1a1a;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 3px;
}
.phd-program-header-text {
flex: 1;
}
.phd-program-faculty {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #F0C400;
margin-bottom: 8px;
}
.phd-program-header-text h3 {
font-size: 1.313rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 8px 0;
line-height: 1.30;
}
.phd-program-header-text p {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.75);
margin: 0;
line-height: 1.50;
}
/* ── Ph.D. Program Body (Main + Sidebar) ── */
.phd-program-body {
display: grid;
grid-template-columns: 1fr 300px;
gap: 32px;
align-items: start;
}
.phd-program-main {
min-width: 0;
}
.phd-program-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ── Ph.D. Program Overview ── */
.phd-program-overview {
margin-bottom: 28px;
}
.phd-program-overview h4,
.phd-program-main h4 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 28px 0 16px 0;
padding-bottom: 10px;
border-bottom: 2px solid #e8e8e8;
}
.phd-program-overview h4:first-child {
margin-top: 0;
}
.phd-program-overview p {
font-size: 0.875rem;
color: #333333;
line-height: 1.60;
margin: 0 0 12px 0;
}
.phd-program-overview p:last-child {
margin-bottom: 0;
}
/* ── Ph.D. Program Details Grid ── */
.phd-program-details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 28px;
}
.phd-detail-box {
background: #f5f5f5;
border-radius: 4px;
padding: 14px 16px;
text-align: center;
}
.phd-detail-label {
display: block;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666666;
margin-bottom: 4px;
}
.phd-detail-value {
display: block;
font-size: 0.938rem;
font-weight: 600;
color: var(--primary, #00543B);
line-height: 1.30;
}
/* ── Research Tags ── */
.phd-research-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.research-tag {
display: inline-block;
background: #e8f5ef;
color: var(--primary, #00543B);
font-size: 0.75rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 3px;
border: 1px solid rgba(0, 84, 59, 0.15);
transition: background 0.2s ease, border-color 0.2s ease;
}
.research-tag:hover {
background: #d0eadb;
border-color: var(--primary, #00543B);
}
/* ── Ph.D. Curriculum Phases ── */
.phd-curriculum {
margin-bottom: 8px;
}
.phd-curriculum-phase {
display: flex;
gap: 20px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #f2f2f2;
}
.phd-curriculum-phase:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.phd-phase-marker {
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
border-radius: 50%;
text-align: center;
line-height: 1.20;
}
.phd-phase-content {
flex: 1;
}
.phd-phase-content h5 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 10px 0;
line-height: 1.40;
}
.phd-phase-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.phd-phase-content ul li {
position: relative;
padding-left: 18px;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
margin-bottom: 6px;
}
.phd-phase-content ul li:last-child {
margin-bottom: 0;
}
.phd-phase-content ul li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
background: var(--primary, #00543B);
border-radius: 50%;
}
/* ── Ph.D. Sidebar Faculty List ── */
.phd-faculty-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.phd-faculty-item {
display: flex;
align-items: center;
gap: 12px;
}
.phd-faculty-item img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: #e8e8e8;
flex-shrink: 0;
}
.phd-faculty-item div {
display: flex;
flex-direction: column;
}
.phd-faculty-item strong {
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.30;
}
.phd-faculty-item span {
font-size: 0.75rem;
color: #666666;
line-height: 1.30;
}
/* ── Sidebar Funding List ── */
.sidebar-funding-list {
list-style: none;
padding: 0;
margin: 12px 0 16px 0;
}
.sidebar-funding-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.813rem;
color: #333333;
line-height: 1.50;
margin-bottom: 8px;
}
.sidebar-funding-list li:last-child {
margin-bottom: 0;
}
.sidebar-funding-list li i {
color: var(--primary, #00543B);
font-size: 0.688rem;
margin-top: 4px;
flex-shrink: 0;
}
/* ── Journey Timeline (Doctoral Journey) ── */
.journey-timeline {
margin-top: var(--space-lg, 24px);
position: relative;
}
.journey-step {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 32px;
position: relative;
}
.journey-step:last-child {
margin-bottom: 0;
}
/* Connecting line between steps */
.journey-step::after {
content: '';
position: absolute;
left: 25px;
top: 56px;
width: 2px;
height: calc(100% - 16px);
background: #e8e8e8;
}
.journey-step:last-child::after {
display: none;
}
.journey-step-number {
position: absolute;
top: -8px;
left: -8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #F0C400;
color: #1a1a1a;
font-size: 0.625rem;
font-weight: 700;
border-radius: 50%;
z-index: 2;
}
.journey-step-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 1.125rem;
border-radius: 50%;
position: relative;
z-index: 1;
}
.journey-step-content {
flex: 1;
padding-top: 4px;
}
.journey-step-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.journey-step-content p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── FAQ Answer List (for career paths) ── */
.faq-answer ul {
list-style: none;
padding: 0;
margin: 8px 0 0 0;
}
.faq-answer ul li {
position: relative;
padding-left: 18px;
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin-bottom: 6px;
}
.faq-answer ul li:last-child {
margin-bottom: 0;
}
.faq-answer ul li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: var(--primary, #00543B);
border-radius: 50%;
}
/* ============================================================
RESPONSIVE — Ph.D. Page
============================================================ */
/* ── Tablet Landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
.phd-value-grid {
grid-template-columns: repeat(2, 1fr);
}
.phd-program-body {
grid-template-columns: 1fr 260px;
gap: 24px;
}
.phd-program-details-grid {
grid-template-columns: repeat(3, 1fr);
}
.infra-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tablet Portrait (≤ 900px) ── */
@media (max-width: 900px) {
.phd-value-grid {
grid-template-columns: repeat(2, 1fr);
}
.phd-program-body {
grid-template-columns: 1fr;
gap: 32px;
}
.phd-program-sidebar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.phd-program-header {
flex-direction: column;
gap: 16px;
padding: 20px;
}
.phd-program-header-inner {
flex-direction: row;
gap: 12px;
}
.phd-program-details-grid {
grid-template-columns: repeat(3, 1fr);
}
.infra-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.stats-bar {
flex-wrap: wrap;
justify-content: center;
}
.stats-bar-item {
min-width: 120px;
flex: 0 0 auto;
}
/* Journey Timeline adjustment */
.journey-step::after {
left: 25px;
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
/* Value Grid */
.phd-value-grid {
grid-template-columns: 1fr;
}
.phd-value-card {
padding: 20px;
}
.phd-value-stat-number {
font-size: 1.25rem;
}
/* Stats Bar */
.stats-bar {
flex-direction: column;
gap: 12px;
}
.stats-bar-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
}
.stats-bar-number {
font-size: 1.5rem;
margin-bottom: 0;
}
/* Program Header */
.phd-program-header {
padding: 16px;
}
.phd-program-header-text h3 {
font-size: 1.125rem;
}
.phd-program-header-text p {
font-size: 0.813rem;
}
/* Program Details Grid */
.phd-program-details-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.phd-detail-box {
padding: 10px 12px;
}
.phd-detail-label {
font-size: 0.625rem;
}
.phd-detail-value {
font-size: 0.813rem;
}
/* Research Tags */
.phd-research-tags {
gap: 6px;
}
.research-tag {
font-size: 0.688rem;
padding: 4px 10px;
}
/* Curriculum Phases */
.phd-curriculum-phase {
flex-direction: column;
gap: 12px;
}
.phd-phase-marker {
width: 52px;
height: 52px;
font-size: 0.688rem;
}
.phd-phase-content h5 {
font-size: 0.938rem;
}
.phd-phase-content ul li {
font-size: 0.813rem;
}
/* Sidebar in program block */
.phd-program-sidebar {
grid-template-columns: 1fr;
}
/* Faculty list */
.phd-faculty-item img {
width: 40px;
height: 40px;
}
.phd-faculty-item strong {
font-size: 0.813rem;
}
.phd-faculty-item span {
font-size: 0.688rem;
}
/* Journey Steps */
.journey-step {
gap: 16px;
margin-bottom: 28px;
}
.journey-step-icon {
width: 44px;
height: 44px;
font-size: 1rem;
}
.journey-step-number {
width: 20px;
height: 20px;
font-size: 0.563rem;
top: -6px;
left: -6px;
}
.journey-step::after {
left: 21px;
top: 48px;
}
.journey-step-content h3 {
font-size: 1rem;
}
.journey-step-content p {
font-size: 0.813rem;
}
/* Infra Grid */
.infra-grid {
grid-template-columns: 1fr;
}
/* Testimonials */
.testimonials-grid {
grid-template-columns: 1fr;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
/* FAQ */
.faq-question {
padding: 14px 16px;
}
.faq-question span {
font-size: 0.875rem;
}
.faq-answer {
padding: 12px 16px 16px;
}
.faq-answer ul li {
font-size: 0.813rem;
}
/* Requirements */
.requirement-item {
flex-direction: column;
gap: 12px;
}
.requirement-number {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.requirements-note {
flex-direction: column;
gap: 8px;
}
/* Hero Highlights */
.hero-highlights {
flex-direction: column;
gap: 8px;
}
.hero-highlight-item {
width: 100%;
justify-content: flex-start;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.stats-bar-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
.stats-bar-number {
font-size: 1.25rem;
}
.phd-program-header-text h3 {
font-size: 1rem;
}
.phd-program-details-grid {
grid-template-columns: 1fr;
}
.phd-detail-box {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.phd-phase-marker {
width: 44px;
height: 44px;
font-size: 0.625rem;
}
.research-tag {
font-size: 0.625rem;
padding: 3px 8px;
}
.journey-step-icon {
width: 40px;
height: 40px;
font-size: 0.875rem;
}
.journey-step-number {
width: 18px;
height: 18px;
font-size: 0.5rem;
}
.journey-step::after {
left: 19px;
top: 44px;
}
.journey-step-content h3 {
font-size: 0.938rem;
}
.phd-value-card {
padding: 16px;
}
.phd-value-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.phd-value-card h3 {
font-size: 1rem;
}
.phd-faculty-item img {
width: 36px;
height: 36px;
}
.testimonial-author img {
width: 40px;
height: 40px;
}
.faq-item {
margin-bottom: 8px;
}
.faq-question {
padding: 12px 14px;
}
.requirement-number {
width: 32px;
height: 32px;
font-size: 0.813rem;
}
.requirement-body h3 {
font-size: 1rem;
}
}
/* ============================================================
PH.D. PAGE — Hover & Interaction Enhancements
============================================================ */
/* ── Value Card Hover ── */
.phd-value-card:hover .phd-value-icon {
background: var(--primary, #00543B);
color: #ffffff;
transition: background 0.2s ease, color 0.2s ease;
}
.phd-value-icon {
transition: background 0.2s ease, color 0.2s ease;
}
/* ── Program Header Hover ── */
.phd-program-header:hover {
background: #222222;
transition: background 0.2s ease;
}
.phd-program-header {
transition: background 0.2s ease;
}
/* ── Research Tag Active State ── */
.research-tag:active {
background: var(--primary, #00543B);
color: #ffffff;
border-color: var(--primary, #00543B);
}
/* ── Journey Step Hover ── */
.journey-step:hover .journey-step-icon {
transform: scale(1.05);
box-shadow: rgba(0, 84, 59, 0.2) 0px 4px 12px;
}
.journey-step-icon {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.journey-step:hover .journey-step-content h3 {
color: var(--primary, #00543B);
}
.journey-step-content h3 {
transition: color 0.2s ease;
}
/* ── Faculty Item Hover ── */
.phd-faculty-item:hover strong {
color: var(--primary, #00543B);
}
.phd-faculty-item strong {
transition: color 0.2s ease;
}
.phd-faculty-item:hover img {
box-shadow: rgba(0, 84, 59, 0.2) 0px 2px 8px;
}
.phd-faculty-item img {
transition: box-shadow 0.2s ease;
}
/* ============================================================
PH.D. PAGE — Print Styles
============================================================ */
@media print {
.page-header,
.breadcrumbs,
.cta-banner,
.section-navy,
.sidebar-cta-box,
.faq-list,
.testimonials-grid,
.phd-program-sidebar {
display: none !important;
}
.phd-program-body {
grid-template-columns: 1fr !important;
}
.phd-value-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.phd-program-header {
background: #f5f5f5 !important;
color: #000000 !important;
}
.phd-program-header-text h3,
.phd-program-header-text p,
.phd-program-faculty,
.phd-program-icon {
color: #000000 !important;
}
.phd-program-badge {
background: #dddddd !important;
color: #000000 !important;
}
.phd-phase-marker {
background: #cccccc !important;
color: #000000 !important;
}
.research-tag {
background: #f0f0f0 !important;
color: #000000 !important;
border-color: #cccccc !important;
}
.journey-step-icon {
background: #cccccc !important;
color: #000000 !important;
}
.journey-step-number {
background: #dddddd !important;
color: #000000 !important;
}
.journey-step::after {
background: #cccccc !important;
}
.phd-value-card,
.infra-card {
break-inside: avoid;
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.content-with-sidebar {
display: block !important;
}
.sidebar {
display: none !important;
}
.main-content {
width: 100% !important;
}
body {
font-size: 12pt;
color: #000000;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
}
/* ============================================================
PH.D. PAGE — Accessibility
============================================================ */
/* Focus visible */
.phd-program-block:focus-within {
outline: 2px solid #2376D7;
outline-offset: 4px;
border-radius: 4px;
}
.journey-step:focus-within .journey-step-icon {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.research-tag:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.faq-question:focus-visible {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.phd-value-card,
.phd-value-icon,
.phd-program-header,
.research-tag,
.journey-step-icon,
.journey-step-content h3,
.phd-faculty-item strong,
.phd-faculty-item img,
.infra-card,
.testimonial-card,
.faq-item,
.faq-question i {
transition: none !important;
}
.journey-step:hover .journey-step-icon {
transform: none;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.phd-program-header {
background: #000000;
border: 2px solid #000000;
}
.phd-value-card {
border-width: 2px;
border-color: #000000;
}
.phd-detail-box {
border: 1px solid #000000;
}
.research-tag {
border-width: 2px;
border-color: #000000;
background: transparent;
color: #000000;
}
.phd-phase-marker {
background: #000000;
border: 2px solid #000000;
}
.journey-step-icon {
background: #000000;
border: 2px solid #000000;
}
.journey-step-number {
background: #000000;
color: #ffffff;
border: 2px solid #000000;
}
.journey-step::after {
background: #000000;
}
.phd-value-stat {
border-left-width: 6px;
border-left-color: #000000;
}
.faq-item {
border-width: 2px;
border-color: #000000;
}
.requirement-number {
background: #000000;
border: 2px solid #000000;
}
.sidebar-funding-list li i {
color: #000000;
}
}
/* ============================================================
ADMISSION PAGE — New CSS Classes
============================================================ */
/* ── Admission Pathways Grid ── */
.admission-pathways-grid {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: var(--space-lg, 24px);
}
.admission-pathway-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.admission-pathway-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
background: #fafafa;
}
.admission-pathway-card-highlight {
border-left: 4px solid var(--primary, #00543B);
}
.admission-pathway-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
transition: background 0.2s ease, color 0.2s ease;
}
.admission-pathway-card:hover .admission-pathway-icon {
background: var(--primary, #00543B);
color: #ffffff;
}
.admission-pathway-body {
flex: 1;
min-width: 0;
}
.admission-pathway-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.35;
}
.admission-pathway-card:hover .admission-pathway-body h3 {
color: var(--primary, #00543B);
}
.admission-pathway-body p {
font-size: 0.875rem;
color: #666666;
margin: 0 0 6px 0;
line-height: 1.50;
}
.admission-pathway-duration {
font-size: 0.75rem;
font-weight: 600;
color: var(--primary, #00543B);
}
.admission-pathway-duration i {
margin-right: 4px;
font-size: 0.688rem;
}
.admission-pathway-arrow {
flex-shrink: 0;
color: #cccccc;
font-size: 0.875rem;
transition: color 0.2s ease, transform 0.2s ease;
}
.admission-pathway-card:hover .admission-pathway-arrow {
color: var(--primary, #00543B);
transform: translateX(4px);
}
/* ── Apply Steps Grid ── */
.apply-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.apply-step {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 28px 24px;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.apply-step:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.apply-step-number {
position: absolute;
top: -12px;
left: 24px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 50%;
}
.apply-step-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
margin-bottom: 16px;
}
.apply-step h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.apply-step p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 12px 0;
}
.apply-step-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--primary, #00543B);
text-decoration: none;
transition: color 0.2s ease;
}
.apply-step-link:hover {
color: #003D2B;
text-decoration: underline;
}
.apply-step-link i {
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.apply-step-link:hover i {
transform: translateX(4px);
}
/* ── Admission Requirements Block ── */
.admission-req-block {
margin-bottom: 40px;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
}
.admission-req-block:last-child {
margin-bottom: 0;
}
.admission-req-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: #f5f5f5;
border-bottom: 1px solid #e8e8e8;
}
.admission-req-header-primary {
background: #e8f5ef;
border-bottom: 2px solid var(--primary, #00543B);
}
.admission-req-header-dark {
background: #1a1a1a;
border-bottom: 2px solid #F0C400;
}
.admission-req-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
}
.admission-req-header .admission-req-icon {
color: var(--primary, #00543B);
}
.admission-req-header-dark .admission-req-icon {
color: #F0C400;
}
.admission-req-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 2px 0;
line-height: 1.35;
}
.admission-req-header-dark h3 {
color: #ffffff;
}
.admission-req-level {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary, #00543B);
}
.admission-req-header-dark .admission-req-level {
color: #F0C400;
}
.admission-req-body {
padding: 24px;
}
.admission-req-body .requirements-list {
margin-top: 0;
}
.admission-req-note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 12px 16px;
background: #e8f5ef;
border-radius: 4px;
font-size: 0.813rem;
font-weight: 600;
color: var(--primary, #00543B);
}
.admission-req-note i {
font-size: 0.875rem;
flex-shrink: 0;
}
.admission-req-note-dark {
background: #fff3cd;
color: #856404;
}
.admission-req-note-dark i {
color: #856404;
}
/* ── Sidebar Download List ── */
.sidebar-download-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.sidebar-download-list li {
margin-bottom: 10px;
}
.sidebar-download-list li:last-child {
margin-bottom: 0;
}
.sidebar-download-list a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--primary, #00543B);
text-decoration: none;
transition: color 0.2s ease;
}
.sidebar-download-list a:hover {
color: #003D2B;
text-decoration: underline;
}
.sidebar-download-list a i {
color: #cc0000;
font-size: 1rem;
}
/* ── Transfer Grid ── */
.transfer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
}
.transfer-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 28px 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.transfer-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.transfer-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.25rem;
margin-bottom: 16px;
}
.transfer-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 12px 0;
line-height: 1.35;
}
.transfer-card>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.transfer-features {
list-style: none;
padding: 0;
margin: 0;
padding-top: 16px;
border-top: 1px solid #f2f2f2;
}
.transfer-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.813rem;
color: #333333;
line-height: 1.50;
margin-bottom: 8px;
}
.transfer-features li:last-child {
margin-bottom: 0;
}
.transfer-features li i {
color: var(--primary, #00543B);
font-size: 0.688rem;
flex-shrink: 0;
}
/* ── International Students Grid ── */
.intl-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.intl-info-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.intl-info-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.intl-info-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.5rem;
margin: 0 auto 16px;
transition: background 0.2s ease, color 0.2s ease;
}
.intl-info-card:hover .intl-info-icon {
background: var(--primary, #00543B);
color: #ffffff;
}
.intl-info-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.intl-info-card p {
font-size: 0.875rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ── Scholarship Preview Grid (Navy Section) ── */
.scholarship-preview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-xl, 40px);
margin-bottom: var(--space-xl, 40px);
}
.scholarship-preview-card {
padding: 24px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
text-align: center;
transition: background 0.2s ease;
}
.scholarship-preview-card:hover {
background: rgba(255, 255, 255, 0.12);
}
.scholarship-preview-icon {
font-size: 1.5rem;
color: #F0C400;
margin-bottom: 12px;
display: block;
}
.scholarship-preview-card h3 {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px 0;
}
.scholarship-preview-card p {
font-size: 0.813rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.50;
margin: 0;
}
/* ============================================================
RESPONSIVE — Admission Page
============================================================ */
/* ── Tablet Landscape (≤ 1024px) ── */
@media (max-width: 1024px) {
.apply-steps-grid {
grid-template-columns: repeat(3, 1fr);
}
.transfer-grid {
grid-template-columns: repeat(3, 1fr);
}
.intl-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.scholarship-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tablet Portrait (≤ 900px) ── */
@media (max-width: 900px) {
.apply-steps-grid {
grid-template-columns: repeat(2, 1fr);
}
.transfer-grid {
grid-template-columns: 1fr;
max-width: 600px;
}
.intl-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.scholarship-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
.admission-pathway-card {
padding: 16px 20px;
}
.stats-bar {
flex-wrap: wrap;
justify-content: center;
}
.stats-bar-item {
min-width: 120px;
flex: 0 0 auto;
}
}
/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
/* Pathways */
.admission-pathway-card {
flex-wrap: wrap;
gap: 12px;
padding: 16px;
}
.admission-pathway-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.admission-pathway-body h3 {
font-size: 1rem;
}
.admission-pathway-body p {
font-size: 0.813rem;
}
.admission-pathway-arrow {
display: none;
}
/* Apply Steps */
.apply-steps-grid {
grid-template-columns: 1fr;
}
.apply-step {
padding: 24px 20px;
}
.apply-step-number {
width: 24px;
height: 24px;
font-size: 0.688rem;
top: -10px;
left: 20px;
}
.apply-step-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.apply-step h3 {
font-size: 1rem;
}
/* Requirement Blocks */
.admission-req-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
}
.admission-req-icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
.admission-req-header h3 {
font-size: 1rem;
}
.admission-req-body {
padding: 16px 20px;
}
.admission-req-note {
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 0.75rem;
}
.requirement-item {
flex-direction: column;
gap: 12px;
}
.requirement-number {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.requirements-note {
flex-direction: column;
gap: 8px;
}
/* Stats Bar */
.stats-bar {
flex-direction: column;
gap: 12px;
}
.stats-bar-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
}
.stats-bar-number {
font-size: 1.5rem;
margin-bottom: 0;
}
/* Transfer Grid */
.transfer-grid {
grid-template-columns: 1fr;
max-width: 100%;
}
.transfer-card {
padding: 20px;
}
.transfer-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.transfer-card h3 {
font-size: 1rem;
}
/* International Grid */
.intl-info-grid {
grid-template-columns: 1fr;
}
.intl-info-icon {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
.intl-info-card h3 {
font-size: 1rem;
}
/* Scholarship Grid */
.scholarship-preview-grid {
grid-template-columns: 1fr;
}
.scholarship-preview-card {
padding: 20px 16px;
}
/* FAQ */
.faq-question {
padding: 14px 16px;
}
.faq-question span {
font-size: 0.875rem;
}
.faq-answer {
padding: 12px 16px 16px;
}
.faq-answer ul li {
font-size: 0.813rem;
}
/* Hero Highlights */
.hero-highlights {
flex-direction: column;
gap: 8px;
}
.hero-highlight-item {
width: 100%;
justify-content: flex-start;
}
/* Sidebar Downloads */
.sidebar-download-list a {
font-size: 0.813rem;
}
.sidebar-download-list a i {
font-size: 0.875rem;
}
}
/* ── Small Mobile (≤ 375px) ── */
@media (max-width: 375px) {
.stats-bar-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
.stats-bar-number {
font-size: 1.25rem;
}
.admission-pathway-card {
padding: 14px;
}
.admission-pathway-icon {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.admission-pathway-body h3 {
font-size: 0.938rem;
}
.admission-pathway-body p {
font-size: 0.75rem;
}
.admission-pathway-duration {
font-size: 0.688rem;
}
.apply-step {
padding: 20px 16px;
}
.apply-step-icon {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.apply-step h3 {
font-size: 0.938rem;
}
.apply-step p {
font-size: 0.813rem;
}
.admission-req-header h3 {
font-size: 0.938rem;
}
.admission-req-level {
font-size: 0.688rem;
}
.admission-req-body {
padding: 14px 16px;
}
.requirement-number {
width: 32px;
height: 32px;
font-size: 0.813rem;
}
.requirement-body h3 {
font-size: 1rem;
}
.transfer-card h3 {
font-size: 0.938rem;
}
.transfer-features li {
font-size: 0.75rem;
}
.intl-info-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.intl-info-card h3 {
font-size: 0.938rem;
}
.scholarship-preview-icon {
font-size: 1.25rem;
}
.scholarship-preview-card h3 {
font-size: 0.875rem;
}
.faq-item {
margin-bottom: 8px;
}
.faq-question {
padding: 12px 14px;
}
.testimonial-author img {
width: 40px;
height: 40px;
}
}
/* ============================================================
ADMISSION PAGE — Hover & Interaction Enhancements
============================================================ */
/* ── Pathway Card Focus State ── */
.admission-pathway-card:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ── Apply Step Hover Enhancement ── */
.apply-step:hover .apply-step-icon {
background: var(--primary, #00543B);
color: #ffffff;
}
.apply-step-icon {
transition: background 0.2s ease, color 0.2s ease;
}
.apply-step:hover .apply-step-number {
background: #F0C400;
color: #1a1a1a;
}
.apply-step-number {
transition: background 0.2s ease, color 0.2s ease;
}
.apply-step:hover h3 {
color: var(--primary, #00543B);
}
.apply-step h3 {
transition: color 0.2s ease;
}
/* ── Requirement Block Hover ── */
.admission-req-block:hover {
border-color: var(--primary, #00543B);
transition: border-color 0.2s ease;
}
.admission-req-block {
transition: border-color 0.2s ease;
}
/* ── Transfer Card Icon Hover ── */
.transfer-card:hover .transfer-icon {
background: var(--primary, #00543B);
color: #ffffff;
}
.transfer-icon {
transition: background 0.2s ease, color 0.2s ease;
}
.transfer-card:hover h3 {
color: var(--primary, #00543B);
}
.transfer-card h3 {
transition: color 0.2s ease;
}
/* ── Scholarship Card Hover ── */
.scholarship-preview-card:hover .scholarship-preview-icon {
transform: scale(1.1);
}
.scholarship-preview-icon {
transition: transform 0.2s ease;
}
/* ── International Card Hover ── */
.intl-info-card:hover h3 {
color: var(--primary, #00543B);
}
.intl-info-card h3 {
transition: color 0.2s ease;
}
/* ============================================================
ADMISSION PAGE — Smooth Scroll for Anchor Links
============================================================ */
/* Add to html element for smooth anchor scrolling */
/* html { scroll-behavior: smooth; } */
/* Already applied globally or add this comment as reference */
/* Offset for sticky navigation when scrolling to anchors */
.admission-req-block {
scroll-margin-top: 80px;
}
#req-certificate,
#req-diploma,
#req-bachelor,
#req-masters,
#req-phd {
scroll-margin-top: 80px;
}
/* ============================================================
ADMISSION PAGE — Print Styles
============================================================ */
@media print {
.page-header,
.breadcrumbs,
.cta-banner,
.section-navy,
.sidebar-cta-box,
.faq-list,
.admission-pathway-arrow {
display: none !important;
}
.admission-pathways-grid {
gap: 8px !important;
}
.admission-pathway-card {
border: 1px solid #cccccc !important;
box-shadow: none !important;
background: #ffffff !important;
}
.admission-pathway-card-highlight {
border-left: 4px solid #000000 !important;
}
.apply-steps-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.apply-step {
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.apply-step-number {
background: #000000 !important;
}
.admission-req-block {
break-inside: avoid;
border: 1px solid #cccccc !important;
}
.admission-req-header-primary {
background: #f0f0f0 !important;
border-bottom: 2px solid #000000 !important;
}
.admission-req-header-dark {
background: #f0f0f0 !important;
border-bottom: 2px solid #000000 !important;
}
.admission-req-header-dark h3,
.admission-req-header-dark .admission-req-level,
.admission-req-header-dark .admission-req-icon {
color: #000000 !important;
}
.transfer-grid {
grid-template-columns: 1fr !important;
}
.transfer-card {
break-inside: avoid;
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.intl-info-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.intl-info-card {
break-inside: avoid;
border: 1px solid #cccccc !important;
box-shadow: none !important;
}
.content-with-sidebar {
display: block !important;
}
.sidebar {
display: none !important;
}
.main-content {
width: 100% !important;
}
.requirement-number {
background: #000000 !important;
}
body {
font-size: 12pt;
color: #000000;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
}
/* ============================================================
ADMISSION PAGE — Accessibility
============================================================ */
/* Focus visible for all interactive elements */
.admission-pathway-card:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.apply-step-link:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.sidebar-download-list a:focus-visible {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.faq-question:focus-visible {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.scholarship-preview-card:focus-within {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.admission-pathway-card,
.admission-pathway-icon,
.admission-pathway-arrow,
.admission-pathway-body h3,
.apply-step,
.apply-step-icon,
.apply-step-number,
.apply-step h3,
.apply-step-link i,
.admission-req-block,
.transfer-card,
.transfer-icon,
.transfer-card h3,
.intl-info-card,
.intl-info-icon,
.intl-info-card h3,
.scholarship-preview-icon,
.faq-question i,
.faq-item {
transition: none !important;
}
.admission-pathway-card:hover .admission-pathway-arrow {
transform: none;
}
.apply-step-link:hover i {
transform: none;
}
.scholarship-preview-card:hover .scholarship-preview-icon {
transform: none;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.admission-pathway-card {
border-width: 2px;
border-color: #000000;
}
.admission-pathway-card-highlight {
border-left-width: 6px;
border-left-color: #000000;
}
.admission-pathway-icon {
border: 2px solid #000000;
}
.apply-step {
border-width: 2px;
border-color: #000000;
}
.apply-step-number {
background: #000000;
border: 2px solid #000000;
}
.admission-req-block {
border-width: 2px;
border-color: #000000;
}
.admission-req-header-primary {
border-bottom-width: 3px;
border-bottom-color: #000000;
}
.admission-req-header-dark {
background: #000000;
border-bottom-color: #ffffff;
}
.transfer-card {
border-width: 2px;
border-color: #000000;
}
.intl-info-card {
border-width: 2px;
border-color: #000000;
}
.requirement-number {
background: #000000;
border: 2px solid #000000;
}
.scholarship-preview-card {
border-width: 2px;
border-color: #ffffff;
}
.faq-item {
border-width: 2px;
border-color: #000000;
}
.admission-req-note {
border: 2px solid #000000;
}
.admission-req-note-dark {
border-color: #856404;
}
.sidebar-download-list a i {
color: #000000;
}
}
/* ============================================================
TUITION & FEES PAGE — New CSS Classes
============================================================ */
/* ── Tuition Cards Grid ── */
.tuition-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
align-items: stretch;
}
.tuition-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tuition-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.tuition-card-featured {
border-color: var(--primary, #00543B);
border-width: 2px;
}
.tuition-card-header {
padding: 24px;
text-align: center;
position: relative;
}
.tuition-card-header-light {
background: #f5f5f5;
border-bottom: 1px solid #e8e8e8;
}
.tuition-card-header-green {
background: var(--primary, #00543B);
border-bottom: none;
}
.tuition-card-header-dark {
background: #1a1a1a;
border-bottom: none;
}
.tuition-card-popular {
position: absolute;
top: 0;
right: 0;
background: #F0C400;
color: #1a1a1a;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 0 0 0 4px;
}
.tuition-card-icon {
font-size: 1.75rem;
margin-bottom: 12px;
display: block;
}
.tuition-card-header-light .tuition-card-icon {
color: var(--primary, #00543B);
}
.tuition-card-header-green .tuition-card-icon {
color: #ffffff;
}
.tuition-card-header-dark .tuition-card-icon {
color: #F0C400;
}
.tuition-card-header h3 {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 4px 0;
line-height: 1.35;
}
.tuition-card-header-light h3 {
color: #1a1a1a;
}
.tuition-card-header-green h3 {
color: #ffffff;
}
.tuition-card-header-dark h3 {
color: #ffffff;
}
.tuition-card-duration {
font-size: 0.813rem;
font-weight: 400;
}
.tuition-card-header-light .tuition-card-duration {
color: #666666;
}
.tuition-card-header-green .tuition-card-duration {
color: rgba(255, 255, 255, 0.8);
}
.tuition-card-header-dark .tuition-card-duration {
color: rgba(255, 255, 255, 0.7);
}
.tuition-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.tuition-card-price {
text-align: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f2f2f2;
}
.tuition-price-amount {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.10;
}
.tuition-price-period {
display: block;
font-size: 0.813rem;
color: #666666;
margin-top: 4px;
}
.tuition-card-total {
text-align: center;
margin-bottom: 16px;
padding: 8px 12px;
background: #e8f5ef;
border-radius: 4px;
font-size: 0.813rem;
color: #333333;
}
.tuition-card-total strong {
color: var(--primary, #00543B);
}
.tuition-card-includes {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
flex: 1;
}
.tuition-card-includes li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
margin-bottom: 8px;
}
.tuition-card-includes li:last-child {
margin-bottom: 0;
}
.tuition-card-includes li i {
color: var(--primary, #00543B);
font-size: 0.688rem;
margin-top: 4px;
flex-shrink: 0;
}
/* ── Cost Comparison Bar Chart (Navy) ── */
.comparison-bar-chart {
max-width: 700px;
margin: var(--space-xl, 40px) auto 0;
text-align: left;
}
.comparison-bar-item {
margin-bottom: 20px;
}
.comparison-bar-item:last-child {
margin-bottom: 0;
}
.comparison-bar-item-highlight {
padding: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.comparison-bar-label {
font-size: 0.875rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 6px;
}
.comparison-bar-item-highlight .comparison-bar-label {
font-weight: 700;
color: #ffffff;
}
.comparison-bar-track {
width: 100%;
height: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
overflow: hidden;
margin-bottom: 4px;
}
.comparison-bar-fill-gray {
height: 100%;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
transition: width 1s ease;
}
.comparison-bar-fill-gold {
height: 100%;
background: #F0C400;
border-radius: 6px;
transition: width 1s ease;
}
.comparison-bar-fill-gray[data-width="100"] {
width: 100%;
}
.comparison-bar-fill-gray[data-width="60"] {
width: 60%;
}
.comparison-bar-fill-gray[data-width="48"] {
width: 48%;
}
.comparison-bar-fill-gold[data-width="14"] {
width: 14%;
}
.comparison-bar-value {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.comparison-bar-value-gold {
color: #F0C400;
font-size: 1rem;
}
.comparison-savings {
margin-top: var(--space-xl, 40px);
font-size: 1rem;
}
.comparison-savings i {
color: #F0C400;
margin-right: 8px;
}
.comparison-savings strong {
color: #F0C400;
}
/* ── Payment Plans Grid ── */
.payment-plans-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
align-items: stretch;
}
.payment-plan-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.payment-plan-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.payment-plan-card-popular {
border-color: var(--primary, #00543B);
border-width: 2px;
}
.payment-plan-header {
padding: 20px;
text-align: center;
background: #f5f5f5;
border-bottom: 1px solid #e8e8e8;
position: relative;
}
.payment-plan-card-popular .payment-plan-header {
background: #e8f5ef;
border-bottom: 2px solid var(--primary, #00543B);
}
.payment-plan-badge {
position: absolute;
top: 0;
right: 0;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 0 0 0 4px;
}
.payment-plan-icon {
font-size: 1.5rem;
color: var(--primary, #00543B);
margin-bottom: 8px;
display: block;
}
.payment-plan-header h3 {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
margin: 0;
line-height: 1.35;
}
.payment-plan-discount {
display: inline-block;
font-size: 0.688rem;
font-weight: 700;
color: #ffffff;
background: #F0C400;
color: #1a1a1a;
padding: 2px 8px;
border-radius: 3px;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.payment-plan-body {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.payment-plan-body>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.payment-plan-example {
padding: 12px 16px;
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 16px;
text-align: center;
}
.payment-plan-example-label {
display: block;
font-size: 0.688rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #666666;
margin-bottom: 4px;
}
.payment-plan-example-original {
display: block;
font-size: 0.875rem;
color: #999999;
text-decoration: line-through;
}
.payment-plan-example-final {
display: block;
font-size: 1.125rem;
font-weight: 700;
color: var(--primary, #00543B);
}
.payment-plan-example-note {
display: block;
font-size: 0.688rem;
color: #666666;
margin-top: 2px;
}
.payment-plan-features {
list-style: none;
padding: 0;
margin: 0;
}
.payment-plan-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.813rem;
color: #333333;
margin-bottom: 6px;
}
.payment-plan-features li:last-child {
margin-bottom: 0;
}
.payment-plan-features li i {
color: var(--primary, #00543B);
font-size: 0.688rem;
flex-shrink: 0;
}
/* ── Scholarship Grid ── */
.scholarship-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
}
.scholarship-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.scholarship-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.scholarship-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #e8f5ef;
border-bottom: 2px solid var(--primary, #00543B);
}
.scholarship-card-icon {
font-size: 1.25rem;
color: var(--primary, #00543B);
}
.scholarship-card-amount {
font-size: 1.125rem;
font-weight: 700;
color: var(--primary, #00543B);
}
.scholarship-card-body {
padding: 20px;
}
.scholarship-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.scholarship-card-body>p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.scholarship-details {
list-style: none;
padding: 0;
margin: 0;
}
.scholarship-details li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.813rem;
color: #333333;
line-height: 1.50;
margin-bottom: 6px;
}
.scholarship-details li:last-child {
margin-bottom: 0;
}
.scholarship-details li i {
color: var(--primary, #00543B);
font-size: 0.688rem;
margin-top: 3px;
flex-shrink: 0;
}
/* ── Scholarship Tiers ── */
.scholarship-tiers {
margin-top: 16px;
}
.scholarship-tier {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
margin-bottom: 6px;
background: #f5f5f5;
border-radius: 4px;
font-size: 0.813rem;
}
.scholarship-tier:last-child {
margin-bottom: 0;
}
.scholarship-tier-name {
font-weight: 700;
color: #1a1a1a;
min-width: 50px;
}
.scholarship-tier-value {
font-weight: 600;
color: var(--primary, #00543B);
}
.scholarship-tier-req {
color: #666666;
font-size: 0.75rem;
}
/* ============================================
TUITION PAGE - CALCULATOR & COMPONENTS
============================================ */
/* ── Tuition Calculator (Continued from previous session) ── */
.calculator-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: var(--space-xl, 32px);
margin-bottom: var(--space-xl, 32px);
}
/* Calculator Form Panel */
.calculator-form {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
}
.calculator-form h3 {
font-size: 1.313rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 20px 0;
line-height: 1.35;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary, #00543B);
}
.calc-form-group {
margin-bottom: 20px;
}
.calc-form-group:last-of-type {
margin-bottom: 24px;
}
.calc-form-group label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
line-height: 1.40;
}
.calc-form-group label .label-hint {
display: block;
font-size: 0.75rem;
font-weight: 400;
color: #666666;
margin-top: 2px;
}
.calc-form-group select,
.calc-form-group input[type="text"],
.calc-form-group input[type="number"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #cccccc;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333333;
background: #ffffff;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.calc-form-group select:hover,
.calc-form-group input:hover {
border-color: #999999;
}
.calc-form-group select:focus,
.calc-form-group input:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
border-color: var(--primary, #00543B);
}
.calc-form-group select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
/* Calculator Button */
.calc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 24px;
background: var(--primary, #00543B);
color: #ffffff;
border: none;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.calc-btn:hover {
background: #003D2B;
}
.calc-btn:active {
background: #002E20;
}
.calc-btn:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.calc-btn i {
font-size: 0.875rem;
}
/* Calculator Results Panel */
.calculator-results {
background: #f5f5f5;
border-radius: 4px;
border-top: 4px solid var(--primary, #00543B);
padding: 24px;
position: sticky;
top: 80px;
align-self: start;
}
.calculator-results h3 {
font-size: 1.313rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 20px 0;
line-height: 1.35;
}
.results-summary {
margin-bottom: 24px;
}
.result-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #dddddd;
font-size: 0.875rem;
color: #333333;
}
.result-row:last-child {
border-bottom: none;
}
.result-row .result-label {
font-weight: 400;
color: #333333;
}
.result-row .result-value {
font-weight: 600;
color: #1a1a1a;
}
/* Total Row - Highlighted */
.result-row.result-total {
margin-top: 12px;
padding-top: 16px;
border-top: 2px solid var(--primary, #00543B);
border-bottom: none;
font-size: 1.125rem;
}
.result-row.result-total .result-label {
font-weight: 700;
color: #1a1a1a;
}
.result-row.result-total .result-value {
font-weight: 700;
color: var(--primary, #00543B);
font-size: 1.25rem;
}
/* Results Note */
.results-note {
margin-top: 16px;
padding: 12px 16px;
background: #e8f5ef;
border-radius: 4px;
font-size: 0.75rem;
color: #333333;
line-height: 1.50;
}
.results-note i {
color: var(--primary, #00543B);
margin-right: 4px;
}
/* ── Tuition Fee Table ── */
.tuition-table-wrapper {
overflow-x: auto;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
border: 1px solid #dddddd;
border-radius: 4px;
}
.tuition-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.tuition-table thead th {
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
padding: 12px 16px;
text-align: left;
white-space: nowrap;
border: none;
}
[dir="rtl"] .tuition-table thead th {
text-align: right;
}
.tuition-table tbody td {
padding: 10px 16px;
color: #333333;
border-bottom: 1px solid #e8e8e8;
line-height: 1.50;
}
.tuition-table tbody tr:nth-child(even) {
background: #f9f9f9;
}
.tuition-table tbody tr:nth-child(odd) {
background: #ffffff;
}
.tuition-table tbody tr:hover {
background: #e8f5ef;
}
.tuition-table tbody tr:last-child td {
border-bottom: none;
}
.tuition-table .fee-amount {
font-weight: 700;
color: var(--primary, #00543B);
white-space: nowrap;
}
.tuition-table .program-name {
font-weight: 600;
color: #1a1a1a;
}
/* ── Payment Plans ── */
.payment-plans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
}
.payment-plan-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 0;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.payment-plan-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.payment-plan-card.recommended {
border-color: var(--primary, #00543B);
border-width: 2px;
position: relative;
}
.payment-plan-card.recommended::before {
content: attr(data-badge);
position: absolute;
top: 0;
right: 0;
left: 0;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
text-align: center;
letter-spacing: 0.3px;
}
.payment-plan-header {
padding: 32px 20px 16px;
border-bottom: 1px solid #e8e8e8;
}
.recommended .payment-plan-header {
padding-top: 48px;
}
.payment-plan-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.payment-plan-header .plan-price {
font-size: 1.625rem;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.20;
}
.payment-plan-header .plan-period {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
display: block;
margin-top: 4px;
}
.payment-plan-body {
padding: 20px;
}
.payment-plan-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
[dir="rtl"] .payment-plan-features {
text-align: right;
}
.payment-plan-features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
padding: 6px 0;
border-bottom: 1px solid #f2f2f2;
}
.payment-plan-features li:last-child {
border-bottom: none;
}
.payment-plan-features li i {
color: var(--primary, #00543B);
font-size: 0.75rem;
margin-top: 3px;
flex-shrink: 0;
}
.payment-plan-footer {
padding: 0 20px 20px;
}
/* ── Financial Aid Section ── */
.financial-aid-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.financial-aid-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.financial-aid-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.financial-aid-icon {
width: 48px;
height: 48px;
min-width: 48px;
background: #e8f5ef;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary, #00543B);
font-size: 1.25rem;
}
.financial-aid-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.financial-aid-content p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── Tuition FAQ / Accordion ── */
.tuition-faq {
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
}
.faq-item {
border: 1px solid #dddddd;
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item.active {
border-color: var(--primary, #00543B);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 16px 20px;
background: #ffffff;
border: none;
cursor: pointer;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
text-align: left;
line-height: 1.40;
transition: background-color 0.2s ease, color 0.2s ease;
}
[dir="rtl"] .faq-question {
text-align: right;
}
.faq-question:hover {
background: #f5f5f5;
color: var(--primary, #00543B);
}
.faq-item.active .faq-question {
background: #e8f5ef;
color: var(--primary, #00543B);
}
.faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.faq-question .faq-icon {
font-size: 0.75rem;
color: #666666;
transition: transform 0.3s ease, color 0.2s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question .faq-icon {
transform: rotate(180deg);
color: var(--primary, #00543B);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
.faq-answer-inner {
padding: 0 20px 20px;
font-size: 0.875rem;
color: #333333;
line-height: 1.60;
}
.faq-answer-inner p {
margin: 0 0 12px 0;
}
.faq-answer-inner p:last-child {
margin-bottom: 0;
}
/* ── Tuition Comparison Cards ── */
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.comparison-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comparison-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.comparison-card-header {
background: var(--primary, #00543B);
color: #ffffff;
padding: 20px;
text-align: center;
}
.comparison-card-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px 0;
}
.comparison-card-header .degree-type {
font-size: 0.813rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
}
.comparison-card-price {
padding: 20px;
text-align: center;
border-bottom: 1px solid #e8e8e8;
}
.comparison-card-price .price-amount {
font-size: 1.625rem;
font-weight: 700;
color: var(--primary, #00543B);
display: block;
}
.comparison-card-price .price-unit {
font-size: 0.813rem;
color: #666666;
display: block;
margin-top: 2px;
}
.comparison-card-body {
padding: 20px;
}
.comparison-features {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.813rem;
color: #333333;
line-height: 1.50;
padding: 8px 0;
border-bottom: 1px solid #f2f2f2;
}
.comparison-features li:last-child {
border-bottom: none;
}
.comparison-features li i.fa-check {
color: var(--primary, #00543B);
font-size: 0.688rem;
margin-top: 3px;
flex-shrink: 0;
}
.comparison-features li i.fa-times {
color: #cc0000;
font-size: 0.688rem;
margin-top: 3px;
flex-shrink: 0;
}
.comparison-card-footer {
padding: 0 20px 20px;
text-align: center;
}
/* ── Refund Policy Timeline ── */
.refund-timeline {
margin-top: var(--space-lg, 24px);
position: relative;
padding-left: 32px;
}
[dir="rtl"] .refund-timeline {
padding-left: 0;
padding-right: 32px;
}
.refund-timeline::before {
content: '';
position: absolute;
left: 12px;
top: 0;
bottom: 0;
width: 2px;
background: #dddddd;
}
[dir="rtl"] .refund-timeline::before {
left: auto;
right: 12px;
}
.refund-step {
position: relative;
margin-bottom: 24px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
transition: border-color 0.2s ease;
}
.refund-step:hover {
border-color: var(--primary, #00543B);
}
.refund-step:last-child {
margin-bottom: 0;
}
.refund-step::before {
content: '';
position: absolute;
left: -26px;
top: 20px;
width: 12px;
height: 12px;
background: var(--primary, #00543B);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--primary, #00543B);
z-index: 1;
}
[dir="rtl"] .refund-step::before {
left: auto;
right: -26px;
}
.refund-step-period {
font-size: 0.75rem;
font-weight: 600;
color: var(--primary, #00543B);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.refund-step h4 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
line-height: 1.35;
}
.refund-step p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
.refund-percentage {
display: inline-block;
padding: 2px 10px;
background: #e8f5ef;
color: var(--primary, #00543B);
font-weight: 700;
font-size: 0.875rem;
border-radius: 3px;
margin-top: 8px;
}
/* ── Important Dates Banner ── */
.important-dates-banner {
background: #e8f5ef;
border: 1px solid var(--primary, #00543B);
border-radius: 4px;
padding: 24px;
margin-top: var(--space-lg, 24px);
margin-bottom: var(--space-lg, 24px);
}
.important-dates-banner h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--primary, #00543B);
margin: 0 0 16px 0;
}
.dates-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.date-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #ffffff;
border-radius: 4px;
font-size: 0.875rem;
}
.date-item-icon {
width: 36px;
height: 36px;
min-width: 36px;
background: var(--primary, #00543B);
color: #ffffff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
.date-item-text strong {
display: block;
font-weight: 600;
color: #1a1a1a;
font-size: 0.875rem;
}
.date-item-text span {
font-size: 0.75rem;
color: #666666;
}
/* ── Contact CTA for Tuition ── */
.tuition-contact-cta {
background: var(--primary, #00543B);
border-radius: 4px;
padding: 40px;
text-align: center;
margin-top: var(--space-xl, 32px);
}
.tuition-contact-cta h3 {
font-size: 1.313rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px 0;
}
.tuition-contact-cta p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 20px 0;
line-height: 1.55;
}
.tuition-contact-cta .btn-dark {
background: #ffffff;
color: var(--primary, #00543B);
padding: 10px 24px;
border-radius: 4px;
border: none;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s ease;
}
.tuition-contact-cta .btn-dark:hover {
background: #f2f2f2;
}
.tuition-contact-cta .btn-dark:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ============================================
INDEX PAGE (HOMEPAGE) COMPONENTS
============================================ */
/* ── Hero Section ── */
.hero-section {
position: relative;
width: 100%;
min-height: 480px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 84, 59, 0.65);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 64px 24px;
width: 100%;
}
.hero-title {
font-size: 2.50rem;
font-weight: 700;
color: #ffffff;
line-height: 1.20;
letter-spacing: -0.2px;
margin: 0 0 16px 0;
max-width: 700px;
}
.hero-subtitle {
font-size: 1.125rem;
font-weight: 400;
color: #ffffff;
line-height: 1.55;
margin: 0 0 24px 0;
max-width: 600px;
opacity: 0.9;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.hero-actions .btn-primary {
background: #ffffff;
color: var(--primary, #00543B);
padding: 12px 28px;
border: none;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s ease;
}
.hero-actions .btn-primary:hover {
background: #f2f2f2;
}
.hero-actions .btn-primary:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.hero-actions .btn-secondary-light {
background: transparent;
color: #ffffff;
padding: 12px 28px;
border: 2px solid #ffffff;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-actions .btn-secondary-light:hover {
background: rgba(255, 255, 255, 0.15);
}
.hero-actions .btn-secondary-light:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ── Quick Facts Bar ── */
.quick-facts-bar {
background: var(--primary, #00543B);
padding: 0;
}
.quick-facts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
margin: 0 auto;
}
.quick-fact-item {
text-align: center;
padding: 32px 16px;
position: relative;
}
.quick-fact-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
}
[dir="rtl"] .quick-fact-item:not(:last-child)::after {
right: auto;
left: 0;
}
.quick-fact-number {
font-size: 2.00rem;
font-weight: 700;
color: #ffffff;
line-height: 1.20;
display: block;
}
.quick-fact-label {
font-size: 0.875rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
display: block;
margin-top: 4px;
line-height: 1.40;
}
/* ── About Snippet (Homepage) ── */
.about-snippet {
padding: 64px 0;
background: #ffffff;
}
.about-snippet-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.about-snippet-image {
border-radius: 4px;
overflow: hidden;
}
.about-snippet-image img {
width: 100%;
height: auto;
display: block;
}
.about-snippet-content h2 {
font-size: 1.625rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.30;
margin: 0 0 16px 0;
}
.about-snippet-content p {
font-size: 1rem;
color: #333333;
line-height: 1.60;
margin: 0 0 20px 0;
}
/* ── Latest Programs Section ── */
.latest-programs {
padding: 64px 0;
background: #f5f5f5;
}
.latest-programs .section-header {
max-width: 1200px;
margin: 0 auto 32px;
padding: 0 24px;
}
.programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.program-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.program-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.program-card-image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.program-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.program-card-body {
padding: 20px;
}
.program-card-meta {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
margin: 0 0 6px 0;
}
.program-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
transition: color 0.2s ease;
}
.program-card:hover .program-card-body h3 {
color: var(--primary, #00543B);
}
.program-card-body p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.program-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-top: 1px solid #e8e8e8;
font-size: 0.813rem;
}
.program-card-footer .duration {
color: #666666;
}
.program-card-footer .degree {
font-weight: 600;
color: var(--primary, #00543B);
}
/* ── Quick Links / Service Tiles Grid (Homepage) ── */
.service-tiles {
padding: 64px 0;
background: #ffffff;
}
.service-tiles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.service-tile {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px 16px;
text-align: center;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.service-tile:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.service-tile:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.service-tile-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 4px;
color: var(--primary, #00543B);
font-size: 1.25rem;
transition: background-color 0.2s ease;
}
.service-tile:hover .service-tile-icon {
background: var(--primary, #00543B);
color: #ffffff;
}
.service-tile-label {
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.40;
}
/* ============================================
ABOUT PAGE COMPONENTS
============================================ */
/* ── About Values Grid ── */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.value-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.value-card-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 50%;
color: var(--primary, #00543B);
font-size: 1.375rem;
margin: 0 auto 16px;
}
.value-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.value-card p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── History Timeline ── */
.history-timeline {
position: relative;
padding-left: 40px;
margin-top: var(--space-lg, 24px);
}
[dir="rtl"] .history-timeline {
padding-left: 0;
padding-right: 40px;
}
.history-timeline::before {
content: '';
position: absolute;
left: 16px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--primary, #00543B), #e8f5ef);
border-radius: 2px;
}
[dir="rtl"] .history-timeline::before {
left: auto;
right: 16px;
}
.timeline-item {
position: relative;
margin-bottom: 32px;
padding: 20px 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
transition: border-color 0.2s ease;
}
.timeline-item:hover {
border-color: var(--primary, #00543B);
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: -30px;
top: 24px;
width: 14px;
height: 14px;
background: var(--primary, #00543B);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--primary, #00543B);
z-index: 1;
}
[dir="rtl"] .timeline-item::before {
left: auto;
right: -30px;
}
.timeline-year {
display: inline-block;
font-size: 0.813rem;
font-weight: 700;
color: #ffffff;
background: var(--primary, #00543B);
padding: 2px 10px;
border-radius: 3px;
margin-bottom: 8px;
}
.timeline-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.35;
}
.timeline-item p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ── Identity / Leadership Cards ── */
.leadership-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.leader-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.leader-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.leader-card-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #e8e8e8;
}
.leader-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.leader-card-body {
padding: 16px 20px;
}
.leader-card-body h3 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.35;
}
.leader-card-body .leader-title {
font-size: 0.813rem;
color: var(--primary, #00543B);
font-weight: 600;
margin: 0 0 6px 0;
}
.leader-card-body p {
font-size: 0.813rem;
color: #666666;
line-height: 1.50;
margin: 0;
}
/* ============================================
VISION & MISSION PAGE COMPONENTS
============================================ */
/* ── Vision/Mission Feature Boxes ── */
.vision-mission-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: var(--space-lg, 24px);
}
.vm-box {
padding: 32px;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.vm-box.vision-box {
background: var(--primary, #00543B);
color: #ffffff;
}
.vm-box.mission-box {
background: #e8f5ef;
color: #1a1a1a;
border: 1px solid var(--primary, #00543B);
}
.vm-box-icon {
font-size: 2rem;
margin-bottom: 16px;
opacity: 0.8;
}
.vm-box.vision-box .vm-box-icon {
color: rgba(255, 255, 255, 0.7);
}
.vm-box.mission-box .vm-box-icon {
color: var(--primary, #00543B);
}
.vm-box h3 {
font-size: 1.313rem;
font-weight: 600;
margin: 0 0 12px 0;
line-height: 1.30;
}
.vm-box.vision-box h3 {
color: #ffffff;
}
.vm-box.mission-box h3 {
color: var(--primary, #00543B);
}
.vm-box p {
font-size: 1rem;
line-height: 1.60;
margin: 0;
}
.vm-box.vision-box p {
color: rgba(255, 255, 255, 0.9);
}
.vm-box.mission-box p {
color: #333333;
}
/* ── Strategic Goals ── */
.strategic-goals-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: var(--space-lg, 24px);
}
.goal-card {
background: #ffffff;
border: 1px solid #dddddd;
border-left: 4px solid var(--primary, #00543B);
border-radius: 0 4px 4px 0;
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: box-shadow 0.2s ease;
}
[dir="rtl"] .goal-card {
border-left: 1px solid #dddddd;
border-right: 4px solid var(--primary, #00543B);
border-radius: 4px 0 0 4px;
}
.goal-card:hover {
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.goal-number {
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 1rem;
font-weight: 700;
border-radius: 4px;
flex-shrink: 0;
}
.goal-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
line-height: 1.35;
}
.goal-content p {
font-size: 0.875rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ============================================
FACULTY PAGE COMPONENTS
============================================ */
/* ── Faculty Hero Banner ── */
.faculty-hero {
position: relative;
width: 100%;
min-height: 320px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.faculty-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 84, 59, 0.70);
z-index: 1;
}
.faculty-hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px;
width: 100%;
}
.faculty-hero-content h1 {
font-size: 2.00rem;
font-weight: 700;
color: #ffffff;
line-height: 1.25;
margin: 0 0 8px 0;
}
.faculty-hero-content .faculty-tagline {
font-size: 1.125rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.55;
}
/* ── Faculty Overview Stats ── */
.faculty-stats-bar {
background: #f5f5f5;
border-bottom: 1px solid #dddddd;
}
.faculty-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.faculty-stat {
text-align: center;
padding: 24px 16px;
position: relative;
}
.faculty-stat:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: #dddddd;
}
[dir="rtl"] .faculty-stat:not(:last-child)::after {
right: auto;
left: 0;
}
.faculty-stat-number {
font-size: 1.625rem;
font-weight: 700;
color: var(--primary, #00543B);
display: block;
line-height: 1.20;
}
.faculty-stat-label {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
display: block;
margin-top: 4px;
}
/* ── Faculty Programs List ── */
.faculty-programs-list {
margin-top: var(--space-lg, 24px);
}
.faculty-program-item {
display: flex;
align-items: stretch;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
margin-bottom: 16px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faculty-program-item:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.faculty-program-item:last-child {
margin-bottom: 0;
}
.faculty-program-degree {
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary, #00543B);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 12px;
text-align: center;
writing-mode: horizontal-tb;
}
.faculty-program-info {
flex: 1;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.faculty-program-info h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 4px 0;
line-height: 1.35;
}
.faculty-program-info p {
font-size: 0.813rem;
color: #666666;
margin: 0;
line-height: 1.50;
}
.faculty-program-details {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.faculty-program-detail {
text-align: center;
}
.faculty-program-detail span {
display: block;
}
.faculty-program-detail .detail-value {
font-size: 1rem;
font-weight: 700;
color: var(--primary, #00543B);
}
.faculty-program-detail .detail-label {
font-size: 0.688rem;
color: #666666;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── Faculty Staff Grid ── */
.faculty-staff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: var(--space-lg, 24px);
}
.staff-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
overflow: hidden;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staff-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.staff-card-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #e8e8e8;
}
.staff-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.staff-card-body {
padding: 12px 16px;
}
.staff-card-body h4 {
font-size: 0.875rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 2px 0;
line-height: 1.35;
}
.staff-card-body .staff-role {
font-size: 0.75rem;
color: var(--primary, #00543B);
font-weight: 600;
margin: 0 0 4px 0;
}
.staff-card-body .staff-specialization {
font-size: 0.688rem;
color: #666666;
margin: 0;
line-height: 1.40;
}
/* ── Faculty Research Areas ── */
.research-areas-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: var(--space-lg, 24px);
}
.research-area-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.research-area-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.research-area-icon {
width: 44px;
height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5ef;
border-radius: 4px;
color: var(--primary, #00543B);
font-size: 1.125rem;
}
.research-area-content h4 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 6px 0;
line-height: 1.35;
}
.research-area-content p {
font-size: 0.813rem;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ============================================
SHARED / UTILITY COMPONENTS
============================================ */
/* ── Section Structure ── */
.section-intro {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 32px 0;
max-width: 800px;
}
/* ── Content With Sidebar Layout ── */
.content-with-sidebar {
display: grid;
grid-template-columns: 8fr 4fr;
gap: 32px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.main-content {
min-width: 0;
}
.sidebar {
align-self: start;
}
/* ── Sidebar Info Box ── */
.sidebar-info-box {
background: #f5f5f5;
border-left: 4px solid var(--primary, #00543B);
border-radius: 0;
padding: 16px 20px;
margin-bottom: 20px;
}
[dir="rtl"] .sidebar-info-box {
border-left: none;
border-right: 4px solid var(--primary, #00543B);
}
.sidebar-info-box h4 {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 8px 0;
line-height: 1.40;
}
.sidebar-info-box p,
.sidebar-info-box li {
font-size: 0.875rem;
font-weight: 400;
color: #333333;
line-height: 1.55;
}
.sidebar-info-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-info-box ul li {
padding: 6px 0;
border-bottom: 1px solid #e8e8e8;
}
.sidebar-info-box ul li:last-child {
border-bottom: none;
}
.sidebar-info-box ul li i {
color: var(--primary, #00543B);
margin-right: 8px;
font-size: 0.75rem;
}
[dir="rtl"] .sidebar-info-box ul li i {
margin-right: 0;
margin-left: 8px;
}
/* ── Sidebar CTA Box ── */
.sidebar-cta-box {
background: var(--primary, #00543B);
border-radius: 4px;
padding: 24px 20px;
text-align: center;
margin-bottom: 20px;
}
.sidebar-cta-box h4 {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px 0;
}
.sidebar-cta-box p {
font-size: 0.813rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.50;
margin: 0 0 16px 0;
}
.sidebar-cta-box .btn-dark {
background: #ffffff;
color: var(--primary, #00543B);
padding: 8px 20px;
border-radius: 4px;
border: none;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease;
}
.sidebar-cta-box .btn-dark:hover {
background: #f2f2f2;
}
/* ── Breadcrumbs ── */
.breadcrumbs {
padding: 12px 0;
font-size: 0.813rem;
font-weight: 400;
color: #666666;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.breadcrumbs a {
color: var(--primary, #00543B);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumbs a:hover {
color: #003D2B;
text-decoration: underline;
}
.breadcrumbs .separator {
margin: 0 6px;
color: #999999;
}
.breadcrumbs .current {
font-weight: 600;
color: #1a1a1a;
}
/* ── Buttons (Global) ── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary, #00543B);
color: #ffffff;
padding: 10px 24px;
border: none;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
}
.btn-primary:hover {
background: #003D2B;
}
.btn-primary:active {
background: #002E20;
}
.btn-primary:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ============================================================
SCHOLARSHIPS PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Scholarship Grid ---- */
.scholarship-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
/* ---- Scholarship Card ---- */
.scholarship-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.scholarship-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.scholarship-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 0 24px;
}
.scholarship-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
}
.scholarship-badge {
background: #00543B;
color: #FFFFFF;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: 3px;
letter-spacing: 0.2px;
}
.scholarship-card-body {
padding: 16px 24px;
flex: 1;
}
.scholarship-card-body h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 12px 0;
}
.scholarship-card-body p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.scholarship-criteria {
list-style: none;
padding: 0;
margin: 0;
}
.scholarship-criteria li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
.scholarship-criteria li i {
color: #00543B;
font-size: 13px;
margin-top: 3px;
flex-shrink: 0;
}
.scholarship-card-footer {
padding: 16px 24px 20px 24px;
border-top: 1px solid #F2F2F2;
}
/* ---- Process Steps ---- */
.process-steps {
margin-top: 32px;
max-width: 800px;
}
.process-step {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid #E8E8E8;
}
.process-step:last-child {
border-bottom: none;
}
.step-number {
width: 48px;
height: 48px;
min-width: 48px;
background: #00543B;
color: #FFFFFF;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 21px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.step-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.step-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0;
}
/* ---- Payment Options Grid ---- */
.payment-options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.payment-option {
background: #F5F5F5;
border-left: 4px solid #00543B;
padding: 20px 24px;
border-radius: 0;
}
.payment-option-icon {
color: #00543B;
font-size: 24px;
margin-bottom: 12px;
}
.payment-option h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.40;
margin: 0 0 8px 0;
}
.payment-option p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ---- FAQ Accordion ---- */
.faq-list {
max-width: 800px;
margin-top: 32px;
}
.faq-item {
border: 1px solid #DDDDDD;
border-radius: 4px;
margin-bottom: 12px;
background: #FFFFFF;
overflow: hidden;
}
.faq-item:hover {
border-color: #00543B;
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 20px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.40;
gap: 16px;
}
.faq-question:hover {
color: #00543B;
}
.faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.faq-toggle-icon {
color: #00543B;
font-size: 14px;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq-item.active .faq-toggle-icon {
transform: rotate(180deg);
}
.faq-answer {
display: none;
padding: 0 20px 16px 20px;
}
.faq-item.active .faq-answer {
display: block;
}
.faq-answer p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0;
}
/* ---- Testimonials Grid ---- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.testimonial-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.testimonial-quote {
margin-bottom: 20px;
flex: 1;
}
.testimonial-quote i {
color: #00543B;
font-size: 24px;
margin-bottom: 12px;
display: block;
opacity: 0.6;
}
.testimonial-quote p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 400;
color: #333333;
line-height: 1.60;
font-style: italic;
margin: 0;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #F2F2F2;
}
.testimonial-avatar {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
overflow: hidden;
background: #E8E8E8;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-info {
display: flex;
flex-direction: column;
}
.testimonial-info h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.30;
margin: 0;
}
.testimonial-info span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
}
.testimonial-scholarship {
color: #00543B !important;
font-weight: 600 !important;
font-size: 12px !important;
}
/* ---- Small Button Variant ---- */
.btn-small {
padding: 6px 16px;
font-size: 14px;
border-radius: 3px;
}
/* ============================================================
RESPONSIVE - SCHOLARSHIPS PAGE
============================================================ */
/* Tablet Landscape & Below (max-width: 1024px) */
@media (max-width: 1024px) {
.scholarship-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet Portrait & Below (max-width: 900px) */
@media (max-width: 900px) {
.payment-options-grid {
grid-template-columns: 1fr;
}
}
/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
.scholarship-grid {
grid-template-columns: 1fr;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.process-step {
flex-direction: column;
gap: 12px;
}
.step-number {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 18px;
}
}
/* ============================================================
ACADEMIC CALENDAR PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Calendar Table ---- */
.calendar-table-wrapper {
margin-top: 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.calendar-table {
width: 100%;
border-collapse: collapse;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
min-width: 700px;
}
.calendar-table thead tr {
background: #00543B;
}
.calendar-table thead th {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
text-align: left;
padding: 12px 16px;
letter-spacing: 0.2px;
white-space: nowrap;
}
.calendar-table tbody tr {
border-bottom: 1px solid #E8E8E8;
transition: background-color 0.15s ease;
}
.calendar-table tbody tr:nth-child(even) {
background: #F9F9F9;
}
.calendar-table tbody tr:nth-child(odd) {
background: #FFFFFF;
}
.calendar-table tbody tr:hover {
background: #E8F5EF;
}
.calendar-table tbody td {
padding: 12px 16px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
vertical-align: top;
}
.calendar-table tbody td strong {
color: #1A1A1A;
font-weight: 600;
}
/* ---- Calendar Date Badge ---- */
.cal-date {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 600;
color: #1A1A1A;
white-space: nowrap;
}
/* ---- Calendar Category Tags ---- */
.cal-category {
display: inline-block;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.2px;
white-space: nowrap;
}
.cat-academic {
background: #E8F5EF;
color: #00543B;
}
.cat-registration {
background: #E3F2FD;
color: #0066B3;
}
.cat-exam {
background: #FFF3E0;
color: #B8860B;
}
.cat-financial {
background: #FCE4EC;
color: #CC0000;
}
.cat-holiday {
background: #F3E5F5;
color: #4A2D73;
}
.cat-orientation {
background: #E0F7FA;
color: #00695C;
}
.cat-event {
background: #FFFDE7;
color: #8D6E00;
}
/* ---- Legend Grid ---- */
.legend-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 32px;
}
.legend-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.legend-item p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
margin: 0;
}
/* ---- Policy Blocks ---- */
.policy-block {
padding: 20px 0;
border-bottom: 1px solid #E8E8E8;
}
.policy-block:last-child {
border-bottom: none;
}
.policy-block h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 10px 0;
display: flex;
align-items: center;
gap: 10px;
}
.policy-block h3 i {
color: #00543B;
font-size: 18px;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.policy-block p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0;
}
/* ---- Upcoming Key Dates Grid ---- */
.upcoming-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.upcoming-card {
display: flex;
align-items: flex-start;
gap: 16px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.upcoming-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.upcoming-date-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60px;
min-width: 60px;
height: 64px;
background: #00543B;
border-radius: 4px;
color: #FFFFFF;
text-align: center;
}
.upcoming-month {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1;
margin-bottom: 2px;
}
.upcoming-day {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.upcoming-content {
flex: 1;
}
.upcoming-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 6px 0;
}
.upcoming-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
margin: 0 0 8px 0;
}
/* ---- Sidebar Button Stack ---- */
.sidebar-btn-stack {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.sidebar-btn-stack .btn {
text-align: center;
width: 100%;
}
/* ---- Sidebar Links List ---- */
.sidebar-links {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-links li {
border-bottom: 1px solid #E8E8E8;
}
.sidebar-links li:last-child {
border-bottom: none;
}
.sidebar-links li a {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #00543B;
text-decoration: none;
transition: color 0.15s ease;
}
.sidebar-links li a:hover {
color: #003D2B;
text-decoration: underline;
}
.sidebar-links li a i {
font-size: 11px;
color: #00543B;
flex-shrink: 0;
}
/* ============================================================
RESPONSIVE - ACADEMIC CALENDAR PAGE
============================================================ */
/* Tablet Landscape & Below (max-width: 1024px) */
@media (max-width: 1024px) {
.upcoming-grid {
grid-template-columns: repeat(2, 1fr);
}
.legend-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet Portrait & Below (max-width: 900px) */
@media (max-width: 900px) {
.legend-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Calendar table scrolls horizontally on smaller screens */
.calendar-table-wrapper {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
}
/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
.upcoming-grid {
grid-template-columns: 1fr;
}
.legend-grid {
grid-template-columns: 1fr;
}
.upcoming-card {
flex-direction: column;
align-items: stretch;
}
.upcoming-date-block {
flex-direction: row;
width: 100%;
height: auto;
padding: 8px 16px;
gap: 8px;
}
.upcoming-month {
font-size: 13px;
margin-bottom: 0;
}
.upcoming-day {
font-size: 18px;
}
.policy-block h3 {
font-size: 16px;
}
.policy-block p {
font-size: 15px;
}
}
/* ============================================================
HOW IT WORKS PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Journey Timeline ---- */
.journey-timeline {
margin-top: 40px;
position: relative;
}
.journey-stage {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 0;
}
.journey-marker {
display: flex;
flex-direction: column;
align-items: center;
min-width: 48px;
position: relative;
}
.journey-number {
width: 48px;
height: 48px;
background: #00543B;
color: #FFFFFF;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.journey-line {
width: 3px;
flex: 1;
min-height: 40px;
background: #DDDDDD;
margin: 0 auto;
}
.journey-content {
padding: 4px 0 40px 0;
flex: 1;
}
.journey-stage:last-child .journey-content {
padding-bottom: 0;
}
.journey-icon {
width: 40px;
height: 40px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 18px;
margin-bottom: 12px;
}
.journey-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 21px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.journey-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0 0 12px 0;
max-width: 640px;
}
/* ---- Text Link Button ---- */
.btn-text-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 600;
color: #00543B;
text-decoration: none;
padding: 4px 0;
border: none;
background: none;
transition: color 0.15s ease;
}
.btn-text-link:hover {
color: #003D2B;
text-decoration: underline;
}
.btn-text-link i {
font-size: 13px;
transition: transform 0.15s ease;
}
.btn-text-link:hover i {
transform: translateX(3px);
}
/* ---- Learning Model Grid ---- */
.learning-model-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 24px;
}
.learning-model-card {
background: #F5F5F5;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 24px;
}
.lm-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.lm-icon {
width: 40px;
height: 40px;
background: #00543B;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 18px;
flex-shrink: 0;
}
.lm-card-header h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0;
}
.learning-model-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.lm-features {
list-style: none;
padding: 0;
margin: 0;
}
.lm-features li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.lm-features li i {
color: #00543B;
font-size: 12px;
flex-shrink: 0;
}
/* ---- Campus Features Grid (Navy Section) ---- */
.campus-intro-text {
max-width: 700px;
margin: 0 auto 40px;
}
.campus-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.campus-feature-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.campus-feature-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.campus-feature-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #FFFFFF;
font-size: 24px;
}
.campus-feature-item h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.35;
margin: 0 0 8px 0;
}
.campus-feature-item p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.50;
margin: 0;
}
/* ---- Requirements Grid ---- */
.requirements-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.requirement-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.requirement-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.req-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: #E8F5EF;
border-bottom: 1px solid #D0E8DA;
}
.req-icon {
width: 40px;
height: 40px;
background: #00543B;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 18px;
flex-shrink: 0;
}
.req-card-header h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0;
}
.req-card-body {
padding: 20px 24px;
}
.req-list {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.req-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
}
.req-list li i {
color: #00543B;
font-size: 14px;
margin-top: 2px;
flex-shrink: 0;
}
.req-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 16px;
background: #FAFAFA;
border-left: 3px solid #F0C400;
border-radius: 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.45;
}
.req-note i {
color: #F0C400;
font-size: 14px;
margin-top: 1px;
flex-shrink: 0;
}
/* ---- Tips Grid ---- */
.tips-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.tip-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px 24px;
position: relative;
transition: border-color 0.2s ease;
}
.tip-card:hover {
border-color: #00543B;
}
.tip-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 32px;
font-weight: 700;
color: #E8F5EF;
line-height: 1;
margin-bottom: 8px;
}
.tip-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.tip-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ---- Timeline Sidebar List ---- */
.timeline-sidebar-list {
list-style: none;
padding: 0;
margin: 0;
}
.timeline-sidebar-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #E8E8E8;
}
.timeline-sidebar-list li:last-child {
border-bottom: none;
}
.timeline-dot {
width: 12px;
height: 12px;
min-width: 12px;
background: #00543B;
border-radius: 50%;
margin-top: 4px;
}
.timeline-detail {
display: flex;
flex-direction: column;
}
.timeline-detail strong {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
}
.timeline-detail span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
}
/* ---- Sidebar Requirement List ---- */
.sidebar-req-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-req-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
}
.sidebar-req-list li i {
color: #00543B;
font-size: 14px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
/* ---- Support Grid ---- */
.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.support-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.support-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.support-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
margin-bottom: 16px;
}
.support-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.support-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ---- Comparison Table ---- */
.comparison-table-wrapper {
margin-top: 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
min-width: 600px;
}
.comparison-table thead tr {
background: #00543B;
}
.comparison-table thead th {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
text-align: left;
padding: 14px 20px;
letter-spacing: 0.2px;
}
.comparison-table thead th i {
margin-right: 4px;
font-size: 13px;
}
.comparison-table tbody tr {
border-bottom: 1px solid #E8E8E8;
transition: background-color 0.15s ease;
}
.comparison-table tbody tr:nth-child(even) {
background: #F9F9F9;
}
.comparison-table tbody tr:nth-child(odd) {
background: #FFFFFF;
}
.comparison-table tbody tr:hover {
background: #E8F5EF;
}
.comparison-table tbody td {
padding: 12px 20px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
vertical-align: middle;
}
.comparison-table tbody td strong {
color: #1A1A1A;
font-weight: 600;
}
.comp-highlight {
color: #00543B;
font-weight: 600;
}
/* ============================================================
RESPONSIVE - HOW IT WORKS PAGE
============================================================ */
/* Tablet Landscape & Below (max-width: 1024px) */
@media (max-width: 1024px) {
.campus-features-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-grid {
grid-template-columns: repeat(2, 1fr);
}
.requirements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet Portrait & Below (max-width: 900px) */
@media (max-width: 900px) {
.learning-model-grid {
grid-template-columns: 1fr;
}
.tips-grid {
grid-template-columns: 1fr;
}
}
/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
.campus-features-grid {
grid-template-columns: 1fr;
}
.support-grid {
grid-template-columns: 1fr;
}
.requirements-grid {
grid-template-columns: 1fr;
}
.journey-stage {
gap: 16px;
}
.journey-number {
width: 40px;
height: 40px;
font-size: 17px;
}
.journey-marker {
min-width: 40px;
}
.journey-content h3 {
font-size: 18px;
}
.journey-content p {
font-size: 15px;
}
.journey-content {
padding: 4px 0 32px 0;
}
}
/* ============================================================
VIRTUAL CLASSROOM PAGE - SPECIFIC STYLES
============================================================ */
/* ---- VC Features Grid ---- */
.vc-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.vc-feature-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vc-feature-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.vc-feature-icon-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.vc-feature-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
}
.vc-feature-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 36px;
font-weight: 700;
color: #F2F2F2;
line-height: 1;
}
.vc-feature-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.vc-feature-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.vc-feature-details {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #F2F2F2;
padding-top: 12px;
}
.vc-feature-details li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.vc-feature-details li i {
color: #00543B;
font-size: 11px;
flex-shrink: 0;
}
/* ---- AI Tools Grid (Navy Section) ---- */
.vc-ai-intro {
max-width: 700px;
margin: 0 auto 40px;
}
.ai-tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.ai-tool-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.ai-tool-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.ai-tool-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #FFFFFF;
font-size: 24px;
}
.ai-tool-item h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.35;
margin: 0 0 8px 0;
}
.ai-tool-item p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.50;
margin: 0;
}
/* ---- Walkthrough Steps ---- */
.walkthrough-steps {
margin-top: 40px;
}
.walkthrough-step {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
padding: 40px 0;
border-bottom: 1px solid #E8E8E8;
}
.walkthrough-step:last-child {
border-bottom: none;
}
.walkthrough-step.walkthrough-reverse {
direction: rtl;
}
.walkthrough-step.walkthrough-reverse>* {
direction: ltr;
}
/* Screen Mockup */
.walkthrough-screen {
background: #1A1A1A;
border-radius: 8px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px;
}
.screen-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #2A2A2A;
}
.screen-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #555555;
}
.screen-dot:first-child {
background: #FF5F56;
}
.screen-dot:nth-child(2) {
background: #FFBD2E;
}
.screen-dot:nth-child(3) {
background: #27C93F;
}
.screen-title {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 400;
color: #999999;
margin-left: 8px;
}
.screen-body {
background: #F5F5F5;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.screen-body img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Walkthrough Text */
.walkthrough-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #00543B;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 8px;
}
.walkthrough-text h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 21px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 12px 0;
}
.walkthrough-text p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0 0 16px 0;
}
.walkthrough-highlights {
list-style: none;
padding: 0;
margin: 0;
}
.walkthrough-highlights li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.walkthrough-highlights li i {
color: #00543B;
font-size: 14px;
flex-shrink: 0;
}
/* ---- Devices Grid ---- */
.devices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.device-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.device-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.device-icon {
width: 64px;
height: 64px;
background: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #00543B;
font-size: 28px;
}
.device-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.device-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.device-specs {
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid #F2F2F2;
padding-top: 12px;
}
.device-specs span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.45;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.device-specs span i {
color: #00543B;
font-size: 11px;
flex-shrink: 0;
}
/* ---- Tech Requirements Table ---- */
.tech-req-table-wrapper {
margin-top: 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tech-req-table {
width: 100%;
border-collapse: collapse;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
min-width: 500px;
}
.tech-req-table thead tr {
background: #00543B;
}
.tech-req-table thead th {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
text-align: left;
padding: 12px 16px;
letter-spacing: 0.2px;
}
.tech-req-table tbody tr {
border-bottom: 1px solid #E8E8E8;
transition: background-color 0.15s ease;
}
.tech-req-table tbody tr:nth-child(even) {
background: #F9F9F9;
}
.tech-req-table tbody tr:nth-child(odd) {
background: #FFFFFF;
}
.tech-req-table tbody tr:hover {
background: #E8F5EF;
}
.tech-req-table tbody td {
padding: 10px 16px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
vertical-align: middle;
}
.tech-req-table tbody td strong {
color: #1A1A1A;
font-weight: 600;
}
/* ---- Sidebar Contact List ---- */
.sidebar-contact-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.sidebar-contact-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
}
.sidebar-contact-list li i {
color: #00543B;
font-size: 14px;
width: 18px;
text-align: center;
flex-shrink: 0;
}
/* ---- Security Grid ---- */
.security-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.security-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.security-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.security-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
margin-bottom: 16px;
}
.security-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.security-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ============================================================
RESPONSIVE - VIRTUAL CLASSROOM PAGE
============================================================ */
/* Tablet Landscape & Below (max-width: 1024px) */
@media (max-width: 1024px) {
.vc-features-grid {
grid-template-columns: repeat(2, 1fr);
}
.ai-tools-grid {
grid-template-columns: repeat(2, 1fr);
}
.security-grid {
grid-template-columns: repeat(2, 1fr);
}
.devices-grid {
grid-template-columns: repeat(3, 1fr);
}
.walkthrough-step {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
/* Tablet Portrait & Below (max-width: 900px) */
@media (max-width: 900px) {
.walkthrough-step {
grid-template-columns: 1fr;
gap: 24px;
}
.walkthrough-step.walkthrough-reverse {
direction: ltr;
}
.devices-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
.vc-features-grid {
grid-template-columns: 1fr;
}
.ai-tools-grid {
grid-template-columns: 1fr;
}
.security-grid {
grid-template-columns: 1fr;
}
.devices-grid {
grid-template-columns: 1fr;
}
.walkthrough-step {
padding: 24px 0;
}
.walkthrough-text h3 {
font-size: 18px;
}
.walkthrough-text p {
font-size: 15px;
}
.walkthrough-screen {
border-radius: 6px;
}
.vc-feature-number {
font-size: 28px;
}
}
/* ============================================================
TECHNICAL REQUIREMENTS PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Tech Specs Table ---- */
.tech-specs-table-wrapper {
margin-top: 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tech-specs-table {
width: 100%;
border-collapse: collapse;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
min-width: 600px;
}
.tech-specs-table thead tr {
background: #00543B;
}
.tech-specs-table thead th {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
text-align: left;
padding: 12px 16px;
letter-spacing: 0.2px;
}
.tech-specs-table thead th i {
margin-right: 4px;
font-size: 13px;
}
.tech-specs-table tbody tr {
border-bottom: 1px solid #E8E8E8;
transition: background-color 0.15s ease;
}
.tech-specs-table tbody tr:nth-child(even) {
background: #F9F9F9;
}
.tech-specs-table tbody tr:nth-child(odd) {
background: #FFFFFF;
}
.tech-specs-table tbody tr:hover {
background: #E8F5EF;
}
.tech-specs-table tbody td {
padding: 12px 16px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
vertical-align: middle;
}
.tech-specs-table tbody td strong {
color: #1A1A1A;
font-weight: 600;
}
/* ---- Tech Info Callout ---- */
.tech-info-callout {
display: flex;
align-items: flex-start;
gap: 16px;
background: #F5F5F5;
border-left: 4px solid #00543B;
padding: 20px 24px;
margin-top: 24px;
}
.tech-info-icon {
color: #00543B;
font-size: 22px;
margin-top: 2px;
flex-shrink: 0;
}
.tech-info-content h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 6px 0;
}
.tech-info-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ---- Internet Tiers Grid ---- */
.internet-tiers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.internet-tier-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.internet-tier-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.tier-header {
padding: 24px;
text-align: center;
background: #F5F5F5;
border-bottom: 1px solid #E8E8E8;
}
.tier-header-featured {
background: #00543B;
border-bottom: none;
}
.tier-header-featured .tier-badge {
background: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
}
.tier-header-featured .speed-number,
.tier-header-featured .speed-unit,
.tier-header-featured .speed-direction {
color: #FFFFFF;
}
.tier-badge {
display: inline-block;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 700;
padding: 3px 12px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
margin-bottom: 12px;
}
.tier-badge-min {
background: #E8E8E8;
color: #666666;
}
.tier-badge-rec {
background: #E8F5EF;
color: #00543B;
}
.tier-badge-opt {
background: #E3F2FD;
color: #0066B3;
}
.tier-speed {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.speed-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 48px;
font-weight: 700;
color: #1A1A1A;
line-height: 1;
}
.speed-unit {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 1;
}
.speed-direction {
display: block;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
margin-top: 4px;
}
.tier-body {
padding: 24px;
}
.tier-body h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.tier-body>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.tier-capabilities {
list-style: none;
padding: 0;
margin: 0;
}
.tier-capabilities li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 5px 0;
display: flex;
align-items: center;
gap: 8px;
}
.tier-capabilities li i {
color: #00543B;
font-size: 12px;
flex-shrink: 0;
}
.tier-capabilities li.tier-limitation {
color: #999999;
}
.tier-capabilities li.tier-limitation i {
color: #F0C400;
}
/* ---- Software Categories Grid ---- */
.software-categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.software-category-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease;
}
.software-category-card:hover {
border-color: #00543B;
}
.sw-cat-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.sw-cat-icon {
width: 40px;
height: 40px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 18px;
flex-shrink: 0;
}
.sw-cat-header h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0;
flex: 1;
}
.sw-cat-tag {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.sw-required {
background: #E8F5EF;
color: #00543B;
}
.sw-recommended-tag {
background: #E3F2FD;
color: #0066B3;
}
.sw-varies {
background: #FFF3E0;
color: #B8860B;
}
.software-category-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
/* ---- Software Items List ---- */
.sw-items-list {
display: flex;
flex-direction: column;
gap: 0;
}
.sw-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #F2F2F2;
}
.sw-item:last-child {
border-bottom: none;
}
.sw-item-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 20px;
flex-shrink: 0;
}
.sw-item-info {
flex: 1;
display: flex;
flex-direction: column;
}
.sw-item-info strong {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
}
.sw-item-info span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
}
.sw-status {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 3px;
letter-spacing: 0.2px;
text-transform: uppercase;
flex-shrink: 0;
}
.sw-recommended {
background: #E8F5EF;
color: #00543B;
}
.sw-supported {
background: #F5F5F5;
color: #666666;
}
.sw-warning {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
background: #FFFDE7;
border-left: 3px solid #F0C400;
margin-top: 12px;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.45;
}
.sw-warning i {
color: #F0C400;
font-size: 14px;
margin-top: 1px;
flex-shrink: 0;
}
.sw-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
background: #E8F5EF;
border-left: 3px solid #00543B;
margin-top: 12px;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.45;
}
.sw-note i {
color: #00543B;
font-size: 14px;
margin-top: 1px;
flex-shrink: 0;
}
/* ---- Mobile Specs Grid (Navy Section) ---- */
.mobile-intro-text {
max-width: 700px;
margin: 0 auto 40px;
}
.mobile-specs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.mobile-spec-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.mobile-spec-card:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.mobile-spec-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #FFFFFF;
font-size: 26px;
}
.mobile-spec-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.35;
margin: 0 0 12px 0;
}
.mobile-spec-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.mobile-spec-list li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.mobile-spec-list li i {
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
flex-shrink: 0;
}
.mobile-note-banner {
display: flex;
align-items: flex-start;
gap: 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 16px 20px;
margin-top: 32px;
text-align: left;
}
.mobile-note-banner i {
color: #F0C400;
font-size: 18px;
margin-top: 2px;
flex-shrink: 0;
}
.mobile-note-banner p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
margin: 0;
}
.mobile-note-banner p strong {
color: #FFFFFF;
}
/* ---- Accessibility Grid ---- */
.accessibility-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.access-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.access-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.access-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
margin-bottom: 16px;
}
.access-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.access-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ============================================================
TECHNICAL REQUIREMENTS PAGE - CONTINUED STYLES
============================================================ */
/* ---- Troubleshooting List ---- */
.troubleshoot-list {
margin-top: 24px;
}
.troubleshoot-item {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
margin-bottom: 16px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.troubleshoot-item:last-child {
margin-bottom: 0;
}
.troubleshoot-item:hover {
border-color: #00543B;
}
.troubleshoot-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #FAFAFA;
border-bottom: 1px solid #F2F2F2;
}
.troubleshoot-icon {
width: 40px;
height: 40px;
min-width: 40px;
background: #FFF3E0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #B8860B;
font-size: 18px;
}
.troubleshoot-header h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0;
}
.troubleshoot-solution {
padding: 16px 20px 20px 20px;
}
.troubleshoot-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: troubleshoot-counter;
}
.troubleshoot-steps li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
padding: 8px 0 8px 36px;
position: relative;
border-bottom: 1px solid #F5F5F5;
counter-increment: troubleshoot-counter;
}
.troubleshoot-steps li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.troubleshoot-steps li::before {
content: counter(troubleshoot-counter);
position: absolute;
left: 0;
top: 8px;
width: 24px;
height: 24px;
background: #E8F5EF;
color: #00543B;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.troubleshoot-steps li code {
font-family: 'Source Code Pro', 'Courier New', monospace;
font-size: 13px;
background: #F5F5F5;
color: #00543B;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid #E8E8E8;
}
.troubleshoot-steps li strong {
color: #1A1A1A;
font-weight: 600;
}
/* ---- Setup Checklist Grid ---- */
.checklist-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 32px;
}
.checklist-card {
display: flex;
align-items: flex-start;
gap: 16px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.checklist-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.checklist-card.checked {
border-color: #00543B;
background: #E8F5EF;
}
.checklist-check {
width: 28px;
height: 28px;
min-width: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #CCCCCC;
font-size: 22px;
transition: color 0.2s ease;
margin-top: 2px;
}
.checklist-card:hover .checklist-check {
color: #00543B;
}
.checklist-card.checked .checklist-check {
color: #00543B;
}
.checklist-card.checked .checklist-check i::before {
content: "\f14a";
/* fa-check-square */
}
.checklist-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 4px 0;
}
.checklist-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
.checklist-content p strong {
color: #1A1A1A;
font-weight: 600;
}
/* ---- Sidebar Button Stack (already defined, reinforced here) ---- */
.sidebar-btn-stack {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.sidebar-btn-stack .btn {
text-align: center;
width: 100%;
}
/* ---- Sidebar Contact List (already defined, reinforced here) ---- */
.sidebar-contact-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.sidebar-contact-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.50;
}
.sidebar-contact-list li i {
color: #00543B;
font-size: 14px;
width: 18px;
text-align: center;
flex-shrink: 0;
}
/* ============================================================
RESPONSIVE - TECHNICAL REQUIREMENTS PAGE
============================================================ */
/* ---- Desktop Small (max-width: 1200px) ---- */
@media (max-width: 1200px) {
.internet-tiers-grid {
gap: 20px;
}
.software-categories-grid {
gap: 20px;
}
}
/* ---- Tablet Landscape & Below (max-width: 1024px) ---- */
@media (max-width: 1024px) {
.internet-tiers-grid {
grid-template-columns: repeat(3, 1fr);
}
.software-categories-grid {
grid-template-columns: repeat(2, 1fr);
}
.accessibility-grid {
grid-template-columns: repeat(2, 1fr);
}
.mobile-specs-grid {
grid-template-columns: repeat(3, 1fr);
}
.checklist-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Tablet Portrait & Below (max-width: 900px) ---- */
@media (max-width: 900px) {
.internet-tiers-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
.software-categories-grid {
grid-template-columns: 1fr;
}
.mobile-specs-grid {
grid-template-columns: repeat(2, 1fr);
}
.accessibility-grid {
grid-template-columns: repeat(2, 1fr);
}
.checklist-grid {
grid-template-columns: 1fr;
}
/* Tech info callout stacks on tablet */
.tech-info-callout {
flex-direction: column;
gap: 12px;
}
.tech-info-icon {
font-size: 20px;
}
/* Troubleshoot items adjustments */
.troubleshoot-header {
flex-direction: row;
gap: 10px;
}
.troubleshoot-icon {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 16px;
}
.troubleshoot-header h3 {
font-size: 15px;
}
/* Speed number adjustments for tier cards */
.speed-number {
font-size: 40px;
}
}
/* ---- Mobile Large (max-width: 768px) ---- */
@media (max-width: 768px) {
.mobile-specs-grid {
grid-template-columns: 1fr;
}
.accessibility-grid {
grid-template-columns: 1fr;
}
/* Mobile note banner stacks */
.mobile-note-banner {
flex-direction: column;
gap: 8px;
}
/* Walkthrough adjustments for mobile (if present on same page scope) */
.tier-header {
padding: 20px;
}
.tier-body {
padding: 20px;
}
.speed-number {
font-size: 36px;
}
.speed-unit {
font-size: 16px;
}
}
/* ---- Mobile (max-width: 600px) ---- */
@media (max-width: 600px) {
/* Internet tiers */
.internet-tiers-grid {
max-width: 100%;
}
/* Software category cards */
.sw-cat-header {
flex-wrap: wrap;
gap: 8px;
}
.sw-cat-icon {
width: 36px;
height: 36px;
font-size: 16px;
}
.sw-cat-header h3 {
font-size: 16px;
}
.sw-item {
flex-wrap: wrap;
gap: 8px;
}
.sw-item-icon {
width: 28px;
height: 28px;
font-size: 18px;
}
.sw-status {
margin-left: auto;
}
/* Troubleshoot items mobile */
.troubleshoot-header {
padding: 12px 16px;
}
.troubleshoot-solution {
padding: 12px 16px 16px 16px;
}
.troubleshoot-steps li {
padding: 8px 0 8px 32px;
font-size: 13px;
}
.troubleshoot-steps li::before {
width: 22px;
height: 22px;
font-size: 11px;
}
.troubleshoot-icon {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 14px;
}
.troubleshoot-header h3 {
font-size: 14px;
}
/* Checklist mobile */
.checklist-card {
padding: 16px;
gap: 12px;
}
.checklist-check {
width: 24px;
height: 24px;
min-width: 24px;
font-size: 20px;
}
.checklist-content h3 {
font-size: 15px;
}
.checklist-content p {
font-size: 13px;
}
/* Tech specs table mobile horizontal scroll */
.tech-specs-table-wrapper {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
/* Tech info callout mobile */
.tech-info-callout {
padding: 16px 20px;
}
.tech-info-content h4 {
font-size: 15px;
}
.tech-info-content p {
font-size: 13px;
}
/* Access cards mobile */
.access-icon {
width: 40px;
height: 40px;
font-size: 18px;
margin-bottom: 12px;
}
.access-card h3 {
font-size: 16px;
}
.access-card p {
font-size: 13px;
}
/* Sidebar contact list mobile */
.sidebar-contact-list li {
font-size: 13px;
}
/* Speed numbers mobile */
.speed-number {
font-size: 32px;
}
.speed-unit {
font-size: 14px;
}
.tier-badge {
font-size: 11px;
padding: 2px 10px;
}
.tier-body h3 {
font-size: 16px;
}
.tier-body>p {
font-size: 13px;
}
.tier-capabilities li {
font-size: 13px;
}
}
/* ---- Small Mobile (max-width: 375px) ---- */
@media (max-width: 375px) {
.checklist-card {
flex-direction: column;
gap: 8px;
padding: 14px;
}
.checklist-check {
align-self: flex-start;
}
.troubleshoot-steps li {
padding-left: 28px;
}
.troubleshoot-steps li::before {
width: 20px;
height: 20px;
font-size: 10px;
}
.sw-item {
flex-direction: column;
align-items: flex-start;
}
.sw-item-icon {
display: none;
}
.sw-status {
margin-left: 0;
}
.internet-tiers-grid {
gap: 16px;
}
.software-categories-grid {
gap: 16px;
}
}
/* ============================================================
STUDENT SUPPORT PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Contact Channels Grid ---- */
.contact-channels-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px;
}
.contact-channel-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-channel-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.channel-icon-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.channel-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
}
.channel-badge {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.channel-badge-online {
background: #E8F5EF;
color: #00543B;
}
.channel-badge-always {
background: #E3F2FD;
color: #0066B3;
}
.channel-badge-hours {
background: #FFF3E0;
color: #B8860B;
}
.channel-badge-self {
background: #F3E5F5;
color: #4A2D73;
}
.contact-channel-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.contact-channel-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
flex: 1;
}
.channel-meta {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.channel-meta span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
display: flex;
align-items: center;
gap: 6px;
}
.channel-meta span i {
color: #00543B;
font-size: 12px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
/* ---- Departments Grid ---- */
.departments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.department-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.department-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.dept-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.dept-icon {
width: 44px;
height: 44px;
min-width: 44px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 20px;
}
.dept-title {
display: flex;
flex-direction: column;
}
.dept-title h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0;
}
.dept-email {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #00543B;
line-height: 1.35;
}
.department-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.department-card h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.40;
margin: 0 0 8px 0;
}
.dept-services {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.dept-services li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
.dept-services li i {
color: #00543B;
font-size: 11px;
margin-top: 3px;
flex-shrink: 0;
}
.dept-availability {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #F5F5F5;
border-radius: 4px;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
}
.dept-availability i {
color: #00543B;
font-size: 14px;
flex-shrink: 0;
}
.dept-availability-24 {
background: #E8F5EF;
color: #00543B;
font-weight: 600;
}
/* ---- Support Stats Grid (Navy Section) ---- */
.support-stats-intro {
max-width: 700px;
margin: 0 auto 40px;
}
.support-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.support-stat-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.support-stat-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.stat-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.1;
margin-bottom: 4px;
}
.stat-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
line-height: 1.35;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.support-stat-item p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
line-height: 1.50;
margin: 0;
}
/* ---- Help Steps List ---- */
.help-steps-list {
margin-top: 24px;
}
.help-step {
display: flex;
align-items: flex-start;
gap: 24px;
}
.help-step-marker {
display: flex;
flex-direction: column;
align-items: center;
min-width: 44px;
}
.help-step-num {
width: 44px;
height: 44px;
background: #00543B;
color: #FFFFFF;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.help-step-line {
width: 3px;
flex: 1;
min-height: 32px;
background: #DDDDDD;
}
.help-step-content {
padding: 4px 0 32px 0;
flex: 1;
}
.help-step:last-child .help-step-content {
padding-bottom: 0;
}
.help-step-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.help-step-content p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 400;
color: #333333;
line-height: 1.60;
margin: 0 0 12px 0;
}
.help-step-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.help-tag {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 5px;
letter-spacing: 0.2px;
}
.help-tag i {
font-size: 11px;
}
.help-tag-tech {
background: #E3F2FD;
color: #0066B3;
}
.help-tag-academic {
background: #E8F5EF;
color: #00543B;
}
.help-tag-financial {
background: #FFF3E0;
color: #B8860B;
}
.help-tag-wellness {
background: #FCE4EC;
color: #CC0000;
}
/* ---- Resources Grid ---- */
.resources-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 32px;
}
.resource-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.resource-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.resource-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
color: #00543B;
font-size: 22px;
}
.resource-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 6px 0;
}
.resource-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.50;
margin: 0 0 12px 0;
}
/* ---- FAQ Two-Column Layout ---- */
.faq-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.faq-column .faq-list {
margin-top: 0;
}
/* ---- Feedback Form ---- */
.feedback-form {
margin-top: 24px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.40;
margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
width: 100%;
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 10px 14px;
border: 1px solid #CCCCCC;
border-radius: 4px;
background: #FFFFFF;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #00543B;
outline: 2px solid #2376D7;
outline-offset: 2px;
box-shadow: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #999999;
font-weight: 400;
}
.form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* ---- Rating Options ---- */
.rating-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.rating-option {
display: flex;
align-items: center;
cursor: pointer;
}
.rating-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.rating-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 8px 16px;
border: 1px solid #CCCCCC;
border-radius: 4px;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
background: #FFFFFF;
}
.rating-label i {
color: #CCCCCC;
font-size: 14px;
transition: color 0.2s ease;
}
.rating-option input[type="radio"]:checked+.rating-label {
border-color: #00543B;
background: #E8F5EF;
color: #00543B;
font-weight: 600;
}
.rating-option input[type="radio"]:checked+.rating-label i {
color: #F0C400;
}
.rating-option input[type="radio"]:focus+.rating-label {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.rating-option:hover .rating-label {
border-color: #00543B;
}
/* ---- Form Actions ---- */
.form-actions {
margin-top: 8px;
}
.form-actions .btn i {
margin-right: 6px;
}
/* ============================================================
RESPONSIVE - STUDENT SUPPORT PAGE
============================================================ */
/* ---- Desktop Small (max-width: 1200px) ---- */
@media (max-width: 1200px) {
.contact-channels-grid {
grid-template-columns: repeat(2, 1fr);
}
.resources-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================================
RESPONSIVE - STUDENT SUPPORT PAGE (CONTINUED)
============================================================ */
/* ---- Tablet Landscape & Below (max-width: 1024px) ---- */
@media (max-width: 1024px) {
.contact-channels-grid {
grid-template-columns: repeat(2, 1fr);
}
.departments-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.resources-grid {
grid-template-columns: repeat(3, 1fr);
}
.faq-columns {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Tablet Portrait & Below (max-width: 900px) ---- */
@media (max-width: 900px) {
.contact-channels-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.departments-grid {
grid-template-columns: 1fr;
}
.support-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.resources-grid {
grid-template-columns: repeat(2, 1fr);
}
.faq-columns {
grid-template-columns: 1fr;
gap: 0;
}
.faq-column+.faq-column {
margin-top: 0;
}
/* Help steps adjustments */
.help-step {
gap: 16px;
}
.help-step-num {
width: 40px;
height: 40px;
font-size: 16px;
}
.help-step-marker {
min-width: 40px;
}
.help-step-content h3 {
font-size: 17px;
}
.help-step-content p {
font-size: 14px;
}
/* Form row stacks */
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
/* Rating options wrap */
.rating-options {
gap: 8px;
}
.rating-label {
padding: 6px 12px;
font-size: 13px;
}
/* Stat numbers smaller */
.stat-number {
font-size: 28px;
}
.stat-label {
font-size: 13px;
}
.support-stat-item p {
font-size: 12px;
}
/* Department card adjustments */
.dept-header {
gap: 12px;
}
.dept-icon {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 18px;
}
.dept-title h3 {
font-size: 16px;
}
.department-card>p {
font-size: 13px;
}
.dept-services li {
font-size: 13px;
}
}
/* ---- Mobile Large (max-width: 768px) ---- */
@media (max-width: 768px) {
.contact-channels-grid {
grid-template-columns: 1fr;
}
.resources-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Help step tags wrap */
.help-step-tags {
gap: 6px;
}
.help-tag {
font-size: 11px;
padding: 3px 10px;
}
/* Channel card adjustments */
.channel-icon-wrap {
margin-bottom: 12px;
}
.channel-icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.contact-channel-card h3 {
font-size: 16px;
}
.contact-channel-card>p {
font-size: 13px;
}
.channel-meta span {
font-size: 12px;
}
/* Department availability */
.dept-availability {
font-size: 12px;
padding: 8px 12px;
}
/* Support stats intro text */
.support-stats-intro {
max-width: 100%;
margin-bottom: 32px;
}
}
/* ---- Mobile (max-width: 600px) ---- */
@media (max-width: 600px) {
.contact-channels-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.departments-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.support-stats-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.resources-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.faq-columns {
grid-template-columns: 1fr;
}
/* Contact channel cards mobile */
.contact-channel-card {
padding: 20px;
}
.channel-icon-wrap {
flex-direction: row;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.channel-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
.channel-badge {
font-size: 10px;
padding: 2px 8px;
}
.contact-channel-card h3 {
font-size: 15px;
}
.contact-channel-card>p {
font-size: 13px;
margin-bottom: 12px;
}
.channel-meta {
margin-bottom: 12px;
}
/* Department cards mobile */
.department-card {
padding: 20px;
}
.dept-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.dept-icon {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 16px;
}
.dept-title h3 {
font-size: 15px;
}
.dept-email {
font-size: 12px;
}
.department-card>p {
font-size: 13px;
}
.department-card h4 {
font-size: 13px;
}
.dept-services li {
font-size: 12px;
padding: 3px 0;
}
.dept-availability {
font-size: 11px;
padding: 8px 10px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Support stat items mobile */
.support-stat-item {
padding: 20px;
}
.stat-number {
font-size: 26px;
}
.stat-label {
font-size: 12px;
letter-spacing: 0.2px;
}
.support-stat-item p {
font-size: 12px;
}
/* Help steps mobile */
.help-step {
gap: 12px;
}
.help-step-num {
width: 36px;
height: 36px;
font-size: 15px;
}
.help-step-marker {
min-width: 36px;
}
.help-step-line {
min-height: 24px;
}
.help-step-content {
padding: 2px 0 24px 0;
}
.help-step-content h3 {
font-size: 16px;
}
.help-step-content p {
font-size: 14px;
}
.help-step-tags {
gap: 5px;
}
.help-tag {
font-size: 10px;
padding: 3px 8px;
gap: 4px;
}
.help-tag i {
font-size: 10px;
}
/* Resource cards mobile */
.resource-card {
padding: 16px;
text-align: left;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
}
.resource-icon {
margin: 0;
width: 40px;
height: 40px;
min-width: 40px;
font-size: 18px;
}
.resource-card h3 {
font-size: 14px;
margin-bottom: 4px;
}
.resource-card p {
font-size: 12px;
margin-bottom: 8px;
}
/* FAQ columns mobile */
.faq-columns {
gap: 0;
}
.faq-column .faq-list {
margin-top: 0;
}
.faq-column+.faq-column .faq-list {
margin-top: 0;
}
/* Form mobile */
.form-row {
grid-template-columns: 1fr;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
font-size: 14px;
padding: 10px 12px;
}
.form-group label {
font-size: 13px;
}
.rating-options {
flex-direction: column;
gap: 6px;
}
.rating-label {
padding: 8px 14px;
font-size: 13px;
width: 100%;
justify-content: center;
}
.form-actions .btn {
width: 100%;
text-align: center;
}
}
/* ---- Small Mobile (max-width: 375px) ---- */
@media (max-width: 375px) {
.contact-channels-grid {
gap: 12px;
}
.contact-channel-card {
padding: 16px;
}
.contact-channel-card h3 {
font-size: 14px;
}
.departments-grid {
gap: 12px;
}
.department-card {
padding: 16px;
}
.dept-title h3 {
font-size: 14px;
}
.resources-grid {
gap: 10px;
}
.resource-card {
padding: 14px;
gap: 10px;
}
.resource-icon {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 16px;
}
.resource-card h3 {
font-size: 13px;
}
.resource-card p {
font-size: 11px;
}
.help-step-num {
width: 32px;
height: 32px;
font-size: 14px;
}
.help-step-marker {
min-width: 32px;
}
.help-step-content h3 {
font-size: 15px;
}
.help-step-content p {
font-size: 13px;
}
.stat-number {
font-size: 24px;
}
.stat-label {
font-size: 11px;
}
.support-stat-item p {
font-size: 11px;
}
.support-stat-item {
padding: 16px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
font-size: 13px;
padding: 8px 10px;
}
.rating-label {
font-size: 12px;
padding: 6px 12px;
}
.faq-question span {
font-size: 14px;
}
.faq-answer p {
font-size: 13px;
}
}
/* ============================================================
PRINT STYLES - SUPPORT PAGE
============================================================ */
@media print {
.contact-channels-grid,
.departments-grid,
.support-stats-grid,
.resources-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.contact-channel-card,
.department-card,
.resource-card {
border: 1px solid #CCCCCC;
box-shadow: none;
break-inside: avoid;
}
.cta-banner,
.feedback-form,
.sidebar-highlight .btn,
.channel-badge {
display: none;
}
.section-navy {
background: #F5F5F5 !important;
}
.text-white,
.text-white-muted,
.stat-number,
.stat-label,
.support-stat-item p {
color: #1A1A1A !important;
}
.support-stat-item {
background: #FFFFFF !important;
border: 1px solid #CCCCCC !important;
}
}
/* ---- Form Button Success State ---- */
.btn-success {
background: #27AE60 !important;
border-color: #27AE60 !important;
color: #FFFFFF !important;
cursor: default;
}
.btn-success:hover {
background: #27AE60 !important;
}
/* ---- Rating Selected Enhancement ---- */
.rating-label.rating-selected {
border-color: #00543B;
background: #E8F5EF;
color: #00543B;
font-weight: 600;
}
.rating-label.rating-selected i {
color: #F0C400;
}
/* ============================================================
RESEARCH AREAS PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Research Areas Grid ---- */
.research-areas-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.research-area-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.research-area-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
/* Card Visual / Image */
.ra-card-visual {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 7;
}
.ra-card-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.research-area-card:hover .ra-card-visual img {
transform: scale(1.03);
}
.ra-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
display: flex;
align-items: flex-end;
}
.ra-card-tag {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
background: rgba(0, 84, 59, 0.85);
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
/* Card Body */
.ra-card-body {
padding: 20px 24px 24px;
}
.ra-card-icon {
width: 40px;
height: 40px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 18px;
margin-bottom: 12px;
}
.ra-card-body h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.ra-card-body>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
/* Research Topics List */
.ra-topics {
margin-bottom: 16px;
}
.ra-topics h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.40;
margin: 0 0 6px 0;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ra-topics ul {
list-style: none;
padding: 0;
margin: 0;
}
.ra-topics ul li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 3px 0;
display: flex;
align-items: center;
gap: 8px;
}
.ra-topics ul li i {
color: #00543B;
font-size: 9px;
flex-shrink: 0;
}
/* Card Meta */
.ra-card-meta {
display: flex;
gap: 16px;
margin-bottom: 12px;
padding-top: 12px;
border-top: 1px solid #F2F2F2;
}
.ra-card-meta span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
display: flex;
align-items: center;
gap: 5px;
}
.ra-card-meta span i {
color: #00543B;
font-size: 12px;
}
/* ---- Research Centers Grid (Navy Section) ---- */
.research-centers-intro {
max-width: 700px;
margin: 0 auto 40px;
}
.research-centers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.research-center-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.research-center-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.rc-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #FFFFFF;
font-size: 24px;
}
.research-center-item h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.35;
margin: 0 0 8px 0;
}
.research-center-item p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.50;
margin: 0;
}
/* ---- Featured Projects List ---- */
.featured-projects-list {
margin-top: 32px;
}
.featured-project {
display: flex;
align-items: flex-start;
gap: 20px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
margin-bottom: 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.featured-project:last-child {
margin-bottom: 0;
}
.featured-project:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.fp-status {
flex-shrink: 0;
}
.fp-badge {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
white-space: nowrap;
}
.fp-active {
background: #E8F5EF;
color: #00543B;
}
.fp-completed {
background: #E3F2FD;
color: #0066B3;
}
.fp-content {
flex: 1;
}
.fp-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 8px;
}
.fp-meta span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
display: flex;
align-items: center;
gap: 5px;
}
.fp-meta span i {
color: #00543B;
font-size: 12px;
}
.fp-content h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.fp-content>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 12px 0;
}
.fp-team {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding-top: 12px;
border-top: 1px solid #F2F2F2;
}
.fp-team span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
line-height: 1.40;
display: flex;
align-items: center;
gap: 5px;
}
.fp-team span i {
color: #00543B;
font-size: 12px;
}
.fp-lead {
font-weight: 600 !important;
color: #1A1A1A !important;
}
/* ---- Publications Stats ---- */
.publications-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 24px 0 32px;
}
.pub-stat-card {
background: #F5F5F5;
border-left: 4px solid #00543B;
padding: 16px 20px;
}
.pub-stat-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 28px;
font-weight: 700;
color: #00543B;
line-height: 1.1;
margin-bottom: 4px;
}
.pub-stat-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.35;
margin-bottom: 4px;
}
.pub-stat-card p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 1.45;
margin: 0;
}
/* ---- Recent Publications List ---- */
.recent-publications h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 16px 0;
}
.publication-list {
display: flex;
flex-direction: column;
gap: 0;
}
.publication-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #E8E8E8;
}
.publication-item:last-child {
border-bottom: none;
}
.pub-type-icon {
width: 36px;
height: 36px;
min-width: 36px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 16px;
margin-top: 2px;
}
.pub-info {
display: flex;
flex-direction: column;
}
.pub-info h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 15px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 3px 0;
}
.pub-authors {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.40;
}
.pub-journal {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 1.40;
font-style: italic;
}
/* ---- Opportunities Grid ---- */
.opportunities-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.opportunity-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.opportunity-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.opp-icon {
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 22px;
margin-bottom: 16px;
}
.opportunity-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.opportunity-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.opp-eligibility {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #F2F2F2;
}
.opp-eligibility span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #00543B;
line-height: 1.40;
display: flex;
align-items: center;
gap: 5px;
}
.opp-eligibility span i {
font-size: 12px;
}
/* ============================================================
RESPONSIVE - RESEARCH AREAS PAGE
============================================================ */
/* ---- Tablet Landscape & Below (max-width: 1024px) ---- */
@media (max-width: 1024px) {
.research-areas-grid {
grid-template-columns: repeat(2, 1fr);
}
.research-centers-grid {
grid-template-columns: repeat(3, 1fr);
}
.publications-stats {
grid-template-columns: repeat(2, 1fr);
}
.opportunities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Tablet Portrait & Below (max-width: 900px) ---- */
@media (max-width: 900px) {
.research-areas-grid {
grid-template-columns: 1fr;
}
.research-centers-grid {
grid-template-columns: repeat(2, 1fr);
}
.publications-stats {
grid-template-columns: repeat(2, 1fr);
}
.opportunities-grid {
grid-template-columns: 1fr;
}
/* Featured project adjustments */
.featured-project {
flex-direction: column;
gap: 12px;
}
.fp-content h3 {
font-size: 16px;
}
.fp-content>p {
font-size: 13px;
}
.fp-team {
flex-direction: column;
gap: 6px;
}
.fp-meta {
gap: 10px;
}
/* Publication items */
.publication-item {
gap: 10px;
}
.pub-info h4 {
font-size: 14px;
}
}
/* ---- Mobile Large (max-width: 768px) ---- */
@media (max-width: 768px) {
.research-centers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.publications-stats {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pub-stat-number {
font-size: 24px;
}
.pub-stat-label {
font-size: 12px;
}
.pub-stat-card p {
font-size: 11px;
}
.ra-card-body {
padding: 16px 20px 20px;
}
.ra-card-body h3 {
font-size: 16px;
}
.ra-card-meta {
flex-direction: column;
gap: 4px;
}
}
/* ---- Mobile (max-width: 600px) ---- */
@media (max-width: 600px) {
.research-areas-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.research-centers-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.publications-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.opportunities-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* Research area card mobile */
.ra-card-visual {
aspect-ratio: 16 / 9;
}
.ra-card-body {
padding: 16px;
}
.ra-card-icon {
width: 36px;
height: 36px;
font-size: 16px;
margin-bottom: 10px;
}
.ra-card-body h3 {
font-size: 15px;
}
.ra-card-body>p {
font-size: 13px;
}
.ra-topics h4 {
font-size: 12px;
}
.ra-topics ul li {
font-size: 12px;
}
.ra-card-meta span {
font-size: 12px;
}
/* Featured project mobile */
.featured-project {
padding: 20px;
}
.fp-badge {
font-size: 10px;
padding: 3px 10px;
}
.fp-content h3 {
font-size: 15px;
}
.fp-content>p {
font-size: 13px;
}
.fp-meta span {
font-size: 12px;
}
.fp-team span {
font-size: 12px;
}
/* Publication items mobile */
.pub-type-icon {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 14px;
}
.pub-info h4 {
font-size: 13px;
}
.pub-authors {
font-size: 12px;
}
.pub-journal {
font-size: 11px;
}
/* Opportunity cards mobile */
.opportunity-card {
padding: 20px;
}
.opp-icon {
width: 40px;
height: 40px;
font-size: 18px;
margin-bottom: 12px;
}
.opportunity-card h3 {
font-size: 16px;
}
.opportunity-card>p {
font-size: 13px;
}
.opp-eligibility {
flex-direction: column;
gap: 6px;
}
.opp-eligibility span {
font-size: 12px;
}
/* Research center items mobile */
.research-center-item {
padding: 20px;
}
.rc-icon {
width: 48px;
height: 48px;
font-size: 20px;
}
.research-center-item h3 {
font-size: 15px;
}
.research-center-item p {
font-size: 13px;
}
/* Pub stat cards mobile */
.pub-stat-card {
padding: 14px 16px;
}
.pub-stat-number {
font-size: 22px;
}
}
/* ---- Small Mobile (max-width: 375px) ---- */
@media (max-width: 375px) {
.ra-card-body {
padding: 14px;
}
.ra-card-body h3 {
font-size: 14px;
}
.featured-project {
padding: 16px;
}
.fp-content h3 {
font-size: 14px;
}
.opportunity-card {
padding: 16px;
}
.opportunity-card h3 {
font-size: 15px;
}
.publication-item {
flex-direction: column;
gap: 8px;
}
.pub-type-icon {
display: none;
}
}
/* ============================================================
RESEARCH PROJECTS PAGE - SPECIFIC STYLES
============================================================ */
/* ---- Project Filter Bar ---- */
.project-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px 24px;
margin-top: 24px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 160px;
}
.filter-group label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 700;
color: #666666;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.filter-select {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 8px 32px 8px 12px;
border: 1px solid #CCCCCC;
border-radius: 4px;
background: #FFFFFF;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color 0.2s ease;
}
.filter-select:focus {
border-color: #00543B;
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.filter-group-btn {
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-end;
flex: 0 0 auto;
min-width: auto;
}
.project-results-count {
margin-top: 16px;
}
.project-results-count p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 1.50;
margin: 0;
}
.project-results-count strong {
color: #00543B;
font-weight: 700;
}
/* ---- Projects List ---- */
.projects-list {
margin-top: 32px;
}
.project-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
margin-bottom: 24px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.project-card:last-child {
margin-bottom: 0;
}
.project-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.project-card-completed {
border-left: 4px solid #0066B3;
}
/* Card Header */
.project-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 16px 24px;
background: #FAFAFA;
border-bottom: 1px solid #F2F2F2;
}
.project-status-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.project-badge {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.project-badge-active {
background: #E8F5EF;
color: #00543B;
}
.project-badge-completed {
background: #E3F2FD;
color: #0066B3;
}
.project-badge-upcoming {
background: #FFF3E0;
color: #B8860B;
}
.project-domain-tag {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.2px;
}
.domain-ai {
background: #EDE7F6;
color: #4A2D73;
}
.domain-data {
background: #E3F2FD;
color: #0066B3;
}
.domain-marketing {
background: #FFF3E0;
color: #B8860B;
}
.domain-business {
background: #E8F5EF;
color: #00543B;
}
.domain-leadership {
background: #FCE4EC;
color: #CC0000;
}
.domain-ethics {
background: #ECEFF1;
color: #455A64;
}
.project-timeline {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
gap: 5px;
}
.project-timeline i {
color: #00543B;
font-size: 12px;
}
/* Card Body */
.project-card-body {
padding: 20px 24px;
}
.project-card-body h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.project-card-body>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.project-objectives h4,
.project-outcomes h4 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.40;
margin: 0 0 8px 0;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.project-objectives ul,
.project-outcomes ul {
list-style: none;
padding: 0;
margin: 0;
}
.project-objectives ul li,
.project-outcomes ul li {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #333333;
line-height: 1.50;
padding: 4px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
.project-objectives ul li i {
color: #00543B;
font-size: 11px;
margin-top: 3px;
flex-shrink: 0;
}
.project-outcomes ul li i {
color: #F0C400;
font-size: 12px;
margin-top: 3px;
flex-shrink: 0;
}
/* Card Footer */
.project-card-footer {
padding: 16px 24px 20px;
border-top: 1px solid #F2F2F2;
background: #FAFAFA;
}
.project-team-info,
.project-funding-info {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
.project-team-info span,
.project-funding-info span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
gap: 5px;
}
.project-team-info span i,
.project-funding-info span i {
color: #00543B;
font-size: 12px;
}
.project-lead {
font-weight: 600 !important;
color: #1A1A1A !important;
}
/* Progress Bar */
.project-progress {
margin-top: 4px;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.progress-label span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 600;
color: #666666;
}
.progress-bar-track {
width: 100%;
height: 8px;
background: #E8E8E8;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: #00543B;
border-radius: 4px;
transition: width 0.5s ease;
}
.progress-complete {
background: #0066B3;
}
/* ---- Upcoming Projects Grid ---- */
.upcoming-projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.upcoming-project-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
border-top: 4px solid #F0C400;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.upcoming-project-card:hover {
border-color: #DDDDDD;
border-top-color: #B8860B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.up-project-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.upcoming-project-card h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
}
.upcoming-project-card>p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0 0 16px 0;
}
.up-project-details {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.up-project-details span {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
gap: 6px;
}
.up-project-details span i {
color: #00543B;
font-size: 12px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
/* Upcoming Status Bar */
.up-project-status-bar {
padding-top: 16px;
border-top: 1px solid #F2F2F2;
}
.up-status-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 700;
color: #666666;
text-transform: uppercase;
letter-spacing: 0.3px;
display: block;
margin-bottom: 8px;
}
.up-status-dots {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.up-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: #E8E8E8;
border: 2px solid #DDDDDD;
position: relative;
flex-shrink: 0;
}
.up-dot-filled {
background: #00543B;
border-color: #00543B;
}
.up-dot-active {
background: #FFFFFF;
border-color: #00543B;
box-shadow: 0 0 0 3px rgba(0, 84, 59, 0.2);
}
.up-dot-active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #00543B;
border-radius: 50%;
}
.up-status-text {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 600;
color: #00543B;
}
/* ---- Impact Metrics Grid (Navy Section) ---- */
.impact-intro-text {
max-width: 700px;
margin: 0 auto 40px;
}
.impact-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
.impact-metric-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.impact-metric-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.impact-number {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 36px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.1;
margin-bottom: 4px;
}
.impact-label {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
line-height: 1.35;
}
/* ---- Partnership Types Grid ---- */
.partnership-types-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.partnership-type {
background: #F5F5F5;
border-left: 4px solid #00543B;
padding: 20px 24px;
}
.pt-icon {
color: #00543B;
font-size: 24px;
margin-bottom: 10px;
}
.partnership-type h3 {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 6px 0;
}
.partnership-type p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 1.55;
margin: 0;
}
/* ============================================================
RESPONSIVE - RESEARCH PROJECTS PAGE
============================================================ */
/* ---- Tablet Landscape (max-width: 1024px) ---- */
@media (max-width: 1024px) {
.upcoming-projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.impact-metrics-grid {
grid-template-columns: repeat(3, 1fr);
}
.partnership-types-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Tablet Portrait (max-width: 900px) ---- */
@media (max-width: 900px) {
.project-filter-bar {
flex-direction: column;
gap: 12px;
}
.filter-group {
flex: 1 1 100%;
min-width: 100%;
}
.filter-group-btn {
flex-direction: row;
width: 100%;
}
.filter-group-btn .btn {
flex: 1;
text-align: center;
}
.upcoming-projects-grid {
grid-template-columns: 1fr;
}
.impact-metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
.partnership-types-grid {
grid-template-columns: 1fr;
}
.project-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.project-team-info,
.project-funding-info {
flex-direction: column;
gap: 6px;
}
.project-card-body h3 {
font-size: 16px;
}
}
/* ---- Mobile Large (max-width: 768px) ---- */
@media (max-width: 768px) {
.impact-metrics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.impact-number {
font-size: 30px;
}
.impact-label {
font-size: 13px;
}
.project-card-body {
padding: 16px 20px;
}
.project-card-footer {
padding: 14px 20px 18px;
}
.project-card-header {
padding: 14px 20px;
}
}
/* ---- Mobile (max-width: 600px) — CONTINUED ---- */
@media (max-width: 600px) {
.upcoming-projects-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.impact-metrics-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.partnership-types-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.project-card {
margin-bottom: 16px;
}
.project-card-body h3 {
font-size: 15px;
}
.project-card-body>p {
font-size: 13px;
}
.project-card-body {
padding: 14px 16px;
}
.project-card-header {
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.project-card-footer {
padding: 12px 16px 16px;
}
.project-status-wrap {
flex-wrap: wrap;
gap: 6px;
}
.project-badge {
font-size: 10px;
padding: 3px 10px;
}
.project-domain-tag {
font-size: 10px;
padding: 2px 8px;
}
.project-timeline {
font-size: 12px;
}
/* Objectives & Outcomes mobile */
.project-objectives h4,
.project-outcomes h4 {
font-size: 12px;
}
.project-objectives ul li,
.project-outcomes ul li {
font-size: 12px;
padding: 3px 0;
}
/* Team info mobile */
.project-team-info,
.project-funding-info {
flex-direction: column;
gap: 4px;
}
.project-team-info span,
.project-funding-info span {
font-size: 12px;
}
/* Progress bar mobile */
.progress-label span {
font-size: 11px;
}
.progress-bar-track {
height: 6px;
}
/* Upcoming project cards mobile */
.upcoming-project-card {
padding: 20px;
}
.upcoming-project-card h3 {
font-size: 15px;
}
.upcoming-project-card>p {
font-size: 13px;
}
.up-project-details span {
font-size: 12px;
}
.up-status-label {
font-size: 10px;
}
.up-status-dots {
gap: 6px;
}
.up-dot {
width: 14px;
height: 14px;
}
.up-dot-active::after {
width: 5px;
height: 5px;
}
.up-status-text {
font-size: 11px;
}
/* Impact metrics mobile */
.impact-metric-item {
padding: 20px;
}
.impact-number {
font-size: 28px;
}
.impact-label {
font-size: 12px;
}
/* Partnership types mobile */
.partnership-type {
padding: 16px 20px;
}
.pt-icon {
font-size: 20px;
margin-bottom: 8px;
}
.partnership-type h3 {
font-size: 15px;
}
.partnership-type p {
font-size: 13px;
}
/* Filter bar mobile */
.project-filter-bar {
padding: 16px;
}
.filter-select {
font-size: 13px;
padding: 8px 28px 8px 10px;
}
.filter-group label {
font-size: 11px;
}
.filter-group-btn {
flex-direction: column;
gap: 8px;
}
.filter-group-btn .btn {
width: 100%;
text-align: center;
}
.project-results-count p {
font-size: 13px;
}
/* Completed card left border mobile */
.project-card-completed {
border-left-width: 3px;
}
}
/* ---- Small Mobile (max-width: 375px) ---- */
@media (max-width: 375px) {
.project-card-body {
padding: 12px 14px;
}
.project-card-header {
padding: 10px 14px;
}
.project-card-footer {
padding: 10px 14px 14px;
}
.project-card-body h3 {
font-size: 14px;
}
.project-card-body>p {
font-size: 12px;
}
.project-objectives ul li,
.project-outcomes ul li {
font-size: 11px;
}
.project-team-info span,
.project-funding-info span {
font-size: 11px;
}
.upcoming-project-card {
padding: 16px;
}
.upcoming-project-card h3 {
font-size: 14px;
}
.upcoming-project-card>p {
font-size: 12px;
}
.up-project-details span {
font-size: 11px;
}
.impact-metric-item {
padding: 16px;
}
.impact-number {
font-size: 24px;
}
.impact-label {
font-size: 11px;
}
.partnership-type {
padding: 14px 16px;
}
.partnership-type h3 {
font-size: 14px;
}
.partnership-type p {
font-size: 12px;
}
.project-filter-bar {
padding: 14px;
}
.filter-select {
font-size: 12px;
}
.up-status-dots {
gap: 4px;
}
.up-dot {
width: 12px;
height: 12px;
}
.up-dot-active::after {
width: 4px;
height: 4px;
}
.up-status-text {
font-size: 10px;
}
.progress-label span {
font-size: 10px;
}
}
/* ============================================================
PRINT STYLES - RESEARCH PROJECTS PAGE
============================================================ */
@media print {
.project-filter-bar,
.filter-group-btn,
.project-results-count,
.up-project-status-bar,
.project-progress {
display: none;
}
.project-card,
.upcoming-project-card {
border: 1px solid #CCCCCC;
box-shadow: none;
break-inside: avoid;
page-break-inside: avoid;
}
.project-card-completed {
border-left: 4px solid #0066B3;
}
.upcoming-project-card {
border-top: 4px solid #B8860B;
}
.section-navy {
background: #F5F5F5 !important;
}
.text-white,
.text-white-muted,
.impact-number,
.impact-label {
color: #1A1A1A !important;
}
.impact-metric-item {
background: #FFFFFF !important;
border: 1px solid #CCCCCC !important;
}
.cta-banner {
display: none;
}
.projects-list {
margin-top: 16px;
}
.project-card {
margin-bottom: 16px;
}
}
/* ---- No Results Message ---- */
.no-results-message {
display: none;
padding: 24px;
background: #F5F5F5;
border: 1px solid #E8E8E8;
border-radius: 4px;
text-align: center;
margin-top: 16px;
}
.no-results-message p {
font-family: 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 1.55;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.no-results-message p i {
color: #F0C400;
font-size: 16px;
}
/* ---- Filter Bar Focus States ---- */
.filter-select:hover {
border-color: #00543B;
}
/* ---- Active Filter Visual Indicator ---- */
.filter-select:not([value="all"]) {
border-color: #00543B;
background-color: #E8F5EF;
}
/* ---- Project Card Hide/Show Transition ---- */
.project-card,
.upcoming-project-card {
transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}
.project-card[style*="display: none"],
.upcoming-project-card[style*="display: none"] {
opacity: 0;
pointer-events: none;
}
/* ---- Filter Bar Responsive Fine-Tuning ---- */
@media (max-width: 900px) {
.no-results-message {
padding: 20px;
}
.no-results-message p {
font-size: 13px;
flex-direction: column;
gap: 6px;
}
}
@media (max-width: 600px) {
.no-results-message {
padding: 16px;
}
.no-results-message p {
font-size: 12px;
}
}
/* ============================================================
INFINITE HORIZONS UNIVERSITY — ADDITIONAL CSS
Pages: index.php, about.php, vision-mission.php, faculty-ai.php
============================================================ */
/* ==================== GLOBAL REUSABLE ==================== */
/* Section Base */
.section {
padding: 64px 0;
}
.section-alt {
background-color: #F5F5F5;
}
.section-green {
background-color: #00543B;
color: #FFFFFF;
}
.section-dark {
background-color: #2A2A2A;
color: #FFFFFF;
}
/* Section Intro Paragraph */
.section-intro {
font-size: 1.125rem;
line-height: 1.55;
color: #666666;
max-width: 780px;
margin-bottom: 40px;
}
.section-intro-ar {
font-family: "Cairo", "Tajawal", sans-serif;
direction: rtl;
text-align: right;
font-size: 1.125rem;
line-height: 1.7;
color: #666666;
max-width: 780px;
margin-bottom: 40px;
}
/* Section Tag */
.section-tag {
display: inline-block;
font-size: 0.813rem;
font-weight: 700;
color: #1a2a48;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.section-tag-light {
color: #E8F5EF;
}
/* Lead Text */
.lead-text {
font-size: 1.125rem;
line-height: 1.55;
color: #333333;
margin-bottom: 24px;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Text Utilities */
.text-center {
text-align: center;
}
.text-white {
color: #FFFFFF;
}
.text-white-muted {
color: rgba(255, 255, 255, 0.8);
}
/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
background-color: #F5F5F5;
padding: 12px 0;
border-bottom: 1px solid #E8E8E8;
}
.breadcrumbs-list {
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
font-size: 0.813rem;
color: #666666;
}
.breadcrumbs-list li {
display: inline-flex;
align-items: center;
}
.breadcrumbs-list li a {
color: #00543B;
text-decoration: none;
font-weight: 400;
}
.breadcrumbs-list li a:hover {
text-decoration: underline;
color: #003D2B;
}
.breadcrumbs-list .separator {
margin: 0 8px;
color: #999999;
}
.breadcrumbs-list .current {
font-weight: 600;
color: #1A1A1A;
}
/* ==================== PAGE HEADER ==================== */
.page-header {
background-color: #00543B;
padding: 48px 0 40px;
color: #FFFFFF;
}
.page-header-tag {
display: inline-block;
font-size: 0.813rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.page-header h1 {
font-size: 2.00rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.15px;
color: #FFFFFF;
margin: 0 0 12px 0;
}
.page-header p {
font-size: 1.125rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
margin: 0;
max-width: 650px;
}
/* ==================== HERO SECTION (Homepage) ==================== */
.hero-section {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 520px;
display: flex;
align-items: center;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 84, 59, 0.65);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.hero-content h1 {
font-size: 2.50rem;
font-weight: 700;
line-height: 1.20;
letter-spacing: -0.2px;
color: #FFFFFF;
margin: 0 0 16px 0;
}
.hero-content .hero-subtitle {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.55;
color: #FFFFFF;
margin-bottom: 32px;
}
.hero-content .hero-subtitle-ar {
font-family: "Cairo", "Tajawal", sans-serif;
direction: rtl;
text-align: right;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* ==================== BUTTONS ==================== */
.btn {
display: inline-block;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.25;
padding: 10px 24px;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
border: 2px solid transparent;
}
.btn:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* Primary Green Button */
.btn-primary {
background-color: #00543B;
color: #FFFFFF;
border-color: #00543B;
}
.btn-primary:hover {
background-color: #003D2B;
border-color: #003D2B;
}
.btn-primary:active {
background-color: #002E20;
}
/* Secondary Outlined Button */
.btn-outlined {
background-color: transparent;
color: #00543B;
border-color: #00543B;
}
.btn-outlined:hover {
background-color: #E8F5EF;
border-color: #003D2B;
color: #003D2B;
}
/* White Button (on dark/green backgrounds) */
.btn-white {
background-color: #FFFFFF;
color: #00543B;
border-color: #FFFFFF;
}
.btn-white:hover {
background-color: #F2F2F2;
border-color: #F2F2F2;
}
/* White Outlined Button */
.btn-white-outlined {
background-color: transparent;
color: #FFFFFF;
border-color: #FFFFFF;
}
.btn-white-outlined:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Small Button */
.btn-sm {
font-size: 0.875rem;
padding: 6px 16px;
border-radius: 3px;
}
/* ==================== CONTENT WITH SIDEBAR ==================== */
.content-with-sidebar {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
align-items: start;
}
.main-content h2 {
font-size: 1.625rem;
font-weight: 600;
line-height: 1.30;
color: #1A1A1A;
margin: 0 0 16px 0;
}
.main-content p {
font-size: 1rem;
line-height: 1.60;
color: #333333;
margin-bottom: 16px;
}
/* ==================== SIDEBAR ==================== */
.sidebar-box {
background-color: #F5F5F5;
border-left: 4px solid #00543B;
border-radius: 0;
padding: 20px 24px;
margin-bottom: 24px;
}
.sidebar-box h4 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 16px 0;
line-height: 1.35;
}
.sidebar-box p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin-bottom: 12px;
}
.sidebar-highlight {
background-color: #E8F5EF;
}
/* Fact List */
.fact-list {
list-style: none;
padding: 0;
margin: 0;
}
.fact-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #E8E8E8;
font-size: 0.875rem;
}
.fact-list li:last-child {
border-bottom: none;
}
.fact-label {
color: #666666;
font-weight: 400;
}
.fact-value {
color: #1A1A1A;
font-weight: 600;
}
/* ==================== ABOUT HERO BLOCK ==================== */
.about-hero-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.about-hero-content h2 {
font-size: 1.625rem;
font-weight: 600;
line-height: 1.30;
color: #1A1A1A;
margin: 0 0 16px 0;
}
.about-hero-image img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
/* ==================== QUICK FACTS BAR (Homepage) ==================== */
.quick-facts-bar {
background-color: #00543B;
padding: 48px 0;
}
.quick-facts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.quick-fact-item {
color: #FFFFFF;
}
.quick-fact-number {
font-size: 2.50rem;
font-weight: 700;
line-height: 1.20;
color: #FFFFFF;
margin-bottom: 4px;
}
.quick-fact-label {
font-size: 1rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
}
.quick-fact-label-ar {
font-family: "Cairo", "Tajawal", sans-serif;
direction: rtl;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 4px;
}
/* ==================== PROGRAM CARDS GRID ==================== */
.program-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.program-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.program-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.program-card-image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.program-card-body {
padding: 20px;
}
.program-card-meta {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
margin-bottom: 8px;
}
.program-card-body h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 8px 0;
transition: color 0.2s ease;
}
.program-card:hover .program-card-body h3 {
color: #00543B;
}
.program-card-body p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin-bottom: 16px;
}
.program-card-link {
font-size: 0.875rem;
font-weight: 600;
color: #00543B;
text-decoration: none;
}
.program-card-link:hover {
text-decoration: underline;
color: #003D2B;
}
/* ==================== MISSION & VISION GRID ==================== */
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.mv-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 32px;
position: relative;
}
.mv-card.mv-mission {
border-top: 4px solid #00543B;
}
.mv-card.mv-vision {
border-top: 4px solid #003D2B;
}
.mv-icon {
width: 56px;
height: 56px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #00543B;
font-size: 1.375rem;
}
.mv-card h2 {
font-size: 1.625rem;
font-weight: 600;
line-height: 1.30;
color: #1A1A1A;
margin: 0 0 16px 0;
}
.mv-card p {
font-size: 1rem;
line-height: 1.60;
color: #333333;
margin-bottom: 16px;
}
.mv-highlights {
list-style: none;
padding: 0;
margin: 16px 0 0 0;
}
.mv-highlights li {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
padding: 6px 0;
display: flex;
align-items: flex-start;
gap: 10px;
}
.mv-highlights li i {
color: #00543B;
margin-top: 2px;
flex-shrink: 0;
}
/* ==================== STRATEGIC GOALS ==================== */
.goals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.goal-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.goal-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.goal-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: #00543B;
color: #FFFFFF;
font-size: 1.125rem;
font-weight: 700;
border-radius: 50%;
margin-bottom: 16px;
}
.goal-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
line-height: 1.35;
margin: 0 0 12px 0;
}
.goal-card p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0;
}
/* ==================== VALUES GRID ==================== */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.value-item {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.value-item:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.value-icon {
width: 56px;
height: 56px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #00543B;
font-size: 1.375rem;
}
.value-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
}
.value-item p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0;
}
/* ==================== ABOUT SNIPPET (Homepage) ==================== */
.about-snippet-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.about-snippet-image img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
.about-snippet-content h2 {
font-size: 1.625rem;
font-weight: 600;
line-height: 1.30;
color: #1A1A1A;
margin: 0 0 16px 0;
}
.about-snippet-content p {
font-size: 1rem;
line-height: 1.60;
color: #333333;
margin-bottom: 16px;
}
/* ==================== CTA BANNER ==================== */
.cta-banner {
background-color: #00543B;
padding: 56px 0;
}
.cta-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.cta-text h2 {
font-size: 1.625rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 8px 0;
}
.cta-text p {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.cta-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* ==================== HISTORY TIMELINE ==================== */
.timeline {
position: relative;
padding-left: 32px;
}
.timeline::before {
content: "";
position: absolute;
left: 12px;
top: 0;
bottom: 0;
width: 3px;
background-color: #00543B;
}
.timeline-item {
position: relative;
padding-bottom: 32px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -26px;
top: 4px;
width: 14px;
height: 14px;
background-color: #00543B;
border: 3px solid #E8F5EF;
border-radius: 50%;
}
.timeline-year {
font-size: 0.875rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.timeline-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
}
.timeline-item p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0;
}
/* ==================== FACULTY PAGE ==================== */
.faculty-hero {
position: relative;
background-size: cover;
background-position: center;
min-height: 320px;
display: flex;
align-items: center;
}
.faculty-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 84, 59, 0.7);
z-index: 1;
}
.faculty-hero-content {
position: relative;
z-index: 2;
color: #FFFFFF;
}
.faculty-hero-content h1 {
font-size: 2.00rem;
font-weight: 700;
line-height: 1.25;
color: #FFFFFF;
margin: 0 0 12px 0;
}
.faculty-hero-content p {
font-size: 1.125rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0;
}
/* Faculty Info Grid */
.faculty-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.faculty-info-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px 20px;
text-align: center;
}
.faculty-info-icon {
color: #00543B;
font-size: 1.5rem;
margin-bottom: 12px;
}
.faculty-info-card h4 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 4px 0;
}
.faculty-info-card p {
font-size: 0.875rem;
color: #666666;
margin: 0;
}
/* Department List */
.department-list {
list-style: none;
padding: 0;
margin: 0;
}
.department-list li {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px 24px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color 0.2s ease;
}
.department-list li:hover {
border-color: #00543B;
}
.department-name {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
}
.department-name-ar {
font-family: "Cairo", "Tajawal", sans-serif;
font-size: 0.875rem;
color: #666666;
direction: rtl;
}
/* Name Meaning Grid (Homepage) */
.name-meaning-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
}
.name-meaning-item {
text-align: center;
}
.name-icon {
width: 64px;
height: 64px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #FFFFFF;
font-size: 1.5rem;
}
.name-meaning-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 8px 0;
}
.name-meaning-item p {
font-size: 0.875rem;
line-height: 1.50;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
/* Why IHU Detailed Grid */
.why-detailed-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.why-detailed-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 32px;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.why-detailed-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.why-detailed-number {
font-size: 2.50rem;
font-weight: 700;
color: #E8F5EF;
line-height: 1;
margin-bottom: 8px;
}
.why-detailed-icon {
color: #ffffff;
font-size: 1.5rem;
margin-bottom: 16px;
}
.why-detailed-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 12px 0;
}
.why-detailed-card p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin-bottom: 16px;
}
.why-list {
list-style: none;
padding: 0;
margin: 0;
}
.why-list li {
font-size: 0.875rem;
color: #333333;
padding: 4px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
.why-list li i {
color: #00543B;
margin-top: 2px;
flex-shrink: 0;
}
/* Accreditation Preview */
.accreditation-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.accreditation-preview-content h2 {
font-size: 1.625rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 16px 0;
}
.accreditation-preview-content p {
font-size: 1rem;
line-height: 1.60;
color: #333333;
margin-bottom: 24px;
}
.accreditation-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.acc-highlight {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: #333333;
}
.acc-highlight i {
color: #00543B;
flex-shrink: 0;
}
.acc-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.accreditation-preview-image img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
/* ==================== BILINGUAL BLOCK ==================== */
.bilingual-block {
margin-bottom: 32px;
}
.bilingual-block .content-en {
margin-bottom: 16px;
}
.bilingual-block .content-ar {
font-family: "Cairo", "Tajawal", sans-serif;
direction: rtl;
text-align: right;
border-top: 1px solid #E8E8E8;
padding-top: 16px;
color: #333333;
}
.bilingual-block .content-ar h2,
.bilingual-block .content-ar h3 {
font-family: "Cairo", "Tajawal", sans-serif;
color: #1A1A1A;
}
/* ==================== RESPONSIVE ==================== */
/* Tablet Portrait: 600–900px */
@media (max-width: 900px) {
.content-with-sidebar {
grid-template-columns: 1fr;
}
.about-hero-block,
.about-snippet-block,
.accreditation-preview {
grid-template-columns: 1fr;
}
.mission-vision-grid {
grid-template-columns: 1fr;
}
.quick-facts-grid {
grid-template-columns: repeat(2, 1fr);
}
.program-grid,
.goals-grid,
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-detailed-grid {
grid-template-columns: 1fr;
}
.faculty-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.name-meaning-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.cta-banner-inner {
flex-direction: column;
text-align: center;
}
.accreditation-highlights {
grid-template-columns: 1fr;
}
}
/* Mobile: <600px */
@media (max-width: 600px) {
.hero-content h1 {
font-size: 1.75rem;
}
.page-header h1 {
font-size: 1.50rem;
}
.section {
padding: 40px 0;
}
.quick-facts-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.program-grid,
.goals-grid,
.values-grid {
grid-template-columns: 1fr;
}
.faculty-info-grid {
grid-template-columns: 1fr;
}
.hero-section {
min-height: 400px;
}
.faculty-hero {
min-height: 240px;
}
.faculty-hero-content h1 {
font-size: 1.50rem;
}
}
/* ============================================================
PUBLICATIONS PAGE — CSS
English-Only Version
============================================================ */
/* ==================== PUBLICATION FILTERS BAR ==================== */
.publications-filter-bar {
background-color: #E8F5EF;
padding: 32px 0;
border-bottom: 1px solid #DDDDDD;
}
.filter-form {
display: grid;
grid-template-columns: 1fr 200px 200px 200px auto;
gap: 16px;
align-items: end;
}
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group label {
font-size: 0.813rem;
font-weight: 600;
color: #1A1A1A;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.filter-input,
.filter-select {
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333333;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 4px;
padding: 10px 14px;
line-height: 1.25;
transition: border-color 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.filter-input::placeholder {
color: #999999;
}
.filter-input:focus,
.filter-select:focus {
border-color: #00543B;
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* ==================== PUBLICATION STATS ROW ==================== */
.publication-stats-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid #E8E8E8;
}
.publication-results-count {
font-size: 0.875rem;
color: #666666;
font-weight: 400;
}
.publication-results-count strong {
color: #1A1A1A;
font-weight: 600;
}
.publication-sort {
display: flex;
align-items: center;
gap: 8px;
}
.publication-sort label {
font-size: 0.875rem;
color: #666666;
font-weight: 400;
}
.publication-sort .filter-select {
width: auto;
min-width: 180px;
padding: 6px 36px 6px 12px;
font-size: 0.875rem;
}
/* ==================== PUBLICATION LIST ==================== */
.publication-list {
list-style: none;
padding: 0;
margin: 0;
}
.publication-item {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px;
margin-bottom: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.publication-item:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.publication-item:last-child {
margin-bottom: 0;
}
/* Publication Header Row */
.publication-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
/* Type Badge */
.publication-type-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.badge-journal {
background-color: #E8F5EF;
color: #00543B;
}
.badge-conference {
background-color: #EBF0F7;
color: #0066B3;
}
.badge-book {
background-color: #F5EDE3;
color: #B8860B;
}
.badge-working-paper {
background-color: #F5F5F5;
color: #666666;
}
.badge-thesis {
background-color: #F0E6F5;
color: #4A2D73;
}
.badge-report {
background-color: #FFF3E0;
color: #CC6600;
}
/* Publication Title */
.publication-title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
color: #1A1A1A;
margin: 0 0 8px 0;
}
.publication-title a {
color: #1A1A1A;
text-decoration: none;
transition: color 0.2s ease;
}
.publication-title a:hover {
color: #00543B;
}
/* Publication Meta */
.publication-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
.publication-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.813rem;
color: #666666;
font-weight: 400;
}
.publication-meta-item i {
color: #00543B;
font-size: 0.75rem;
flex-shrink: 0;
}
/* Publication Authors */
.publication-authors {
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
margin-bottom: 10px;
}
.publication-authors strong {
font-weight: 600;
color: #1A1A1A;
}
.author-highlight {
color: #00543B;
font-weight: 600;
}
/* Publication Abstract */
.publication-abstract {
font-size: 0.875rem;
line-height: 1.55;
color: #333333;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.publication-abstract.expanded {
-webkit-line-clamp: unset;
line-clamp: unset;
display: block;
}
/* Publication Keywords */
.publication-keywords {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.keyword-tag {
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
background-color: #E8F5EF;
padding: 3px 10px;
border-radius: 3px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.keyword-tag:hover {
background-color: #D0EBD9;
}
/* Publication Actions */
.publication-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid #F2F2F2;
}
.pub-action-link {
font-size: 0.813rem;
font-weight: 600;
color: #00543B;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.pub-action-link:hover {
color: #003D2B;
text-decoration: underline;
}
.pub-action-link i {
font-size: 0.75rem;
}
/* Toggle Abstract Button */
.toggle-abstract {
background: none;
border: none;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.813rem;
font-weight: 600;
color: #00543B;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.toggle-abstract:hover {
color: #003D2B;
text-decoration: underline;
}
.toggle-abstract:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ==================== FEATURED PUBLICATION ==================== */
.featured-publication {
background-color: #E8F5EF;
border: 2px solid #00543B;
border-radius: 4px;
padding: 32px;
margin-bottom: 32px;
position: relative;
}
.featured-badge {
position: absolute;
top: -1px;
right: 24px;
background-color: #00543B;
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 14px;
border-radius: 0 0 4px 4px;
}
.featured-publication .publication-title {
font-size: 1.313rem;
}
/* ==================== OVERVIEW CARDS ==================== */
.pub-overview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.pub-overview-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px 20px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pub-overview-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.pub-overview-icon {
width: 52px;
height: 52px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
color: #00543B;
font-size: 1.25rem;
}
.pub-overview-number {
font-size: 2rem;
font-weight: 700;
color: #00543B;
line-height: 1.2;
margin-bottom: 4px;
}
.pub-overview-label {
font-size: 0.875rem;
font-weight: 400;
color: #666666;
}
/* ==================== SIDEBAR FILTERS ==================== */
.sidebar-filter-group {
margin-bottom: 20px;
}
.sidebar-filter-group h5 {
font-size: 0.875rem;
font-weight: 700;
color: #1A1A1A;
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.sidebar-filter-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-filter-list li {
margin-bottom: 6px;
}
.sidebar-filter-list li a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.875rem;
color: #333333;
text-decoration: none;
padding: 6px 0;
transition: color 0.2s ease;
}
.sidebar-filter-list li a:hover {
color: #00543B;
}
.sidebar-filter-list li a .filter-count {
font-size: 0.75rem;
font-weight: 600;
color: #FFFFFF;
background-color: #00543B;
padding: 1px 8px;
border-radius: 10px;
min-width: 24px;
text-align: center;
}
.sidebar-filter-list li.active a {
color: #00543B;
font-weight: 600;
}
/* ==================== PAGINATION ==================== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid #E8E8E8;
}
.pagination-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 0.875rem;
font-weight: 600;
color: #333333;
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pagination-item:hover {
background-color: #E8F5EF;
border-color: #00543B;
color: #00543B;
}
.pagination-item:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.pagination-item.active {
background-color: #00543B;
border-color: #00543B;
color: #FFFFFF;
}
.pagination-item.disabled {
color: #CCCCCC;
border-color: #E8E8E8;
cursor: not-allowed;
pointer-events: none;
}
.pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 0.875rem;
color: #666666;
}
/* ==================== YEAR GROUP HEADER ==================== */
.year-group-header {
display: flex;
align-items: center;
gap: 16px;
margin: 40px 0 20px 0;
}
.year-group-header:first-child {
margin-top: 0;
}
.year-label {
font-size: 1.125rem;
font-weight: 700;
color: #00543B;
white-space: nowrap;
}
.year-group-line {
flex-grow: 1;
height: 2px;
background-color: #E8E8E8;
}
.year-count {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
white-space: nowrap;
}
/* ==================== CITATION BOX ==================== */
.citation-box {
background-color: #F9F9F9;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 16px;
margin-top: 12px;
display: none;
}
.citation-box.visible {
display: block;
}
.citation-box pre {
font-family: "Source Code Pro", "Courier New", monospace;
font-size: 0.813rem;
line-height: 1.55;
color: #333333;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
}
.citation-copy-btn {
margin-top: 8px;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
background: none;
border: 1px solid #00543B;
border-radius: 3px;
padding: 4px 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.citation-copy-btn:hover {
background-color: #E8F5EF;
}
.citation-copy-btn:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
/* ==================== EMPTY STATE ==================== */
.empty-state {
text-align: center;
padding: 64px 24px;
}
.empty-state-icon {
width: 80px;
height: 80px;
background-color: #F5F5F5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: #CCCCCC;
font-size: 2rem;
}
.empty-state h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
}
.empty-state p {
font-size: 0.875rem;
color: #666666;
margin: 0 0 24px 0;
}
/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
.filter-form {
grid-template-columns: 1fr 1fr;
}
.pub-overview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.publication-header {
flex-direction: column;
gap: 8px;
}
.pub-overview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.filter-form {
grid-template-columns: 1fr;
}
.publication-meta {
flex-direction: column;
gap: 6px;
}
.publication-actions {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.pub-overview-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.publication-item {
padding: 20px;
}
.pagination-item {
width: 36px;
height: 36px;
font-size: 0.813rem;
}
}
/* ============================================================
LIBRARY PAGE — CSS
English-Only Version
============================================================ */
/* ==================== LIBRARY SEARCH HERO ==================== */
.library-search-hero {
background-color: #00543B;
padding: 56px 0;
text-align: center;
}
.library-search-hero h2 {
font-size: 1.625rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 8px 0;
}
.library-search-hero p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 28px 0;
}
.library-search-form {
display: flex;
max-width: 720px;
margin: 0 auto;
gap: 0;
}
.library-search-input {
flex: 1;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333333;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
border-right: none;
border-radius: 4px 0 0 4px;
padding: 12px 18px;
line-height: 1.25;
box-sizing: border-box;
}
.library-search-input::placeholder {
color: #999999;
}
.library-search-input:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
border-color: #FFFFFF;
}
.library-search-select {
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.875rem;
font-weight: 400;
color: #333333;
background-color: #F5F5F5;
border: 2px solid #FFFFFF;
border-left: 1px solid #E8E8E8;
border-right: none;
padding: 12px 14px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
min-width: 160px;
box-sizing: border-box;
}
.library-search-select:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.library-search-btn {
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
color: #00543B;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
border-left: none;
border-radius: 0 4px 4px 0;
padding: 12px 24px;
cursor: pointer;
transition: background-color 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.library-search-btn:hover {
background-color: #F2F2F2;
}
.library-search-btn:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.library-search-tags {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.library-search-tags span {
font-size: 0.813rem;
color: rgba(255, 255, 255, 0.6);
}
.library-search-tag {
font-size: 0.75rem;
font-weight: 600;
color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.15);
padding: 3px 12px;
border-radius: 3px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.library-search-tag:hover {
background-color: rgba(255, 255, 255, 0.25);
}
/* ==================== LIBRARY STATS ROW ==================== */
.library-stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
.library-stat-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px 16px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.library-stat-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.library-stat-icon {
width: 48px;
height: 48px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
color: #00543B;
font-size: 1.125rem;
}
.library-stat-number {
font-size: 1.75rem;
font-weight: 700;
color: #00543B;
line-height: 1.2;
margin-bottom: 4px;
}
.library-stat-label {
font-size: 0.813rem;
font-weight: 400;
color: #666666;
}
/* ==================== RESOURCE CATEGORY GRID ==================== */
.resource-category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.resource-category-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 32px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
display: block;
}
.resource-category-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.resource-category-icon {
width: 64px;
height: 64px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #00543B;
font-size: 1.5rem;
transition: background-color 0.2s ease;
}
.resource-category-card:hover .resource-category-icon {
background-color: #00543B;
color: #FFFFFF;
}
.resource-category-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
line-height: 1.35;
}
.resource-category-card:hover h3 {
color: #00543B;
}
.resource-category-card p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0 0 12px 0;
}
.resource-count-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
background-color: #E8F5EF;
padding: 3px 10px;
border-radius: 3px;
}
/* ==================== DATABASE ACCESS LIST ==================== */
.database-list {
list-style: none;
padding: 0;
margin: 0;
}
.database-item {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
margin-bottom: 12px;
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 20px;
align-items: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.database-item:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.database-item:last-child {
margin-bottom: 0;
}
.database-icon {
width: 48px;
height: 48px;
background-color: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 1.25rem;
flex-shrink: 0;
}
.database-info h4 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 4px 0;
line-height: 1.35;
}
.database-info p {
font-size: 0.813rem;
color: #666666;
margin: 0 0 6px 0;
line-height: 1.45;
}
.database-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.database-tag {
font-size: 0.688rem;
font-weight: 600;
color: #00543B;
background-color: #E8F5EF;
padding: 2px 8px;
border-radius: 3px;
}
.database-access-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 3px;
white-space: nowrap;
}
.badge-full-access {
background-color: #E8F5EF;
color: #00543B;
}
.badge-limited {
background-color: #FFF3E0;
color: #CC6600;
}
.badge-open-access {
background-color: #EBF0F7;
color: #0066B3;
}
.database-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
/* ==================== LIBRARY SERVICES GRID ==================== */
.library-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.library-service-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 24px;
display: flex;
gap: 20px;
align-items: flex-start;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.library-service-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.library-service-icon {
width: 52px;
height: 52px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 1.25rem;
flex-shrink: 0;
}
.library-service-content h3 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
line-height: 1.35;
}
.library-service-content p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0 0 12px 0;
}
.library-service-link {
font-size: 0.813rem;
font-weight: 600;
color: #00543B;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.library-service-link:hover {
color: #003D2B;
text-decoration: underline;
}
/* ==================== NEW ARRIVALS GRID ==================== */
.new-arrivals-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.book-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.book-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.book-card-cover {
width: 100%;
height: 220px;
background-color: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.book-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.book-card-cover .book-cover-placeholder {
color: #CCCCCC;
font-size: 3rem;
}
.book-card-body {
padding: 16px;
}
.book-card-type {
font-size: 0.688rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #00543B;
background-color: #E8F5EF;
padding: 2px 8px;
border-radius: 3px;
display: inline-block;
margin-bottom: 8px;
}
.book-card-body h4 {
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 4px 0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.book-card:hover .book-card-body h4 {
color: #00543B;
}
.book-card-author {
font-size: 0.75rem;
color: #666666;
margin: 0 0 8px 0;
}
.book-card-meta {
font-size: 0.688rem;
color: #999999;
display: flex;
align-items: center;
gap: 4px;
}
/* ==================== LIBRARY HOURS TABLE ==================== */
.library-hours-table {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
}
.library-hours-table th {
background-color: #00543B;
color: #FFFFFF;
font-size: 0.813rem;
font-weight: 600;
padding: 10px 16px;
text-align: left;
}
.library-hours-table td {
font-size: 0.875rem;
color: #333333;
padding: 10px 16px;
border-bottom: 1px solid #E8E8E8;
}
.library-hours-table tr:nth-child(even) td {
background-color: #F9F9F9;
}
.library-hours-table tr:hover td {
background-color: #E8F5EF;
}
.hours-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 600;
}
.hours-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.hours-status-dot.open {
background-color: #00543B;
}
.hours-status-dot.closed {
background-color: #CC0000;
}
/* ==================== FAQ ACCORDION ==================== */
.faq-list {
list-style: none;
padding: 0;
margin: 0;
}
.faq-item {
border: 1px solid #DDDDDD;
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item.active {
border-color: #00543B;
}
.faq-question {
width: 100%;
background: #FFFFFF;
border: none;
padding: 16px 20px;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition: background-color 0.2s ease;
}
.faq-question:hover {
background-color: #F9F9F9;
}
.faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.faq-question i {
color: #00543B;
font-size: 0.75rem;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question {
background-color: #E8F5EF;
color: #00543B;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 16px 20px;
max-height: 500px;
}
.faq-answer p {
font-size: 0.875rem;
line-height: 1.55;
color: #333333;
margin: 0;
}
/* ==================== RESPONSIVE: LIBRARY ==================== */
@media (max-width: 1024px) {
.library-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.new-arrivals-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.library-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.resource-category-grid {
grid-template-columns: repeat(2, 1fr);
}
.library-services-grid {
grid-template-columns: 1fr;
}
.new-arrivals-grid {
grid-template-columns: repeat(2, 1fr);
}
.database-item {
grid-template-columns: 1fr;
gap: 12px;
}
.database-icon {
display: none;
}
.database-action {
align-items: flex-start;
flex-direction: row;
}
.library-search-form {
flex-direction: column;
gap: 8px;
}
.library-search-input {
border-right: 2px solid #FFFFFF;
border-radius: 4px;
}
.library-search-select {
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-radius: 4px;
}
.library-search-btn {
border-left: 2px solid #FFFFFF;
border-radius: 4px;
justify-content: center;
}
}
@media (max-width: 600px) {
.library-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.resource-category-grid {
grid-template-columns: 1fr;
}
.new-arrivals-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.library-service-card {
flex-direction: column;
gap: 12px;
}
.library-search-hero {
padding: 40px 0;
}
}
/* ============================================================
COMMUNITIES PAGE — CSS
English-Only Version
============================================================ */
/* ==================== COMMUNITY HERO BANNER ==================== */
.community-hero {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 360px;
display: flex;
align-items: center;
}
.community-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 84, 59, 0.7);
z-index: 1;
}
.community-hero-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.community-hero-content h2 {
font-size: 2.00rem;
font-weight: 700;
line-height: 1.25;
color: #FFFFFF;
margin: 0 0 16px 0;
}
.community-hero-content p {
font-size: 1.125rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 24px 0;
}
.community-hero-stats {
display: flex;
gap: 32px;
flex-wrap: wrap;
margin-top: 24px;
}
.community-hero-stat {
text-align: left;
}
.community-hero-stat-number {
font-size: 1.75rem;
font-weight: 700;
color: #FFFFFF;
line-height: 1.2;
}
.community-hero-stat-label {
font-size: 0.813rem;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
}
/* ==================== COMMUNITY TYPES GRID ==================== */
.community-types-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.community-type-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 20px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
display: block;
}
.community-type-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.community-type-icon {
width: 64px;
height: 64px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #00543B;
font-size: 1.5rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.community-type-card:hover .community-type-icon {
background-color: #00543B;
color: #FFFFFF;
}
.community-type-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
line-height: 1.35;
}
.community-type-card:hover h3 {
color: #00543B;
}
.community-type-card p {
font-size: 0.875rem;
line-height: 1.50;
color: #333333;
margin: 0 0 12px 0;
}
.community-member-count {
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
background-color: #E8F5EF;
padding: 3px 12px;
border-radius: 3px;
display: inline-block;
}
/* ==================== CLUB / GROUP CARDS ==================== */
.clubs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.club-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.club-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.club-card-banner {
height: 140px;
background-color: #E8F5EF;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.club-card-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.club-card-banner-placeholder {
color: #00543B;
font-size: 2.5rem;
opacity: 0.4;
}
.club-card-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: 0.688rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 3px;
}
.badge-active {
background-color: #E8F5EF;
color: #00543B;
}
.badge-new {
background-color: #FFF3E0;
color: #CC6600;
}
.badge-popular {
background-color: #EBF0F7;
color: #0066B3;
}
.club-card-body {
padding: 20px;
}
.club-card-category {
font-size: 0.688rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #00543B;
margin-bottom: 6px;
}
.club-card-body h3 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
line-height: 1.35;
}
.club-card:hover .club-card-body h3 {
color: #00543B;
}
.club-card-body p {
font-size: 0.813rem;
line-height: 1.50;
color: #333333;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.club-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid #F2F2F2;
}
.club-card-members {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: #666666;
}
.club-card-members i {
color: #00543B;
font-size: 0.688rem;
}
.club-card-link {
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.club-card-link:hover {
color: #003D2B;
text-decoration: underline;
}
/* ==================== COMMUNITY EVENT LIST ==================== */
.community-events-list {
list-style: none;
padding: 0;
margin: 0;
}
.community-event-item {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px;
margin-bottom: 12px;
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 20px;
align-items: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.community-event-item:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.community-event-item:last-child {
margin-bottom: 0;
}
.event-date-box {
width: 80px;
background-color: #00543B;
border-radius: 4px;
text-align: center;
padding: 12px 8px;
flex-shrink: 0;
}
.event-date-month {
font-size: 0.688rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.8);
display: block;
}
.event-date-day {
font-size: 1.75rem;
font-weight: 700;
color: #FFFFFF;
line-height: 1.2;
display: block;
}
.event-date-year {
font-size: 0.688rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
display: block;
}
.event-info h4 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 6px 0;
line-height: 1.35;
}
.community-event-item:hover .event-info h4 {
color: #00543B;
}
.event-info-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 6px;
}
.event-info-meta span {
font-size: 0.75rem;
color: #666666;
display: flex;
align-items: center;
gap: 4px;
}
.event-info-meta span i {
color: #00543B;
font-size: 0.688rem;
}
.event-info p {
font-size: 0.813rem;
line-height: 1.45;
color: #333333;
margin: 0;
}
.event-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.event-type-badge {
font-size: 0.688rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 3px;
white-space: nowrap;
}
.badge-webinar {
background-color: #EBF0F7;
color: #0066B3;
}
.badge-meetup {
background-color: #E8F5EF;
color: #00543B;
}
.badge-workshop {
background-color: #F5EDE3;
color: #B8860B;
}
.badge-social {
background-color: #F0E6F5;
color: #4A2D73;
}
.badge-conference {
background-color: #FFF3E0;
color: #CC6600;
}
/* ==================== TESTIMONIALS / MEMBER SPOTLIGHT ==================== */
.spotlight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.spotlight-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spotlight-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.spotlight-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #E8F5EF;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
overflow: hidden;
color: #00543B;
font-size: 1.75rem;
}
.spotlight-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.spotlight-card h4 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 4px 0;
}
.spotlight-role {
font-size: 0.75rem;
color: #00543B;
font-weight: 600;
margin-bottom: 12px;
display: block;
}
.spotlight-card blockquote {
font-size: 0.875rem;
line-height: 1.55;
color: #333333;
font-style: italic;
margin: 0;
padding: 0;
border: none;
}
.spotlight-card blockquote::before {
content: "\201C";
font-size: 1.5rem;
color: #00543B;
font-weight: 700;
line-height: 0;
vertical-align: -0.4em;
margin-right: 2px;
}
/* ==================== JOIN STEPS ==================== */
.join-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
counter-reset: step-counter;
}
.join-step-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 20px;
text-align: center;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
counter-increment: step-counter;
}
.join-step-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.join-step-number {
width: 44px;
height: 44px;
background-color: #00543B;
color: #FFFFFF;
font-size: 1.125rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.join-step-icon {
color: #00543B;
font-size: 1.25rem;
margin-bottom: 12px;
}
.join-step-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
line-height: 1.35;
}
.join-step-card p {
font-size: 0.813rem;
line-height: 1.50;
color: #333333;
margin: 0;
}
/* ==================== PLATFORM LINKS GRID ==================== */
.platform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.platform-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px 20px;
display: flex;
align-items: center;
gap: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
}
.platform-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.platform-icon {
width: 52px;
height: 52px;
background-color: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 1.25rem;
flex-shrink: 0;
transition: background-color 0.2s ease, color 0.2s ease;
}
.platform-card:hover .platform-icon {
background-color: #00543B;
color: #FFFFFF;
}
.platform-info h4 {
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 4px 0;
}
.platform-card:hover .platform-info h4 {
color: #00543B;
}
.platform-info p {
font-size: 0.75rem;
color: #666666;
margin: 0;
line-height: 1.40;
}
/* ==================== COMMUNITY GUIDELINES BOX ==================== */
.guidelines-list {
list-style: none;
padding: 0;
margin: 0;
}
.guidelines-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #F2F2F2;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
}
.guidelines-list li:last-child {
border-bottom: none;
}
.guidelines-list li i {
color: #00543B;
margin-top: 3px;
flex-shrink: 0;
font-size: 0.75rem;
}
/* ==================== RESPONSIVE: COMMUNITIES ==================== */
@media (max-width: 1024px) {
.community-types-grid {
grid-template-columns: repeat(2, 1fr);
}
.join-steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.clubs-grid {
grid-template-columns: repeat(2, 1fr);
}
.spotlight-grid {
grid-template-columns: repeat(2, 1fr);
}
.platform-grid {
grid-template-columns: 1fr;
}
.community-event-item {
grid-template-columns: 1fr;
gap: 12px;
}
.event-date-box {
width: auto;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
}
.event-date-month,
.event-date-day,
.event-date-year {
display: inline;
font-size: 0.875rem;
}
.event-date-day {
font-size: 1.125rem;
}
.event-action {
flex-direction: row;
align-items: center;
}
.community-hero-content h2 {
font-size: 1.50rem;
}
.community-hero {
min-height: 280px;
}
}
@media (max-width: 600px) {
.community-types-grid {
grid-template-columns: 1fr;
}
.clubs-grid {
grid-template-columns: 1fr;
}
.spotlight-grid {
grid-template-columns: 1fr;
}
.join-steps-grid {
grid-template-columns: 1fr;
}
.community-hero-stats {
flex-direction: column;
gap: 16px;
}
.community-hero-content h2 {
font-size: 1.375rem;
}
}
/* ============================================================
FAQ PAGE — CSS
English-Only Version
============================================================ */
/* ==================== FAQ SEARCH SECTION ==================== */
.faq-search-section {
background-color: #00543B;
padding: 48px 0;
text-align: center;
}
.faq-search-section h2 {
font-size: 1.625rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 8px 0;
}
.faq-search-section p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 24px 0;
}
.faq-search-wrapper {
max-width: 640px;
margin: 0 auto;
position: relative;
}
.faq-search-field {
width: 100%;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333333;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
border-radius: 4px;
padding: 14px 52px 14px 18px;
line-height: 1.25;
box-sizing: border-box;
transition: border-color 0.2s ease;
}
.faq-search-field::placeholder {
color: #999999;
}
.faq-search-field:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
border-color: #FFFFFF;
}
.faq-search-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #00543B;
font-size: 1rem;
pointer-events: none;
}
.faq-search-hint {
font-size: 0.813rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 12px;
}
/* ==================== FAQ CATEGORY TABS ==================== */
.faq-category-nav {
background-color: #F5F5F5;
border-bottom: 1px solid #E8E8E8;
padding: 0;
overflow-x: auto;
}
.faq-category-tabs {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
gap: 0;
}
.faq-category-tab {
flex-shrink: 0;
}
.faq-category-tab a,
.faq-category-tab button {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.875rem;
font-weight: 600;
color: #666666;
text-decoration: none;
padding: 16px 20px;
border: none;
border-bottom: 3px solid transparent;
background: none;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
white-space: nowrap;
}
.faq-category-tab a:hover,
.faq-category-tab button:hover {
color: #00543B;
background-color: #FFFFFF;
}
.faq-category-tab a:focus,
.faq-category-tab button:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.faq-category-tab.active a,
.faq-category-tab.active button {
color: #00543B;
border-bottom-color: #00543B;
background-color: #FFFFFF;
}
.faq-category-tab i {
font-size: 0.75rem;
}
/* ==================== FAQ ACCORDION (Enhanced) ==================== */
.faq-section-group {
margin-bottom: 40px;
}
.faq-section-group:last-child {
margin-bottom: 0;
}
.faq-section-heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #00543B;
}
.faq-section-icon {
width: 40px;
height: 40px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 1rem;
flex-shrink: 0;
}
.faq-section-heading h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0;
line-height: 1.35;
}
.faq-section-count {
font-size: 0.75rem;
font-weight: 600;
color: #FFFFFF;
background-color: #00543B;
padding: 2px 10px;
border-radius: 10px;
margin-left: auto;
}
/* Enhanced FAQ List */
.faq-list-enhanced {
list-style: none;
padding: 0;
margin: 0;
}
.faq-item-enhanced {
border: 1px solid #DDDDDD;
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item-enhanced:last-child {
margin-bottom: 0;
}
.faq-item-enhanced.active {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.faq-question-enhanced {
width: 100%;
background: #FFFFFF;
border: none;
padding: 18px 20px;
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.938rem;
font-weight: 600;
color: #1A1A1A;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: background-color 0.2s ease, color 0.2s ease;
line-height: 1.40;
}
.faq-question-enhanced:hover {
background-color: #FAFAFA;
}
.faq-question-enhanced:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.faq-question-enhanced .faq-toggle-icon {
width: 28px;
height: 28px;
background-color: #F5F5F5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00543B;
font-size: 0.688rem;
flex-shrink: 0;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.faq-item-enhanced.active .faq-question-enhanced {
background-color: #E8F5EF;
color: #00543B;
}
.faq-item-enhanced.active .faq-question-enhanced .faq-toggle-icon {
background-color: #00543B;
color: #FFFFFF;
transform: rotate(180deg);
}
.faq-answer-enhanced {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item-enhanced.active .faq-answer-enhanced {
max-height: 600px;
}
.faq-answer-content {
padding: 0 20px 20px 20px;
font-size: 0.875rem;
line-height: 1.60;
color: #333333;
}
.faq-answer-content p {
margin: 0 0 12px 0;
}
.faq-answer-content p:last-child {
margin-bottom: 0;
}
.faq-answer-content ul {
margin: 8px 0 12px 0;
padding-left: 20px;
}
.faq-answer-content ul li {
margin-bottom: 6px;
font-size: 0.875rem;
color: #333333;
line-height: 1.50;
}
.faq-answer-content a {
color: #00543B;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.faq-answer-content a:hover {
color: #003D2B;
text-decoration: underline;
}
.faq-helpful {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #F2F2F2;
font-size: 0.75rem;
color: #666666;
}
.faq-helpful-btn {
font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: #00543B;
background: none;
border: 1px solid #00543B;
border-radius: 3px;
padding: 3px 12px;
cursor: pointer;
transition: background-color 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.faq-helpful-btn:hover {
background-color: #E8F5EF;
}
.faq-helpful-btn:focus {
outline: 2px solid #2376D7;
outline-offset: 2px;
}
.faq-helpful-btn.selected {
background-color: #00543B;
color: #FFFFFF;
}
/* ==================== QUICK ANSWERS GRID ==================== */
.quick-answers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.quick-answer-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 24px 20px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
display: block;
}
.quick-answer-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.quick-answer-icon {
width: 56px;
height: 56px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
color: #00543B;
font-size: 1.25rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.quick-answer-card:hover .quick-answer-icon {
background-color: #00543B;
color: #FFFFFF;
}
.quick-answer-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 6px 0;
line-height: 1.35;
}
.quick-answer-card:hover h3 {
color: #00543B;
}
.quick-answer-card p {
font-size: 0.813rem;
line-height: 1.45;
color: #666666;
margin: 0;
}
/* ==================== CONTACT SUPPORT GRID ==================== */
.support-channels-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.support-channel-card {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 28px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.support-channel-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
}
.support-channel-icon {
width: 60px;
height: 60px;
background-color: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #00543B;
font-size: 1.375rem;
}
.support-channel-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 6px 0;
}
.support-channel-card p {
font-size: 0.813rem;
line-height: 1.45;
color: #333333;
margin: 0 0 8px 0;
}
.support-channel-detail {
font-size: 0.875rem;
font-weight: 600;
color: #00543B;
display: block;
margin-bottom: 4px;
}
.support-channel-hours {
font-size: 0.75rem;
color: #666666;
}
/* ==================== NO RESULTS STATE ==================== */
.faq-no-results {
text-align: center;
padding: 48px 24px;
display: none;
}
.faq-no-results.visible {
display: block;
}
.faq-no-results-icon {
width: 72px;
height: 72px;
background-color: #F5F5F5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #CCCCCC;
font-size: 1.75rem;
}
.faq-no-results h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 8px 0;
}
.faq-no-results p {
font-size: 0.875rem;
color: #666666;
margin: 0 0 20px 0;
}
/* ==================== RESPONSIVE: FAQ ==================== */
@media (max-width: 1024px) {
.quick-answers-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-channels-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.faq-category-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.quick-answers-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.quick-answers-grid {
grid-template-columns: 1fr;
}
.support-channels-grid {
grid-template-columns: 1fr;
}
.faq-question-enhanced {
font-size: 0.875rem;
padding: 14px 16px;
}
.faq-answer-content {
padding: 0 16px 16px 16px;
}
.faq-search-section {
padding: 32px 0;
}
.faq-section-heading {
flex-wrap: wrap;
}
}
/* ============================================
CAREER PAGE STYLES
============================================ */
/* --- Career Hero --- */
.career-hero {
background-image: url('../images/career-hero.jpg');
background-size: cover;
background-position: center;
min-height: 380px;
position: relative;
display: flex;
align-items: flex-end;
padding-bottom: 48px;
}
/* --- Benefits Grid --- */
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.benefit-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 28px 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.benefit-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.benefit-icon {
color: #00543B;
margin-bottom: 16px;
width: 48px;
height: 48px;
background: #E8F5EF;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-title {
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 8px;
line-height: 1.35;
}
.benefit-desc {
font-size: 14px;
color: #333333;
line-height: 1.60;
margin: 0;
}
/* --- Career Filters --- */
.career-filters {
display: flex;
align-items: flex-end;
gap: 16px;
margin-bottom: 32px;
padding: 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
flex-wrap: wrap;
}
.filter-group {
flex: 1;
min-width: 180px;
}
.filter-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #333333;
margin-bottom: 6px;
}
.filter-select {
width: 100%;
padding: 10px 12px;
font-size: 14px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid #dddddd;
border-radius: 4px;
background: #ffffff;
color: #333333;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
transition: border-color 0.2s ease;
}
.filter-select:focus {
outline: none;
border-color: #00543B;
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
.filter-reset-btn {
white-space: nowrap;
align-self: flex-end;
}
/* --- Job Listings --- */
.job-listings {
display: flex;
flex-direction: column;
gap: 16px;
}
.job-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.job-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.job-meta-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.job-tag {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.tag-academic {
background: #E8F5EF;
color: #00543B;
}
.tag-research {
background: #E8F0FE;
color: #0066B3;
}
.tag-admin {
background: #FFF8E1;
color: #8B6914;
}
.tag-technical {
background: #F3E8FF;
color: #6B21A8;
}
.tag-fulltime {
background: #F5F5F5;
color: #333333;
}
.tag-parttime {
background: #F5F5F5;
color: #666666;
}
.tag-contract {
background: #FFF0F0;
color: #CC0000;
}
.job-date {
font-size: 13px;
color: #666666;
}
.job-title {
font-size: 21px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 12px;
line-height: 1.35;
}
.job-details {
display: flex;
gap: 20px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.job-detail-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #666666;
}
.job-detail-item svg {
color: #00543B;
flex-shrink: 0;
}
.job-summary {
font-size: 15px;
color: #333333;
line-height: 1.60;
margin-bottom: 16px;
}
.job-card-footer {
display: flex;
align-items: center;
gap: 12px;
}
/* --- Job Expanded Details --- */
.job-expanded {
display: none;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #dddddd;
}
.job-expanded.active {
display: block;
}
.job-expanded-content {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.job-section h4 {
font-size: 16px;
font-weight: 600;
color: #00543B;
margin-bottom: 10px;
}
.job-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.job-section ul li {
position: relative;
padding-left: 20px;
font-size: 14px;
color: #333333;
line-height: 1.70;
margin-bottom: 6px;
}
.job-section ul li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
background: #00543B;
border-radius: 50%;
}
/* --- No Results --- */
.no-results {
text-align: center;
padding: 48px 24px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
}
.no-results-icon {
color: #999999;
margin-bottom: 16px;
}
.no-results h3 {
font-size: 21px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 8px;
}
.no-results p {
font-size: 15px;
color: #666666;
margin-bottom: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* --- Job Count --- */
.job-count {
margin-top: 16px;
font-size: 14px;
color: #666666;
text-align: right;
}
/* --- Application Process Timeline --- */
.process-timeline {
margin-top: 40px;
position: relative;
padding-left: 48px;
}
.process-timeline::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: #dddddd;
}
.process-step {
position: relative;
margin-bottom: 32px;
padding-bottom: 0;
}
.process-step:last-child {
margin-bottom: 0;
}
.step-number {
position: absolute;
left: -48px;
top: 0;
width: 40px;
height: 40px;
background: #00543B;
color: #ffffff;
font-size: 18px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.step-content h3 {
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 6px;
line-height: 1.35;
padding-top: 8px;
}
.step-content p {
font-size: 15px;
color: #333333;
line-height: 1.60;
margin: 0;
}
/* --- Career Form --- */
.career-form {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 32px;
}
.form-section-title {
font-size: 18px;
font-weight: 600;
color: #00543B;
margin-top: 28px;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #E8F5EF;
}
.form-section-title:first-of-type {
margin-top: 0;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333333;
margin-bottom: 6px;
}
.form-label .required {
color: #CC0000;
}
.form-input {
width: 100%;
padding: 10px 14px;
font-size: 15px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid #dddddd;
border-radius: 4px;
background: #ffffff;
color: #333333;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: #00543B;
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
.form-input::placeholder {
color: #999999;
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.form-file {
padding: 8px 14px;
cursor: pointer;
}
.form-hint {
display: block;
font-size: 12px;
color: #666666;
margin-top: 4px;
}
.form-checkbox-group {
margin-bottom: 12px;
}
.form-checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #333333;
line-height: 1.50;
cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
accent-color: #00543B;
width: 16px;
height: 16px;
}
.form-checkbox-label a.link-green {
color: #00543B;
text-decoration: underline;
}
.form-checkbox-label a.link-green:hover {
color: #003D2B;
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #dddddd;
}
/* --- Form Messages --- */
.form-message {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 4px;
font-size: 14px;
margin-top: 16px;
}
.form-success {
background: #E8F5EF;
color: #00543B;
border: 1px solid #00543B;
}
.form-error {
background: #FFF0F0;
color: #CC0000;
border: 1px solid #CC0000;
}
.form-message svg {
flex-shrink: 0;
}
.form-message a {
color: inherit;
text-decoration: underline;
}
/* --- Sidebar Styles --- */
.sidebar-box {
background: #F5F5F5;
border-left: 4px solid #00543B;
border-radius: 0;
padding: 20px;
margin-bottom: 20px;
}
.sidebar-box h3 {
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 10px;
}
.sidebar-box p {
font-size: 14px;
color: #333333;
line-height: 1.60;
margin: 0 0 12px 0;
}
.sidebar-box p:last-child {
margin-bottom: 0;
}
.sidebar-contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-contact-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
margin-bottom: 8px;
}
.sidebar-contact-list li:last-child {
margin-bottom: 0;
}
.sidebar-contact-list li svg {
color: #00543B;
flex-shrink: 0;
}
.sidebar-contact-list li a {
color: #00543B;
text-decoration: none;
}
.sidebar-contact-list li a:hover {
text-decoration: underline;
}
.sidebar-tips-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-tips-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
color: #333333;
line-height: 1.60;
margin-bottom: 8px;
}
.sidebar-tips-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #00543B;
font-weight: 700;
font-size: 13px;
}
.sidebar-box-highlight {
background: #E8F5EF;
border-left-color: #00543B;
}
.sidebar-event {
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.sidebar-event:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sidebar-event-date {
display: block;
font-size: 12px;
font-weight: 600;
color: #00543B;
margin-bottom: 2px;
}
.sidebar-event-title {
display: block;
font-size: 14px;
color: #1A1A1A;
font-weight: 600;
}
/* --- Career Stats --- */
.career-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.career-stat {
padding: 32px 16px;
border: 1px solid #dddddd;
border-radius: 4px;
transition: border-color 0.2s ease;
}
.career-stat:hover {
border-color: #00543B;
}
.career-stat-number {
display: block;
font-size: 40px;
font-weight: 700;
color: #00543B;
line-height: 1.20;
margin-bottom: 8px;
}
.career-stat-label {
display: block;
font-size: 14px;
color: #666666;
font-weight: 400;
}
/* --- Testimonials --- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.testimonial-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
border-color: #00543B;
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.testimonial-content {
margin-bottom: 20px;
}
.testimonial-content p {
font-size: 15px;
color: #333333;
line-height: 1.65;
font-style: italic;
margin: 0;
position: relative;
padding-left: 20px;
}
.testimonial-content p::before {
content: "\201C";
position: absolute;
left: 0;
top: -4px;
font-size: 32px;
color: #00543B;
font-style: normal;
font-weight: 700;
line-height: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #eeeeee;
}
.testimonial-avatar {
width: 44px;
height: 44px;
background: #00543B;
color: #ffffff;
font-size: 15px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.testimonial-info {
display: flex;
flex-direction: column;
}
.testimonial-name {
font-size: 14px;
font-weight: 600;
color: #1A1A1A;
}
.testimonial-role {
font-size: 13px;
color: #666666;
}
.testimonial-tenure {
font-size: 12px;
color: #999999;
}
/* --- FAQ --- */
.faq-list {
max-width: 800px;
margin: 40px auto 0;
}
.faq-item {
border: 1px solid #dddddd;
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:hover {
border-color: #00543B;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: #ffffff;
border: none;
cursor: pointer;
text-align: left;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
transition: background-color 0.2s ease;
}
.faq-question:hover {
background: #F9F9F9;
}
.faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.faq-icon {
flex-shrink: 0;
color: #00543B;
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
display: none;
padding: 0 20px 16px;
background: #ffffff;
}
.faq-item.active .faq-answer {
display: block;
}
.faq-answer p {
font-size: 15px;
color: #333333;
line-height: 1.65;
margin: 0;
}
/* --- CTA Green Section --- */
.section-green {
background: #00543B;
color: #ffffff;
}
.cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
padding: 16px 0;
}
.cta-title {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
line-height: 1.25;
}
.cta-text {
font-size: 17px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.60;
margin-bottom: 28px;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.btn-white {
background: #ffffff;
color: #00543B;
border: none;
padding: 10px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease;
}
.btn-white:hover {
background: #F2F2F2;
}
.btn-white-outline {
background: transparent;
color: #ffffff;
border: 2px solid #ffffff;
padding: 8px 22px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-white-outline:hover {
background: #ffffff;
color: #00543B;
}
/* ============================================
CAREER PAGE RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.career-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.career-hero {
min-height: 280px;
padding-bottom: 32px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.career-filters {
flex-direction: column;
}
.filter-group {
min-width: 100%;
}
.job-details {
flex-direction: column;
gap: 8px;
}
.job-card-footer {
flex-direction: column;
align-items: flex-start;
}
.form-row {
grid-template-columns: 1fr;
}
.career-form {
padding: 20px;
}
.process-timeline {
padding-left: 40px;
}
.process-timeline::before {
left: 16px;
}
.step-number {
left: -40px;
width: 32px;
height: 32px;
font-size: 15px;
}
.career-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.career-stat {
padding: 24px 12px;
}
.career-stat-number {
font-size: 32px;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.cta-title {
font-size: 26px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.form-actions {
flex-direction: column;
}
.form-actions .btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.career-stats-grid {
grid-template-columns: 1fr;
}
.job-card {
padding: 16px;
}
.job-title {
font-size: 18px;
}
.faq-question {
font-size: 15px;
padding: 14px 16px;
}
.faq-answer {
padding: 0 16px 14px;
}
}
/* --- Form Error States --- */
.input-error {
border-color: #CC0000 !important;
box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15) !important;
}
.checkbox-error {
color: #CC0000;
}
/* --- Button disabled state --- */
.btn:disabled,
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
CAREER PAGE STYLES
============================================ */
/* --- Career Filters --- */
.career-filters {
display: flex;
align-items: flex-end;
gap: 16px;
margin-bottom: 32px;
padding: 24px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
flex-wrap: wrap;
}
.career-filter-group {
flex: 1;
min-width: 180px;
}
.career-filter-group.career-filter-action {
flex: 0 0 auto;
min-width: auto;
align-self: flex-end;
}
.career-filter-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark, #333333);
margin-bottom: 6px;
}
.career-filter-select {
width: 100%;
padding: 10px 36px 10px 12px;
font-size: 14px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
background: var(--white, #ffffff);
color: var(--text-dark, #333333);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color 0.2s ease;
}
.career-filter-select:focus {
outline: none;
border-color: var(--primary, #00543B);
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
/* --- Job Listings --- */
.career-job-listings {
display: flex;
flex-direction: column;
gap: 16px;
}
.career-job-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.career-job-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.career-job-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.career-job-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.career-tag {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
display: inline-block;
}
.career-tag-academic {
background: #E8F5EF;
color: #00543B;
}
.career-tag-research {
background: #E8F0FE;
color: #0066B3;
}
.career-tag-admin {
background: #FFF8E1;
color: #8B6914;
}
.career-tag-technical {
background: #F3E8FF;
color: #6B21A8;
}
.career-tag-fulltime {
background: #F5F5F5;
color: #333333;
}
.career-tag-parttime {
background: #F5F5F5;
color: #666666;
}
.career-tag-contract {
background: #FFF0F0;
color: #CC0000;
}
.career-job-date {
font-size: 13px;
color: var(--text-muted, #666666);
}
.career-job-title {
font-size: 21px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 12px;
line-height: 1.35;
}
.career-job-meta {
display: flex;
gap: 20px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.career-job-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-muted, #666666);
}
.career-job-meta-item i {
color: var(--primary, #00543B);
font-size: 13px;
}
.career-job-summary {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 16px;
}
.career-job-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* --- Job Expanded Details --- */
.career-job-expanded {
display: none;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color, #dddddd);
}
.career-job-expanded.active {
display: block;
}
.career-job-detail-section {
margin-bottom: 20px;
}
.career-job-detail-section:last-child {
margin-bottom: 0;
}
.career-job-detail-section h4 {
font-size: 16px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 10px;
}
.career-job-detail-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.career-job-detail-section ul li {
position: relative;
padding-left: 20px;
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.70;
margin-bottom: 6px;
}
.career-job-detail-section ul li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
background: var(--primary, #00543B);
border-radius: 50%;
}
/* --- No Results --- */
.career-no-results {
display: none;
text-align: center;
padding: 48px 24px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
}
.career-no-results.visible {
display: block;
}
.career-no-results i {
font-size: 48px;
color: var(--text-placeholder, #999999);
margin-bottom: 16px;
}
.career-no-results h3 {
font-size: 21px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 8px;
}
.career-no-results p {
font-size: 15px;
color: var(--text-muted, #666666);
margin-bottom: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* --- Job Count --- */
.career-job-count {
margin-top: 16px;
font-size: 14px;
color: var(--text-muted, #666666);
text-align: right;
}
/* --- Application Form --- */
.career-application-form {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 32px;
position: relative;
}
.career-form-section {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid #eeeeee;
}
.career-form-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.career-form-section-title {
font-size: 18px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.career-form-section-title i {
font-size: 16px;
}
.form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.career-application-form .form-group {
margin-bottom: 16px;
}
.career-application-form label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-dark, #333333);
margin-bottom: 6px;
}
.career-application-form label .required {
color: #CC0000;
}
.career-application-form input[type="text"],
.career-application-form input[type="email"],
.career-application-form input[type="tel"],
.career-application-form input[type="date"],
.career-application-form input[type="file"],
.career-application-form select,
.career-application-form textarea {
width: 100%;
padding: 10px 14px;
font-size: 15px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
background: var(--white, #ffffff);
color: var(--text-dark, #333333);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.career-application-form input:focus,
.career-application-form select:focus,
.career-application-form textarea:focus {
outline: none;
border-color: var(--primary, #00543B);
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
.career-application-form input::placeholder,
.career-application-form textarea::placeholder {
color: var(--text-placeholder, #999999);
}
.career-application-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.career-application-form input[type="file"] {
padding: 8px 14px;
cursor: pointer;
}
.career-application-form textarea {
resize: vertical;
min-height: 120px;
}
.career-application-form .form-hint {
display: block;
font-size: 12px;
color: var(--text-muted, #666666);
margin-top: 4px;
}
/* Checkbox */
.career-application-form .checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
font-weight: 400;
color: var(--text-dark, #333333);
line-height: 1.50;
cursor: pointer;
}
.career-application-form .checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 3px;
flex-shrink: 0;
accent-color: var(--primary, #00543B);
}
.career-application-form .checkbox-label a {
color: var(--primary, #00543B);
text-decoration: underline;
}
.career-application-form .checkbox-label a:hover {
color: var(--primary-dark, #003D2B);
}
/* Form Actions */
.career-application-form .form-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #eeeeee;
}
/* Form Messages */
.career-application-form .form-message {
display: none;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 4px;
font-size: 14px;
margin-top: 16px;
}
.career-application-form .form-message.visible {
display: flex;
}
.career-application-form .form-message-success {
background: #E8F5EF;
color: #00543B;
border: 1px solid #00543B;
}
.career-application-form .form-message-error {
background: #FFF0F0;
color: #CC0000;
border: 1px solid #CC0000;
}
.career-application-form .form-message a {
color: inherit;
text-decoration: underline;
}
/* Form Error State */
.career-application-form .input-error {
border-color: #CC0000 !important;
box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15) !important;
}
/* --- Sidebar Checklist --- */
.sidebar-checklist {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-checklist li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 8px;
}
.sidebar-checklist li:last-child {
margin-bottom: 0;
}
.sidebar-checklist li i {
color: var(--primary, #00543B);
font-size: 12px;
margin-top: 4px;
flex-shrink: 0;
}
/* --- Sidebar Events --- */
.sidebar-events-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-events-list li {
padding: 10px 0;
border-bottom: 1px solid var(--border-color, #dddddd);
}
.sidebar-events-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sidebar-events-list .event-date {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 2px;
}
.sidebar-events-list .event-name {
display: block;
font-size: 14px;
color: var(--text-heading, #1A1A1A);
font-weight: 600;
}
/* --- Stats (4-col values grid) --- */
.values-grid-4col {
grid-template-columns: repeat(4, 1fr);
}
.value-item-stat {
text-align: center;
}
.value-item-stat h3 {
font-size: 40px;
font-weight: 700;
color: var(--primary, #00543B);
line-height: 1.20;
margin-bottom: 4px;
}
.value-item-stat p {
font-size: 14px;
color: var(--text-muted, #666666);
}
/* --- Testimonials --- */
.career-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.career-testimonial-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.career-testimonial-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.career-testimonial-quote {
margin-bottom: 20px;
position: relative;
}
.career-testimonial-quote i {
color: var(--primary, #00543B);
font-size: 24px;
margin-bottom: 10px;
display: block;
opacity: 0.6;
}
.career-testimonial-quote p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
font-style: italic;
margin: 0;
}
.career-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #eeeeee;
}
.career-testimonial-avatar {
width: 44px;
height: 44px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
font-size: 15px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.career-testimonial-info {
display: flex;
flex-direction: column;
}
.career-testimonial-info strong {
font-size: 14px;
color: var(--text-heading, #1A1A1A);
}
.career-testimonial-info span {
font-size: 13px;
color: var(--text-muted, #666666);
}
.career-testimonial-tenure {
font-size: 12px !important;
color: var(--text-placeholder, #999999) !important;
}
/* --- FAQ --- */
.career-faq-list {
max-width: 800px;
margin: 0 auto;
margin-top: 32px;
}
.career-faq-item {
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.career-faq-item:hover {
border-color: var(--primary, #00543B);
}
.career-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--white, #ffffff);
border: none;
cursor: pointer;
text-align: left;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
transition: background-color 0.2s ease;
}
.career-faq-question:hover {
background: #F9F9F9;
}
.career-faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.career-faq-question i {
color: var(--primary, #00543B);
font-size: 14px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.career-faq-item.active .career-faq-question i {
transform: rotate(180deg);
}
.career-faq-answer {
display: none;
padding: 0 20px 16px;
background: var(--white, #ffffff);
}
.career-faq-item.active .career-faq-answer {
display: block;
}
.career-faq-answer p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
margin: 0;
}
/* ============================================
CAREER PAGE RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.career-testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.values-grid-4col {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.career-filters {
flex-direction: column;
}
.career-filter-group {
min-width: 100%;
}
.career-job-meta {
flex-direction: column;
gap: 8px;
}
.career-job-actions {
flex-direction: column;
align-items: flex-start;
}
.form-row-2col {
grid-template-columns: 1fr;
}
.career-application-form {
padding: 20px;
}
.career-application-form .form-actions {
flex-direction: column;
}
.career-application-form .form-actions .btn {
width: 100%;
text-align: center;
}
.career-testimonials-grid {
grid-template-columns: 1fr;
}
.values-grid-4col {
grid-template-columns: repeat(2, 1fr);
}
.career-faq-question {
font-size: 15px;
padding: 14px 16px;
}
.career-faq-answer {
padding: 0 16px 14px;
}
}
@media (max-width: 480px) {
.values-grid-4col {
grid-template-columns: 1fr;
}
.career-job-card {
padding: 16px;
}
.career-job-title {
font-size: 18px;
}
.value-item-stat h3 {
font-size: 32px;
}
}
/* ============================================
ALUMNI PAGE STYLES
============================================ */
/* --- Alumni Stories Grid --- */
.alumni-stories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.alumni-story-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alumni-story-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.alumni-story-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
}
.alumni-story-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.alumni-story-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.alumni-story-content {
padding: 20px 24px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.alumni-story-content h3 {
font-size: 21px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 4px;
line-height: 1.35;
}
.alumni-story-role {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 2px;
}
.alumni-story-program {
display: block;
font-size: 13px;
color: var(--text-muted, #666666);
margin-bottom: 12px;
}
.alumni-story-content p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
font-style: italic;
margin-bottom: 16px;
flex: 1;
}
.alumni-story-highlights {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.alumni-story-highlights span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--primary, #00543B);
}
.alumni-story-highlights span i {
font-size: 12px;
}
/* --- Alumni Events Grid --- */
.alumni-events-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.alumni-event-card {
display: flex;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alumni-event-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.alumni-event-date-block {
flex-shrink: 0;
width: 90px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 12px;
text-align: center;
}
.alumni-event-month {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.85;
}
.alumni-event-day {
font-size: 32px;
font-weight: 700;
line-height: 1.10;
margin: 2px 0;
}
.alumni-event-year {
font-size: 12px;
font-weight: 400;
opacity: 0.75;
}
.alumni-event-content {
flex: 1;
padding: 20px 24px;
}
.alumni-event-type {
display: inline-block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #E8F5EF;
color: var(--primary, #00543B);
padding: 3px 10px;
border-radius: 3px;
margin-bottom: 8px;
}
.alumni-event-content h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 6px;
line-height: 1.35;
}
.alumni-event-content p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 12px;
}
.alumni-event-meta {
display: flex;
gap: 20px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.alumni-event-meta span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted, #666666);
}
.alumni-event-meta span i {
color: var(--primary, #00543B);
font-size: 12px;
}
/* --- Alumni Form --- */
.alumni-form {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 32px;
position: relative;
}
.alumni-form-section {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid #eeeeee;
}
.alumni-form-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.alumni-form-section-title {
font-size: 18px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.alumni-form-section-title i {
font-size: 16px;
}
.alumni-form .form-group {
margin-bottom: 16px;
}
.alumni-form label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-dark, #333333);
margin-bottom: 6px;
}
.alumni-form label .required {
color: #CC0000;
}
.alumni-form .form-hint-inline {
font-weight: 400;
font-size: 13px;
color: var(--text-muted, #666666);
}
.alumni-form input[type="text"],
.alumni-form input[type="email"],
.alumni-form input[type="tel"],
.alumni-form input[type="url"],
.alumni-form select,
.alumni-form textarea {
width: 100%;
padding: 10px 14px;
font-size: 15px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
background: var(--white, #ffffff);
color: var(--text-dark, #333333);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.alumni-form input:focus,
.alumni-form select:focus,
.alumni-form textarea:focus {
outline: none;
border-color: var(--primary, #00543B);
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
.alumni-form input::placeholder,
.alumni-form textarea::placeholder {
color: var(--text-placeholder, #999999);
}
.alumni-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.alumni-form textarea {
resize: vertical;
min-height: 100px;
}
/* Checkbox Grid */
.checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px;
}
.checkbox-grid .checkbox-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
font-weight: 400;
color: var(--text-dark, #333333);
line-height: 1.50;
cursor: pointer;
}
.checkbox-grid .checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--primary, #00543B);
}
.alumni-form .checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
font-weight: 400;
color: var(--text-dark, #333333);
line-height: 1.50;
cursor: pointer;
}
.alumni-form .checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 3px;
flex-shrink: 0;
accent-color: var(--primary, #00543B);
}
.alumni-form .checkbox-label a {
color: var(--primary, #00543B);
text-decoration: underline;
}
.alumni-form .checkbox-label a:hover {
color: var(--primary-dark, #003D2B);
}
.alumni-form .form-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #eeeeee;
}
.alumni-form .form-message {
display: none;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 4px;
font-size: 14px;
margin-top: 16px;
}
.alumni-form .form-message.visible {
display: flex;
}
.alumni-form .form-message-success {
background: #E8F5EF;
color: #00543B;
border: 1px solid #00543B;
}
.alumni-form .form-message-error {
background: #FFF0F0;
color: #CC0000;
border: 1px solid #CC0000;
}
.alumni-form .form-message a {
color: inherit;
text-decoration: underline;
}
.alumni-form .input-error {
border-color: #CC0000 !important;
box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15) !important;
}
/* --- Sidebar Social List --- */
.sidebar-social-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-social-list li {
margin-bottom: 8px;
}
.sidebar-social-list li:last-child {
margin-bottom: 0;
}
.sidebar-social-list li a {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--primary, #00543B);
text-decoration: none;
transition: color 0.2s ease;
}
.sidebar-social-list li a:hover {
color: var(--primary-dark, #003D2B);
text-decoration: underline;
}
.sidebar-social-list li a i {
font-size: 16px;
width: 20px;
text-align: center;
}
/* --- Sidebar Spotlight --- */
.sidebar-spotlight-quote {
font-style: italic;
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 8px !important;
}
.sidebar-spotlight-author {
font-size: 13px;
color: var(--text-muted, #666666);
}
.sidebar-spotlight-author strong {
color: var(--text-heading, #1A1A1A);
}
/* --- Alumni FAQ --- */
.alumni-faq-list {
max-width: 800px;
margin: 0 auto;
margin-top: 32px;
}
.alumni-faq-item {
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.alumni-faq-item:hover {
border-color: var(--primary, #00543B);
}
.alumni-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--white, #ffffff);
border: none;
cursor: pointer;
text-align: left;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
transition: background-color 0.2s ease;
}
.alumni-faq-question:hover {
background: #F9F9F9;
}
.alumni-faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.alumni-faq-question i {
color: var(--primary, #00543B);
font-size: 14px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.alumni-faq-item.active .alumni-faq-question i {
transform: rotate(180deg);
}
.alumni-faq-answer {
display: none;
padding: 0 20px 16px;
background: var(--white, #ffffff);
}
.alumni-faq-item.active .alumni-faq-answer {
display: block;
}
.alumni-faq-answer p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
margin: 0;
}
.alumni-faq-answer a {
color: var(--primary, #00543B);
text-decoration: underline;
}
/* ============================================
ALUMNI PAGE RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.alumni-stories-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.alumni-event-card {
flex-direction: column;
}
.alumni-event-date-block {
width: 100%;
flex-direction: row;
gap: 8px;
padding: 12px 16px;
}
.alumni-event-day {
font-size: 24px;
}
.alumni-event-content {
padding: 16px 20px;
}
.alumni-event-meta {
flex-direction: column;
gap: 6px;
}
.checkbox-grid {
grid-template-columns: 1fr;
}
.alumni-form {
padding: 20px;
}
.alumni-form .form-actions {
flex-direction: column;
}
.alumni-form .form-actions .btn {
width: 100%;
text-align: center;
}
.alumni-story-image {
height: 180px;
}
.alumni-faq-question {
font-size: 15px;
padding: 14px 16px;
}
.alumni-faq-answer {
padding: 0 16px 14px;
}
}
@media (max-width: 480px) {
.alumni-story-content h3 {
font-size: 18px;
}
.alumni-story-highlights {
flex-direction: column;
gap: 8px;
}
}
/* ============================================
STUDENT PORTAL PAGE STYLES
============================================ */
/* --- Portal Login Buttons --- */
.portal-login-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.portal-login-buttons .btn i {
margin-right: 6px;
}
/* --- Portal Preview Grid --- */
.portal-preview-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.portal-preview-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.portal-preview-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.portal-preview-image {
width: 100%;
height: 200px;
overflow: hidden;
background: #F5F5F5;
}
.portal-preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.portal-preview-content {
padding: 20px 24px;
}
.portal-preview-content h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 6px;
line-height: 1.35;
}
.portal-preview-content p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin: 0;
}
/* --- Sidebar App Badges --- */
.sidebar-app-badges {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.sidebar-app-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
font-size: 13px;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.sidebar-app-badge:hover {
background: var(--primary-dark, #003D2B);
color: var(--white, #ffffff);
}
.sidebar-app-badge i {
font-size: 16px;
}
/* --- Troubleshooting List --- */
.portal-troubleshoot-list {
margin-top: 24px;
}
.portal-troubleshoot-item {
display: flex;
gap: 16px;
padding: 20px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-bottom: 12px;
transition: border-color 0.2s ease;
}
.portal-troubleshoot-item:hover {
border-color: var(--primary, #00543B);
}
.portal-troubleshoot-item:last-child {
margin-bottom: 0;
}
.portal-troubleshoot-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #FFF8E1;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.portal-troubleshoot-icon i {
font-size: 18px;
color: #F0C400;
}
.portal-troubleshoot-content h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 6px;
}
.portal-troubleshoot-content p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin: 0;
}
/* --- Sidebar Downloads --- */
.sidebar-downloads-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-downloads-list li {
margin-bottom: 8px;
}
.sidebar-downloads-list li:last-child {
margin-bottom: 0;
}
.sidebar-downloads-list li a {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--primary, #00543B);
text-decoration: none;
padding: 8px 12px;
background: #F9F9F9;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-downloads-list li a:hover {
background: #E8F5EF;
color: var(--primary-dark, #003D2B);
}
.sidebar-downloads-list li a i {
font-size: 16px;
color: #CC0000;
flex-shrink: 0;
}
/* --- Portal FAQ --- */
.portal-faq-list {
max-width: 800px;
margin: 0 auto;
margin-top: 32px;
}
.portal-faq-item {
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.portal-faq-item:hover {
border-color: var(--primary, #00543B);
}
.portal-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--white, #ffffff);
border: none;
cursor: pointer;
text-align: left;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
transition: background-color 0.2s ease;
}
.portal-faq-question:hover {
background: #F9F9F9;
}
.portal-faq-question:focus {
outline: 2px solid #2376D7;
outline-offset: -2px;
}
.portal-faq-question i {
color: var(--primary, #00543B);
font-size: 14px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.portal-faq-item.active .portal-faq-question i {
transform: rotate(180deg);
}
.portal-faq-answer {
display: none;
padding: 0 20px 16px;
background: var(--white, #ffffff);
}
.portal-faq-item.active .portal-faq-answer {
display: block;
}
.portal-faq-answer p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
margin: 0;
}
.portal-faq-answer a {
color: var(--primary, #00543B);
text-decoration: underline;
}
/* ============================================
STUDENT PORTAL PAGE RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.portal-preview-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.portal-login-buttons {
flex-direction: column;
}
.portal-login-buttons .btn {
width: 100%;
text-align: center;
}
.portal-troubleshoot-item {
flex-direction: column;
gap: 12px;
}
.portal-troubleshoot-icon {
width: 36px;
height: 36px;
}
.sidebar-app-badges {
flex-direction: column;
}
.sidebar-app-badge {
justify-content: center;
}
.portal-faq-question {
font-size: 15px;
padding: 14px 16px;
}
.portal-faq-answer {
padding: 0 16px 14px;
}
.portal-preview-image {
height: 160px;
}
}
/* ============================================
NEWS & EVENTS PAGE STYLES
============================================ */
/* --- Featured News Grid --- */
.news-featured-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
margin-top: 40px;
}
.news-featured-main {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.news-featured-main:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.news-featured-image {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-featured-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 3px;
}
.news-featured-content {
padding: 24px;
}
.news-featured-content h3 {
font-size: 24px;
font-weight: 700;
line-height: 1.30;
margin-bottom: 12px;
}
.news-featured-content h3 a {
color: var(--text-heading, #1A1A1A);
text-decoration: none;
transition: color 0.2s ease;
}
.news-featured-content h3 a:hover {
color: var(--primary, #00543B);
}
.news-featured-content p {
font-size: 15px;
color: var(--text-dark, #333333);
line-height: 1.65;
margin-bottom: 16px;
}
/* --- News Meta --- */
.news-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.news-meta-category {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #E8F5EF;
color: var(--primary, #00543B);
padding: 3px 10px;
border-radius: 3px;
}
.news-meta-date {
font-size: 13px;
color: var(--text-muted, #666666);
display: flex;
align-items: center;
gap: 4px;
}
.news-meta-date i {
font-size: 11px;
}
.news-meta-read {
font-size: 13px;
color: var(--text-muted, #666666);
display: flex;
align-items: center;
gap: 4px;
}
.news-meta-read i {
font-size: 11px;
}
/* --- Featured Side --- */
.news-featured-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.news-featured-side-card {
display: flex;
gap: 14px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
flex: 1;
}
.news-featured-side-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.news-featured-side-image {
flex-shrink: 0;
width: 100px;
height: 80px;
border-radius: 4px;
overflow: hidden;
}
.news-featured-side-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-featured-side-content {
flex: 1;
min-width: 0;
}
.news-featured-side-content h4 {
font-size: 14px;
font-weight: 600;
line-height: 1.40;
margin-bottom: 4px;
}
.news-featured-side-content h4 a {
color: var(--text-heading, #1A1A1A);
text-decoration: none;
transition: color 0.2s ease;
}
.news-featured-side-content h4 a:hover {
color: var(--primary, #00543B);
}
.news-featured-side-content p {
font-size: 12px;
color: var(--text-muted, #666666);
line-height: 1.50;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- News Filters --- */
.news-filters {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.news-filter-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.news-filter-tab {
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
color: var(--text-muted, #666666);
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.news-filter-tab:hover {
border-color: var(--primary, #00543B);
color: var(--primary, #00543B);
}
.news-filter-tab.active {
background: var(--primary, #00543B);
color: var(--white, #ffffff);
border-color: var(--primary, #00543B);
}
.news-filter-tab:focus {
outline: 2px solid #2376D7;
outline-offset: 1px;
}
.news-search-box {
position: relative;
min-width: 250px;
}
.news-search-box i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #666666);
font-size: 14px;
}
.news-search-input {
width: 100%;
padding: 10px 14px 10px 36px;
font-size: 14px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
background: var(--white, #ffffff);
color: var(--text-dark, #333333);
transition: border-color 0.2s ease;
}
.news-search-input:focus {
outline: none;
border-color: var(--primary, #00543B);
box-shadow: 0 0 0 2px rgba(0, 84, 59, 0.15);
}
.news-search-input::placeholder {
color: var(--text-placeholder, #999999);
}
/* --- News Grid --- */
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.news-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.news-card-image {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.news-card:hover .news-card-image img {
transform: scale(1.03);
}
.news-card-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 3px;
}
.news-card-content {
padding: 18px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.news-card-content h3 {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 8px;
}
.news-card-content h3 a {
color: var(--text-heading, #1A1A1A);
text-decoration: none;
transition: color 0.2s ease;
}
.news-card-content h3 a:hover {
color: var(--primary, #00543B);
}
.news-card-content p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 14px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid #eeeeee;
flex-wrap: wrap;
gap: 8px;
}
.news-author {
font-size: 13px;
color: var(--text-muted, #666666);
display: flex;
align-items: center;
gap: 4px;
}
.news-author i {
font-size: 11px;
}
.news-read-more {
font-size: 13px;
font-weight: 600;
color: var(--primary, #00543B);
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: gap 0.2s ease;
}
.news-read-more:hover {
gap: 8px;
}
.news-read-more i {
font-size: 11px;
}
/* --- No Results --- */
.news-no-results {
display: none;
text-align: center;
padding: 48px 24px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-top: 24px;
}
.news-no-results.visible {
display: block;
}
.news-no-results i {
font-size: 48px;
color: var(--text-placeholder, #999999);
margin-bottom: 16px;
}
.news-no-results h3 {
font-size: 21px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 8px;
}
.news-no-results p {
font-size: 15px;
color: var(--text-muted, #666666);
margin-bottom: 20px;
}
/* --- News Footer Actions --- */
.news-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32px;
flex-wrap: wrap;
gap: 12px;
}
.news-count {
font-size: 14px;
color: var(--text-muted, #666666);
}
/* --- Events Grid --- */
.news-events-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.news-event-card {
display: flex;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.news-event-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.news-event-date-block {
flex-shrink: 0;
width: 90px;
background: var(--primary, #00543B);
color: var(--white, #ffffff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 12px;
text-align: center;
}
.news-event-month {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.85;
}
.news-event-day {
font-size: 32px;
font-weight: 700;
line-height: 1.10;
margin: 2px 0;
}
.news-event-year {
font-size: 12px;
font-weight: 400;
opacity: 0.75;
}
.news-event-content {
flex: 1;
padding: 20px 24px;
}
.news-event-tags {
display: flex;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.news-event-type {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #E8F5EF;
color: var(--primary, #00543B);
padding: 3px 10px;
border-radius: 3px;
}
.news-event-free {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #E8F5EF;
color: var(--primary, #00543B);
padding: 3px 10px;
border-radius: 3px;
}
.news-event-students {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #E8F0FE;
color: #0066B3;
padding: 3px 10px;
border-radius: 3px;
}
.news-event-content h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 8px;
line-height: 1.35;
}
.news-event-content p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 12px;
}
.news-event-meta {
display: flex;
gap: 20px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.news-event-meta span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted, #666666);
}
.news-event-meta span i {
color: var(--primary, #00543B);
font-size: 12px;
}
.news-event-speakers {
font-size: 13px;
color: var(--text-dark, #333333);
margin-bottom: 12px;
line-height: 1.50;
}
.news-event-speakers-label {
font-weight: 600;
color: var(--text-heading, #1A1A1A);
}
/* --- Newsletter Form --- */
.news-newsletter-form {
max-width: 520px;
margin: 0 auto;
}
.news-newsletter-input-group {
display: flex;
gap: 8px;
}
.news-newsletter-input {
flex: 1;
padding: 12px 16px;
font-size: 15px;
font-family: "Source Sans Pro", "Open Sans", "Helvetica Neue", Arial, sans-serif;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: var(--white, #ffffff);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.news-newsletter-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.15);
}
.news-newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.news-newsletter-btn {
white-space: nowrap;
background: var(--white, #ffffff);
color: var(--primary, #00543B);
border: none;
font-weight: 600;
}
.news-newsletter-btn:hover {
background: #F2F2F2;
}
.news-newsletter-btn i {
margin-right: 4px;
}
.news-newsletter-consent {
margin-top: 12px;
}
.news-newsletter-consent .checkbox-label {
justify-content: center;
font-size: 13px;
}
.news-newsletter-consent .checkbox-label input[type="checkbox"] {
accent-color: var(--white, #ffffff);
}
.link-gold {
color: #F0C400;
text-decoration: underline;
}
.link-gold:hover {
color: #FFD740;
}
.news-newsletter-message {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 4px;
font-size: 14px;
margin-top: 12px;
}
.news-newsletter-message.visible {
display: flex;
}
.news-newsletter-success {
background: rgba(255, 255, 255, 0.15);
color: #A8E6CF;
border: 1px solid rgba(168, 230, 207, 0.4);
}
.news-newsletter-error {
background: rgba(255, 255, 255, 0.1);
color: #FFB3B3;
border: 1px solid rgba(255, 179, 179, 0.4);
}
/* --- Press Downloads --- */
.news-press-downloads {
margin-top: 28px;
}
.news-press-downloads h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 16px;
}
.news-press-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.news-press-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.news-press-item:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.news-press-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
background: #FFF0F0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.news-press-icon i {
font-size: 20px;
color: #CC0000;
}
.news-press-icon:has(i.fa-file-archive) {
background: #E8F0FE;
}
.news-press-icon i.fa-file-archive {
color: #0066B3;
}
.news-press-icon:has(i.fa-images) {
background: #E8F5EF;
}
.news-press-icon i.fa-images {
color: var(--primary, #00543B);
}
.news-press-info strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 2px;
}
.news-press-info span {
display: block;
font-size: 12px;
color: var(--text-muted, #666666);
}
/* ============================================
NEWS PAGE RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.news-featured-grid {
grid-template-columns: 1fr;
}
.news-grid {
grid-template-columns: repeat(2, 1fr);
}
.news-press-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.news-grid {
grid-template-columns: 1fr;
}
.news-filters {
flex-direction: column;
align-items: stretch;
}
.news-filter-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
flex-wrap: nowrap;
}
.news-filter-tab {
white-space: nowrap;
flex-shrink: 0;
}
.news-search-box {
min-width: 100%;
}
.news-featured-image {
height: 200px;
}
.news-featured-content h3 {
font-size: 20px;
}
.news-featured-side-card {
flex-direction: column;
}
.news-featured-side-image {
width: 100%;
height: 140px;
}
.news-event-card {
flex-direction: column;
}
.news-event-date-block {
width: 100%;
flex-direction: row;
gap: 8px;
padding: 12px 16px;
}
.news-event-day {
font-size: 24px;
}
.news-event-content {
padding: 16px 20px;
}
.news-event-meta {
flex-direction: column;
gap: 6px;
}
.news-newsletter-input-group {
flex-direction: column;
}
.news-newsletter-btn {
width: 100%;
}
.news-footer-actions {
flex-direction: column;
align-items: stretch;
text-align: center;
}
}
@media (max-width: 480px) {
.news-card-image {
height: 150px;
}
.news-card-content h3 {
font-size: 15px;
}
.news-featured-side-content h4 {
font-size: 13px;
}
}
/* --- (Support Page) Sidebar Maintenance — continued --- */
.sidebar-maintenance-date {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--primary, #00543B);
margin-bottom: 2px;
}
.sidebar-maintenance-time {
display: block;
font-size: 12px;
color: var(--text-muted, #666666);
margin-bottom: 4px;
}
.sidebar-maintenance-desc {
display: block;
font-size: 13px;
color: var(--text-dark, #333333);
line-height: 1.50;
}
/* --- Support Team Grid --- */
.support-team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.support-team-card {
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
padding: 28px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.support-team-card:hover {
border-color: var(--primary, #00543B);
box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
}
.support-team-avatar {
width: 56px;
height: 56px;
background: #E8F5EF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.support-team-avatar i {
font-size: 24px;
color: var(--primary, #00543B);
}
.support-team-card h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
margin-bottom: 8px;
}
.support-team-card p {
font-size: 14px;
color: var(--text-dark, #333333);
line-height: 1.60;
margin-bottom: 12px;
}
.support-team-email {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
}
.support-team-email i {
color: var(--primary, #00543B);
font-size: 12px;
}
.support-team-email a {
color: var(--primary, #00543B);
text-decoration: none;
}
.support-team-email a:hover {
text-decoration: underline;
}
/* --- System Status --- */
.system-status-list {
margin-top: 24px;
}
.system-status-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--white, #ffffff);
border: 1px solid var(--border-color, #dddddd);
border-radius: 4px;
margin-bottom: 8px;
transition: border-color 0.2s ease;
}
.system-status-item:hover {
border-color: var(--primary, #00543B);
}
.system-status-item:last-child {
margin-bottom: 0;
}
.system-status-name {
font-size: 15px;
font-weight: 600;
color: var(--text-heading, #1A1A1A);
}
.system-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: 3px;
white-space: nowrap;
}
.status-operational {
background: #E8F5EF;
color: #00543B;
}
.status-maintenance {
background: #FFF8E1;
color: #8B6914;
}
.status-degraded {
background: #FFF0F0;
color: #CC0000;
}
.status-outage {
background: #CC0000;
color: var(--white, #ffffff);
}
.system-status-note {
margin-top: 16px;
font-size: 13px;
color: var(--text-muted, #666666);
display: flex;
align-items: center;
gap: 6px;
}
.system-status-note i {
color: var(--primary, #00543B);
}
.system-status-note a {
color: var(--primary, #00543B);
text-decoration: underline;
}
/* --- Support Page Responsive --- */
@media (max-width: 1024px) {
.support-channels-grid {
grid-template-columns: repeat(2, 1fr);
}
.support-team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.support-channels-grid {
grid-template-columns: 1fr;
}
.support-team-grid {
grid-template-columns: 1fr;
}
.support-faq-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.support-faq-tab {
white-space: nowrap;
flex-shrink: 0;
padding: 10px 16px;
font-size: 14px;
}
.support-form {
padding: 20px;
}
.support-form .form-actions {
flex-direction: column;
}
.support-form .form-actions .btn {
width: 100%;
text-align: center;
}
.system-status-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.support-faq-question {
font-size: 15px;
padding: 14px 16px;
}
.support-faq-answer {
padding: 0 16px 14px;
}
}
/* =============================================================
FACTS & FIGURES PAGE — Component Styles
============================================================= */
/* ---- Utility: Navy / Dark Section ---- */
.section-navy {
background-color: var(--ihu-navy);
}
.section-navy .section-tag {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.text-white {
color: #ffffff !important;
}
.text-white-muted {
color: rgba(255, 255, 255, 0.75) !important;
margin-bottom: 40px;
line-height: 1.6;
}
/* ---- Hero Stats Banner ---- */
.stats-hero-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 48px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius);
overflow: hidden;
}
.stat-hero-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 24px;
background: rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.10);
transition: background 0.2s;
}
.stat-hero-item:nth-child(3n) {
border-right: none;
}
.stat-hero-item:hover {
background: rgba(255, 255, 255, 0.10);
}
.stat-hero-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--ihu-gold);
line-height: 1.1;
display: block;
margin-bottom: 8px;
}
.stat-hero-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.80);
text-align: center;
line-height: 1.4;
}
/* ---- Institutional Overview Grid ---- */
.facts-overview-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 32px;
}
.fact-overview-card {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--bg-light);
border: 1px solid var(--border-color);
border-left: 4px solid var(--ihu-navy);
border-radius: var(--radius);
padding: 20px;
}
.fact-overview-icon {
width: 44px;
height: 44px;
background: var(--ihu-navy);
color: #fff;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.fact-overview-body h3 {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-tertiary);
margin: 0 0 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.fact-overview-value {
display: block;
font-size: 1.125rem;
font-weight: 700;
color: var(--ihu-navy);
margin-bottom: 6px;
}
.fact-overview-body p {
font-size: 0.875rem;
color: var(--text-tertiary);
margin: 0;
line-height: 1.5;
}
/* ---- Facts Split Layout (Student Body) ---- */
.facts-split-layout {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 40px;
align-items: start;
margin-top: 40px;
}
.facts-split-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fact-stat-card {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 20px 16px;
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
}
.fact-stat-card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-card);
}
.fact-stat-icon {
width: 40px;
height: 40px;
background: var(--bg-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
color: var(--ihu-navy);
font-size: 1rem;
}
.fact-stat-number {
font-size: 1.75rem;
font-weight: 700;
color: var(--ihu-navy);
line-height: 1.1;
margin-bottom: 4px;
}
.fact-stat-label {
font-size: 0.8125rem;
color: var(--text-tertiary);
line-height: 1.4;
}
/* ---- Progress Bars (Demographics) ---- */
.facts-split-table h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-primary);
margin: 24px 0 16px;
}
.facts-split-table h3:first-child {
margin-top: 0;
}
.progress-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.progress-bar-item {
width: 100%;
}
.progress-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.progress-bar-label {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
.progress-bar-percent {
font-size: 0.8125rem;
font-weight: 700;
color: var(--ihu-navy);
}
.progress-bar-track {
height: 8px;
background: var(--bg-warm-gray);
border-radius: 99px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--ihu-navy);
border-radius: 99px;
width: 0;
transition: width 0.8s ease;
}
/* ---- Program Stat Cards ---- */
.programs-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.program-stat-card {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 24px 20px;
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
}
.program-stat-card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-card);
}
.program-stat-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy-tint);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--ihu-navy);
font-size: 1.1rem;
}
.program-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--ihu-navy);
line-height: 1.1;
margin-bottom: 4px;
}
.program-stat-label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
}
.program-stat-card p {
font-size: 0.8125rem;
color: var(--text-tertiary);
line-height: 1.5;
margin: 0;
}
/* ---- Programs Summary Bar ---- */
.programs-summary-bar {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 32px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-light);
}
.programs-summary-item {
flex: 1;
min-width: 180px;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
border-right: 1px solid var(--border-color);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
}
.programs-summary-item:last-child {
border-right: none;
}
.programs-summary-item i {
color: #27ae60;
font-size: 1rem;
flex-shrink: 0;
}
/* ---- People Stat Cards ---- */
.people-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
margin-bottom: 32px;
}
.people-stat-card {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 24px 20px;
text-align: center;
}
.people-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--ihu-navy);
line-height: 1.1;
margin-bottom: 6px;
}
.people-stat-label {
font-size: 0.875rem;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.people-stat-bar {
height: 6px;
display: flex;
border-radius: 99px;
overflow: hidden;
}
.people-stat-bar-segment {
height: 100%;
background: var(--ihu-navy);
transition: width 0.8s ease;
width: 0;
}
.people-stat-bar-segment-light {
background: var(--ihu-gold);
}
/* ---- Research Stat Grid ---- */
.research-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.research-stat-item {
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 28px 20px;
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
}
.research-stat-item:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-card);
}
.research-stat-item>i {
font-size: 1.5rem;
color: var(--ihu-navy);
margin-bottom: 14px;
}
.research-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--ihu-navy);
line-height: 1.1;
margin-bottom: 6px;
}
.research-stat-label {
font-size: 0.875rem;
color: var(--text-tertiary);
}
/* ---- Global Stats (Navy section) ---- */
.global-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin: 40px 0 32px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius);
overflow: hidden;
}
.global-stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 20px;
background: rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
}
.global-stat-item:last-child {
border-right: none;
}
.global-stat-icon {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.10);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ihu-gold);
font-size: 1rem;
margin-bottom: 14px;
}
.global-stat-number {
font-size: 1.75rem;
font-weight: 700;
color: var(--ihu-gold);
line-height: 1.1;
margin-bottom: 6px;
}
.global-stat-label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.4;
}
/* ---- Global Regions List ---- */
.global-regions-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 8px;
}
.global-region {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 99px;
padding: 7px 16px;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.80);
transition: background 0.2s;
}
.global-region:hover {
background: rgba(255, 255, 255, 0.14);
}
.global-region i {
color: var(--ihu-gold);
font-size: 0.75rem;
}
/* ---- Digital Infrastructure Cards ---- */
.infra-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.infra-card {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 28px 24px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.infra-card:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-card);
}
.infra-icon {
width: 48px;
height: 48px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 16px;
}
.infra-card h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 10px;
}
.infra-card p {
font-size: 0.875rem;
color: var(--text-tertiary);
line-height: 1.6;
margin: 0;
}
/* ---- Timeline (Key Milestones) ---- */
.timeline {
position: relative;
margin-top: 40px;
padding-left: 0;
}
.timeline::before {
content: '';
position: absolute;
left: 80px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.timeline-item {
display: flex;
gap: 0;
margin-bottom: 32px;
position: relative;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-marker {
position: relative;
width: 80px;
flex-shrink: 0;
padding-top: 4px;
}
.timeline-marker::after {
content: '';
position: absolute;
right: -6px;
top: 6px;
width: 12px;
height: 12px;
background: var(--ihu-navy);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--ihu-navy);
z-index: 1;
}
.timeline-content {
flex: 1;
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 20px 24px;
margin-left: 32px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.timeline-content:hover {
border-color: var(--ihu-navy);
box-shadow: var(--shadow-card);
}
.timeline-year {
display: inline-block;
background: var(--ihu-navy);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius);
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.timeline-content h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px;
}
.timeline-content p {
font-size: 0.875rem;
color: var(--text-tertiary);
line-height: 1.6;
margin: 0;
}
/* ---- Accreditation Cards ---- */
.accreditation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
margin-bottom: 32px;
}
.accreditation-card {
background: #fff;
border: 1px solid var(--border-color);
border-top: 3px solid var(--ihu-navy);
border-radius: var(--radius);
padding: 24px 20px;
text-align: center;
transition: box-shadow 0.2s;
}
.accreditation-card:hover {
box-shadow: var(--shadow-card);
}
.accreditation-icon {
width: 52px;
height: 52px;
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin: 0 auto 16px;
}
.accreditation-card h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 10px;
}
.accreditation-card p {
font-size: 0.8125rem;
color: var(--text-tertiary);
line-height: 1.55;
margin: 0;
}
/* ---- Sidebar: Fact List ---- */
.fact-list {
list-style: none;
margin: 0;
padding: 0;
}
.fact-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
font-size: 0.875rem;
gap: 8px;
}
.fact-list li:last-child {
border-bottom: none;
}
.fact-label {
color: var(--text-tertiary);
}
.fact-value {
font-weight: 600;
color: var(--ihu-navy);
text-align: right;
}
/* ---- Gold Section Tag (for navy sections) ---- */
.section-tag-gold {
background: rgba(201, 168, 76, 0.20);
color: var(--ihu-gold);
border: 1px solid rgba(201, 168, 76, 0.30);
}
/* =============================================================
FACTS & FIGURES — Responsive
============================================================= */
@media (max-width: 1024px) {
.stats-hero-grid {
grid-template-columns: repeat(3, 1fr);
}
.programs-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.people-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.global-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.accreditation-grid {
grid-template-columns: repeat(2, 1fr);
}
.infra-grid {
grid-template-columns: repeat(2, 1fr);
}
.research-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.facts-split-layout {
grid-template-columns: 1fr;
}
.facts-split-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.stats-hero-grid {
grid-template-columns: repeat(2, 1fr);
}
.stat-hero-item:nth-child(3n) {
border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.stat-hero-item:nth-child(2n) {
border-right: none;
}
.stat-hero-number {
font-size: 1.875rem;
}
.facts-overview-grid {
grid-template-columns: 1fr;
}
.programs-stats-grid {
grid-template-columns: 1fr 1fr;
}
.people-stats-grid {
grid-template-columns: 1fr 1fr;
}
.global-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.accreditation-grid {
grid-template-columns: 1fr;
}
.infra-grid {
grid-template-columns: 1fr;
}
.research-stats-grid {
grid-template-columns: 1fr;
}
.programs-summary-bar {
flex-direction: column;
}
.programs-summary-item {
border-right: none;
border-bottom: 1px solid var(--border-color);
}
.programs-summary-item:last-child {
border-bottom: none;
}
.timeline::before {
left: 60px;
}
.timeline-marker {
width: 60px;
}
.timeline-content {
margin-left: 24px;
padding: 16px;
}
}
@media (max-width: 600px) {
.stats-hero-grid {
grid-template-columns: 1fr;
}
.stat-hero-item {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.stat-hero-item:last-child {
border-bottom: none;
}
.programs-stats-grid {
grid-template-columns: 1fr;
}
.people-stats-grid {
grid-template-columns: 1fr;
}
.global-stats-grid {
grid-template-columns: 1fr;
}
.facts-split-stats {
grid-template-columns: 1fr;
}
.timeline::before {
display: none;
}
.timeline-item {
flex-direction: column;
}
.timeline-marker {
display: none;
}
.timeline-content {
margin-left: 0;
}
}
/* =============================================================
ACADEMICS PAGE — academics.php
============================================================= */
/* ── Stats Bar ─────────────────────────────────────────────── */
.acad-stats-bar {
background: var(--bg-white);
border-bottom: 3px solid var(--border-light);
padding: var(--space-xl) 0;
}
.acad-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
text-align: center;
}
.acad-stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
transition: transform 0.25s ease;
}
.acad-stat-item:hover {
transform: scale(1.06);
}
.acad-stat-item i {
font-size: 28px;
color: var(--ihu-navy);
margin-bottom: 4px;
}
.acad-stat-item strong {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.acad-stat-item span {
font-size: 13px;
color: var(--text-muted);
}
/* ── Pillars Grid ───────────────────────────────────────────── */
.acad-pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.acad-pillar-card {
background: var(--bg-white);
border-radius: var(--radius);
padding: var(--space-xl);
border: 1px solid var(--border-light);
border-top: 4px solid var(--ihu-navy);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.acad-pillar-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
transform: translateY(-4px);
}
.acad-pillar-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ihu-navy-tint);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
}
.acad-pillar-icon i {
font-size: 22px;
color: var(--ihu-navy);
}
.acad-pillar-card h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: var(--space-sm);
}
.acad-pillar-card p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.65;
margin-bottom: var(--space-md);
}
.acad-pillar-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.acad-pillar-features li {
font-size: 13px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.acad-pillar-features li i {
color: var(--ihu-gold-dark);
font-size: 12px;
flex-shrink: 0;
}
/* ── Level Overview Cards ───────────────────────────────────── */
.acad-levels-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.acad-level-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-sm);
padding: var(--space-xl) var(--space-lg);
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text-primary);
text-decoration: none;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.acad-level-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
transform: translateY(-4px);
border-color: var(--ihu-navy);
color: var(--text-primary);
}
.acad-level-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
}
.acad-level-icon i {
font-size: 26px;
}
.acad-level-card h3 {
font-size: 17px;
font-weight: 700;
margin: 0;
}
.acad-level-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
border: 1.5px solid;
border-radius: 20px;
padding: 3px 12px;
}
.acad-level-card p {
font-size: 13px;
color: var(--text-tertiary);
margin: 0;
line-height: 1.5;
}
/* ── Filter Bar ─────────────────────────────────────────────── */
.acad-filter-bar {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: var(--space-md);
align-items: end;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.acad-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.acad-filter-group label {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 6px;
}
.acad-filter-group label i {
color: var(--ihu-gold-dark);
}
.acad-filter-group select,
.acad-filter-group input[type="text"] {
padding: 9px 12px;
font-family: var(--font-primary);
font-size: 15px;
color: var(--text-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: var(--bg-off-white);
}
.acad-filter-group select:focus,
.acad-filter-group input[type="text"]:focus {
border-color: var(--ihu-navy);
box-shadow: 0 0 0 2px rgba(27, 42, 74, 0.10);
background: var(--bg-white);
}
/* ── Level Section ──────────────────────────────────────────── */
.acad-level-section {
margin-bottom: var(--space-3xl);
}
.acad-level-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--border-light);
}
.acad-level-header-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.acad-level-header-icon i {
font-size: 20px;
}
.acad-level-header h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 2px;
}
.acad-count {
font-size: 13px;
color: var(--text-muted);
}
/* ── Program Cards Grid ─────────────────────────────────────── */
.acad-programs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.acad-program-card {
display: flex;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.3s ease;
}
.acad-program-card:hover {
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.11);
transform: translateY(-4px);
}
.acad-program-stripe {
width: 5px;
flex-shrink: 0;
}
.acad-program-body {
padding: var(--space-xl);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.acad-program-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.acad-program-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.acad-program-icon i {
font-size: 20px;
}
.acad-program-header h4 {
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
color: var(--text-primary);
line-height: 1.3;
}
.acad-faculty-link {
font-size: 13px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.acad-faculty-link:hover {
text-decoration: underline;
}
.acad-program-desc {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.65;
margin: 0;
}
/* Program Details */
.acad-program-details {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.acad-detail {
background: var(--bg-light);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-xs);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
}
.acad-detail i {
font-size: 14px;
}
.acad-detail strong {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.acad-detail span {
font-size: 11px;
color: var(--text-muted);
}
/* Career Paths */
.acad-careers {
display: flex;
flex-direction: column;
gap: 6px;
}
.acad-careers small {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 5px;
}
.acad-career-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.acad-career-tag {
font-size: 12px;
font-weight: 500;
padding: 3px 10px;
border: 1px solid var(--border-color);
border-radius: 20px;
background: var(--bg-off-white);
color: var(--text-secondary);
}
/* CTA inside card */
.acad-program-actions {
display: flex;
gap: var(--space-sm);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
margin-top: auto;
}
.acad-program-actions .btn {
font-size: 13px;
padding: 7px 16px;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── No Results ──────────────────────────────────────────────── */
.acad-no-results {
text-align: center;
padding: var(--space-3xl) 0;
color: var(--text-muted);
}
.acad-no-results i {
font-size: 40px;
margin-bottom: var(--space-md);
display: block;
}
.acad-no-results h4 {
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
}
/* ── FAQ ─────────────────────────────────────────────────────── */
.acad-faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.acad-faq-item {
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-white);
}
.acad-faq-question {
width: 100%;
background: none;
border: none;
padding: var(--space-lg) var(--space-xl);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
transition: background 0.2s ease, color 0.2s ease;
}
.acad-faq-question:hover {
background: var(--bg-light);
color: var(--ihu-navy);
}
.acad-faq-question[aria-expanded="true"] {
background: var(--ihu-navy-tint);
color: var(--ihu-navy);
}
.acad-faq-question i {
font-size: 14px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.acad-faq-question[aria-expanded="true"] i {
transform: rotate(180deg);
}
.acad-faq-answer {
padding: 0 var(--space-xl) var(--space-lg);
border-top: 1px solid var(--border-light);
}
.acad-faq-answer p {
font-size: 15px;
color: var(--text-tertiary);
line-height: 1.65;
margin: var(--space-md) 0 0;
}
/* ── Page Header for Academics ───────────────────────────────── */
.page-header {
background: linear-gradient(135deg, var(--ihu-navy) 0%, var(--ihu-navy-dark) 100%);
padding: var(--space-3xl) 0;
text-align: center;
}
.page-header-tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--ihu-gold);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-sm);
}
.page-header h1 {
color: var(--text-white);
font-size: 36px;
margin-bottom: var(--space-md);
}
.page-header p {
color: rgba(255, 255, 255, 0.85);
font-size: 17px;
max-width: 680px;
margin: 0 auto;
line-height: 1.60;
}
/* ── Breadcrumbs ─────────────────────────────────────────────── */
.breadcrumbs {
background: var(--bg-light);
border-bottom: 1px solid var(--border-light);
padding: 10px 0;
}
.breadcrumbs-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
}
.breadcrumbs-list li a {
color: var(--text-tertiary);
text-decoration: none;
}
.breadcrumbs-list li a:hover {
color: var(--ihu-navy);
text-decoration: underline;
}
.breadcrumbs-list .separator {
color: var(--text-muted);
margin: 0 2px;
}
.breadcrumbs-list .current {
color: var(--text-primary);
font-weight: 600;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.acad-pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.acad-levels-grid {
grid-template-columns: repeat(2, 1fr);
}
.acad-filter-bar {
grid-template-columns: 1fr 1fr;
}
.acad-filter-search {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.acad-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.acad-pillars-grid {
grid-template-columns: 1fr;
}
.acad-levels-grid {
grid-template-columns: repeat(2, 1fr);
}
.acad-filter-bar {
grid-template-columns: 1fr;
}
.acad-filter-search {
grid-column: auto;
}
.acad-programs-grid {
grid-template-columns: 1fr;
}
.acad-program-details {
grid-template-columns: repeat(2, 1fr);
}
.page-header h1 {
font-size: 26px;
}
.page-header {
padding: var(--space-2xl) 0;
}
}
@media (max-width: 480px) {
.acad-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.acad-levels-grid {
grid-template-columns: 1fr;
}
.acad-program-actions {
flex-direction: column;
}
}
/* =============================================================
FACULTIES PAGE — faculties.php
============================================================= */
/* ── Filter Tabs ─────────────────────────────────────────────── */
.fac-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-bottom: var(--space-2xl);
}
.fac-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-white);
border: 1.5px solid var(--border-color);
border-radius: 30px;
cursor: pointer;
transition: all 0.2s ease;
}
.fac-filter-btn:hover {
border-color: var(--ihu-navy);
color: var(--ihu-navy);
}
.fac-filter-btn.active {
background: var(--ihu-navy);
border-color: var(--ihu-navy);
color: var(--text-white);
}
/* ── Faculty Cards Grid ─────────────────────────────────────── */
.fac-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.fac-card-wrap {
transition: opacity 0.3s ease;
}
.fac-card {
display: flex;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
height: 100%;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.fac-card:hover {
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.11);
transform: translateY(-4px);
}
.fac-card-stripe {
width: 6px;
flex-shrink: 0;
}
.fac-card-body {
padding: var(--space-xl);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Card Header */
.fac-card-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.fac-icon-box {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 22px;
}
.fac-header-text {
flex: 1;
}
.fac-header-text h3 {
font-size: 17px;
font-weight: 700;
margin: 0 0 3px;
color: var(--text-primary);
}
.fac-header-text p {
font-size: 12px;
color: var(--text-muted);
margin: 0;
}
.fac-short-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
flex-shrink: 0;
align-self: flex-start;
}
/* Description */
.fac-desc {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.65;
margin: 0;
}
/* Stats row */
.fac-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.fac-stat {
background: var(--bg-light);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-xs);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.fac-stat strong {
font-size: 14px;
font-weight: 700;
}
.fac-stat span {
font-size: 11px;
color: var(--text-muted);
}
/* Department/Programs blocks */
.fac-section-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.fac-block-label {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 5px;
}
.fac-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fac-tag {
font-size: 12px;
font-weight: 500;
padding: 3px 10px;
border: 1px solid var(--border-color);
border-radius: 20px;
background: var(--bg-off-white);
color: var(--text-secondary);
}
.fac-tag-more {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
}
.fac-programs-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.fac-programs-list li {
font-size: 13px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 7px;
}
.fac-programs-list li i {
font-size: 12px;
flex-shrink: 0;
}
/* Card Footer */
.fac-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
margin-top: auto;
}
.fac-dean {
display: flex;
align-items: center;
gap: 10px;
}
.fac-dean img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid;
}
.fac-dean div {
display: flex;
flex-direction: column;
gap: 1px;
}
.fac-dean strong {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.fac-dean span {
font-size: 11px;
color: var(--text-muted);
}
/* ── Why Grid ────────────────────────────────────────────────── */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.why-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: var(--space-xl);
text-align: center;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.why-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
transform: translateY(-4px);
}
.why-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin: 0 auto var(--space-md);
}
.why-card h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: var(--space-sm);
}
.why-card p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.65;
margin: 0;
}
/* ── Comparison Table ────────────────────────────────────────── */
.fac-table-wrap {
overflow-x: auto;
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.fac-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-white);
font-size: 14px;
}
.fac-table thead tr {
background: var(--ihu-navy);
color: var(--text-white);
}
.fac-table thead th {
padding: 14px 16px;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
}
.fac-table thead th.text-center {
text-align: center;
}
.fac-table tbody tr {
border-bottom: 1px solid var(--border-light);
transition: background 0.15s ease;
}
.fac-table tbody tr:hover {
background: var(--bg-light);
}
.fac-table tbody tr:last-child {
border-bottom: none;
}
.fac-table td {
padding: 14px 16px;
color: var(--text-secondary);
vertical-align: middle;
}
.fac-table td.text-center {
text-align: center;
}
.fac-table-name {
display: flex;
align-items: center;
gap: var(--space-md);
}
.fac-table-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 15px;
}
.fac-table-name strong {
display: block;
font-size: 14px;
color: var(--text-primary);
line-height: 1.3;
}
.fac-table-name small {
font-size: 12px;
color: var(--text-muted);
}
.btn-sm {
padding: 5px 14px;
font-size: 12px;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.fac-grid {
grid-template-columns: 1fr;
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.fac-filter-tabs {
gap: 6px;
}
.fac-filter-btn {
padding: 7px 14px;
font-size: 13px;
}
.fac-stats {
grid-template-columns: repeat(2, 1fr);
}
.why-grid {
grid-template-columns: 1fr;
}
.fac-card-header {
flex-wrap: wrap;
}
.fac-table thead th:nth-child(6) { display: none; }
.fac-table tbody td:nth-child(6) { display: none; }
}
@media (max-width: 480px) {
.fac-card-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.fac-table thead th:nth-child(4),
.fac-table thead th:nth-child(5) { display: none; }
.fac-table tbody td:nth-child(4),
.fac-table tbody td:nth-child(5) { display: none; }
}