/* Reset and Base Styles */
:root {
/* Primary Colors - HSL for better harmony */
--primary-hue: 6;
--primary-sat: 78%;
--primary-light: 57%;
--color-primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
/* #e74c3c */
--color-primary-dark: hsl(var(--primary-hue), var(--primary-sat), 45%);
/* #cd2b19 */
--color-primary-light: hsl(var(--primary-hue), var(--primary-sat), 65%);
/* Secondary/Accent Colors */
--color-secondary: #c0392b;
--color-accent: #ff6b5a;
/* Neutral Colors */
--color-dark: #1a1a1a;
--color-darker: #0f0f0f;
--color-text: #2c3e50;
--color-text-light: #5a6c7d;
--color-bg: #ffffff;
--color-bg-alt: #f8f9fa;
--color-border: #e0e0e0;
/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
--gradient-dark: linear-gradient(135deg, var(--color-darker) 0%, var(--color-dark) 100%);
--gradient-overlay: linear-gradient(135deg, rgba(15, 15, 15, 0.65) 0%, rgba(44, 62, 80, 0.7) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 120px;
/* Adjusted for header */
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-bg);
font-weight: 400;
max-width: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure images are responsive */
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Oswald', sans-serif !important;
line-height: 1.2;
margin-bottom: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text);
}
h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 1px;
}
h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 700;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
}
h4 {
font-size: 1.5rem;
font-weight: 600;
}
p {
margin-bottom: 1.25rem;
color: var(--color-text-light);
font-size: 1.05rem;
}
/* Header */
.header {
background: var(--gradient-dark);
box-shadow: var(--shadow-lg);
position: sticky;
top: 0;
z-index: 10000;
/* MUST be higher than all content below */
border-bottom: 1px solid rgba(192, 57, 43, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: visible;
/* Allow dropdowns to extend outside header */
}
/* MOBILE-FIRST: Default header padding for mobile */
.header-main {
padding: 1rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
/* Desktop: More padding on large screens */
@media screen and (min-width: 1024px) {
.header-main {
padding: 2.5rem 0;
gap: 3rem;
}
}
.logo-section {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
text-decoration: none;
color: inherit;
}
/* MOBILE-FIRST: Default logo size for mobile */
.logo {
width: 80px;
height: 80px;
object-fit: contain;
object-position: center center;
background-color: #ffffff;
/* keep logo visible on dark header */
padding: 6px;
border-radius: var(--radius-md);
border: 2px solid var(--color-primary);
box-shadow: var(--shadow-md);
filter: none !important;
/* never invert the brand logo */
z-index: 1000;
transition: var(--transition-normal);
}
.logo:hover {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
/* Desktop: Larger logo on large screens */
@media screen and (min-width: 1024px) {
.logo {
width: 140px;
height: 140px;
padding: 10px;
border-radius: 14px;
border: 3px solid #e74c3c;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
}
.brand-info {
display: flex;
flex-direction: column;
justify-content: center;
}
/* MOBILE-FIRST: Hide brand name by default (mobile) */
.brand-name {
display: none;
font-size: 3.5rem;
margin: 0;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
line-height: 1.2;
}
/* Desktop: Show brand name on large screens */
@media screen and (min-width: 1024px) {
.brand-name {
display: block;
}
}
.tagline {
font-size: 1.1rem;
color: #ecf0f1;
margin: 0;
font-style: italic;
font-weight: 400;
opacity: 0.9;
}
/* Navigation */
.navigation {
position: relative;
}
/* MOBILE-FIRST: Show hamburger by default */
.nav-toggle {
display: flex;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 4px;
padding: 12px;
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.nav-toggle span {
width: 25px;
height: 3px;
background-color: #ffffff;
transition: 0.3s;
pointer-events: none;
}
/* MOBILE-FIRST: Hide nav-menu by default (mobile) */
.nav-menu {
display: none;
list-style: none;
gap: 1.25rem;
align-items: center;
margin: 0;
padding: 0;
justify-content: flex-end;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* This is handled by the base .nav-toggle above and desktop override */
/* Explicit mobile device targeting - covers all mobile sizes ONLY */
@media screen and (max-width: 1023px) {
.nav-menu {
display: none !important;
visibility: hidden !important;
}
.nav-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* DESKTOP ONLY: Show nav-menu on large screens, hide hamburger - HIGHEST PRIORITY - MUST COME AFTER MOBILE */
@media screen and (min-width: 1024px) {
.nav-menu {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
left: auto !important;
}
.nav-toggle {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Desktop: Show brand name */
.brand-name {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
font-size: 3.5rem !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
.brand-info {
display: flex !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
/* Desktop: Larger logo */
.logo {
width: 140px !important;
height: 140px !important;
padding: 10px !important;
border-radius: 14px !important;
border: 3px solid #e74c3c !important;
}
/* Desktop: Larger hero title */
.hero-title {
font-size: 5rem !important;
letter-spacing: 3px !important;
line-height: 1.15 !important;
}
/* Desktop: More header padding */
.header-main {
padding: 2.5rem 0 !important;
gap: 3rem !important;
}
/* Desktop: Horizontal registration banner */
.registration-banner-content {
flex-direction: row !important;
align-items: center !important;
}
.registration-banner-buttons {
flex-direction: row !important;
width: auto !important;
}
.btn-register,
.btn-view-courses {
width: auto !important;
padding: 0.7rem 1.5rem !important;
}
/* Desktop: Horizontal hero buttons */
.hero-buttons {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
width: auto !important;
}
.hero-buttons .btn {
width: auto !important;
max-width: none !important;
padding: 0.95rem 2rem !important;
font-size: 0.95rem !important;
}
/* Desktop: Larger hero section */
.hero {
padding: 8rem 0 !important;
min-height: 600px !important;
}
/* Desktop: Ensure brand name and logo don't overlap with nav */
.logo-section {
flex-shrink: 0 !important;
min-width: 0 !important;
max-width: none !important;
}
.brand-info {
flex-shrink: 0 !important;
min-width: 0 !important;
}
.brand-name {
white-space: nowrap !important;
overflow: visible !important;
}
/* Desktop: Ensure navigation doesn't overlap brand */
.navigation {
flex-shrink: 1 !important;
min-width: 0 !important;
}
.nav-menu {
flex-wrap: nowrap !important;
}
}
.nav-item {
position: relative;
}
.nav-link {
text-decoration: none;
color: #ffffff;
font-weight: 600;
padding: 0.75rem 0;
transition: var(--transition-normal);
position: relative;
letter-spacing: 0.5px;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
color: var(--color-accent);
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
box-shadow: 0 2px 4px rgba(231, 76, 60, 0.4);
}
.nav-link.cta-link {
background: var(--gradient-primary);
color: white !important;
padding: 0.6rem 1.2rem !important;
border-radius: var(--radius-md);
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.35);
transition: var(--transition-normal);
border: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.85rem;
}
.nav-link.cta-link:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(192, 57, 43, 0.5);
filter: brightness(1.1);
}
/* ========================================
DROPDOWN MENU SYSTEM - REFACTOR v2
Using position: fixed to escape stacking contexts
======================================== */
/* Base dropdown container */
.dropdown {
position: relative;
}
/* Desktop dropdown styles - ONLY apply on desktop */
@media screen and (min-width: 1024px) {
.dropdown-menu {
/* Use fixed positioning to escape all stacking contexts */
position: fixed;
/* Hidden by default */
opacity: 0;
visibility: hidden;
pointer-events: none;
display: block;
/* Styling */
background: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 1rem 0;
min-width: 220px;
max-width: 280px;
width: auto;
box-shadow: var(--shadow-xl);
/* Stacking - MUST be above everything */
z-index: 999999;
/* Transitions */
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
transform: translateY(10px);
}
/* Show dropdown on hover - positioning handled by JS */
.dropdown:hover .dropdown-menu,
.dropdown.desktop-open .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Desktop dropdown links */
.dropdown-link {
display: block;
padding: 0.75rem 1.5rem;
margin: 0.25rem 0.5rem;
color: #ffffff;
background: transparent;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
border-radius: var(--radius-sm);
transition: var(--transition-fast);
white-space: nowrap;
}
.dropdown-link:hover {
background: var(--gradient-primary);
color: white;
transform: translateX(4px);
box-shadow: var(--shadow-sm);
}
}
/* Registration Banner - MUST NOT create stacking context that blocks dropdowns */
.registration-banner {
background: var(--gradient-primary);
color: white;
padding: 1rem 0;
position: relative;
overflow: hidden;
}
.registration-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==');
opacity: 0.3;
}
.registration-banner-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.registration-banner-text {
flex: 1;
min-width: 0;
}
.registration-banner-inner {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.registration-badge {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.registration-banner-text strong {
font-size: 1.1rem;
display: block;
letter-spacing: 0.5px;
}
.registration-banner-text p {
margin: 0;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.registration-banner-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.btn-register {
background: white;
color: var(--color-primary);
padding: 0.7rem 1.5rem;
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 700;
white-space: nowrap;
transition: var(--transition-normal);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-register:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
color: var(--color-secondary);
}
.btn-view-courses {
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.7rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
transition: var(--transition-normal);
}
.btn-view-courses:hover {
background: rgba(255, 255, 255, 0.2);
border-color: white;
transform: translateY(-2px);
}
/* Hero Section - Mobile-first */
.hero {
background-image: var(--gradient-overlay), url('assets/Silicon_Mountain.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
align-items: center;
z-index: 1;
/* Below header (10000) and dropdowns (99999) */
}
/* Desktop: Larger hero section */
@media screen and (min-width: 1024px) {
.hero {
padding: 10rem 0;
min-height: 700px;
background-attachment: fixed;
/* Parallax effect */
}
}
.hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* MOBILE-FIRST: Default hero title size for mobile */
.hero-title {
font-size: clamp(2.5rem, 6vw, 5.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
color: #ffffff;
}
/* Desktop: Larger hero title on large screens */
@media screen and (min-width: 1024px) {
.hero-title {
letter-spacing: 4px;
}
}
.hero-subtitle {
font-size: clamp(1.1rem, 2vw, 1.5rem);
margin-bottom: 2.5rem;
opacity: 0.95;
line-height: 1.6;
color: #f0f0f0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
font-weight: 400;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2.5rem;
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 700;
text-align: center;
transition: var(--transition-normal);
border: 2px solid transparent;
cursor: pointer;
font-size: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--gradient-primary);
color: white;
border: none;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(231, 76, 60, 0.5);
filter: brightness(1.1);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.btn-secondary:hover {
background-color: white;
color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
font-size: 0.95rem;
padding: 0.85rem 2rem;
}
.btn-outline:hover {
background-color: var(--color-primary);
color: white;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
transform: translateY(-2px);
}
/* Page Header */
.page-header {
padding: 6rem 0 3rem 0;
background-color: var(--color-bg-alt);
}
/* Image headers (used on various pages) */
.page-header.image-header {
background-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.page-header.image-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-overlay);
}
.page-header.image-header .container {
position: relative;
z-index: 1;
}
.page-header.image-header .page-title {
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-header.image-header .page-description {
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Specific header image helpers */
.worship-header {
background-image: url('assets/hero image-worship room.png');
}
.scripture-header {
background-image: url('assets/KaufmannManuscript.jpg');
}
.academics-header {
background-image: url('assets/students in lecture.png');
}
.academics-header-bg {
background-image: url('assets/Great_Bible,_Henry_VIII\'s_copy,_London,_1540_-_British_Library,_London_-_DSC00562.jpg');
}
.about-header {
background-image: url('assets/hero image-worship room.png');
}
.chapel-header {
background-image: url('assets/chapel building.png');
}
/* ========================================
WHY FRBI SECTION - Consistent across pages
======================================== */
.why-frbi-header {
margin-bottom: 3rem;
}
/* Layout with optional side image */
.why-frbi-content {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: stretch;
}
.why-frbi-image {
position: relative;
align-self: stretch;
}
.why-frbi-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
display: block;
transition: all 0.3s ease;
}
.why-frbi-image img:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
/* Grid of feature cards within Why FRBI */
.why-frbi-content .features-grid,
.why-content .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 0;
padding: 0;
}
/* Enhanced feature cards for Why FRBI section */
#why-frbi .feature-card {
background: white;
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-left: 5px solid var(--color-primary);
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
#why-frbi .feature-card::after {
content: '';
position: absolute;
bottom: -40px;
right: -40px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(231, 76, 60, 0.08) 0%, transparent 70%);
pointer-events: none;
transition: var(--transition-normal);
}
#why-frbi .feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-left-color: var(--color-secondary);
}
#why-frbi .feature-card:hover::after {
transform: scale(1.2);
opacity: 0.8;
}
#why-frbi .feature-card h3,
#why-frbi .feature-card h4 {
color: var(--color-text);
font-size: 1.35rem;
margin-bottom: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#why-frbi .feature-card p {
color: var(--color-text-light);
font-size: 1.05rem;
line-height: 1.7;
}
/* Responsive layout */
@media (max-width: 1024px) {
.why-frbi-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.why-frbi-image {
position: static;
max-width: 100%;
margin: 0 auto 2rem;
}
.why-frbi-image img,
.why-frbi-image picture {
width: 100%;
height: auto;
display: block;
}
.why-frbi-content .features-grid {
grid-template-columns: 1fr;
}
}
/* Optimize image aspect ratio for portrait mode */
@media (max-width: 1024px) and (orientation: portrait) {
.why-frbi-image {
max-width: 100%;
}
.why-frbi-image img,
.why-frbi-image picture img {
border-radius: 12px;
max-height: 280px;
object-fit: cover;
object-position: center;
}
}
@media (max-width: 768px) and (orientation: portrait) {
.why-frbi-image img,
.why-frbi-image picture img {
max-height: 250px;
}
}
/* Testimonials with background accent */
.testimonials-section {
background-image: linear-gradient(to bottom, rgba(248, 249, 250, 0.3), rgba(248, 249, 250, 0.8)), url('assets/photo-1495582630316-0b481a069ce3.avif');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Mission/Vision/Purpose page layout - CONSISTENT 300px sidebar */
.mission-page-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
align-items: start;
}
.mission-text-content {
flex: 1;
}
.mission-image-accent {
position: sticky;
top: 140px;
align-self: start;
}
.mission-image-accent img,
.mission-image-accent .accent-image {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
@media (max-width: 992px) {
.mission-page-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.mission-image-accent {
position: static;
max-width: 400px;
margin: 0 auto;
}
}
/* Admissions header above content grid */
.admissions-header {
margin: 2rem 0 1.5rem;
}
.admissions-header h3 {
font-size: 1.75rem;
color: #2c3e50;
font-weight: 600;
}
/* Admissions content with side image - aligns only with requirement cards */
.admissions-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 3rem;
align-items: stretch;
}
.admissions-content .requirements {
display: flex;
flex-direction: column;
gap: 2rem;
}
.admissions-image-sidebar {
position: relative;
align-self: stretch;
}
.admissions-sidebar-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
display: block;
}
.admissions-process-section {
margin-top: 3rem;
}
@media (max-width: 1024px) {
.admissions-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.admissions-image-sidebar {
position: static;
max-width: 450px;
margin: 0 auto;
order: -1;
/* Show image above requirements on mobile */
}
}
/* Mentorship banner */
.mentorship-banner {
padding: 4rem 0;
background-image: var(--gradient-overlay), url('assets/students in lecture.png');
background-size: cover;
background-position: center;
color: white;
border-radius: 16px;
margin: 3rem 0;
}
.mentorship-banner h3 {
color: #ffffff;
margin-bottom: 0.75rem;
font-size: 2rem;
}
.mentorship-banner p {
color: rgba(255, 255, 255, 0.92);
max-width: 900px;
margin: 0 auto 1.5rem;
}
.mentorship-banner .btn {
background-color: #e74c3c;
border-color: #e74c3c;
color: white;
}
.mentorship-banner .btn:hover {
background-color: #c0392b;
border-color: #c0392b;
}
.page-title {
text-align: center;
margin-bottom: 1rem;
color: #2c3e50;
font-size: 2.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.page-description {
text-align: center;
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto 2rem;
color: #5a6c7d;
line-height: 1.6;
}
/* Sections */
.section {
padding: 6rem 0;
}
.section-alt {
background-color: var(--color-bg-alt);
}
.section-title {
text-align: center;
margin-bottom: 1.5rem;
color: var(--color-text);
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-description {
text-align: center;
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto 3.5rem;
color: var(--color-text-light);
line-height: 1.7;
}
/* About Section */
.about-content {
max-width: 800px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
text-align: center;
padding: 2.5rem 2rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* Process Steps Styling */
.process-steps {
margin-top: 4rem;
text-align: center;
}
.process-steps h3 {
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 3rem;
position: relative;
}
.process-steps h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(135deg, #8B5A3C, #D4A574);
border-radius: 2px;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.step {
text-align: center;
padding: 2rem;
position: relative;
}
/* Removed dark variant - keeping all steps consistent */
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #D4AF37, #FFD700);
color: #2c3e50;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 1.5rem;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
border: 2px solid rgba(255, 215, 0, 0.3);
}
.step h4 {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.step p {
color: #666;
line-height: 1.6;
font-size: 0.95rem;
}
/* Responsive design for process steps */
@media (max-width: 767px) {
.steps-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.step-number {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.process-steps h3 {
font-size: 1.75rem;
}
}
@media (min-width: 768px) {
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 30px;
right: -50%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #8B5A3C, #D4A574);
z-index: -1;
}
.steps-grid {
position: relative;
}
}
.feature-card h3 {
font-size: 1.3rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
line-height: 1.3;
}
.feature-card p {
color: #5a6c7d;
margin: 0;
}
/* ========================================
REUSABLE CARD COMPONENT SYSTEM
========================================
DESIGN PHILOSOPHY:
- Consistent card-based design across all sections
- Subtle depth through shadows and gradients
- Smooth, professional interactions
- Accessible color contrast
USAGE EXAMPLES:
Basic Card:
Card with Top Accent:
...
Card with Left Accent:
...
Textured Card (subtle pattern):
...
CURRENTLY IMPLEMENTED IN:
- Statement of Faith cards (.faith-point)
- Purpose/Vision/Mission sections
- Why FRBI feature cards
- Feature cards throughout site
======================================== */
/* Base Card Styles - Foundation for all card-based content */
.card-base {
background: white;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.card-base:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
/* Card Accent Styles */
.card-accent-top {
border-top: 4px solid #e74c3c;
}
.card-accent-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}
.card-accent-left {
border-left: 5px solid #e74c3c;
}
/* Card with Subtle Texture Pattern */
.card-textured::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(231, 76, 60, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(192, 57, 43, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.card-textured>* {
position: relative;
z-index: 1;
}
/* Card Typography */
.card-title {
color: #2c3e50;
font-size: 1.35rem;
margin-bottom: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-content {
color: #5a6c7d;
font-size: 1.05rem;
line-height: 1.8;
}
/* ========================================
STATEMENT OF FAITH SECTION
======================================== */
/* Enhanced section with subtle background */
#statement-of-faith {
position: relative;
background: linear-gradient(135deg, var(--color-bg-alt) 0%, #e9ecef 100%);
}
#statement-of-faith::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,'),
radial-gradient(circle at 10% 20%, rgba(231, 76, 60, 0.04) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(192, 57, 43, 0.04) 0%, transparent 40%);
background-size: 100% 100%, 100% 100%, 100% 100%;
background-position: bottom, top left, top right;
pointer-events: none;
}
#statement-of-faith .container {
position: relative;
z-index: 1;
}
.faith-content {
max-width: 900px;
margin: 0 auto;
}
.faith-intro {
font-size: 1.2rem;
line-height: 1.9;
margin-bottom: 2rem !important;
padding: 2.5rem;
background: white;
border-radius: var(--radius-lg);
border-left: 5px solid var(--color-primary);
box-shadow: var(--shadow-md);
}
.faith-link {
margin: 2.5rem 0 !important;
text-align: center;
}
.faith-description {
margin-top: 2rem !important;
margin-bottom: 1.5rem !important;
font-size: 1.1rem;
color: var(--color-text-light);
text-align: center;
font-weight: 500;
}
.faith-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.faith-point {
background: white;
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.faith-point:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.faith-point h4 {
color: var(--color-text);
font-size: 1.35rem;
margin-bottom: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.faith-point p {
margin: 0;
font-size: 1.05rem;
line-height: 1.8;
color: var(--color-text-light);
}
/* ========================================
PURPOSE, VISION, MISSION SECTIONS
======================================== */
/* Consistent card-based design for all three sections */
.purpose-content,
.vision-content,
.mission-content {
max-width: 800px;
margin: 0 auto;
}
.purpose-summary,
.vision-summary,
.mission-summary {
font-size: 1.2rem;
line-height: 1.9;
color: var(--color-text);
margin-bottom: 2rem !important;
padding: 2.5rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-left: 5px solid var(--color-primary);
position: relative;
transition: var(--transition-normal);
overflow: hidden;
}
.purpose-summary:hover,
.vision-summary:hover,
.mission-summary:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
/* Add subtle background pattern */
.purpose-summary::after,
.vision-summary::after,
.mission-summary::after {
content: '';
position: absolute;
top: 0;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(231, 76, 60, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.purpose-link,
.vision-link,
.mission-link {
text-align: center;
margin-top: 1.5rem;
}
/* Tighter spacing between these related sections */
#purpose.section {
padding: 4rem 0 3rem 0;
}
#vision.section {
padding: 3rem 0;
}
#mission.section {
padding: 3rem 0 4rem 0;
}
/* Archive Articles */
.archive-content {
max-width: 900px;
margin: 0 auto;
}
.archive-intro {
text-align: center;
margin-bottom: 3rem;
font-style: italic;
color: #6c757d;
}
.faculty-section {
margin-bottom: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid #e9ecef;
}
.faculty-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.faculty-name {
color: #e74c3c;
margin-bottom: 2rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e74c3c;
display: inline-block;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.article-item {
padding: 2rem;
background-color: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-left: 4px solid var(--color-primary);
transition: var(--transition-normal);
}
.article-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--color-secondary);
}
.article-item h3 {
color: var(--color-text);
margin-bottom: 1rem;
font-size: 1.35rem;
font-weight: 700;
}
.article-item p {
color: var(--color-text-light);
margin-bottom: 1rem;
line-height: 1.7;
}
.article-meta {
display: inline-block;
background-color: #f8f9fa;
color: #495057;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.article-description {
margin-bottom: 1rem !important;
}
.article-toggle {
background-color: #e74c3c;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
margin-top: 1rem;
transition: background-color 0.3s ease;
}
.article-toggle:hover {
background-color: #c0392b;
}
.article-content {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e9ecef;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding-top 0.3s ease;
}
.article-content.expanded {
max-height: 1000px;
padding-top: 1.5rem;
}
.article-content.collapsed {
max-height: 0;
padding-top: 0;
}
.article-content p {
margin-bottom: 1rem;
line-height: 1.6;
}
.article-content p:last-child {
margin-bottom: 0;
}
.archive-note {
margin-top: 3rem;
padding: 2rem;
background-color: #f8f9fa;
border-radius: 8px;
text-align: center;
font-style: italic;
color: #6c757d;
}
/* Academic Calendar */
.calendar-container {
max-width: 1000px;
margin: 0 auto;
}
.semester-calendar {
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
margin-bottom: 3rem;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.semester-title {
color: var(--color-text);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 2rem;
text-align: center;
position: relative;
}
.semester-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
}
.calendar-events {
display: grid;
gap: 1.5rem;
}
.event-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, var(--color-bg-alt) 0%, #ffffff 100%);
border-radius: var(--radius-md);
border-left: 5px solid #3498db;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.event-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, rgba(52, 152, 219, 0.02) 100%);
pointer-events: none;
}
.event-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-left-color: #2980b9;
}
.event-date {
flex-shrink: 0;
text-align: center;
min-width: 80px;
}
.event-date .month {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #e74c3c;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
.event-date .day {
display: block;
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
line-height: 1;
}
.event-details {
flex: 1;
}
.event-details h4 {
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.event-details p {
color: #5a6c7d;
line-height: 1.5;
margin: 0;
font-size: 0.95rem;
}
.special-events {
background: #f8f9fa;
border-radius: 16px;
padding: 2.5rem;
margin-top: 2rem;
border: 1px solid #e9ecef;
}
.special-events .events-title {
color: #2c3e50;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 2rem;
text-align: center;
position: relative;
}
.special-events .events-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: #e74c3c;
border-radius: 2px;
}
.special-event {
background: white;
border-radius: 12px;
padding: 1.75rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border-left: 4px solid #e74c3c;
transition: all 0.3s ease;
}
.special-event:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateX(4px);
}
.special-event:last-child {
margin-bottom: 0;
}
.special-event h4 {
color: #2c3e50;
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.special-event .event-date {
color: #e74c3c;
font-weight: 700;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.special-event p {
color: #5a6c7d;
line-height: 1.7;
margin: 0;
font-size: 0.95rem;
}
/* Programs Grid */
.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
padding-top: 1rem;
}
.program-card {
padding: 2.5rem;
background-color: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
border: 2px solid transparent;
position: relative;
overflow: visible;
}
.program-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.program-card.featured {
border-color: var(--color-primary);
background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
box-shadow: var(--shadow-lg);
margin-top: 1rem;
}
.program-card.featured:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-8px);
}
.program-badge {
position: absolute;
top: -15px;
right: 20px;
background: var(--gradient-primary);
color: white;
padding: 0.5rem 1.25rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
box-shadow: var(--shadow-md);
letter-spacing: 0.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
z-index: 10;
}
.program-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border-color: #e74c3c;
}
.program-card h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.program-card p {
color: #5a6c7d;
margin-bottom: 1.5rem;
}
.program-description {
font-size: 0.95rem;
line-height: 1.7;
}
.program-details {
margin-bottom: 2rem;
padding: 1rem 0;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.program-detail {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.95rem;
}
.detail-label {
color: #6c757d;
font-weight: 500;
}
.detail-value {
color: #2c3e50;
font-weight: 600;
}
.program-card .btn {
margin-top: 0.5rem;
width: 100%;
}
/* CTA Section */
.cta-section {
text-align: center;
padding: 3rem;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
border-radius: 16px;
}
.cta-section h3 {
color: white;
margin-bottom: 1rem;
}
.cta-section p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
font-size: 1.125rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Faculty Section */
.faculty-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0;
position: relative;
overflow: hidden;
scroll-margin-top: 100px;
}
.faculty-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.faculty-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
pointer-events: none;
}
.faculty-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.faculty-header .section-title {
font-size: 3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1.5rem;
position: relative;
}
.faculty-header .section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
border-radius: 2px;
}
.faculty-header .section-description {
font-size: 1.25rem;
color: #5a6c7d;
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.6;
}
.faculty-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 2rem;
}
.stat-item {
text-align: center;
padding: 1.5rem;
background: white;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
min-width: 150px;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: #e74c3c;
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: #5a6c7d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Faculty Showcase */
.faculty-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 2;
}
.faculty-member {
background: white;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: visible;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
border: 2px solid #f0f4f8;
}
.faculty-member:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
border-color: #e74c3c;
}
.faculty-member.featured {
border: 3px solid #e74c3c;
box-shadow: 0 12px 40px rgba(228, 76, 60, 0.15);
}
.faculty-member.featured:hover {
box-shadow: 0 20px 56px rgba(228, 76, 60, 0.25);
}
.faculty-image-container {
position: relative;
width: 160px;
height: 160px;
margin: 2.5rem auto 0;
border-radius: 50%;
overflow: hidden;
border: 5px solid #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.faculty-member.featured .faculty-image-container {
border-color: #e74c3c;
box-shadow: 0 8px 24px rgba(228, 76, 60, 0.2);
}
.faculty-image {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.faculty-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.4s ease;
border-radius: 0;
}
.faculty-member:hover .faculty-image img {
transform: scale(1.08);
}
.faculty-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 2rem 1.5rem 1rem;
text-align: center;
}
.faculty-role {
font-size: 0.9rem;
font-weight: 600;
opacity: 0.9;
margin-bottom: 0.25rem;
}
.faculty-specialty {
font-size: 0.8rem;
opacity: 0.8;
}
.faculty-badge {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
padding: 0.5rem 1.25rem;
border-radius: 24px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(228, 76, 60, 0.4);
text-transform: uppercase;
}
.faculty-info {
padding: 2rem 2.5rem 2.5rem;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
}
.faculty-name {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.75rem;
line-height: 1.3;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Override for Bent Christiansen's MTh designation - preserve lowercase 'h' */
.faculty-name.mth-override {
text-transform: none;
}
.faculty-title {
color: #e74c3c;
font-weight: 600;
margin-bottom: 1.25rem;
font-size: 0.95rem;
line-height: 1.4;
}
.faculty-credentials {
color: #5a6c7d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.5rem;
font-style: italic;
}
.faculty-description {
color: #5a6c7d;
line-height: 1.7;
margin-bottom: auto;
font-size: 0.95rem;
text-align: center;
}
.faculty-highlights {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
justify-content: center;
}
.faculty-profile-link {
margin-top: 1.75rem;
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid #f0f4f8;
}
/* Faculty Profile Page Styles */
.faculty-profile-section {
padding: 4rem 0;
background-color: #f8f9fa;
}
.faculty-profile-header {
margin-bottom: 3rem;
text-align: center;
}
.faculty-profile {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 3rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.faculty-profile-image {
text-align: center;
}
.faculty-profile-image img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #e9ecef;
}
.faculty-profile-content {
padding-left: 2rem;
}
.faculty-profile-name {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.faculty-profile-title {
font-size: 1.25rem;
color: #6c757d;
margin-bottom: 2rem;
font-style: italic;
}
.faculty-profile-credentials,
.faculty-profile-bio,
.faculty-profile-highlights {
margin-bottom: 2rem;
}
.faculty-profile-credentials h3,
.faculty-profile-bio h3,
.faculty-profile-highlights h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 1rem;
border-bottom: 2px solid #e9ecef;
padding-bottom: 0.5rem;
}
.faculty-profile-bio p {
line-height: 1.8;
color: #495057;
margin-bottom: 1rem;
}
.highlights-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.faculty-profile-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Responsive Design for Faculty Profiles */
@media (max-width: 768px) {
.faculty-profile {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
}
.faculty-profile-image img {
width: 200px;
height: 200px;
}
.faculty-profile-content {
padding-left: 0;
text-align: center;
}
.faculty-profile-name {
font-size: 2rem;
}
}
/* Application Page Styles */
.application-hero {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 6rem 0;
text-align: center;
}
.application-hero-content {
max-width: 800px;
margin: 0 auto;
}
.application-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: white;
}
.application-subtitle {
font-size: 1.25rem;
margin-bottom: 3rem;
opacity: 0.9;
line-height: 1.6;
}
.application-hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-large {
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
}
.application-process {
padding: 5rem 0;
background: #f8f9fa;
}
.process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.process-step {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 1.5rem;
position: relative;
}
.process-step h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}
.process-step p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.step-link {
color: #3498db;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.step-link:hover {
color: #2980b9;
}
.step-note {
font-size: 0.9rem;
color: #868e96;
font-style: italic;
margin-top: 1rem !important;
}
.application-forms-section,
.reference-forms-section {
padding: 5rem 0;
}
.forms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.form-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.form-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.form-card.primary {
border-color: #3498db;
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}
.form-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
}
.form-icon svg {
width: 40px;
height: 40px;
}
.form-card h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}
.form-card p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 2rem;
}
.application-contact {
padding: 5rem 0;
background: #f8f9fa;
}
.contact-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.contact-method {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.contact-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.contact-icon svg {
width: 28px;
height: 28px;
}
.contact-info h3 {
font-size: 1.25rem;
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.contact-info p {
color: #6c757d;
margin-bottom: 0.25rem;
line-height: 1.5;
}
.contact-info a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info a:hover {
color: #2980b9;
}
/* Veterans Benefits - Minimal */
#veterans-benefits .section-title {
font-size: 1.75rem;
}
.veterans-content {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.veterans-summary {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid #e9ecef;
}
.veterans-summary .section-description {
font-size: 1rem;
color: #5a6c7d;
margin-bottom: 1.25rem;
line-height: 1.6;
}
.veterans-summary>p {
font-size: 0.95rem;
color: #6c757d;
margin-bottom: 1.25rem;
}
.veterans-contact {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
}
.veterans-contact p {
margin-bottom: 0.5rem;
color: #6c757d;
font-size: 0.9rem;
}
/* Financial Aid Message */
.financial-aid-message {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 3rem;
border-left: 5px solid #2196f3;
box-shadow: 0 4px 16px rgba(33, 150, 243, 0.1);
}
.aid-message-content h3 {
color: #1976d2;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.aid-message-content p {
color: #2c3e50;
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.aid-message-content p:last-child {
margin-bottom: 0;
}
.aid-message-content strong {
color: #1565c0;
font-weight: 600;
}
/* Admissions Section */
#admissions {
padding: 5rem 0;
}
.admissions-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
padding: 3rem;
margin-bottom: 4rem;
text-align: center;
}
.application-cta {
max-width: 600px;
margin: 0 auto;
}
.application-cta h3 {
color: #2c3e50;
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.application-cta p {
color: #5a6c7d;
font-size: 1.125rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.application-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.admissions-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
margin-bottom: 3rem;
align-items: start;
}
.admissions-column h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 2rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e74c3c;
padding-bottom: 0.5rem;
}
.requirements {
display: grid;
gap: 2rem;
}
.requirement h4 {
color: #e74c3c;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
text-align: left;
}
.requirement ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.requirement li {
padding: 0.4rem 0;
padding-left: 1.5rem;
position: relative;
color: #5a6c7d;
line-height: 1.5;
text-align: left;
}
.requirement li::before {
content: '✓';
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
}
/* Application Process Ordered List */
.admissions-column ol.process-steps {
list-style: decimal;
padding-left: 1.5rem;
margin: 0 0 2rem 0;
text-align: left;
}
.admissions-column ol.process-steps li {
margin-bottom: 1rem;
padding-left: 0.5rem;
text-align: left;
}
.admissions-column ol.process-steps li strong {
display: block;
color: #2c3e50;
font-weight: 600;
margin-bottom: 0.25rem;
font-size: 1rem;
}
.admissions-column ol.process-steps li p {
color: #5a6c7d;
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
}
/* Application Deadlines - Compact Grid */
.admissions-column h3:not(:first-child) {
margin-top: 3.5rem;
}
.dates-grid {
display: grid;
gap: 1rem;
}
.date-item {
background: #f8f9fa;
padding: 1rem 1.25rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-left: 4px solid #3498db;
}
.date-item h4 {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.date-item p {
color: #5a6c7d;
margin: 0.25rem 0;
font-size: 0.875rem;
line-height: 1.4;
}
.admissions-contact {
margin-top: 4rem;
padding-top: 2rem;
}
.admissions-contact .contact-card {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
text-align: center;
max-width: 800px;
margin: 0 auto;
border: 1px solid #e9ecef;
}
.admissions-contact .contact-card h3 {
color: #2c3e50;
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.admissions-contact .contact-card p {
color: #5a6c7d;
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.95rem;
}
.contact-details p {
margin-bottom: 0.75rem;
color: #6c757d;
font-size: 0.95rem;
}
.contact-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ========================================
COURSE CATALOG - ENHANCED WITH COLLAPSIBLES
======================================== */
/* Collapsible Section Structure - Ultra Minimal Spacing */
.collapsible-section {
margin-bottom: 0.35rem;
margin-top: 0;
}
.collapsible-section.collapsed {
margin-bottom: 0.35rem;
margin-top: 0;
}
/* Remove extra spacing from parent section containers - ACADEMICS PAGE ONLY */
#programs.section,
#courses.section,
#admissions.section,
#tuition-fees.section,
#veterans-benefits.section,
#frbi-online.section,
#calendar.section,
#cos-registration.section,
#foundation.section,
#special-events.section,
#planned-events.section {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* This override was too broad - removed to allow homepage sections to have proper padding */
/* Commented out to restore proper section padding on homepage
.section.section-alt {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
}
*/
/* Add spacing only for the first collapsible section after page header */
#programs .collapsible-section:first-child {
margin-top: 2rem;
}
.section-header-collapsible {
background: white;
padding: 1rem 1.25rem;
border-radius: 8px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
border-left: 4px solid #e74c3c;
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.collapsible-section:not(.collapsed) .section-header-collapsible {
margin-bottom: 1rem;
}
.section-header-collapsible:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transform: translateX(2px);
}
.section-header-collapsible>div {
flex: 1;
text-align: left;
}
.section-header-collapsible .section-title {
margin: 0;
padding: 0;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 0.5px;
text-align: left;
text-transform: none !important;
}
/* Ensure h2 and h3 have same size in collapsible headers */
.section-header-collapsible h2.section-title,
.section-header-collapsible h3.section-title {
font-size: 1.35rem !important;
font-weight: 600 !important;
}
.section-header-collapsible .section-description {
margin: 0.25rem 0 0 0;
padding: 0;
font-size: 0.9rem;
line-height: 1.3;
color: #5a6c7d;
text-align: left;
}
.section-toggle-btn {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
transition: all 0.3s ease;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(231, 76, 60, 0.4);
}
.section-toggle-btn:hover {
transform: scale(1.15) rotate(90deg);
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
}
.section-toggle-btn .toggle-icon {
display: block;
line-height: 1;
}
.section-content-collapsible {
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Course Container - Two Column Layout */
.courses-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem 4rem;
margin-top: 2rem;
}
/* Course Category - Simple Non-Collapsible */
.course-category {
break-inside: avoid;
margin-bottom: 2.5rem;
}
.category-title {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 3px solid #e74c3c;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courses-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.course-item {
background: #f8f9fa;
border-radius: 8px;
padding: 1.25rem;
border-left: 4px solid #3498db;
transition: all 0.3s ease;
}
.course-item:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}
.course-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
gap: 1rem;
}
.course-title {
color: #2c3e50;
font-size: 1.05rem;
font-weight: 600;
margin: 0;
flex: 1;
line-height: 1.3;
}
.course-code {
background: #3498db;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.course-description {
color: #5a6c7d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
.course-meta {
display: flex;
gap: 1.5rem;
font-size: 0.85rem;
color: #6c757d;
padding-top: 0.5rem;
border-top: 1px solid #dee2e6;
}
.credits {
font-weight: 600;
color: #27ae60;
}
.prerequisites {
font-style: italic;
}
.prerequisites::before {
content: "Prereq: ";
font-weight: 600;
font-style: normal;
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.courses-container {
gap: 2.5rem 3rem;
}
}
@media (max-width: 968px) {
.courses-container {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.course-nav {
position: static;
}
.course-nav-links {
flex-direction: column;
}
.course-nav-link {
width: 100%;
text-align: center;
}
}
/* Statement of Faith Section on Academics Page */
.statement-of-faith {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
border: 1px solid #e9ecef;
}
.faith-content {
max-width: 900px;
margin: 0 auto;
}
.faith-intro {
font-size: 1.125rem;
line-height: 1.8;
color: #2c3e50;
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-left: 4px solid #e74c3c;
border-radius: 8px;
}
.faith-link {
text-align: center;
margin: 2.5rem 0;
}
.faith-description {
font-size: 1.05rem;
color: #5a6c7d;
text-align: center;
margin-bottom: 2.5rem;
}
.faith-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.faith-point {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.faith-point:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.faith-point h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.faith-point p {
color: #5a6c7d;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Financial Aid Message */
.financial-aid-message {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 3rem;
border-left: 5px solid #27ae60;
box-shadow: 0 4px 20px rgba(39, 174, 96, 0.1);
}
.aid-message-content h3 {
color: #1e7e34;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.aid-message-content p {
color: #2c5f2d;
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.aid-message-content p:last-child {
margin-bottom: 0;
}
.aid-message-content strong {
color: #155724;
}
/* Tuition Table */
.tuition-content {
max-width: 1000px;
margin: 0 auto;
}
.tuition-overview {
margin-bottom: 3rem;
}
.tuition-overview h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.tuition-overview>p {
color: #5a6c7d;
font-size: 1.05rem;
margin-bottom: 2rem;
}
.tuition-table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
}
.tuition-header {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
}
.tuition-header h4 {
margin: 0;
font-size: 0.9rem;
color: white;
}
.tuition-row {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e9ecef;
align-items: center;
transition: all 0.2s ease;
}
.tuition-row:hover {
background: #f8f9fa;
}
.tuition-row:last-child {
border-bottom: none;
}
.tuition-row.featured {
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
border-left: 4px solid #e74c3c;
}
.tuition-row.featured:hover {
background: linear-gradient(135deg, #ffebee 0%, #ffd0d0 100%);
}
.program-level {
font-weight: 600;
color: #2c3e50;
font-size: 1.05rem;
}
.credit-cost {
font-weight: 700;
color: #27ae60;
font-size: 1.15rem;
}
.annual-cost {
color: #5a6c7d;
font-weight: 500;
}
.tuition-note {
margin-top: 1.5rem;
font-size: 0.9rem;
color: #6c757d;
font-style: italic;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
/* Fees Section */
.fees-section {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid #e9ecef;
}
.fees-section h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.fees-list {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.fee-item {
display: flex;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e9ecef;
align-items: center;
transition: all 0.2s ease;
}
.fee-item:hover {
background: #f8f9fa;
}
.fee-item:last-child {
border-bottom: none;
}
.fee-name {
color: #2c3e50;
font-weight: 500;
font-size: 1.05rem;
}
.fee-amount {
color: #e74c3c;
font-weight: 700;
font-size: 1.05rem;
}
.fee-amount.included {
color: #27ae60;
font-weight: 600;
font-style: italic;
}
/* Payment Options */
.payment-options {
margin-top: 3rem;
}
.payment-options h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.payment-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.payment-method {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-top: 3px solid #3498db;
transition: all 0.3s ease;
}
.payment-method:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.payment-method h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.payment-method p {
color: #5a6c7d;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Financial Aid Contact */
.financial-aid {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid #e9ecef;
}
.aid-contact {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.aid-contact h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.aid-contact p {
color: #5a6c7d;
font-size: 1.05rem;
margin-bottom: 1.5rem;
}
.contact-info {
margin-top: 1.5rem;
}
.contact-info p {
margin-bottom: 0.75rem;
font-size: 1rem;
}
.contact-info strong {
color: #2c3e50;
}
/* Veterans Benefits */
.veterans-content {
max-width: 1000px;
margin: 0 auto;
}
.va-benefits-info h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.va-benefits-info>p {
font-size: 1.05rem;
color: #5a6c7d;
margin-bottom: 2rem;
}
.benefits-policies {
display: grid;
gap: 1.5rem;
margin-top: 2rem;
}
.policy-item {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-left: 4px solid #3498db;
transition: all 0.3s ease;
}
.policy-item:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateX(4px);
}
.policy-item h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.policy-item p,
.policy-item ul {
color: #5a6c7d;
font-size: 0.95rem;
line-height: 1.7;
}
.policy-item ul {
margin-top: 0.75rem;
padding-left: 1.5rem;
}
.policy-item li {
margin-bottom: 0.5rem;
}
.contact-veterans {
margin-top: 3rem;
}
.contact-veterans .contact-card {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 12px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(52, 152, 219, 0.15);
border: 1px solid #90caf9;
}
.contact-veterans .contact-card h3 {
color: #1565c0;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.contact-details p {
margin-bottom: 0.75rem;
font-size: 1rem;
color: #0d47a1;
}
.contact-details strong {
color: #1565c0;
}
.contact-hours {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid #64b5f6;
}
.contact-hours p {
margin: 0;
font-size: 1rem;
color: #0d47a1;
}
/* Academic Calendar */
.calendar-container {
max-width: 1000px;
margin: 0 auto;
display: grid;
gap: 3rem;
}
.semester-calendar {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
border: 1px solid #e9ecef;
}
.semester-title {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid #e74c3c;
}
.calendar-events {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.event-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.25rem;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
border-left: 4px solid #3498db;
}
.event-item:hover {
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}
.event-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 70px;
height: 70px;
background: white;
color: #e74c3c;
border-radius: 10px;
padding: 0.5rem;
flex-shrink: 0;
border: 3px solid #e74c3c;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
}
.event-date .month {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #e74c3c;
}
.event-date .day {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
color: #e74c3c;
}
.event-details {
flex: 1;
}
.event-details h4 {
color: #2c3e50;
font-size: 1.1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.event-details p {
color: #5a6c7d;
font-size: 0.95rem;
margin: 0;
line-height: 1.5;
}
/* Admissions Section */
.admissions-content {
max-width: 1000px;
margin: 0 auto;
}
.admissions-info .requirements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.requirement {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-top: 3px solid #27ae60;
}
.requirement h4 {
color: #2c3e50;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.requirement ul {
list-style: none;
padding: 0;
}
.requirement li {
padding: 0.5rem 0;
color: #5a6c7d;
font-size: 0.95rem;
line-height: 1.6;
position: relative;
padding-left: 1.5rem;
}
.requirement li::before {
content: "✓";
position: absolute;
left: 0;
color: #27ae60;
font-weight: 700;
font-size: 1.1rem;
}
.admissions-process .process-steps {
list-style: decimal;
padding-left: 2rem;
counter-reset: item;
}
.admissions-process .process-steps li {
margin-bottom: 1.5rem;
color: #2c3e50;
font-size: 1rem;
line-height: 1.7;
}
.admissions-process .process-steps li strong {
display: block;
font-size: 1.15rem;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.admissions-process .process-steps li p {
color: #5a6c7d;
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
}
.important-dates h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1.5rem;
text-align: center;
}
.dates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.date-item {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-top: 3px solid #e74c3c;
text-align: center;
transition: all 0.3s ease;
}
.date-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.date-item h4 {
color: #2c3e50;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.date-item p {
color: #5a6c7d;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.date-item p:last-child {
margin-bottom: 0;
}
.application-form {
margin-top: 3rem;
}
.form-container {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.form-container h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.form-container>p {
color: #5a6c7d;
font-size: 1.05rem;
margin-bottom: 2rem;
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.form-container .contact-info {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #dee2e6;
}
.form-container .contact-info h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.form-container .contact-info p {
color: #5a6c7d;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.requirements-list {
display: grid;
gap: 1.5rem;
margin: 2.5rem 0;
}
.requirement-item {
background: white;
padding: 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-left: 4px solid #27ae60;
transition: all 0.3s ease;
}
.requirement-item:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateX(4px);
}
.requirement-item h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.requirement-item p,
.requirement-item ul {
color: #5a6c7d;
font-size: 0.95rem;
line-height: 1.7;
}
.requirement-item ul {
margin-top: 0.75rem;
padding-left: 1.5rem;
}
.requirement-item li {
margin-bottom: 0.5rem;
}
/* Registration Process */
.registration-steps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 2.5rem 0;
}
@media (min-width: 1200px) {
.registration-steps {
grid-template-columns: repeat(3, 1fr);
}
}
.registration-step {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
text-align: center;
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.registration-step:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.registration-steps {
grid-template-columns: 1fr;
}
}
.step-number {
min-width: 50px;
height: 50px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.step-content h4 {
color: #2c3e50;
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.step-content p {
color: #5a6c7d;
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
}
/* Contact Cards for Registration */
.contact-registration {
margin-top: 3rem;
}
.contact-registration .contact-card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.contact-registration .contact-card h3 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.contact-registration .contact-card p {
color: #5a6c7d;
font-size: 1.05rem;
margin-bottom: 1.5rem;
}
.contact-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
/* Colorado Springs Registration Section */
#cos-registration .registration-content {
max-width: 1000px;
margin: 0 auto;
}
#cos-registration .registration-process {
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 2px solid #e9ecef;
}
#cos-registration .registration-process h3 {
color: #2c3e50;
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 2rem;
text-align: center;
}
#cos-registration .contact-registration {
margin-top: 2.5rem;
}
#cos-registration .contact-registration .contact-card {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
text-align: center;
border: 1px solid #e9ecef;
}
#cos-registration .contact-card h3 {
color: #2c3e50;
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
#cos-registration .contact-card p {
color: #5a6c7d;
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
/* Reference Page Styles */
.reference-hero {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 4rem 0;
text-align: center;
}
.reference-hero-content {
max-width: 800px;
margin: 0 auto;
}
.reference-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: white;
}
.reference-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
line-height: 1.6;
}
.reference-hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.reference-instructions {
padding: 4rem 0;
background: #f8f9fa;
}
.instructions-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.instruction-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
}
.instruction-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
}
.instruction-icon svg {
width: 28px;
height: 28px;
}
.instruction-card h3 {
font-size: 1.25rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}
.instruction-card p {
color: #6c757d;
line-height: 1.6;
}
.reference-contact {
padding: 4rem 0;
}
/* Responsive Design for Application Page */
@media (max-width: 768px) {
.application-title {
font-size: 2.5rem;
}
.application-subtitle {
font-size: 1.1rem;
}
.application-hero-buttons {
flex-direction: column;
align-items: center;
}
.process-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.forms-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-methods {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-method {
flex-direction: column;
text-align: center;
}
.reference-title {
font-size: 2rem;
}
.instructions-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.highlight {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: #495057;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid #dee2e6;
transition: all 0.3s;
}
.highlight:hover {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border-color: #e74c3c;
transform: translateY(-2px);
}
/* About Section Styles */
.about-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e9ecef;
}
.about-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.about-subtitle {
font-size: 1.75rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}
.about-text {
color: #6c757d;
line-height: 1.8;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.about-link {
color: #3498db;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.about-link:hover {
color: #2980b9;
}
/* Partner Churches Section Styles */
.churches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
margin-bottom: 3rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.church-card {
background: white;
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #f8f9fa;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 2.5rem;
}
.church-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border-color: #e9ecef;
}
.church-thumbnail {
flex-shrink: 0;
width: 260px;
height: 260px;
border-radius: 12px;
overflow: hidden;
border: 3px solid #e9ecef;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.church-card:hover .church-thumbnail {
border-color: #e74c3c;
box-shadow: 0 4px 16px rgba(231, 76, 60, 0.15);
}
.church-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.church-card:hover .church-image {
transform: scale(1.08);
}
.church-name {
font-size: 1.5rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.church-name a {
color: #2c3e50;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.church-name a:hover {
color: #3498db;
}
.church-name a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #3498db;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.church-name a:hover::after {
transform: scaleX(1);
}
.church-location {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 1rem;
font-weight: 500;
}
.church-description {
color: #5a6c7d;
line-height: 1.6;
margin-bottom: 0;
}
.churches-cta {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 12px;
margin-top: 2rem;
}
.churches-cta p {
color: #6c757d;
margin-bottom: 0;
font-size: 1.1rem;
}
.churches-link {
color: #3498db;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.churches-link:hover {
color: #2980b9;
}
/* Responsive Design for Partner Churches */
@media (max-width: 768px) {
.churches-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.church-card {
padding: 2rem;
flex-direction: column;
text-align: center;
align-items: center;
}
.church-thumbnail {
margin-bottom: 1.5rem;
width: 200px;
height: 200px;
}
}
/* Resources Grid */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.resource-category {
padding: 2rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
/* Remove any cartoonish icons that might be added by themes or frameworks */
.resource-category::before,
.resource-category::after,
.resource-category h3::before,
.resource-category h3::after {
display: none !important;
content: none !important;
}
/* Additional override for any icon fonts or emoji */
.resource-category h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
letter-spacing: 0.5px;
font-family: 'Montserrat', sans-serif !important;
position: relative;
}
.resource-category h3::first-letter {
font-size: inherit !important;
line-height: inherit !important;
}
.resource-category p {
color: #5a6c7d;
margin-bottom: 1.5rem;
}
.resource-link {
color: #e74c3c;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.resource-link:hover {
color: #c0392b;
}
.resource-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.resource-links .resource-link {
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
font-size: 0.875rem;
transition: all 0.3s;
}
.resource-links .resource-link:last-child {
border-bottom: none;
}
.resource-links .resource-link:hover {
background-color: #f8f9fa;
padding-left: 0.5rem;
color: #c0392b;
}
/* Blogs & Articles Section */
.content-section {
margin-bottom: 3rem;
}
.content-section-title {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 2rem;
font-weight: 600;
border-bottom: 2px solid #e74c3c;
display: inline-block;
padding-bottom: 0.5rem;
}
/* Faculty Blogs */
.faculty-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.faculty-card {
background-color: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid #f1f3f4;
}
.faculty-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.faculty-card-header {
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #f8f9fa;
}
.faculty-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid #e74c3c;
box-shadow: 0 2px 10px rgba(228, 76, 60, 0.2);
}
.faculty-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.faculty-info {
flex: 1;
}
.faculty-name {
color: #2c3e50;
margin: 0 0 0.35rem 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.faculty-role {
color: #6c757d;
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
line-height: 1.3;
}
.faculty-latest {
color: #e74c3c;
font-size: 0.8rem;
font-weight: 600;
background-color: #fef7f5;
padding: 0.2rem 0.7rem;
border-radius: 12px;
display: inline-block;
}
.faculty-card-content {
padding: 0.85rem 1.5rem 1.25rem;
}
.faculty-excerpt {
color: #5a6c7d;
margin-bottom: 1.25rem;
line-height: 1.6;
font-size: 0.95rem;
}
.faculty-topics {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0;
}
.topic {
background-color: #e74c3c;
color: white;
padding: 0.375rem 0.875rem;
border-radius: 16px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.faculty-card-footer {
padding: 1rem 1.5rem;
background-color: #fafbfc;
border-top: 1px solid #f1f3f4;
display: flex;
justify-content: space-between;
align-items: center;
}
.faculty-link {
color: #e74c3c;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: color 0.3s;
}
.faculty-link:hover {
color: #c0392b;
}
.publications-link {
color: #6c757d;
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
transition: color 0.3s;
}
.publications-link:hover {
color: #e74c3c;
}
/* Articles */
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.article-card {
background-color: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid #f1f3f4;
}
.article-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.article-card.featured {
border: 2px solid #e74c3c;
box-shadow: 0 6px 30px rgba(228, 76, 60, 0.15);
}
.article-image {
width: 100%;
height: 200px;
overflow: hidden;
background: #f8f9fa;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.article-card-header {
padding: 1.5rem;
border-bottom: 1px solid #f8f9fa;
}
.article-badge {
display: inline-block;
background-color: #e74c3c;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 1rem;
}
.article-meta {
display: flex;
gap: 1rem;
font-size: 0.875rem;
}
.article-date {
color: #6c757d;
font-weight: 600;
}
.article-author {
color: #e74c3c;
font-weight: 600;
}
.article-card-content {
padding: 1.5rem;
}
.article-title {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.article-excerpt {
color: #5a6c7d;
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.95rem;
}
.article-topics {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0;
}
.topic {
background-color: #e74c3c;
color: white;
padding: 0.375rem 0.875rem;
border-radius: 16px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.article-card-footer {
padding: 1.25rem 1.5rem;
background-color: #fafbfc;
border-top: 1px solid #f1f3f4;
display: flex;
justify-content: space-between;
align-items: center;
}
.read-more {
color: #e74c3c;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: color 0.3s;
}
.read-more:hover {
color: #c0392b;
}
.article-reading-time {
color: #6c757d;
font-size: 0.8rem;
font-weight: 500;
}
/* Publications */
.publications {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.publication-item {
background-color: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-normal);
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
position: relative;
}
.publication-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.publication-cover {
height: 250px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
}
.publication-cover img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.publication-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.publication-title {
color: var(--color-text);
margin-bottom: 0.5rem;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
}
.publication-author {
color: var(--color-primary);
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.publication-description {
color: #5a6c7d;
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 0.875rem;
flex: 1;
}
.publication-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
margin-top: auto;
}
/* Provide breathing room between meta row and action button below */
.publication-content+.publication-actions,
.publication-meta {
margin-bottom: 0.75rem;
}
/* When buttons live inside the publication-content, pad the bottom */
.publication-content {
padding-bottom: 1.25rem;
}
.publication-year {
color: #6c757d;
font-weight: 600;
}
.publication-type {
background-color: #f8f9fa;
color: #495057;
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
/* Support Section */
.support-content {
max-width: 800px;
margin: 0 auto;
}
.support-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.support-method {
padding: 2rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
text-align: center;
}
.support-method h3 {
color: #2c3e50;
margin-bottom: 1rem;
}
.support-method p {
color: #5a6c7d;
margin: 0;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.support-cta {
text-align: center;
padding: 2rem;
background-color: #e74c3c;
color: white;
border-radius: 12px;
}
.support-cta h3 {
color: white;
margin-bottom: 1rem;
}
.support-cta p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
}
/* Testimonials Section */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.testimonial-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.testimonial-content {
margin-bottom: 1.5rem;
}
.testimonial-content p {
font-size: 1rem;
line-height: 1.7;
color: #34495e;
font-style: italic;
position: relative;
padding-left: 1.5rem;
}
.testimonial-content p::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 3rem;
color: #e74c3c;
line-height: 1;
font-family: Georgia, serif;
}
.testimonial-author {
border-top: 2px solid #ecf0f1;
padding-top: 1rem;
}
.testimonial-author h4 {
color: #2c3e50;
font-size: 1.1rem;
margin: 0 0 0.25rem 0;
font-weight: 600;
}
.testimonial-author p {
color: #7f8c8d;
font-size: 0.9rem;
margin: 0;
}
@media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.testimonial-card {
padding: 1.5rem;
}
}
/* Footer */
.footer {
background: var(--gradient-dark);
color: var(--color-text-inverse);
padding: 4rem 0 2rem;
position: relative;
border-top: 4px solid var(--color-primary);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.social-links {
flex-direction: row;
gap: 0.75rem;
justify-content: center;
}
.social-link {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.footer-section h4 {
color: white;
margin-bottom: 1rem;
}
.footer-contact p {
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--color-primary);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 1rem;
flex-direction: column;
}
.social-link {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
color: white;
text-decoration: none;
transition: var(--transition-normal);
border: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 500;
letter-spacing: 0.5px;
}
.social-link:hover {
background: var(--gradient-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.social-text {
font-size: 0.875rem;
font-weight: 600;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
/* Responsive Design */
/* Landscape Tablet & Small Desktop breakpoint - Enable hamburger menu */
/* Large screens - slightly reduce brand name */
@media (max-width: 1600px) {
.brand-name {
font-size: 3rem;
letter-spacing: 3px;
}
}
/* Medium screens - compact everything */
@media (max-width: 1366px) {
.brand-name {
font-size: 2.5rem;
letter-spacing: 2px;
}
.tagline {
font-size: 1rem;
}
.logo {
width: 120px;
height: 120px;
}
.header-main {
padding: 2rem 0;
gap: 2rem;
}
.nav-menu {
gap: 0.6rem;
}
.nav-link {
font-size: 0.75rem;
padding: 0.6rem 0;
}
.nav-link.cta-link {
padding: 0.5rem 0.75rem !important;
font-size: 0.7rem;
}
}
/* Tablet and mobile - hamburger menu - Multiple breakpoints for Android compatibility */
/* Changed max-width from 1280px to 1023px to avoid conflict with desktop breakpoint at 1024px */
@media screen and (max-width: 1023px),
screen and (max-device-width: 1023px),
screen and (max-width: 768px),
screen and (max-device-width: 768px) {
.nav-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex-direction: column;
gap: 4px;
background: none;
border: none;
padding: 12px;
cursor: pointer;
z-index: 1001;
position: relative;
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle span,
.hamburger-line {
display: block !important;
width: 28px;
height: 3px;
background-color: #ffffff;
transition: 0.3s;
pointer-events: none;
}
/* Clean mobile menu - starts below header */
.nav-menu {
display: none !important;
visibility: hidden !important;
position: fixed;
top: 90px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: #111;
z-index: 997;
padding: 0;
margin: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-menu.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.nav-item {
width: 100%;
border-bottom: 1px solid #222;
}
.nav-item:last-child {
border-bottom: none;
}
.nav-link {
padding: 1rem 1.5rem;
font-size: 1.05rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff !important;
background: #111 !important;
text-decoration: none;
display: block;
width: 100%;
border: none;
}
.nav-link:hover,
.nav-link:active {
background: #1a1a1a !important;
color: #e74c3c !important;
}
.nav-link.cta-link {
margin: 1rem 1.5rem;
padding: 1rem;
background: #e74c3c !important;
color: #fff !important;
border-radius: 8px;
text-align: center;
display: block;
width: calc(100% - 3rem);
}
.nav-link.cta-link:hover {
background: #c0392b !important;
}
/* Dropdown submenu - MOBILE ONLY */
.dropdown-menu {
position: static !important;
display: none !important;
/* Hidden by default on mobile */
background: #0a0a0a !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
}
/* Show dropdown only when parent has .active class (mobile) */
.dropdown.active .dropdown-menu {
display: block !important;
}
.dropdown-link {
padding: 0.9rem 1.5rem 0.9rem 2.5rem !important;
font-size: 0.95rem !important;
color: #ccc !important;
background: #0a0a0a !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
border: none !important;
margin: 0 !important;
}
.dropdown-link:hover {
color: #e74c3c !important;
background: #151515 !important;
transform: none !important;
}
/* Keep header visible above menu */
.header {
position: relative;
z-index: 999;
}
}
/* Prevent horizontal overflow - comprehensive fix */
html {
overflow-x: hidden !important;
max-width: 100vw;
}
body {
max-width: 100vw;
overflow-x: hidden !important;
position: relative;
}
.container {
max-width: 100%;
padding-left: 0.75rem;
padding-right: 0.75rem;
overflow: hidden;
}
.header {
/* Allow dropdowns to extend outside the header */
overflow: visible;
max-width: 100vw;
width: 100%;
}
.header-main {
max-width: 100%;
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
box-sizing: border-box;
}
.logo-section {
flex: 1;
min-width: 0;
max-width: calc(100% - 50px);
}
.brand-name {
font-size: 1.8rem !important;
line-height: 1.2;
}
.navigation {
flex-shrink: 0;
width: 44px;
display: flex;
justify-content: flex-end;
}
.nav-toggle {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex !important;
align-items: center;
justify-content: center;
}
/* Tablet breakpoint */
@media (max-width: 1280px) {
.logo {
width: 110px;
height: 110px;
padding: 8px;
border-radius: 12px;
border: 3px solid #e74c3c;
}
/* brand-name already set in 1366px breakpoint, inherits properly */
.header-main {
padding: 1.75rem 0;
gap: 2rem;
}
.logo-section {
gap: 1.5rem;
}
.hero-title {
font-size: 3.5rem;
letter-spacing: 1.5px;
}
}
/* MOBILE STYLES - Apply to ALL mobile devices - OVERRIDE DESKTOP */
@media screen and (max-width: 768px),
screen and (max-device-width: 768px),
(max-width: 768px),
(max-device-width: 768px),
only screen and (max-width: 768px),
handheld and (max-width: 768px) {
/* Prevent horizontal overflow globally */
html {
font-size: 16px !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
}
body {
max-width: 100vw !important;
overflow-x: hidden !important;
font-size: 18px !important;
/* Base font size for mobile readability */
-webkit-text-size-adjust: 100% !important;
}
/* OVERRIDE DESKTOP LOGO SIZE */
.logo,
.header .logo,
.logo-container .logo,
.logo-section .logo,
.logo-section img,
img.logo,
.header img.logo {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
max-width: 80px !important;
max-height: 80px !important;
padding: 6px !important;
margin: 0 !important;
display: block !important;
}
/* OVERRIDE DESKTOP BRAND NAME - HIDE IT */
.brand-name,
.header .brand-name,
.brand-info .brand-name,
h1.brand-name {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* OVERRIDE DESKTOP HERO TITLE */
.hero-title,
.hero .hero-title {
font-size: 2.5rem !important;
line-height: 1.3 !important;
}
.container {
padding: 0 15px !important;
max-width: 100% !important;
}
/* Header - hide full brand name, show only logo + hamburger */
.header-main {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 1rem 0 !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
/* Logo - make it larger and visible on mobile */
.header .logo,
.logo-container .logo,
.logo-section .logo,
.logo-section img,
img.logo {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
padding: 6px !important;
margin: 0 !important;
display: block !important;
}
/* Hide full brand name text on mobile - FORCE HIDE */
.brand-name,
.header .brand-name,
.brand-info .brand-name,
h1.brand-name,
.header h1.brand-name,
.logo-section .brand-name,
.logo-section h1 {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.brand-info {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.logo-section {
gap: 0 !important;
flex-shrink: 0 !important;
min-width: auto !important;
max-width: 80px !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
}
.logo-container {
flex-shrink: 0 !important;
width: 80px !important;
height: 80px !important;
}
.nav-toggle {
display: flex !important;
flex-direction: column;
gap: 4px;
background: none;
border: none;
padding: 12px;
cursor: pointer;
z-index: 1001;
position: relative;
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
display: block;
width: 28px;
height: 3px;
background-color: #ffffff;
transition: 0.3s;
pointer-events: none;
}
.header {
position: sticky;
top: 0;
z-index: 1000;
}
.navigation {
display: flex;
align-items: center;
}
/* Clean mobile menu - starts below header */
.nav-menu {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: #111;
z-index: 997;
padding: 0;
margin: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-menu.active {
display: block !important;
}
.nav-toggle {
display: flex !important;
}
.nav-item {
width: 100%;
border-bottom: 1px solid #222;
}
.nav-link {
padding: 1.1rem 1.5rem;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff !important;
background: #111 !important;
text-decoration: none;
display: block;
width: 100%;
border: none;
}
.nav-link:hover,
.nav-link:active {
background: #1a1a1a !important;
color: #e74c3c !important;
}
.nav-link.cta-link {
margin: 1rem 1.5rem;
padding: 1rem;
background: #e74c3c !important;
color: #fff !important;
border-radius: 8px;
text-align: center;
display: block;
width: calc(100% - 3rem);
}
.nav-link.cta-link:hover {
background: #c0392b !important;
}
.nav-menu>li:last-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.dropdown-menu {
position: static !important;
display: none;
background: #0a0a0a !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.dropdown.active .dropdown-menu {
display: block !important;
}
.dropdown-link {
padding: 1rem 1.5rem 1rem 2.5rem !important;
font-size: 1.05rem !important;
color: #ccc !important;
background: #0a0a0a !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
border: none !important;
margin: 0 !important;
}
.dropdown-link:hover {
color: #e74c3c !important;
background: #151515 !important;
transform: none !important;
}
/* Typography - MUCH Larger, readable text on mobile */
body {
font-size: 18px !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.75rem !important;
line-height: 1.4 !important;
margin-bottom: 1rem !important;
}
h2 {
font-size: 2rem !important;
}
h1 {
font-size: 2.25rem !important;
}
.section-title {
font-size: 1.75rem !important;
margin-bottom: 1.25rem !important;
line-height: 1.3 !important;
}
.section-description {
font-size: 1.1rem !important;
line-height: 1.7 !important;
margin-bottom: 1.5rem !important;
}
p {
font-size: 1.1rem !important;
line-height: 1.7 !important;
margin-bottom: 1rem !important;
}
/* Feature cards and content */
.feature-card h4,
.info-card h3,
.pillar h3 {
font-size: 1.5rem !important;
line-height: 1.3 !important;
}
.feature-card p,
.info-card p,
.pillar p {
font-size: 1.1rem !important;
line-height: 1.7 !important;
}
/* Hero Section */
.hero {
padding: 3rem 0 !important;
min-height: 350px !important;
}
.hero-content {
padding: 0 1rem !important;
}
.hero-title {
font-size: 2.5rem !important;
letter-spacing: 1px !important;
margin-bottom: 1.5rem !important;
line-height: 1.3 !important;
}
.hero-buttons {
flex-direction: column !important;
align-items: stretch !important;
gap: 1rem !important;
width: 100% !important;
}
.hero-buttons .btn {
width: 100% !important;
max-width: 100% !important;
padding: 1.25rem 1.5rem !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
}
/* Ensure all buttons are large enough */
.btn {
padding: 1rem 1.5rem !important;
font-size: 1rem !important;
min-height: 44px !important;
}
/* Registration Banner Mobile */
.registration-banner {
padding: 1rem 0 !important;
}
.registration-banner-content {
flex-direction: column !important;
align-items: stretch !important;
gap: 1rem !important;
}
.registration-banner-text {
width: 100% !important;
}
.registration-banner-inner {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
.registration-badge {
font-size: 0.9rem !important;
padding: 0.5rem 1rem !important;
}
.registration-banner-text strong {
font-size: 1.1rem !important;
}
.registration-banner-text p {
font-size: 0.95rem !important;
}
.registration-banner-buttons {
width: 100% !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.btn-register,
.btn-view-courses {
width: 100% !important;
text-align: center !important;
padding: 1rem 1.5rem !important;
font-size: 1rem !important;
}
.features-grid,
.faith-points,
.programs-grid,
.faculty-grid,
.resources-grid,
.support-methods,
.faculty-blogs,
.publications {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.faculty-showcase {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 400px;
margin: 0 auto;
}
.faculty-member {
width: 100%;
max-width: none;
}
.faculty-image-container {
width: 140px;
height: 140px;
margin: 2rem auto 0;
}
.faculty-info {
padding: 1.75rem 2rem 2rem;
text-align: center;
}
.faculty-name {
font-size: 1.35rem;
}
.faculty-title {
font-size: 0.9rem;
}
.faculty-description {
font-size: 0.9rem;
}
.faculty-highlights {
justify-content: center;
}
.faculty-profile-link {
margin-top: 1.5rem;
padding-top: 1.25rem;
}
.faculty-card-header {
padding: 1rem 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.faculty-avatar {
width: 50px;
height: 50px;
}
.faculty-card-content {
padding: 0.75rem 1.25rem 1rem;
}
.faculty-card-footer {
padding: 1rem 1.25rem;
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.articles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.article-card {
max-width: 500px;
margin: 0 auto;
}
.article-card-header {
padding: 1.25rem;
}
.article-meta {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.article-card-content {
padding: 1.25rem;
}
.article-card-footer {
padding: 1.25rem;
flex-direction: column;
gap: 1rem;
text-align: center;
}
.publications {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.publication-item {
max-width: 400px;
margin: 0 auto;
}
.publication-cover {
height: 200px;
}
.publication-content {
padding: 1.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
.section {
padding: 3rem 0;
}
}
@media (max-width: 480px) {
.hero {
padding: 4rem 0;
}
.hero-title {
font-size: 1.75rem;
}
.btn {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
.feature-card,
.program-card,
.faculty-card,
.resource-category,
.support-method {
padding: 1.5rem;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* Focus styles for accessibility */
.nav-link:focus,
.btn:focus,
.faculty-link:focus,
.resource-link:focus,
.footer-links a:focus,
.social-link:focus,
.article-link:focus,
.text-link:focus,
.blog-link:focus,
.publications-link:focus,
.read-more:focus,
.article-reading-time:focus {
outline: 2px solid #e74c3c;
outline-offset: 2px;
}
/* Print styles */
@media print {
.header-top,
.nav-toggle,
.hero-buttons,
.cta-buttons {
display: none;
}
.hero {
background: none;
color: #2c3e50;
}
.section {
page-break-inside: avoid;
}
}
/* ========================================
FEATURE ICONS & ENHANCEMENTS
======================================== */
/* Feature Card Icons */
.feature-icon {
width: 48px;
height: 48px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
border-radius: 12px;
color: white;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-card:hover .feature-icon {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}
/* Purpose/Mission/Vision Cards - Simple Text Only (matches How FRBI Works steps) */
.pmv-card-new {
text-align: center;
padding: 2rem 1rem;
}
.pmv-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #7a7a7a;
margin: 0 0 0.75rem 0;
}
.pmv-card-new .purpose-summary,
.pmv-card-new .vision-summary,
.pmv-card-new .mission-summary {
font-size: 1.1rem;
line-height: 1.7;
color: #5a6c7d;
margin-bottom: 1.5rem;
}
/* Inlaid Image - Floats within text content */
.inlaid-image {
float: right;
width: 320px;
max-width: 45%;
margin: 0 0 1.5rem 2rem;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.inlaid-image:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
@media (max-width: 768px) {
.inlaid-image {
float: none;
width: 100%;
height: auto;
max-width: 100%;
margin: 0 0 1.5rem 0;
}
}
/* Faith Section - Full Width without Sidebar */
.faith-content-layout {
max-width: 900px;
margin: 0 auto;
}
.faith-text-content {
width: 100%;
}
/* Faith Points - Simple without Icons */
.faith-point {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-left: 4px solid #e74c3c;
}
.faith-point:hover {
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.faith-point h4 {
margin: 0 0 0.75rem 0;
color: #2c3e50;
font-size: 1.2rem;
font-weight: 600;
}
.faith-point p {
margin: 0;
color: #5a6c7d;
line-height: 1.7;
font-size: 1.05rem;
}
/* Doctrine Section Icons */
.doctrine-section {
margin-bottom: 3rem;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
border-left: 4px solid #e74c3c;
}
.doctrine-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
border-radius: 12px;
color: white;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.doctrine-icon svg {
width: 28px;
height: 28px;
}
.doctrine-section h2 {
color: #2c3e50;
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.doctrine-section h3 {
color: #2c3e50;
font-size: 1.3rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
/* Responsive Adjustments */
@media (max-width: 1024px) {
.faith-content-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.faith-image-accent {
position: static;
max-width: 500px;
margin: 0 auto;
}
.pmv-card {
padding: 2rem;
}
}
@media (max-width: 768px) {
.feature-icon {
width: 56px;
height: 56px;
margin-bottom: 1rem;
}
.feature-icon svg {
width: 28px;
height: 28px;
}
.pmv-icon {
width: 64px;
height: 64px;
}
.pmv-icon svg {
width: 32px;
height: 32px;
}
.faith-point {
flex-direction: column;
align-items: center;
text-align: center;
}
.doctrine-section {
padding: 1.5rem;
}
}
/* (Removed complex desktop dropdown overrides - base styles handle this now) */
/* Statement of Faith Page Styles */
.doctrine-icon {
display: none !important;
}
.doctrine-section {
background: white;
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
transition: var(--transition-normal);
border: 1px solid rgba(0,0,0,0.05);
}
.doctrine-section:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.doctrine-section h2 {
color: var(--color-text);
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--color-primary);
display: inline-block;
padding-bottom: 0.5rem;
font-size: 1.75rem;
}
.statement-preamble {
background: var(--color-bg-alt);
padding: 2rem;
border-radius: var(--radius-lg);
margin-bottom: 3rem;
border-left: 4px solid var(--color-primary);
font-style: italic;
color: var(--color-text-light);
}