/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #40E0D0; --secondary-color: #20B2AA; --background-dark: #0a0a0a; --background-medium: #111111; --text-light: #ffffff; --text-muted: #cccccc; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--background-dark); color: var(--text-light); line-height: 1.6; font-weight: 300; } /* Typography */ h1, h2, h3 { font-weight: 300; letter-spacing: 2px; } /* Navigation */ .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,10,0.9); z-index: 1000; backdrop-filter: blur(10px); } .nav-logo img { height: 50px; max-width: 150px; } .nav-links { display: flex; gap: 30px; } .nav-links a { color: var(--primary-color); text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem; transition: color 0.3s ease; } .nav-links a:hover { color: var(--text-light); } /* Hero Section */ .hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--background-dark); } .hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 20px; } .hero-title { font-size: clamp(3rem, 10vw, 6rem); color: var(--primary-color); letter-spacing: 5px; margin-bottom: 20px; text-transform: uppercase; } .hero-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--text-muted); letter-spacing: 3px; margin-bottom: 40px; } .hero-cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } /* Buttons */ .btn { display: inline-block; padding: 15px 40px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; transition: all 0.3s ease; border: 2px solid transparent; } .btn-primary { background-color: var(--primary-color); color: var(--background-dark); } .btn-secondary { border-color: var(--primary-color); color: var(--primary-color); } .btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(64, 224, 208, 0.2); } /* Credentials Section */ .credentials { background-color: var(--background-medium); padding: 100px 5%; text-align: center; } .credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .credential-card { background-color: var(--background-dark); padding: 40px 30px; border-top: 4px solid var(--primary-color); transition: transform 0.3s ease; } .credential-card:hover { transform: translateY(-10px); } .credential-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; } .credential-title { color: var(--text-light); margin-bottom: 15px; letter-spacing: 1.5px; } .credential-description { color: var(--text-muted); } /* Services Section */ .services { background-color: var(--background-dark); padding: 100px 5%; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { background-color: var(--background-medium); padding: 40px 30px; text-align: center; border-top: 4px solid var(--primary-color); transition: transform 0.3s ease; } .service-card:hover { transform: translateY(-10px); } .service-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; } .service-title { color: var(--text-light); margin-bottom: 15px; letter-spacing: 1.5px; } .service-description { color: var(--text-muted); margin-bottom: 15px; } .service-price { color: var(--primary-color); font-weight: 600; letter-spacing: 1px; } /* Quote Section */ .quote { background-color: var(--background-medium); padding: 100px 5%; } .quote-form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 25px; } .form-group label { display: block; margin-bottom: 10px; color: var(--primary-color); letter-spacing: 1.5px; text-transform: uppercase; } .form-group input, .form-group textarea { width: 100%; padding: 15px; background-color: var(--background-dark); border: 1px solid #333; color: var(--text-light); transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); } .form-submit { width: 100%; padding: 15px; background-color: var(--primary-color); color: var(--background-dark); border: none; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: background-color 0.3s ease; } .form-submit:hover { background-color: var(--secondary-color); } /* Responsive Design */ @media (max-width: 1024px) { .credentials-grid, .services-grid { grid-template-columns: repeat(2, 1fr); } .nav-links { gap: 20px; } } @media (max-width: 768px) { .credentials-grid, .services-grid { grid-template-columns: 1fr; } .nav { flex-direction: column; padding: 20px 5%; } .nav-links { margin-top: 20px; flex-direction: column; align-items: center; } .hero-cta { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 300px; text-align: center; } } /* Scroll Bar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--background-dark); } ::-webkit-scrollbar-thumb { background: var(--primary-color); } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } // Auto-scroll functionality let currentService = 0; const totalServices = 4; let autoScrollInterval; function startAutoScroll() { autoScrollInterval = setInterval(() => { currentService = (currentService + 1) % totalServices; scrollToService(currentService); }, 3000); // 3 seconds } function stopAutoScroll() { clearInterval(autoScrollInterval); } function scrollToService(index) { const serviceGrid = document.getElementById('serviceGrid'); const cardWidth = serviceGrid.children[0].offsetWidth + 20; // card width + gap serviceGrid.scrollTo({ left: cardWidth * index, behavior: 'smooth' }); // Update indicators document.querySelectorAll('.scroll-dot').forEach((dot, i) => { dot.classList.toggle('active', i === index); }); currentService = index; } function scrollServices(direction) { stopAutoScroll(); if (direction === 'left') { currentService = currentService > 0 ? currentService - 1 : totalServices - 1; } else { currentService = (currentService + 1) % totalServices; } scrollToService(currentService); // Restart auto-scroll after manual interaction setTimeout(startAutoScroll, 5000); } // Start auto-scroll when page loads (mobile only) if (window.innerWidth <= 768) { startAutoScroll(); // Pause auto-scroll when user interacts document.getElementById('serviceGrid').addEventListener('touchstart', stopAutoScroll); document.getElementById('serviceGrid').addEventListener('scroll', stopAutoScroll); }

Engine Bay Enhancement