/* MyCarCare Critical CSS --- This file contains only the essential styles needed to render the "above-the-fold" content of the homepage (header and hero section). It is loaded synchronously in the to ensure a fast initial paint. The full style.css is loaded asynchronously. */ /* --- 1. Global Resets & Variables (subset) --- */ :root { --mycar-primary: #FFC107; --mycar-primary-darker: #e0a800; --mycar-accent: #004A99; --mycar-accent-darker: #003b7a; --mycar-dark-text: #333; --mycar-dark-bg: #343a40; --navbar-height: 70px; /* default navbar height for spacing */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; color: var(--mycar-dark-text); display: flex; flex-direction: column; min-height: 100vh; } a { transition: color 0.2s ease-in-out; } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Montserrat', sans-serif; font-weight: 700; } /* --- 2. Header & Navigation --- */ .navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1050; background-color: #000; /* Default solid background for non-homepage */ box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: background-color 200ms ease, padding 200ms ease, box-shadow 200ms ease; padding: 0.45rem 1rem; /* Use the compact padding by default */ } .navbar-brand { font-family: 'Racing Sans One', sans-serif; font-size: 2.3rem; font-weight: 400; letter-spacing: 1px; text-decoration: underline; } .navbar .nav-link { font-weight: 500; transition: color 0.3s; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--mycar-primary) !important; } .navbar.bg-dark { background-color: #000 !important; } /* When scrolled, make navbar compact and fully opaque */ .navbar.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.18); } /* Ensure page content is pushed down under the navbar */ #page-content, #page-content > main, #page-content > section, #page-content .container { padding-top: var(--navbar-height); } /* --- 3. Hero Section --- */ .hero-section { position: relative; background: url('../img/hero-background.jpg') no-repeat center center; background-size: cover; background-color: var(--mycar-dark-bg); /* Fallback color */ z-index: 1; min-height: 100vh; color: #fff; display: flex; flex-direction: column; justify-content: center; padding-top: 4rem; padding-bottom: 4rem; } /* Prefer WebP background when supported */ .webp .hero-section { background-image: url('../img/hero-background.webp'); } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); /* The dark overlay */ z-index: -1; } .usp-content { margin-top: 4rem; } .hero-section .card { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; backdrop-filter: blur(5px); transition: background-color 0.3s ease, border-color 0.3s ease; } .hero-section .card .card-title { color: #fff; } /* --- 4. Buttons (Hero specific) --- */ .btn { font-weight: 500; border-radius: 8px; transition: all 0.2s ease-in-out; } .hero-section .btn { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); border-width: 2px; background-color: #f0f0f0; color: #000; border-color: #f0f0f0; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }