/* Base Styles */ body { background-color: #000; /* Uncomment and update path when you find a starry image you like */ /* background-image: url('images/starry-bg.png'); */ background-size: cover; background-attachment: fixed; /* Stars stay in place while scrolling */ color: #fff; font-family: 'Orbitron', Arial, sans-serif; /* Sci-fi font for cosmic vibe */ scroll-behavior: smooth; /* Smooth scrolling for in-page links */ } /* Ensure Google Fonts is in your HTML : */ .navbar-dark { background-color: #000 !important; } /* Logo Styling */ .navbar-brand img { max-height: 140px; /* Adjusted for better scaling */ } /* Responsive logo size */ @media (max-width: 768px) { .navbar-brand img { max-height: 80px; } } /* Hero Section */ .hero-section { background: url('images/hero-background.jpg') no-repeat center center; background-size: cover; background-color: #001f3f; /* Fallback if image fails */ position: relative; min-height: 500px; /* Matches your HTML */ } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)); z-index: 1; } .hero-content { position: relative; z-index: 2; /* Ensures content sits above overlay */ } .hero-section h1 { position: relative; z-index: 2; text-shadow: 0 0 5px rgba(0, 0, 255, 0.8), 0 0 15px rgba(0, 0, 255, 0.5), 0 0 25px rgba(0, 0, 255, 0.3); /* Enhanced neon glow */ } .hero-section p { position: relative; z-index: 2; text-shadow: 0 0 10px rgba(0, 0, 255, 0.5); /* Subtle neon effect */ } /* Cards */ .card { border: none; background-color: #001f3f; transition: all 0.3s ease; /* Smooth transition for hover effects */ } .card:hover { background-color: #003366; box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* Neon blue glow */ transform: scale(1.02); /* Slight zoom on hover */ } /* Footer */ footer a { color: #fff; text-decoration: none; } footer a:hover { text-decoration: underline; } /* Images */ .img-fluid { max-width: 100%; height: auto; border-radius: 5px; } /* Accordion (for FAQ or other pages) */ .accordion-button { background-color: #001f3f !important; } .accordion-button:not(.collapsed) { color: #fff; background-color: #003366 !important; } .accordion-body { background-color: #001f3f; } /* Form Styling */ form .form-control { background-color: #001f3f; border: 1px solid #003366; color: #fff; } form .form-control:focus { background-color: #001f3f; border-color: #007bff; box-shadow: 0 0 5px #007bff; } /* Buttons - Adjusted for Consistency */ .btn-primary { background-color: #007bff; border-color: #007bff; transition: all 0.3s ease; /* Added for smooth hover */ } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } /* Explicitly targeting both button and link elements to override Bootstrap */ button.btn-outline-light, a.btn-outline-light { border-color: #fff; color: #fff; transition: all 0.3s ease; /* Smooth transition */ } button.btn-outline-light:hover, a.btn-outline-light:hover { background-color: #003366; /* Dark cosmic blue */ color: #fff; /* Stays white */ border-color: #00ffff; /* Neon cyan border */ } /* Text Colors */ .text-success { color: #28a745; /* Bootstrap success color */ } .text-danger { color: #dc3545; /* Bootstrap danger color */ } /* Live Feedback Styling (e.g., FAQ Search) */ .text-center.mt-3 { font-style: italic; color: #00ffff; /* Cosmic cyan */ animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Search Bar Focus Effect */ #faqSearch:focus { box-shadow: 0 0 10px #00ffff; /* Cosmic glow effect */ border-color: #00ffff; } /* Cosmic Sphere Section (for XephalorCosmicSphere.html) */ .cosmic-sphere-section { background: radial-gradient(circle at center, #001f3f 0%, #000 70%); padding: 50px; position: relative; overflow: hidden; } .cosmic-sphere-section::after { content: ''; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent); top: 20%; left: 20%; animation: pulse 4s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 0.5; } } /* Alien Face Pop-Out */ .alien-container { position: relative; transform-style: preserve-3d; /* Enables 3D transforms */ perspective: 1000px; /* Creates 3D space */ display: flex; justify-content: center; /* Centers the image */ align-items: center; } .alien-face { max-width: 250px; /* Increased from 200px for a little bigger size */ height: auto; /* Keeps aspect ratio */ transition: transform 0.5s ease-in-out; /* Smooth hover transition */ transform: translateZ(0px); /* Starting position */ transform-style: preserve-3d; background: none; /* No background behind image */ } .alien-face:hover { transform: translateZ(150px) scale(1.1); /* Pops out and slightly enlarges */ filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.8)); /* Cosmic green glow */ } /* Floating animation */ @keyframes alien-float { 0% { transform: translateZ(0px); } 50% { transform: translateZ(50px); } 100% { transform: translateZ(0px); } } .alien-face { animation: alien-float 4s infinite ease-in-out; /* Subtle floating */ }