/* * public-overrides.css * Loaded last on every public-facing page (templates/public/ and templates/partner/). * Neutralises the admin glassmorphism dark styles that bleed in from custom.css. * All rules use !important to win over custom.css which also uses !important. */ /* ── Root element ────────────────────────────────────────────────────────── Paint the same dark colour as the public footer (templates/public/_footer.html — `background-color: #212529 !important;`). Without this the element has no background and falls back to browser-default white, which flashes through during iOS Safari rubber-band overscroll and during the one-frame compositor gap below the dark footer while momentum-scrolling. Matching to the footer makes any such moment read as a continuation of the footer, eliminating the perceived white flicker at the bottom of the viewport. If the footer colour ever changes, update #212529 here AND in templates/public/_footer.html together. */ html { background-color: #212529 !important; } /* ── Body ──────────────────────────────────────────────────────────────── */ body { background: #ffffff !important; background-attachment: initial !important; color: #333333 !important; } /* ── Navbar ─────────────────────────────────────────────────────────────── */ .navbar.navbar-light, .navbar.bg-light, nav.navbar { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } .navbar .nav-link { color: #333333 !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #2563eb !important; } /* ── Cards ──────────────────────────────────────────────────────────────── */ .card { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #e0e0e0 !important; color: #333333 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; } .card:hover { background: #ffffff !important; border-color: #c0c0c0 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; transform: translateY(-2px); } .card-header { background: #f8f9fa !important; border-bottom: 1px solid #e0e0e0 !important; color: #333333 !important; } .card-footer { background: #f8f9fa !important; border-top: 1px solid #e0e0e0 !important; color: #333333 !important; } .card-title, .card-text, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p, .card span:not(.badge):not(.price-badge):not(.status-available) { color: #333333 !important; } /* ── Tables ─────────────────────────────────────────────────────────────── */ .table { background: transparent !important; color: #333333 !important; } .table thead th { background: #f1f5f9 !important; color: #333333 !important; border-bottom: 2px solid #dee2e6 !important; backdrop-filter: none !important; } .table tbody tr { background: #ffffff !important; border-bottom: 1px solid #dee2e6 !important; color: #333333 !important; } .table tbody tr:hover { background: #f8f9fa !important; color: #333333 !important; } .table-responsive { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } /* ── Forms ──────────────────────────────────────────────────────────────── */ .form-control, .form-select { background-color: #ffffff !important; color: #333333 !important; border-color: #ced4da !important; } .form-control:focus, .form-select:focus { background-color: #ffffff !important; color: #333333 !important; border-color: #2563eb !important; box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.2) !important; } .form-control::placeholder { color: #9ca3af !important; } label, .form-label { color: #333333 !important; } /* ── Accordion ──────────────────────────────────────────────────────────── */ .accordion-item { background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; } .accordion-button { background-color: #ffffff !important; color: #333333 !important; } .accordion-button:not(.collapsed) { background-color: #eff6ff !important; color: #2563eb !important; box-shadow: inset 0 -1px 0 rgba(37,99,235,0.15) !important; } .accordion-body { background-color: #ffffff !important; color: #333333 !important; } /* ── Dropdowns ──────────────────────────────────────────────────────────── */ .dropdown-menu { background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; color: #333333 !important; } .dropdown-item { color: #333333 !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: #f1f5f9 !important; color: #2563eb !important; } /* ── Modals ─────────────────────────────────────────────────────────────── */ .modal-content { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #e0e0e0 !important; } .modal-header { background-color: #f8f9fa !important; border-bottom: 1px solid #e0e0e0 !important; color: #333333 !important; } .modal-footer { background-color: #f8f9fa !important; border-top: 1px solid #e0e0e0 !important; } /* ── Text helpers ───────────────────────────────────────────────────────── */ .text-muted { color: #6b7280 !important; } h1:not([class*="text-white"]):not([class*="text-light"]), h2:not([class*="text-white"]):not([class*="text-light"]), h3:not([class*="text-white"]):not([class*="text-light"]), h4:not([class*="text-white"]):not([class*="text-light"]), h5:not([class*="text-white"]):not([class*="text-light"]), h6:not([class*="text-white"]):not([class*="text-light"]) { color: inherit; } /* ── Sections with light backgrounds ─────────────────────────────────────── */ section:not(.hero-section):not(.cta-section):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-dark) { background-color: transparent !important; } .bg-light { background-color: #f8f9fa !important; } .bg-secondary { background-color: #e9ecef !important; color: #333333 !important; } /* ── List groups ─────────────────────────────────────────────────────────── */ .list-group-item { background-color: #ffffff !important; color: #333333 !important; border-color: #e0e0e0 !important; } .list-group-item:hover { background-color: #f8f9fa !important; } /* ── Input groups ────────────────────────────────────────────────────────── */ .input-group-text { background-color: #f8f9fa !important; color: #333333 !important; border-color: #ced4da !important; } /* ── Alerts ──────────────────────────────────────────────────────────────── */ .alert { backdrop-filter: none !important; } /* ════════════════════════════════════════════════════════════════════════════ MODERN NAVBAR — sleek car-hire style overhaul Overrides the per-page inline navbar styles in templates/public/*.html ════════════════════════════════════════════════════════════════════════════ */ /* Base nav bar — translucent white with subtle blur, refined shadow. We deliberately DO NOT override navbar `height` or body `padding-top` — the per-page CSS already sets these (typically 110px) and we must preserve that layout to avoid content sliding under the fixed navbar. */ nav.navbar.navbar-expand-lg.fixed-top { background: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: saturate(180%) blur(14px) !important; backdrop-filter: saturate(180%) blur(14px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important; transition: box-shadow 0.25s ease, background 0.25s ease !important; } /* Brand spacing */ nav.navbar .navbar-brand { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; margin-right: 2rem !important; transition: transform 0.2s ease; } nav.navbar .navbar-brand:hover { transform: translateY(-1px); } /* ── Nav links — modern car-hire style with animated underline ── */ nav.navbar .navbar-nav .nav-link { position: relative; color: #1f2937 !important; font-weight: 500 !important; font-size: 0.95rem !important; letter-spacing: 0.01em !important; padding: 0.6rem 1rem !important; margin: 0 0.15rem; border-radius: 8px; transition: color 0.2s ease, background-color 0.2s ease !important; } /* Animated underline that grows from center on hover */ nav.navbar .navbar-nav.me-auto .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 0.35rem; width: 0; height: 2px; background: linear-gradient(90deg, #2563eb, #dc2626); border-radius: 2px; transform: translateX(-50%); transition: width 0.28s ease; } nav.navbar .navbar-nav.me-auto .nav-link:hover::after, nav.navbar .navbar-nav.me-auto .nav-link:focus::after, nav.navbar .navbar-nav.me-auto .nav-link.active::after { width: calc(100% - 2rem); } nav.navbar .navbar-nav .nav-link:hover, nav.navbar .navbar-nav .nav-link:focus { color: #2563eb !important; background-color: rgba(37, 99, 235, 0.04); } nav.navbar .navbar-nav.me-auto .nav-link.active { color: #2563eb !important; font-weight: 600 !important; } /* ── Right-side action buttons (Login / Register) styled as pills ── */ nav.navbar .navbar-nav:not(.me-auto) { align-items: center; gap: 0.5rem; } nav.navbar .navbar-nav:not(.me-auto) .nav-link { padding: 0.5rem 1.1rem !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 0.9rem !important; transition: all 0.2s ease !important; } nav.navbar .navbar-nav:not(.me-auto) .nav-link::after { display: none; } /* Login = ghost / outline pill */ nav.navbar .navbar-nav:not(.me-auto) .nav-item:first-child .nav-link { color: #1f2937 !important; border: 1.5px solid rgba(31, 41, 55, 0.18); } nav.navbar .navbar-nav:not(.me-auto) .nav-item:first-child .nav-link:hover { border-color: #2563eb; color: #2563eb !important; background-color: rgba(37, 99, 235, 0.06); transform: translateY(-1px); } /* Register = filled gradient CTA pill */ nav.navbar .navbar-nav:not(.me-auto) .nav-item:last-child .nav-link { color: #ffffff !important; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; border: 1.5px solid transparent; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); } nav.navbar .navbar-nav:not(.me-auto) .nav-item:last-child .nav-link:hover { color: #ffffff !important; background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4); transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════════════════ MODERN HAMBURGER — animated 3-line that morphs into X ════════════════════════════════════════════════════════════════════════════ */ nav.navbar .navbar-toggler { border: 1.5px solid rgba(31, 41, 55, 0.15) !important; border-radius: 10px !important; padding: 0.5rem 0.65rem !important; width: 46px; height: 42px; position: relative; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } nav.navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important; outline: none !important; } nav.navbar .navbar-toggler:hover { border-color: #2563eb !important; } /* Hide default Bootstrap icon, draw our own lines */ nav.navbar .navbar-toggler .navbar-toggler-icon { background-image: none !important; width: 22px; height: 16px; position: relative; display: block; } nav.navbar .navbar-toggler .navbar-toggler-icon::before, nav.navbar .navbar-toggler .navbar-toggler-icon::after, nav.navbar .navbar-toggler .navbar-toggler-icon { /* nothing — we use spans below via pseudo */ } nav.navbar .navbar-toggler .navbar-toggler-icon::before, nav.navbar .navbar-toggler .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2.5px; background: #1f2937; border-radius: 2px; transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease; } nav.navbar .navbar-toggler .navbar-toggler-icon::before { top: 0; box-shadow: 0 6.5px 0 #1f2937; } nav.navbar .navbar-toggler .navbar-toggler-icon::after { top: 13px; } /* Open state — toggler is NOT collapsed = aria-expanded="true" */ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { top: 6.5px; box-shadow: none; transform: rotate(45deg); } nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { top: 6.5px; transform: rotate(-45deg); } nav.navbar .navbar-toggler[aria-expanded="true"] { border-color: #2563eb !important; } /* ════════════════════════════════════════════════════════════════════════════ MODERN MOBILE MENU — clean drop panel with separators ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { nav.navbar .navbar-collapse { background: #ffffff !important; margin: 0.65rem -1rem -0.55rem !important; padding: 0.5rem 1.25rem 1.25rem !important; border-top: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); border-radius: 0 0 16px 16px; animation: vdriveMobileSlide 0.28s ease-out; } nav.navbar .navbar-nav { width: 100%; } nav.navbar .navbar-nav .nav-item { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } nav.navbar .navbar-nav:not(.me-auto) { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(0, 0, 0, 0.08); gap: 0.6rem; } nav.navbar .navbar-nav:not(.me-auto) .nav-item { border-bottom: none; width: 100%; } nav.navbar .navbar-nav.me-auto .nav-link { padding: 0.95rem 0.5rem !important; font-size: 1.02rem !important; border-radius: 0 !important; } nav.navbar .navbar-nav.me-auto .nav-link::after { display: none; } nav.navbar .navbar-nav.me-auto .nav-link:hover, nav.navbar .navbar-nav.me-auto .nav-link.active { background: linear-gradient(90deg, rgba(37,99,235,0.08), transparent) !important; padding-left: 0.85rem !important; } nav.navbar .navbar-nav:not(.me-auto) .nav-link { text-align: center; padding: 0.85rem 1rem !important; font-size: 1rem !important; } } @keyframes vdriveMobileSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Small screen tweaks — only adjust spacing, not navbar height */ @media (max-width: 575.98px) { nav.navbar .navbar-brand { margin-right: 0.5rem !important; } }