/* ============================================ St. Jude's Church Website - Base Styles ============================================ Purpose:Core stylesheet defining design tokens, themes, and global styles File Size:~30KB Table of Contents:1. Theme Variables (:root) ........ [Line 20] 2. Dark Mode Configuration ........ [Line 80] 3. Reset & Base Styles ............ [Line 250] 4. Typography System .............. [Line 275] 5. Bootstrap Overrides ............ [Line 350] - Navbar - Buttons - Cards - Forms 6. Custom Components .............. [Line 550] - Hero Section - Footer - Infinite Scroll / Animations 7. Responsive Design .............. [Line 1000] Design System:- Primary Color:#2b5a9e (Blue) - Secondary:#1E3A5F (Marian Blue) - Accent:#D4AF37 (Gold) - Fonts:Poppins (Body), Playfair Display (Headings) Dependencies:- Bootstrap 5.3.3 - Google Fonts Author:St. Jude's Church Web Team Last Modified:December 2025 ============================================ */ /* CSS Variables - Theme Colors */ :root {/* Primary Colors - St. Jude Theme */ --sj-primary:#2b5a9e;--sj-primary-light:#2E7D32;--sj-primary-dark:#0D3D12;/* Accent Colors */ --sj-gold:#D4AF37;--sj-gold-light:#E6C85C;--sj-gold-dark:#B8960F;/* Marian Blue */ --sj-blue:#1E3A5F;--sj-blue-light:#2C5282;--sj-blue-dark:#102A43;/* Neutrals */ --sj-white:#FFFFFF;--sj-off-white:#FAFAFA;--sj-light-gray:#F5F5F5;--sj-gray:#E0E0E0;--sj-dark-gray:#757575;--sj-charcoal:#2D2D2D;--sj-black:#1A1A1A;/* Semantic Colors */ --sj-success:#43A047;--sj-warning:#FB8C00;--sj-error:#E53935;--sj-info:#1E88E5;/* Typography */ --font-primary:'Poppins', sans-serif;--font-heading:'Playfair Display', serif;/* Spacing */ --section-padding:5rem;--container-padding:1.5rem;/* Shadows */ --shadow-sm:0 2px 4px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.1);--shadow-lg:0 8px 24px rgba(0, 0, 0, 0.12);--shadow-xl:0 12px 40px rgba(0, 0, 0, 0.15);/* Border Radius */ --radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-xl:24px;/* Animations */ --transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}/* Malayalam Font Support */ :root:lang(ml) {--font-primary:'Noto Sans Malayalam', sans-serif;--font-heading:'Noto Sans Malayalam', serif}/* Keyframes */ @keyframes bounce-vertical {0%, 20%, 50%, 80%, 100% {transform:translateY(0)}40% {transform:translateY(-10px)}60% {transform:translateY(-5px)}}.scroll-indicator {display:block;text-align:center;color:var(--sj-white) !important;text-decoration:none;animation:bounce-vertical 2s infinite}.scroll-indicator:hover {color:var(--sj-gold) !important}[data-theme="dark"] {/* Professional Dark Mode Color Scheme */ /* Primary Colors - Adjusted for dark mode */ --sj-primary:#6CA0E6;/* Readable blue for visibility */ --sj-primary-dark:#2b5a9e;--sj-primary-light:#9DBFF2;/* Gold Accents - Muted for dark mode */ --sj-gold:#C9A227;/* Accent color for buttons/links */ --sj-gold-light:#E1C15A;--sj-gold-dark:#A88410;/* Backgrounds - Professional Dark Palette */ --sj-white:#171A21;/* Card/component backgrounds */ --sj-off-white:#0F1115;/* Main canvas background */ --sj-light-gray:#1F2430;/* Slightly lighter sections */ /* Text Colors - High Contrast */ --sj-charcoal:#E6E8EC;/* Primary text (headings, body) */ --sj-dark-gray:#A8B0BC;/* Secondary text (subtext, labels) */ --sj-black:#0B0D10;/* Fallback text color */ /* Borders and Dividers */ --sj-gray:#2A3240;/* Lines, subtle separations */ /* Shadows - Subtle for dark mode */ --shadow-sm:0 2px 4px rgba(0, 0, 0, 0.5);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.6);--shadow-lg:0 8px 24px rgba(0, 0, 0, 0.7);--shadow-xl:0 12px 40px rgba(0, 0, 0, 0.8)}/* Dark Mode Specific Overrides */ [data-theme="dark"] .footer {background-color:var(--sj-black);/* Dark background for footer */ color:var(--sj-charcoal);/* Primary text color */ }[data-theme="dark"] .footer h5 {color:var(--sj-gold);/* Accent color for headings */ }[data-theme="dark"] .footer p, [data-theme="dark"] .footer a {color:var(--sj-dark-gray);/* Secondary text color */ }[data-theme="dark"] .footer a:hover {color:var(--sj-gold);/* Accent color on hover */ }[data-theme="dark"] .footer-bottom {border-top-color:var(--sj-gray);/* Border color */ }/* Button text colors in dark mode */ [data-theme="dark"] .btn-outline-white {color:var(--sj-charcoal);border-color:var(--sj-gray)}[data-theme="dark"] .btn-outline-white:hover {background-color:var(--sj-charcoal);border-color:var(--sj-charcoal);color:var(--sj-off-white)}/* Hero section text in dark mode */ [data-theme="dark"] .hero-content h1 {color:var(--sj-charcoal);/* Primary text */ }[data-theme="dark"] .hero-content .tagline {color:var(--sj-gold);/* Accent color */ }[data-theme="dark"] .hero-content p {color:var(--sj-dark-gray);/* Secondary text */ }/* Page header in dark mode */ [data-theme="dark"] .page-header {background:linear-gradient(135deg, var(--sj-white) 0%, var(--sj-off-white) 100%)}[data-theme="dark"] .page-header h1 {color:var(--sj-charcoal)}[data-theme="dark"] .breadcrumb-item a {color:var(--sj-dark-gray)}[data-theme="dark"] .breadcrumb-item.active {color:var(--sj-gold)}/* Announcement cards in dark mode */ [data-theme="dark"] .announcement-card {background:linear-gradient(135deg, var(--sj-light-gray) 0%, var(--sj-white) 100%)}[data-theme="dark"] .announcement-card h5, [data-theme="dark"] .announcement-card p {color:var(--sj-charcoal)}/* Schedule cards in dark mode */ [data-theme="dark"] .schedule-card {background:var(--sj-light-gray);border:1px solid var(--sj-gray)}[data-theme="dark"] .schedule-card .card-header {background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light)) !important}[data-theme="dark"] .schedule-card .card-header h5 {color:var(--sj-white) !important}[data-theme="dark"] .schedule-card .card-body {background:var(--sj-light-gray)}[data-theme="dark"] .schedule-item {border-bottom-color:var(--sj-gray)}[data-theme="dark"] .schedule-day {color:var(--sj-charcoal) !important}[data-theme="dark"] .schedule-time {color:var(--sj-gold) !important}/* Fix text colors in schedule cards for dark mode */ [data-theme="dark"] .schedule-card .text-primary {color:var(--sj-primary) !important}[data-theme="dark"] .schedule-card .text-muted {color:var(--sj-dark-gray) !important}[data-theme="dark"] .schedule-card .text-dark {color:var(--sj-charcoal) !important}/* Thursday card with gold gradient background */ [data-theme="dark"] .schedule-card .card-header[style*="gold"] {background:linear-gradient(135deg, var(--sj-gold), var(--sj-gold-light)) !important}[data-theme="dark"] .schedule-card .card-header[style*="gold"] h5 {color:var(--sj-black) !important}[data-theme="dark"] .schedule-card .card-header[style*="gold"] .text-dark {color:var(--sj-black) !important}/* Mass timings section background */ [data-theme="dark"] #mass-timings {background-color:var(--sj-white) !important}/* Sunday Mass and Special Feasts text colors in dark mode */ [data-theme="dark"] #mass-timings .sunday-mass, [data-theme="dark"] #mass-timings .special-feasts {color:var(--sj-gold) !important}/* Social icons in dark mode */ [data-theme="dark"] .social-icons a {background-color:var(--sj-light-gray);border:1px solid var(--sj-gray)}[data-theme="dark"] .social-icons a:hover {background-color:var(--sj-gold);border-color:var(--sj-gold)}/* Navbar in dark mode */ [data-theme="dark"] .navbar {background-color:var(--sj-white) !important;border-bottom:1px solid var(--sj-gray)}[data-theme="dark"] .navbar.scrolled {background-color:var(--sj-off-white) !important}/* Navbar Toggler Icon (Hamburger Menu) in dark mode */ [data-theme="dark"] .navbar-toggler-icon, [data-bs-theme="dark"] .navbar-toggler-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 175, 55, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}/* ============================================ Reset & Base Styles ============================================ */ *, *::before, *::after {box-sizing:border-box}html {scroll-behavior:smooth;font-size:16px}body {font-family:var(--font-primary);font-weight:400;line-height:1.7;color:var(--sj-charcoal);background-color:var(--sj-off-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* ============================================ Typography ============================================ */ h1, h2, h3, h4, h5, h6 {font-family:var(--font-heading);font-weight:600;line-height:1.3;color:var(--sj-charcoal);margin-bottom:1rem}h1 {font-size:2.3rem}h2 {font-size:2.1rem}h3 {font-size:2rem}h4 {font-size:1.5rem}h5 {font-size:1.25rem}h6 {font-size:1rem}@media (max-width:768px) {h1 {font-size:1.75rem}h2 {font-size:1.875rem}h3 {font-size:1.5rem}h4 {font-size:1.25rem}}p {margin-bottom:1rem;color:var(--sj-dark-gray)}a {color:var(--sj-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover {color:var(--sj-primary-dark)}/* ============================================ Bootstrap Overrides ============================================ */ /* Navbar */ .navbar {padding:1rem 0;transition:all var(--transition-normal)}/* Logo Container - Horizontal Layout with Logo + Stacked Text */ .navbar-brand {display:inline-flex;flex-direction:row;align-items:center;text-decoration:none;gap:12px;font-family:'Quicksand', var(--font-heading), sans-serif}/* Logo Image */ .navbar-brand img {height:55px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .3));transition:filter var(--transition-normal)}[data-theme="dark"] .navbar-brand img {filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) brightness(1.1)}/* Text Container - Vertical Stacking with Right Alignment */ .navbar-brand .text-container {display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;text-align:right}/* Main Text (St Jude's Church) */ .navbar-brand .logo-main {font-size:22px;font-weight:700;letter-spacing:-0.5px;color:#2b5a9e !important}/* Sub Text (Choorithode / Location) */ .navbar-brand .logo-sub {font-size:12px;font-weight:500;color:#4a7cbd !important;margin-top:0px}/* Responsive Design for Logo */ @media (max-width:600px) {/* Ensure navbar container has proper alignment */ .navbar .container {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.navbar-brand {gap:8px;flex-shrink:1;min-width:0;display:flex;align-items:center}.navbar-brand img {height:36px;flex-shrink:0}.navbar-brand .text-container {min-width:0;flex-shrink:1;display:flex;flex-direction:column;justify-content:center}.navbar-brand .logo-main {font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navbar-brand .logo-sub {font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* Adjust navbar padding for mobile */ .navbar {padding:0.6rem 0}/* Ensure right-side controls are vertically centered */ .navbar .d-flex.align-items-center {gap:0.4rem !important;display:flex;align-items:center;flex-shrink:0}/* Fix icon button spacing and size */ .btn-icon {width:30px;height:30px;font-size:0.75rem;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-icon .lang-text {font-size:0.65rem}/* Hamburger menu button spacing */ .navbar-toggler {padding:0.25rem 0.5rem;margin-left:0.4rem !important;flex-shrink:0}}/* Extra small screens (portrait phones) */ @media (max-width:400px) {.navbar-brand {gap:6px}.navbar-brand img {height:33px}.navbar-brand .logo-main {font-size:13px}.navbar-brand .logo-sub {font-size:9px}.btn-icon {width:28px;height:28px}.navbar .d-flex.align-items-center {gap:0.3rem !important}}.navbar-nav .nav-link {font-weight:500;padding:0.5rem 1rem !important;color:var(--sj-charcoal) !important;transition:color var(--transition-fast)}.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {color:var(--sj-primary) !important}/* Dropdown Menu Styling */ .dropdown-menu {border-radius:var(--radius-md);padding:0.5rem 0;margin-top:0}.dropdown-menu .dropdown-item {font-weight:500;padding:0.6rem 1.5rem;color:var(--sj-charcoal) !important;transition:all var(--transition-fast)}.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {color:var(--sj-primary) !important;background-color:rgba(43, 90, 158, 0.05) !important}[data-theme="dark"] .dropdown-menu {background-color:var(--sj-black);border:1px solid var(--sj-gray)}[data-theme="dark"] .dropdown-menu .dropdown-item {color:var(--sj-dark-gray) !important}[data-theme="dark"] .dropdown-menu .dropdown-item:hover {color:var(--sj-primary) !important;background-color:rgba(108, 160, 230, 0.1) !important}/* Multi-level Dropdown Support */ .dropdown-submenu {position:relative}.dropdown-submenu .dropdown-menu {top:0;left:100%;margin-top:-5px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.dropdown-item.dropdown-toggle::after {border-top:0.3em solid transparent;border-right:0;border-bottom:0.3em solid transparent;border-left:0.3em solid;margin-left:0.5rem;vertical-align:middle}@media (min-width:992px) {.dropdown-submenu:hover>.dropdown-menu {display:block}}@media (max-width:991.98px) {/* Mobile dropdown menu positioning */ .navbar-nav .dropdown-menu {position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:none;box-shadow:none;display:none;padding-left:1rem}/* Show dropdown menu when .show class is applied */ .navbar-nav .dropdown-menu.show {display:block !important}/* Submenu styling for mobile */ .dropdown-submenu .dropdown-menu {position:static;margin-left:1rem;display:none;box-shadow:none;border:none}.dropdown-submenu.show .dropdown-menu {display:block}/* Dropdown items in mobile view */ .navbar-nav .dropdown-menu .dropdown-item {padding:0.5rem 1rem;white-space:normal}}.navbar.scrolled {background-color:var(--sj-white) !important;box-shadow:var(--shadow-md);padding:0.5rem 0}/* Mobile Navbar - Overlay Style */ @media (max-width:991.98px) {.navbar-collapse {position:absolute;top:100%;left:0;right:0;background-color:var(--sj-white);padding:1rem;box-shadow:var(--shadow-lg);z-index:1000;border-top:1px solid var(--sj-gray)}[data-theme="dark"] .navbar-collapse {background-color:var(--sj-black);/* Or match dark theme navbar bg */ border-top-color:var(--sj-gray)}}/* Buttons */ .btn {font-weight:500;padding:0.75rem 1.75rem;border-radius:var(--radius-md);transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:0.5px;font-size:0.875rem}.btn-primary {background-color:var(--sj-primary);border-color:var(--sj-primary)}.btn-primary:hover, .btn-primary:focus {background-color:var(--sj-primary-dark);border-color:var(--sj-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-outline-primary {color:var(--sj-primary);border-color:var(--sj-primary)}.btn-outline-primary:hover {background-color:var(--sj-primary);border-color:var(--sj-primary);transform:translateY(-2px)}.btn-gold {background-color:var(--sj-gold);border-color:var(--sj-gold);color:var(--sj-black)}.btn-gold:hover {background-color:var(--sj-gold-dark);border-color:var(--sj-gold-dark);color:var(--sj-black);transform:translateY(-2px)}.btn-outline-gold {color:var(--sj-gold);border-color:var(--sj-gold);background-color:transparent}.btn-outline-gold:hover {background-color:var(--sj-gold);color:var(--sj-black);transform:translateY(-2px)}/* Icon Buttons for Navbar Toggles */ .btn-icon {width:32px;height:32px;border-radius:50%;border:1.5px solid var(--sj-gold);background-color:transparent;color:var(--sj-gold);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-normal);font-size:0.875rem;padding:0}.btn-icon:hover {background-color:var(--sj-gold);color:var(--sj-black);transform:scale(1.05)}.btn-icon .lang-text {font-size:0.7rem;font-weight:600;letter-spacing:0.5px}/* Malayalam Font Size Fixes & Adjustments for Long Titles */ [lang="ml"] .navbar-brand {font-size:1.1rem !important;line-height:1.2;white-space:normal}@media (max-width:600px) {[lang="ml"] .navbar-brand .logo-main {font-size:15px !important;line-height:1.1}[lang="ml"] .navbar-brand .logo-sub {font-size:10px !important}}@media (max-width:400px) {[lang="ml"] .navbar-brand {font-size:0.85rem !important;max-width:200px}[lang="ml"] .navbar-brand .logo-main {font-size:13px !important}[lang="ml"] .navbar-brand .logo-sub {font-size:9px !important}}[lang="ml"] .navbar-nav .nav-link, [lang="ml"] #lang-label {font-size:0.9rem}/* Malayalam font size overrides removed to match global standard */ /* [lang="ml"] h1 {font-size:1.9rem}*/ /* [lang="ml"] h2 {font-size:1.8rem}*/ /* Specific Hero Overrides for Malayalam */ [lang="ml"] .hero-content h1 {font-size:2.4rem}@media (max-width:768px) {[lang="ml"] h1 {font-size:1.6rem}[lang="ml"] h2 {font-size:1.4rem}[lang="ml"] .hero-content h1 {font-size:1.7rem}}/* Cards */ .card {border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);overflow:hidden}.card:hover {transform:translateY(-5px);box-shadow:var(--shadow-lg)}.card-body {padding:1.5rem}/* Forms */ .form-control {padding:0.875rem 1rem;border-radius:var(--radius-md);border:1px solid var(--sj-gray);transition:all var(--transition-fast)}.form-control:focus {border-color:var(--sj-primary);box-shadow:0 0 0 3px rgba(43, 90, 158, 0.1)}.form-label {font-weight:500;color:var(--sj-charcoal);margin-bottom:0.5rem}/* ============================================ Custom Components ============================================ */ /* Section Styles */ .section {padding:var(--section-padding) 0}.section-title {text-align:center;margin-bottom:3rem}.section-title h2 {position:relative;display:inline-block;margin-bottom:1rem}.section-title h2::after {content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg, var(--sj-primary), var(--sj-gold));border-radius:2px}.section-title p {max-width:600px;margin:1.5rem auto 0;color:var(--sj-dark-gray)}/* Divider with Icon */ .divider-icon {display:flex;align-items:center;justify-content:center;margin:2rem 0}.divider-icon::before, .divider-icon::after {content:'';flex:1;max-width:100px;height:1px;background:linear-gradient(90deg, transparent, var(--sj-gold))}.divider-icon::after {background:linear-gradient(90deg, var(--sj-gold), transparent)}.divider-icon i {margin:0 1rem;color:var(--sj-gold);font-size:1.25rem}/* Hero Section */ .hero-section {position:relative;min-height:100vh;display:flex;align-items:center;background-size:cover;background-position:center;background-attachment:fixed}.hero-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));opacity:0.8}[data-theme="dark"] .hero-overlay {background:linear-gradient(135deg, hsla(228, 47%, 18%, 1) 0%, hsla(150, 30%, 25%, 1) 100%);opacity:0.9}.hero-content {position:relative;z-index:2;color:var(--sj-white);text-align:center;padding:2rem}.hero-content h1 {color:var(--sj-white);font-size:3.5rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3)}.hero-content .tagline {font-size:1.25rem;color:var(--sj-gold);font-weight:500;margin-bottom:1.5rem}.hero-content p {color:rgba(255, 255, 255, 0.9);font-size:1.1rem;max-width:700px;margin:0 auto 2rem}@media (max-width:768px) {.hero-content h1 {font-size:2.25rem}.hero-content .tagline {font-size:1rem}.hero-section {background-attachment:scroll}}/* Quick Access Cards */ .quick-card {text-align:center;padding:2rem 1.5rem;background:var(--sj-white);border-radius:var(--radius-lg);transition:all var(--transition-normal);display:flex;flex-direction:column;justify-content:flex-start}.quick-card:hover {transform:translateY(-8px);box-shadow:var(--shadow-xl)}.quick-card .icon-wrapper {width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.quick-card:hover .icon-wrapper {background:linear-gradient(135deg, var(--sj-gold), var(--sj-gold-light));transform:scale(1.1)}.quick-card .icon-wrapper i {font-size:2rem;color:var(--sj-white)}.quick-card h5 {color:var(--sj-charcoal);margin-bottom:0.75rem}.quick-card p {font-size:0.9rem;color:var(--sj-dark-gray);margin-bottom:1.5rem;flex-grow:1}.quick-card .btn {margin-top:auto}/* Info Cards - See Contact Page Specific Fixes section for full styles */ /* Feature Box */ .feature-box {text-align:center;padding:2.5rem 2rem}.feature-box i {font-size:3rem;color:var(--sj-primary);margin-bottom:1.5rem}.feature-box h4 {margin-bottom:1rem}/* Announcement Card */ .announcement-card {background:linear-gradient(135deg, var(--sj-primary) 0%, var(--sj-blue) 100%);border-radius:var(--radius-lg);padding:2rem;color:var(--sj-white)}.announcement-card .badge {background-color:var(--sj-gold);color:var(--sj-black);font-weight:600;padding:0.5rem 1rem;border-radius:var(--radius-sm)}.announcement-card h5 {color:var(--sj-white);margin:1rem 0}.announcement-card p {color:rgba(255, 255, 255, 0.85);margin-bottom:0}/* Footer */ .footer {background-color:var(--sj-charcoal);color:var(--sj-white);padding:4rem 0 2rem}.footer h5 {color:var(--sj-gold);font-family:var(--font-primary);font-weight:600;margin-bottom:1.5rem}.footer p {color:rgba(255, 255, 255, 0.7)}.footer a {color:rgba(255, 255, 255, 0.7);transition:color var(--transition-fast)}.footer a:hover {color:var(--sj-gold)}.footer-links {list-style:none;padding:0;margin:0}.footer-links li {margin-bottom:0.75rem}.footer-links li a {display:flex;align-items:center;gap:0.5rem}.footer-bottom {border-top:1px solid rgba(255, 255, 255, 0.1);margin-top:3rem;padding-top:2rem;text-align:center}.footer-bottom p {margin:0;font-size:0.9rem}/* Social Icons */ .social-icons {display:flex;gap:1rem}.social-icons a {width:40px;height:40px;border-radius:50%;background-color:rgba(255, 255, 255, 0.1);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.social-icons a:hover {background-color:var(--sj-gold);transform:translateY(-3px)}.social-icons a i {color:var(--sj-white)}/* Back to Top */ .back-to-top {position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));color:var(--sj-white);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--transition-normal);z-index:1000;cursor:pointer;border:none;box-shadow:var(--shadow-md)}.back-to-top.visible {opacity:1;visibility:visible}.back-to-top:hover {transform:translateY(-5px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg, var(--sj-gold), var(--sj-gold-light))}/* Page Header */ .page-header {background:linear-gradient(135deg, var(--sj-primary) 0%, var(--sj-blue) 100%);padding:8rem 0 4rem;text-align:center;position:relative}.page-header::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:0.5}.page-header h1 {color:var(--sj-white);position:relative;z-index:1}.page-header .breadcrumb {background:transparent;justify-content:center;margin-bottom:0;position:relative;z-index:1}.page-header .breadcrumb-item a {color:rgba(255, 255, 255, 0.8)}.page-header .breadcrumb-item.active {color:var(--sj-gold)}.page-header .breadcrumb-item+.breadcrumb-item::before {color:rgba(255, 255, 255, 0.5)}/* Utility Classes */ .bg-light-green {background-color:rgba(43, 90, 158, 0.05)}[data-theme="dark"] .bg-light-green {background-color:rgba(67, 160, 71, 0.1);/* Brighter green tint for dark mode */ }.text-primary-custom {color:var(--sj-primary) !important}.text-gold {color:var(--sj-gold) !important}.gradient-text {background:linear-gradient(135deg, var(--sj-primary), var(--sj-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}/* Animations */ @keyframes fadeInUp {from {opacity:0;transform:translateY(30px)}to {opacity:1;transform:translateY(0)}}@keyframes pulse {0%, 100% {transform:scale(1)}50% {transform:scale(1.05)}}.animate-fadeInUp {animation:fadeInUp 0.6s ease forwards}.animate-delay-1 {animation-delay:0.1s}.animate-delay-2 {animation-delay:0.2s}.animate-delay-3 {animation-delay:0.3s}.animate-delay-4 {animation-delay:0.4s}/* Loading Spinner */ .loading-spinner {width:50px;height:50px;border:4px solid var(--sj-gray);border-top-color:var(--sj-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin {to {transform:rotate(360deg)}}/* ============================================ Responsive Design Improvements ============================================ */ /* Mobile First - Extra Small Devices */ @media (max-width:575.98px) {html {font-size:14px}h1 {font-size:2rem}h2 {font-size:1.75rem}h3 {font-size:1.5rem}h4 {font-size:1.25rem}.section {padding:3rem 0}.hero-section {min-height:100vh;padding:6rem 0 4rem}.hero-section h1 {font-size:2rem}.hero-section .tagline {font-size:0.9rem}.hero-content .btn {display:block;width:100%;margin-bottom:0.5rem}.page-header {padding:6rem 0 2rem}.page-header h1 {font-size:1.75rem}.quick-card {padding:1.5rem}.info-card {padding:1.25rem}.info-card h5 {font-size:1rem}.footer {padding:2.5rem 0 1.5rem}.footer .row>div {text-align:center;margin-bottom:1.5rem}.footer-links {display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}.footer-links li {display:inline-block}/* Social icons centered on mobile */ .footer .social-icons {justify-content:center !important}/* Map responsive */ .rounded-lg iframe {height:300px !important}/* Form improvements */ .form-control, .form-select {font-size:16px;/* Prevents zoom on iOS */ }/* Contact page mobile fixes */ .icon-circle-lg {width:60px;height:60px}.icon-circle-lg i {font-size:1.5rem !important}.btn-lg {padding:0.75rem 1.5rem;font-size:1rem}/* Directions section mobile */ .col-lg-5 .info-card, .col-lg-7 .rounded-lg {margin-bottom:1rem}}/* Small Devices (landscape phones, 576px and up) */ @media (min-width:576px) and (max-width:767.98px) {html {font-size:15px}.hero-section h1 {font-size:2.5rem}.section {padding:4rem 0}.rounded-lg iframe {height:350px !important}}/* Medium Devices (tablets, 768px and up) */ @media (min-width:768px) and (max-width:991.98px) {.hero-section h1 {font-size:3rem}.hero-content .btn {display:inline-block;width:auto}.footer .row>div {text-align:left}}/* Large Devices (desktops, 992px and up) */ @media (min-width:992px) {.hero-section {min-height:100vh}.hero-section h1 {font-size:3.5rem}}/* Extra Large Devices (large desktops, 1200px and up) */ @media (min-width:1200px) {.container {max-width:1140px}}/* ============================================ Image Optimization Classes ============================================ */ img {max-width:100%;height:auto}.img-fluid {max-width:100%;height:auto}.img-cover {width:100%;height:100%;object-fit:cover}.img-contain {width:100%;height:100%;object-fit:contain}/* Lazy loading placeholder */ img[loading="lazy"] {background-color:var(--sj-light-gray)}/* ============================================ Contact Page Specific Fixes ============================================ */ .info-card {background:var(--sj-white);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-md);transition:transform var(--transition-normal), box-shadow var(--transition-normal);height:100%;display:flex;flex-direction:column}.info-card:hover {transform:translateY(-5px);box-shadow:var(--shadow-lg)}.info-card h5 {display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;color:var(--sj-primary);font-size:1.1rem}.info-card h5 i {color:var(--sj-gold);flex-shrink:0}.info-card p {flex-grow:1}.info-card.text-center h5 {justify-content:center}.info-card.border-gold {border:2px solid var(--sj-gold);border-left:2px solid var(--sj-gold)}/* Contact Info Cards (centered with icons) */ .info-card.text-center {border-left:none;text-align:center}.info-card.text-center .icon-circle {margin-bottom:1rem}/* Form Section Alignment */ .section .row.g-5 {align-items:flex-start}/* Schedule Card in Contact */ .schedule-card {background:var(--sj-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:1rem}.schedule-card .card-header {background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));color:var(--sj-white);padding:1rem 1.5rem;border:none}.schedule-card .card-header h5 {margin:0;color:var(--sj-white);font-size:1rem;display:flex;align-items:center}.schedule-card .card-body {padding:1.25rem}.schedule-item {display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;border-bottom:1px solid var(--sj-light-gray)}.schedule-item:last-child {border-bottom:none;padding-bottom:0}.schedule-day {color:var(--sj-dark-gray);font-size:0.95rem}.schedule-time {font-weight:600;color:var(--sj-primary);font-size:0.95rem}/* Map Container Fix */ .rounded-lg {border-radius:var(--radius-lg)}.rounded-lg iframe {display:block;border-radius:var(--radius-lg)}/* Icon Circle Improvements */ .icon-circle {display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.icon-circle-sm {width:40px;height:40px}.icon-circle-md {width:60px;height:60px}.icon-circle-lg {width:80px;height:80px}.icon-circle-primary {background-color:var(--sj-primary);color:var(--sj-white)}.icon-circle-gold {background-color:var(--sj-gold);color:var(--sj-black)}/* Schedule Card Fixes */ .schedule-card {background:var(--sj-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);height:100%}.schedule-card .card-header {background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));color:var(--sj-white);padding:1.25rem}.schedule-card .card-header h5 {margin:0;color:var(--sj-white);display:flex;align-items:center}.schedule-card .card-body {padding:1.5rem}.schedule-item {display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;border-bottom:1px solid var(--sj-gray)}.schedule-item:last-child {border-bottom:none}.schedule-day {color:var(--sj-dark-gray)}.schedule-time {font-weight:600;color:var(--sj-primary)}/* Quick Card Improvements */ .quick-card {background:var(--sj-white);border-radius:var(--radius-lg);padding:2rem;text-align:center;box-shadow:var(--shadow-md);transition:all var(--transition-normal);height:100%}.quick-card:hover {transform:translateY(-8px);box-shadow:var(--shadow-xl)}.quick-card .icon-wrapper {width:70px;height:70px;background:linear-gradient(135deg, var(--sj-primary), var(--sj-primary-light));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.quick-card .icon-wrapper i {font-size:1.75rem;color:var(--sj-white)}.quick-card h5 {margin-bottom:0.75rem}.quick-card p {color:var(--sj-dark-gray);margin-bottom:1rem;font-size:0.9rem}/* Map Container */ .map-container {border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.map-container iframe {display:block;width:100%}/* ============================================ Performance Optimizations ============================================ */ /* Reduce repaints */ .navbar.fixed-top {will-change:transform;backface-visibility:hidden}/* GPU acceleration for animations */ [data-animate] {will-change:opacity, transform}/* Smooth scrolling with reduced motion support */ @media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}/* Image Not Found Placeholder Styles */ .not-found-container {display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#f0f2f0;text-align:center;padding:1rem;position:absolute;top:0;left:0;z-index:100}.not-found-container .icon-svg {width:60px;height:60px;fill:#8e8e8e;display:block;margin-bottom:15px}.not-found-container .not-found-text {font-size:1rem;font-style:italic;color:#4a4a4a;font-weight:400;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}@media (max-width:991px) {.schedule-card .card-body {padding:0 !important}.schedule-card .schedule-item {flex-direction:column !important;align-items:center !important;text-align:center !important;gap:0.5rem !important;padding:1.5rem !important}}