/* ==================================================== */ /* LANDING PAGE HERO SECTION STYLES */ /* ==================================================== */ /* --- 1. Base Layout and Light Theme (Default) --- */ body { /* This provides a clean default and helps with the sticky footer */ background-color: #edf2f9; } .hero-section { /* Use flexbox to vertically center the content */ display: flex; align-items: center; /* This ensures it fills the screen height without forcing a scroll */ min-height: calc(100vh - 60px); /* Adjust 60px if your footer height is different */ padding: 60px 0; /* Default light theme background and text colors */ background-color: #edf2f9; /* Light grey */ color: #212529; /* Dark text */ /* Smooth transition for when the theme changes */ transition: background-color 0.3s ease, color 0.3s ease; } /* Styles for the main headline and lead paragraph */ .hero-content h1 { font-size: 3.2rem; font-weight: 300; line-height: 1.3; } .hero-content .lead { font-size: 1.2rem; max-width: 500px; color: #6c757d; /* Muted grey text for light theme */ } /* --- 2. Dark Theme Overrides --- */ /* These styles ONLY apply when the Falcon toggle adds the 'dark' class to the tag */ html.dark .hero-section { /* The navy blue gradient for dark mode */ background-image: linear-gradient(180deg, #172a45 0%, #0a192f 100%); color: #ccd6f6; /* Soft light text for dark mode */ } html.dark .hero-content h1 { color: #e6f1ff; /* Brighter white for the headline */ } html.dark .hero-content .lead { color: #8892b0; /* Muted blue-grey text for dark mode */ } html.dark .mission-card { /* Use transparent colors for the "glass" effect card in dark mode */ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } html.dark .mission-card h5, html.dark .mission-card .mission-text { /* Ensure text inside the card is also light */ color: #ccd6f6; } /* --- 3. Shared Styles (Apply in both Light & Dark mode) --- */ /* The 'typed.js' animated text */ .hero-content h1 .typed-text { font-weight: 700 !important; /* Use a generic link color that should be defined by your theme, or hardcode one */ color: #0d6efd; /* Default Bootstrap blue - will be overridden for dark mode */ } html.dark .hero-content h1 .typed-text { color: #64ffda; /* Teal accent for dark mode */ } /* The call-to-action button */ .hero-content .btn-primary { padding: 0.8rem 2rem; font-size: 1.1rem; font-weight: 500; transition: all 0.2s ease-in-out; } .hero-content .btn-primary:hover { transform: translateY(-2px); } /* The "Our Mission" card on the right */ .mission-card { background-color: #ffffff; /* White card for light mode */ border: 1px solid #dee2e6; /* Standard border for light mode */ border-radius: 0.5rem; padding: 2rem; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); } .mission-card h5 { letter-spacing: 2px; font-weight: 500; text-align: center; } .mission-card .mission-text { font-size: 1rem; line-height: 1.6; text-align: left; } /* Responsive adjustments */ @media (max-width: 991.98px) { .hero-section { min-height: auto; /* Let content define height on mobile */ } .hero-content { text-align: center; } .hero-content .lead { margin-left: auto; margin-right: auto; } }