/* styles.css */ /* ============================================== */ /* --- 0. COMPANY COLOR PALETTE & TYPOGRAPHY --- */ /* ============================================== */ :root { /* Main Brand Colors (Darker Modern Scheme) */ --primary-color: #55aaff; /* Light Blue (Vibrant Action Color) */ --background-dark: #2c343d; /* Primary Dark Slate Background (Cleaner) */ --background-light: #3a4550; /* Secondary Dark Background (Contrast Bands) */ --white: #ffffff; --dark: #1a2027; /* Deepest Dark (Nav/Text on Light) */ /* --- NAV HOVER STYLES --- */ /* Only apply hover effect on desktop screens (width > 992px) */ @media all and (min-width: 992px) { .navbar .nav-item .dropdown-menu { display: none; margin-top: 0; } /* Show dropdown when hovering over the list item */ .navbar .nav-item:hover .dropdown-menu { display: block; } .navbar .nav-item .dropdown-menu { margin-top: 0; } } /* Functional Colors - Consistent with Primary Blue */ --lift-color: #007bff; --undercoat-color: #007bff; --mechanical-color: #28a745; --upholstery-color: #17a2b8; /* Typography (You need to link these in your HTML ) */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Roboto', sans-serif; } body { font-family: var(--font-body); color: var(--white); background-color: var(--background-dark); } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; } /* --- GLOBAL STYLING --- */ /* Top Bar (Contact Info) */ .bg-primary { background-color: var(--primary-color) !important; } .text-dark { color: var(--dark) !important; } .text-white { color: var(--white) !important; } /* Navbar (Deep Dark Contrast) */ .navbar-dark.bg-dark { background-color: var(--dark) !important; } /* Primary Button/Links - Modern, defined look */ .btn { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; border-radius: 4px; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--dark); } .btn-primary:hover { background-color: #3388cc; border-color: #3388cc; box-shadow: 0 0 15px rgba(85, 170, 255, 0.6); } .btn-outline-light { color: var(--white); border-color: var(--white); } .btn-outline-light:hover { background-color: var(--primary-color); color: var(--dark); border-color: var(--primary-color); } /* Functional Buttons (Blue hues) */ .btn-lift, .btn-dark-brand { background-color: var(--lift-color); border-color: var(--lift-color); color: var(--white); } .btn-lift:hover, .btn-dark-brand:hover { background-color: #0056b3; border-color: #0056b3; } /* Text Colors for Icons in Cards */ .card .text-primary { color: var(--primary-color) !important; } .card .text-lift { color: var(--lift-color) !important; } .card .text-undercoat { color: var(--undercoat-color) !important; } .card .text-success { color: var(--mechanical-color) !important; } .card .text-info { color: var(--upholstery-color) !important; } /* Final CTA Section (Deep Dark Contrast) */ .bg-dark { background-color: var(--dark) !important; } /* ============================================== */ /* --- HERO SECTION SLIDESHOW (Fixed Sizing) --- */ /* ============================================== */ #hero-carousel { min-height: 600px; position: relative; overflow: hidden; } /* Text Overlay: Ensure strong contrast */ .text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 10; padding: 30px; background-color: rgba(0, 0, 0, 0.6); border-radius: 8px; } .text-overlay h1 { font-family: var(--font-heading); font-size: 3.5rem; } /* Ensure the carousel takes up the full space */ #heroSlides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .carousel-bg { height: 100%; width: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease-in-out; transform: scale(1.05); } /* NEW: LOGO WATERMARK STYLING */ #logo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 100%; z-index: 5; opacity: 0.08; pointer-events: none; background-image: url('images/logotrans1.png'); background-repeat: no-repeat; background-size: contain; background-position: center; } @media (max-width: 768px) { #logo-watermark { width: 90%; opacity: 0.12; } } /* ============================================== */ /* --- SERVICES CAROUSEL & CARDS (Minimalist Look) --- */ /* ============================================== */ #services-carousel { background-color: var(--background-light) !important; } #serviceCardsCarousel .card { border-radius: 6px; transition: transform 0.3s ease; box-shadow: none; } #serviceCardsCarousel .card:hover { transform: translateY(-5px); box-shadow: 0 0 10px rgba(85, 170, 255, 0.3); } #serviceCardsCarousel .card p { color: var(--dark); /* Card body text should be dark on white card background */ } /* ============================================== */ /* --- GALLERY SECTIONS (Alternating Backgrounds) --- */ /* ============================================== */ /* Alternating Dark Backgrounds */ section:nth-child(even) { background-color: var(--background-light) !important; } section:nth-child(odd) { background-color: var(--background-dark) !important; } #partners { background-color: var(--background-dark) !important; } footer.bg-light { background-color: var(--background-light) !important; } /* Ensure Gallery Text and Headers are White */ section h2, section p.lead { color: var(--white) !important; } section .text-muted { color: rgba(255, 255, 255, 0.6) !important; } /* ============================================== */ /* --- GALLERY SCROLLING FIX (CRUCIAL) --- */ /* ============================================== */ .gallery-row-scroll { align-items: center; } .scroll-container { /* Hides scrollbars */ -ms-overflow-style: none; scrollbar-width: none; } .scroll-container::-webkit-scrollbar { display: none; } .scroll-wrapper { display: flex; /* CRUCIAL: Enables horizontal alignment */ overflow-x: auto; /* CRUCIAL: Enables scrolling */ gap: 30px; padding-bottom: 25px; } .scroll-item-container { flex: 0 0 350px; /* CRUCIAL: Fixed width prevents images from shrinking */ height: 250px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .scroll-item-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s; } .scroll-item-img:hover { transform: scale(1.05); filter: brightness(1.1); }