/* * Mombasa Car Deals - Main Stylesheet * Author: Cascade */ /* ===== Preloader Styles ===== */ #preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), visibility 0.7s cubic-bezier(0.4,0,0.2,1); } #preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-logo { width: 120px; height: 120px; object-fit: contain; animation: preloader-pop 1.2s cubic-bezier(0.4,0,0.2,1) infinite alternate; } @keyframes preloader-pop { 0% { transform: scale(1) rotate(-5deg); } 100% { transform: scale(1.08) rotate(5deg); } } /* ===== Base Styles ===== */ :root { --primary-color: #0047AB; --secondary-color: #0056b3; --accent-color: #ff4a17; --light-color: #f8f9fa; --dark-color: #343a40; --text-color: #212529; --gray-color: #6c757d; --border-color: #dee2e6; --transition: all 0.3s ease; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } /* ===== Modern Custom Cursor ===== */ /* Enable with JS by adding .cursor-enabled to . Hidden on touch devices. */ body.cursor-enabled { cursor: none !important; /* hide native cursor */ } body.cursor-enabled a, body.cursor-enabled button, body.cursor-enabled .btn, body.cursor-enabled [role='button'], body.cursor-enabled input[type='button'], body.cursor-enabled input[type='submit'], body.cursor-enabled input[type='reset'], body.cursor-enabled label, body.cursor-enabled .swiper-button-next, body.cursor-enabled .swiper-button-prev { cursor: none !important; } /* Keep I-beam on text fields (we'll also fade our cursor via JS) */ input[type='text'], input[type='email'], input[type='number'], input[type='tel'], input[type='search'], textarea, [contenteditable='true'] { cursor: text; } .custom-cursor { position: fixed; inset: 0; /* full-screen container for transform performance */ pointer-events: none; z-index: 11000; /* above content, below chat widget button */ } .custom-cursor.hidden { opacity: 0; } .cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); will-change: transform, width, height, background, border-color, opacity; transition: width .2s ease, height .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; } /* Dot: orange accent with subtle glow */ .cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 8px rgba(255, 74, 23, 0.6); } /* Ring: adaptive using mix-blend-difference so it inverts on dark/light */ .cursor-ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--primary-color); mix-blend-mode: difference; /* auto-contrasts on backgrounds */ opacity: 0.9; } /* Hover over interactive: grow and switch to accent border */ .cursor-hover .cursor-ring { width: 36px; height: 36px; border-color: var(--accent-color); } .cursor-hover .cursor-dot { width: 10px; height: 10px; } /* Click pulse */ @keyframes cursor-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } .cursor-ring.click::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 2px solid var(--accent-color); border-radius: 50%; transform: translate(-50%, -50%); animation: cursor-pulse .35s ease-out forwards; } /* Reduce motion accessibility */ @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { transition: none; } } /* ===== Utility Classes ===== */ .section-title { font-weight: 700; margin-bottom: 1rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 60px; height: 3px; background-color: var(--primary-color); } .text-center .section-title::after { left: 50%; transform: translateX(-50%); } /* ===== Navigation ===== */ .navbar { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); padding: 15px 0; } .navbar.scrolled { padding: 10px 0; } .navbar-brand { padding: 0; } .logo { height: 50px; width: auto; transition: var(--transition); } .navbar.scrolled .logo { height: 40px; } .nav-link { color: var(--dark-color); font-weight: 500; padding: 8px 16px !important; transition: var(--transition); } .nav-link:hover, .nav-link:focus { color: var(--primary-color); } /* ===== Hero Section ===== */ .hero { position: relative; height: 100vh; min-height: 600px; background-image: url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; color: white; display: flex; align-items: center; } .hero .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 71, 171, 0.8), rgba(0, 0, 0, 0.6)); } .hero h1 { font-weight: 700; margin-bottom: 15px; } .hero h2 { font-weight: 500; margin-bottom: 15px; } .hero .btn { padding: 12px 25px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; } /* ===== About Section ===== */ #about { padding-top: 80px; padding-bottom: 80px; background-color: white; } .about-img-wrapper { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .features { margin-top: 30px; } .feature { margin-bottom: 15px; display: flex; align-items: center; } .feature i { margin-right: 10px; font-size: 20px; color: var(--primary-color); } /* ===== Services Section ===== */ .service-card { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: var(--transition); height: 100%; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-card .icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; background-color: rgba(0, 71, 171, 0.1); border-radius: 50%; margin-bottom: 20px; } .service-card i { font-size: 30px; color: var(--primary-color); } .service-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 15px; } /* ===== Featured Cars Section ===== */ .car-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: var(--transition); } .car-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .car-image { position: relative; height: 200px; overflow: hidden; } .car-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .car-card:hover .car-image img { transform: scale(1.05); } .car-tag { position: absolute; top: 15px; right: 15px; background-color: var(--primary-color); color: white; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .car-info { padding: 20px; } .car-info h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .car-features { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; font-size: 14px; color: var(--gray-color); } .car-features span { display: flex; align-items: center; } .car-features i { margin-right: 5px; } .car-price { font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; } /* Swiper Styles */ .swiper { padding-bottom: 50px; } .swiper-pagination-bullet-active { background-color: var(--primary-color); } .swiper-button-next, .swiper-button-prev { color: var(--primary-color); top: 45%; } .swiper-button-next::after, .swiper-button-prev::after { font-size: 24px; font-weight: bold; } /* ===== Testimonials Section ===== */ .testimonial-card { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); height: 100%; } .quote-icon { font-size: 30px; color: var(--primary-color); opacity: 0.3; margin-bottom: 15px; } .testimonial-text { font-style: italic; margin-bottom: 20px; } .client-info { display: flex; flex-direction: column; } .client-name { font-weight: 600; margin-bottom: 5px; } .client-rating { color: #ffb400; } /* ===== CTA Section ===== */ .cta-section { background-color: var(--primary-color); color: white; } /* ===== Contact Section ===== */ .contact-info i { color: var(--primary-color); } .contact-info a { color: var(--text-color); text-decoration: none; transition: var(--transition); } .contact-info a:hover { color: var(--primary-color); } .social-links { display: flex; gap: 15px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #f8f9fa; color: var(--primary-color); transition: var(--transition); text-decoration: none; } .social-link:hover { background-color: var(--primary-color); color: white; } .business-hours { margin-top: 30px; } .business-hours li { margin-bottom: 10px; display: flex; justify-content: space-between; } .business-hours span { font-weight: 600; } .contact-form .form-control, .contact-form .form-select { padding: 12px 15px; border-radius: 8px; margin-bottom: 15px; } .contact-form .btn { padding: 12px 25px; } /* ===== Footer ===== */ .footer { background-color: var(--dark-color); color: white; } .footer-logo { height: 60px; width: auto; } .footer h5 { color: white; margin-bottom: 20px; font-size: 18px; font-weight: 600; } .footer ul li { margin-bottom: 10px; } .footer ul li a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: var(--transition); } .footer ul li a:hover { color: white; } .payment-options { display: flex; flex-wrap: wrap; gap: 10px; } .payment-option { background-color: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 5px; font-size: 14px; } .footer .social-links { justify-content: flex-end; } .footer hr { border-color: rgba(255, 255, 255, 0.1); margin: 30px 0; } /* WhatsApp Button */ .whatsapp-btn { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; background-color: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); z-index: 999; transition: var(--transition); animation: pulse 2s infinite; text-decoration: none; } .whatsapp-btn:hover { transform: scale(1.05); color: white; animation: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* Responsive Styles */ @media (max-width: 991px) { .hero { height: 80vh; } .footer .social-links { justify-content: center; margin-top: 20px; } } @media (max-width: 767px) { .navbar { padding: 10px 0; } .hero { height: 70vh; text-align: center; } .hero .btn { margin-bottom: 10px; } .about-img-wrapper { margin-top: 30px; } .cta-section .text-lg-end { text-align: center !important; margin-top: 20px; } .contact-info { text-align: center; } .social-links { justify-content: center; } }