/* ======================== 1. Base Styles & Fonts ======================== */ /* Note: The Google Fonts import is handled in the HTML for better performance, but we apply them here. */ html { /* Ensures anchor links stop below the fixed header */ scroll-padding-top: 140px; scroll-behavior: smooth; } body { /* Roboto for body text - clean and legible */ font-family: 'Roboto', sans-serif; font-size: 1.1rem; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } h1, h2, h3, h4, h5, h6, .navbar-nav .nav-link, .btn, .header-lower { /* Oswald for headings and UI elements - strong and industrial */ font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; } section { padding-top: 4rem; padding-bottom: 4rem; } /* ======================== 2. Navigation (Animated Underline) ======================== */ /* Brand Black Background */ .bg-nexeed { background-color: #000; } /* Brand Green Background */ .bg-nexeed-green { background-color: #3d5e38; } /* Ensure the nav sits on top of everything */ .fixed-top { z-index: 1030; } /* Navigation Links Styling */ .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.9); font-weight: 500; padding-right: 1.5rem; padding-left: 0; text-transform: uppercase; font-size: 0.95rem; transition: color 0.3s ease; /* Prepare for the underline animation */ position: relative; text-decoration: none; /* Turn off default underline */ } /* The Animated Underline Line */ .navbar-dark .navbar-nav .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; /* Thickness of the line */ bottom: 5px; /* Spacing from text */ left: 0; background-color: #fff; transition: width 0.3s ease-out; /* The growing animation */ } /* Hover State */ .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,0.3); } /* Trigger animation on hover and for active link */ .navbar-dark .navbar-nav .nav-link:hover::after, .navbar-dark .navbar-nav .nav-link.active::after { width: 100%; /* Grows to full width */ } /* Contact Info Top Bar Styling */ .navbar .small { font-size: 0.85rem; letter-spacing: 0.5px; font-family: 'Roboto', sans-serif; /* Keep contact info readable */ } /* Logo Sizing */ .navbar-logo { max-height: 80px; width: auto; transition: max-height 0.3s ease; } /* ======================== 3. Header / Hero Section ======================== */ /* Set the Header as the reference point for absolute positioning */ .header-overlay { position: relative; /* Default for older browsers */ height: 100vh; /* Modern fix: 'svh' calculates height excluding the browser URL bar for mobile */ height: 100svh; min-height: 600px; /* Prevents squishing on landscape phones */ /* Clip overflow so nothing spills out */ overflow: hidden; } /* Create the semi-transparent black layer (the actual overlay) */ .header-overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 1; } /* Ensure the text and button container is always visible above the overlay */ .header-overlay > .container { position: relative; z-index: 2; } .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } /* Bottom Bar (Green strip at bottom of header) */ .header-lower { background-color: rgba(61, 94, 56, 0.9); /* Brand Green with opacity */ color: white; width: 100%; /* Positioning */ position: absolute; bottom: 0; left: 0; z-index: 2; /* Centering and Spacing */ text-align: center; padding-top: 12px; padding-bottom: 12px; /* Text styling */ font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 0.9rem; } .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5); } .breadcrumb-white { --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5) ; } /* ======================== 4. Animations (Fade In) ======================== */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in-up { opacity: 0; /* Start invisible */ animation: fadeIn 1.2s ease-out forwards; } .fade-in-up-delay-1 { animation-delay: 0.2s; } .fade-in-up-delay-2 { animation-delay: 0.4s; } /* ======================== 5. Components (Buttons) ======================== */ .btn-nexeed { background-color: #3d5e38; border-color: #3d5e38; /* Changed from #fff to match background */ text-decoration: none; color: white; padding: 0.5rem 1.5rem; /* Added padding for a better button shape */ transition: all 0.3s ease; } .btn-nexeed:hover { background-color: #2b4427; /* Slightly darker green on hover */ border-color: #2b4427; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Add shadow on hover */ } /* ======================== 6. Mobile Responsiveness ======================== */ @media (max-width: 991.98px) { /* Shrink logo on smaller screens */ .navbar-logo { max-height: 60px; } /* Center the logo container on mobile */ .col-lg-3 { text-align: center !important; margin-top: 1rem; } /* Adjust header text size */ h1.display-5 { font-size: 2.3rem; } /* Ensure the bottom bar text doesn't dominate on small screens */ .header-lower { font-size: 0.8rem; /* Slightly smaller text */ padding-top: 10px; padding-bottom: 10px; } } /* ======================== 7. Content Sections ======================== */ .text-nexeed { color: #3d5e38; } .letter-spacing-2 { letter-spacing: 2px; } /* Optional: detailed shadow for images to make them pop off the white background */ .shadow-soft { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Service Icons Sizing */ .service-icon { max-height: 80px; /* Adjust this value if you want them larger/smaller */ width: auto; margin-bottom: 10px; } /* ======================== 9. Blog Section ======================== */ .blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; } .blog-img-wrap { height: 220px; overflow: hidden; } .blog-img-wrap img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-img-wrap img { transform: scale(1.05); } .blog-date { z-index: 2; letter-spacing: 1px; } /* ======================== 10. Contact Section ======================== */ .contact-icon { width: 45px; height: 45px; transition: transform 0.3s ease; } /* Give the icons a slight pop when hovering over the contact block */ .d-flex.align-items-start:hover .contact-icon { transform: scale(1.1); } .map-card { background-color: #ffffff; transition: box-shadow 0.3s ease; } .map-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; } /* ======================== 11. Footer ======================== */ .hover-white { transition: color 0.3s ease; } .hover-white:hover { color: #ffffff !important; } /* ======================== 12. Featured Equipment (Missing Rules) ======================== */ /* Card Styling */ .equipment-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .equipment-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; } .equipment-card .card-title { color: #212529; font-size: 1.5rem; } /* Image Wrapper & Overlay Effects */ .card-img-wrap { height: 250px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; } .card-img-wrap img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.5s ease; } .equipment-card:hover .card-img-wrap img { transform: scale(1.1); } /* Green Overlay on Hover */ .card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(61, 94, 56, 0.85); opacity: 0; transition: opacity 0.3s ease; } .equipment-card:hover .card-overlay { opacity: 1; } /* Link Styling */ .link-nexeed { color: #3d5e38; transition: color 0.2s; } .link-nexeed:hover { color: #2b4427; text-decoration: underline !important; } /* ======================== 13. Testimonials Section ======================== */ .testimonial-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 10px; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; } /* Specific styling to make the background quote mark look elegant */ .testimonial-card .bi-quote { color: #e9ecef !important; /* Very faint gray */ line-height: 1; } /* ======================== 15. Carousel Styles ======================== */ /* Ensure the images cover the area without distortion */ .carousel-inner img { height: 100%; object-fit: cover; } /* Add a subtle dark background behind the arrows so they are visible on light images */ .carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0, 0, 0, 0.5); background-size: 50%; border-radius: 50%; width: 3rem; height: 3rem; } /* Adjust indicator styles to match brand */ .carousel-indicators [data-bs-target] { background-color: #3d5e38; height: 4px; } /* ======================== 16. Download Cards ======================== */ .download-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .download-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; } .pdf-icon-wrap { width: 70px; height: 70px; } /* Ensure the link text turns darker green on hover instead of default Bootstrap blue */ a:hover .download-card .text-nexeed { color: #2b4427 !important; } /* ======================== 17. Image Gallery Section ======================== */ .gallery-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 8px; /* Slightly rounded corners */ } .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; } .gallery-img-wrap { overflow: hidden; /* Keeps the zooming image from spilling out of the card */ } .gallery-img-wrap img { transition: transform 0.6s ease; } /* Zoom the image in slightly when hovering over the card */ .gallery-card:hover .gallery-img-wrap img { transform: scale(1.08); }