body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
.container { width: 95%; max-width: 1100px; margin: 0 auto; }
/* Header */
.site-header {
background: transparent !important;
color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 50;
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 0;
}
.logo a { color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
.main-nav a:hover { color: #fff; }
.account-menu { display: inline-block; position: relative; margin-left: 1rem; }
.account-label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: #ffffff; }
.account-dropdown {
position: absolute; right: 0; top: 110%; background: #212020 !important; padding: 0.75rem;
border-radius: 0.5rem; min-width: 200px; display: none;
}
.account-dropdown.open { display: block; }
.account-dropdown a,
.account-dropdown button {
display: block; width: 100%; margin-top: 0.25rem; text-align: left;
background: #2563eb; border: none; padding: 0.4rem 0.6rem; border-radius: 0.375rem;
color: #fff; text-decoration: none; font-size: 0.85rem;
}
/* Hero */
.hero {
height: 320px;
background-image: url('/static/img/hero-home.jpg');
background-size: cover;
background-position: center;
position: relative;
}
.hero-overlay {
position: relative; height: 100%;
color: #fff; display: flex; align-items: center;
}
.hero-overlay h1 { font-size: 2.2rem; margin-bottom: 0.4rem; }
.hero-overlay p { font-size: 1.1rem; }
.site-main { padding: 1.5rem 0 3rem; }
.search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
.search-form .form-row {
display: flex; flex-wrap: wrap; gap: 1rem;
}
.form-row > div { flex: 1 1 150px; }
.form-row .grow { flex: 2 1 200px; }
.form-row .align-bottom { display: flex; align-items: flex-end; }
/* Forms */
label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: #4b5563; }
input, select, textarea {
width: 100%; padding: 0.45rem 0.55rem; border-radius: 0.5rem;
border: 1px solid #d1d5db; font-size: 0.95rem; box-sizing: border-box;
}
textarea { min-height: 120px; }
/* Buttons */
.btn-primary, .btn-secondary, .btn-danger {
display: inline-block; padding: 0.55rem 1rem; border-radius: 999px;
border: none; cursor: pointer; font-size: 0.95rem; text-decoration: none;
}
.btn-primary { background: #2563eb; color: #fff; }
.btn-secondary { background: #e5e7eb; color: #ffffff; }
.btn-danger { background: #dc2626; color: #fff; }
/* Cards */
.vehicle-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem; margin-top: 1rem;
}
.vehicle-card {
background: #212020 !important; border-radius: 0.75rem; overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.vehicle-card a { color: inherit; text-decoration: none; }
.vehicle-image { position: relative; }
.vehicle-image img { width: 100%; display: block; }
.vehicle-image .placeholder { height: 200px; background: #e5e7eb;
display:flex; align-items:center; justify-content:center; }
.vehicle-
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
.vehicle-body h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.vehicle-body .attention { margin: 0 0 0.4rem; color: #4b5563; font-size: 0.9rem; }
.vehicle-meta {
display:flex; flex-wrap:wrap; gap:0.5rem; font-size:0.8rem; color:#6b7280;
}
.price { font-weight:700; margin-top:0.4rem; font-size:1.05rem; }
/* Badges */
.badge {
position:absolute; top:8px; left:8px; padding:0.2rem 0.7rem;
border-radius:999px; font-size:0.75rem; color:#fff;
}
.badge-reserved { background:#f59e0b; }
.badge-sold { background:#dc2626; }
.hero-badge { top:12px; left:12px; }
/* Vehicle detail */
.vehicle-hero-image {
position:relative; overflow:hidden; border-radius:0.75rem;
}
.vehicle-hero-overlay {
position:absolute; left:0; right:0; bottom:0;
padding:0.75rem 1rem; background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color:#fff;
}
.vehicle-hero-overlay h1 { margin:0; font-size:1.6rem; }
.vehicle-thumbs {
display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.6rem;
}
.vehicle-thumbs img {
width:90px; height:70px; object-fit:cover; border-radius:0.4rem; cursor:pointer;
}
.vehicle-actions { margin-top:1.3rem; }
.action-buttons { display:flex; gap:0.75rem; flex-wrap:wrap; }
.vehicle-info-grid {
display:grid; gap:1rem; grid-template-columns:2fr 3fr; margin-top:1.5rem;
}
.info-box {
background: #212020 !important; padding:1rem; border-radius:0.75rem;
}
.vehicle-options {
margin-top:1rem; background: #212020 !important; padding:1rem; border-radius:0.75rem;
}
/* Footer */
.footer-inner { display:flex; flex-wrap:wrap; gap:2rem; }
.footer-column h4 { color:#e5e7eb; }
.makes-list { list-style:none; padding:0; margin:0; }
.makes-list a { color:#9ca3af; text-decoration:none; font-size:0.9rem; }
.makes-list a:hover { color:#fff; }
.footer-bottom { text-align:center; margin-top:1rem; font-size:0.8rem; color:#6b7280; }
/* Messages */
.messages { margin-bottom:1rem; }
.message { padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.9rem; }
.message.success { background:#dcfce7; color:#166534; }
.message.error { background:#fee2e2; color:#b91c1c; }
/* Admin tables */
.admin-table {
width:100%; border-collapse:collapse; margin-top:1rem;
background: #212020 !important; border-radius:0.75rem; overflow:hidden;
}
.admin-table th, .admin-table td {
padding:0.55rem 0.65rem; border-bottom:1px solid #e5e7eb; font-size:0.9rem;
}
.admin-table th { background:#f3f4f6; text-align:left; }
/* Auth */
.auth-page { max-width:500px; }
/* Cookie banner */
.cookie-banner {
position:fixed; bottom:0; left:0; right:0;
background:rgba(15,23,42,0.95); color:#e5e7eb;
padding:0.75rem 0; z-index:1000;
}
.cookie-inner {
max-width:1100px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
font-size:0.9rem;
}
.cookie-inner a { color:#93c5fd; }
/* Responsive */
@media (max-width:768px) {
.header-inner { flex-direction:column; align-items:flex-start; gap:0.5rem; }
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
.vehicle-info-grid { grid-template-columns:1fr; }
}
/* --- Vehicle detail image scaling fix --- */
.vehicle-detail .vehicle-hero-image img {
width: 100%;
max-height: 450px; /* cap the height so it doesn't fill the whole screen */
object-fit: cover; /* crop nicely instead of squashing */
display: block;
}
/* A bit smaller on mobiles */
@media (max-width: 768px) {
.vehicle-detail .vehicle-hero-image img {
max-height: 320px;
}
}
/* --- Fix account dropdown hidden behind hero --- */
.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
.account-dropdown {
z-index: 60; /* ensure dropdown is above everything in header/hero */
}
/* --- Fix home page search box being overlapped by hero --- */
/* Make the hero a clean block with spacing underneath */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* Ensure the hero overlay does not float above page content */
.hero-overlay {
position: relative;
z-index: 1;
}
/* --- Fix admin dashboard button sticking out of account dropdown --- */
.account-dropdown {
min-width: 220px; /* a bit more breathing room */
}
.account-dropdown a,
.account-dropdown button {
box-sizing: border-box; /* padding included in width so nothing overflows */
width: 100%;
}
/* --- Clean, aligned vertical layout for account dropdown --- */
.account-dropdown {
display: flex;
flex-direction: column;
align-items: stretch; /* ensures all items line up and fill the width */
gap: 0.5rem; /* even spacing between items */
padding: 0.75rem;
min-width: 220px;
}
.account-dropdown p {
margin: 0 0 0.5rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
.account-dropdown a,
.account-dropdown form button {
width: 100%; /* full width for perfect alignment */
text-align: left; /* align text to the left so it matches */
padding: 0.5rem 0.75rem;
background: #f8f9fb;
border: 1px solid #d1d5db;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
}
.account-dropdown a:hover,
.account-dropdown form button:hover {
background: #e2e8f0;
}
/* Make logout button look like a link-button */
.account-dropdown form button {
background: #f1f5f9;
}
/* --- Clean + visible account dropdown buttons (override previous styles) --- */
.account-dropdown {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
padding: 0.75rem;
min-width: 220px;
background: #212020 !important; /* same dark tone as header */
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.account-dropdown p {
margin: 0 0 0.5rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1f2937;
color: #e5e7eb;
font-size: 0.85rem;
}
/* make sure the form itself has no extra margin */
.account-dropdown form {
margin: 0;
}
/* unified style for links + logout/admin buttons */
.account-dropdown a,
.account-dropdown form button {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
padding: 0.45rem 0.75rem;
border-radius: 0.375rem;
border: none;
font-size: 0.85rem;
background: #2563eb; /* vivid blue */
color: #ffffff; /* readable white text */
cursor: pointer;
}
/* hover state */
.account-dropdown a:hover,
.account-dropdown form button:hover {
background: #1d4ed8;
}
/* remove any old grey background overrides */
.account-dropdown form button:disabled {
opacity: 0.7;
}
/* --- FINAL alignment fix for account dropdown --- */
.account-dropdown {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.5rem;
padding: 0.75rem;
min-width: 220px;
background: #212020 !important;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
/* Remove any weird margins from children */
.account-dropdown > * {
margin: 0 !important;
}
/* Top text */
.account-dropdown p {
padding-bottom: 0.5rem;
border-bottom: 1px solid #1f2937;
color: #e5e7eb;
font-size: 0.85rem;
text-align: left;
}
/* Make form itself neutral */
.account-dropdown form {
margin: 0 !important;
padding: 0 !important;
}
/* FORCE both Admin Dashboard (link) and Logout (button) to be identical */
.account-dropdown a,
.account-dropdown form button {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
padding: 0.45rem 0.75rem !important;
border-radius: 0.375rem !important;
border: none !important;
margin: 0 !important;
background: #2563eb !important;
color: #ffffff !important;
font-size: 0.85rem !important;
cursor: pointer !important;
}
/* Hover state */
.account-dropdown a:hover,
.account-dropdown form button:hover {
background: #1d4ed8 !important;
}
/* --- Restore dropdown open/close behaviour --- */
/* Hidden by default */
.account-dropdown {
display: none !important;
}
/* Only visible when JS adds the .open class */
.account-dropdown.open {
display: flex !important;
}
/* --- Remove unwanted white bar above hero --- */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* --- Maintain clean gap between hero and search box (below, not above) --- */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* --- Keep header and dropdown ABOVE hero --- */
.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Dropdown sits above everything */
.account-dropdown {
z-index: 2000 !important;
}
/* --- Hero spacing: no gap above, clean gap below --- */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* --- Add clean spacing BELOW the hero --- */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* --- Grey gap between hero and search box --- */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* Optional fade separator (looks cleaner on dealerships) */
.hero::after {
content: "";
display: block;
width: 100%;
height: 2rem; /* thickness of the grey bar */
background: #f3f4f6; /* your site's grey background */
margin-top: -2rem; /* lifts it up against the hero */
}
/* --- Proper spacing between page title and search box on Stock & Sold pages --- */
/* Ensure the search container doesn’t creep upward */
/* ----- Page-specific spacing for the search section ----- */
/* Default: no negative margin */
.search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
/* Home page: float the search box up over the hero */
.home-page .search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
/* Stock & Sold pages: clean gap under the page title */
/* --- Remove dark grey strip below hero --- */
.hero::after {
content: none !important;
}
/* Maintain clean spacing below the hero */
.hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* Disabled Model dropdown look */
.model-select:disabled {
background-color: #f3f4f6;
cursor: not-allowed;
}
/* Add space below the hero on the home page */
.home-page .hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* Add space between the hero and the vehicle search box on the home page */
.home-page .search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
/* FINAL override: add gap between hero and search on home only */
.home-page .hero + .search-section,
.home-page .search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
/* Add a real gap under the hero container */
.home-page .hero {
height: 360px;
background-size: cover;
background-position: center;
position: relative;
}
/* =========================
ADMIN UI STYLING
========================= */
/* Dark, focused backdrop for admin pages */
/* Container tweaks */
.admin-page .container {
max-width: 1200px;
}
/* Admin page title */
.admin-page h1,
.admin-page
/* Subhead / breadcrumb style */
.admin-page .admin-subtitle {
color: #9ca3af;
margin-bottom: 1.5rem;
}
/* Dashboard layout: cards for quick actions / stats */
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.admin-card {
background: #212020 !important;
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
border: 1px solid #1f2937;
box-shadow: 0 18px 45px rgba(15,23,42,0.65);
color: #e5e7eb;
}
.admin-card h2 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.admin-card p {
margin: 0.15rem 0;
color: #9ca3af;
}
.admin-card .admin-card-metric {
font-size: 1.8rem;
font-weight: 700;
margin-top: 0.5rem;
color: #38bdf8;
}
/* Links / buttons inside admin cards */
.admin-card a.btn-link {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.9rem;
color: #60a5fa;
}
.admin-card a.btn-link:hover {
color: #93c5fd;
text-decoration: underline;
}
/* Admin section titles */
.admin-section {
margin-bottom: 2.5rem;
}
.admin-section h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
/* Admin tables */
.admin-page table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
background: #212020 !important;
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid #1f2937;
}
.admin-page thead {
background: #212020 !important;
}
.admin-page thead th {
text-align: left;
padding: 0.75rem 1rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9ca3af;
border-bottom: 1px solid #1f2937;
}
.admin-page tbody tr:nth-child(odd) {
background: #212020 !important;
}
.admin-page tbody tr:nth-child(even) {
background: #212020 !important;
}
.admin-page tbody tr:hover {
background: #212020 !important;
}
.admin-page tbody td {
padding: 0.7rem 1rem;
font-size: 0.9rem;
color: #e5e7eb;
border-bottom: 1px solid #ffffff;
}
/* Admin action links/buttons in tables */
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.admin-actions a,
.admin-actions button {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
border-radius: 0.375rem;
border: none;
background: #1d4ed8;
color: #e5e7eb;
cursor: pointer;
}
.admin-actions a:hover,
.admin-actions button:hover {
background: #2563eb;
}
/* Secondary / danger variants */
.admin-actions .btn-secondary {
background: #4b5563;
}
.admin-actions .btn-secondary:hover {
background: #6b7280;
}
.admin-actions .btn-danger {
background: #b91c1c;
}
.admin-actions .btn-danger:hover {
background: #dc2626;
}
/* Admin forms (Add/Edit vehicle, users, leads, etc.) */
.admin-page form {
background: #212020 !important;
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid #1f2937;
box-shadow: 0 18px 40px rgba(15,23,42,0.7);
color: #e5e7eb;
}
.admin-page form .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-bottom: 1rem;
}
.admin-page form label {
display: block;
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: #9ca3af;
}
.admin-page form input,
.admin-page form select,
.admin-page form textarea {
width: 100%;
border-radius: 0.5rem;
border: 1px solid #ffffff;
padding: 0.5rem 0.6rem;
background: #212020 !important;
color: #e5e7eb;
font-size: 0.9rem;
}
.admin-page form input:focus,
.admin-page form select:focus,
.admin-page form textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 1px #2563eb;
}
.admin-page form textarea {
min-height: 120px;
resize: vertical;
}
/* Admin primary button */
.admin-page .btn-primary,
.admin-page button.btn-primary {
background: #2563eb;
border-radius: 0.5rem;
padding: 0.55rem 1.2rem;
border: none;
font-size: 0.9rem;
font-weight: 500;
color: white;
cursor: pointer;
}
.admin-page .btn-primary:hover,
.admin-page button.btn-primary:hover {
background: #1d4ed8;
}
/* Top-right toolbar on admin pages (e.g. "Add vehicle") */
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
gap: 1rem;
}
.admin-toolbar .toolbar-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* On smaller screens */
@media (max-width: 768px) {
.admin-dashboard-grid {
grid-template-columns: 1fr;
}
.admin-page form {
padding: 1rem;
}
}
/* =========================
ADMIN UI STYLING (FINAL)
========================= */
.admin-page .container {
max-width: 1200px;
}
/* Titles */
.admin-page h1,
.admin-page
.admin-page .admin-subtitle {
color: #9ca3af;
margin-bottom: 1.5rem;
}
/* Dashboard cards */
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.admin-card {
background: #212020 !important;
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
border: 1px solid #1f2937;
box-shadow: 0 18px 45px rgba(15,23,42,0.65);
color: #e5e7eb;
}
.admin-card h2 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.admin-card p {
margin: 0.15rem 0;
color: #9ca3af;
}
.admin-card .admin-card-metric {
font-size: 1.8rem;
font-weight: 700;
margin-top: 0.5rem;
color: #38bdf8;
}
.admin-card a.btn-link {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.9rem;
color: #60a5fa;
}
.admin-card a.btn-link:hover {
color: #93c5fd;
text-decoration: underline;
}
/* Sections */
.admin-section {
margin-bottom: 2.5rem;
}
.admin-section h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
/* Tables */
.admin-page table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
background: #212020 !important;
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid #1f2937;
}
.admin-page thead {
background: #212020 !important;
}
.admin-page thead th {
text-align: left;
padding: 0.75rem 1rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9ca3af;
border-bottom: 1px solid #1f2937;
}
.admin-page tbody tr:hover {
background: #212020 !important;
}
.admin-page tbody td {
padding: 0.7rem 1rem;
font-size: 0.9rem;
color: #e5e7eb;
border-bottom: 1px solid #ffffff;
}
/* Actions */
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.admin-actions a,
.admin-actions button {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
border-radius: 0.375rem;
border: none;
background: #1d4ed8;
color: #e5e7eb;
cursor: pointer;
}
.admin-actions a:hover,
.admin-actions button:hover {
background: #2563eb;
}
/* Admin forms */
.admin-page form {
background: #212020 !important;
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid #1f2937;
box-shadow: 0 18px 40px rgba(15,23,42,0.7);
color: #e5e7eb;
}
.admin-page form .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-bottom: 1rem;
}
.admin-page form label {
display: block;
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: #9ca3af;
}
.admin-page form input,
.admin-page form select,
.admin-page form textarea {
width: 100%;
border-radius: 0.5rem;
border: 1px solid #ffffff;
padding: 0.5rem 0.6rem;
background: #212020 !important;
color: #e5e7eb;
font-size: 0.9rem;
}
/* Buttons */
.admin-page .btn-primary,
.admin-page button.btn-primary {
background: #2563eb;
border-radius: 0.5rem;
padding: 0.55rem 1.2rem;
border: none;
font-size: 0.9rem;
font-weight: 500;
color: white;
cursor: pointer;
}
.admin-page .btn-primary:hover,
.admin-page button.btn-primary:hover {
background: #1d4ed8;
}
/* Toolbar */
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
gap: 1rem;
}
.admin-toolbar .toolbar-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.admin-dashboard-grid {
grid-template-columns: 1fr;
}
.admin-page form {
padding: 1rem;
}
}
/* Admin tables: white rows, light borders */
.admin-page table {
background: #212020 !important;
border-color: #e5e7eb;
}
.admin-page thead {
background: #f9fafb;
}
.admin-page tbody tr:nth-child(odd),
.admin-page tbody tr:nth-child(even) {
background: #212020 !important;
}
.admin-page tbody tr:hover {
background: #f9fafb;
}
/* Keep admin action buttons away from the table edge */
.admin-page td:last-child {
padding-right: 1.5rem;
}
/* Space between multiple actions */
.admin-actions {
gap: 0.4rem;
}
.admin-actions a,
.admin-actions button {
margin-right: 0; /* rely on gap instead of extra margin */
}
/* === FIX ADMIN ACTION BUTTONS === */
/* Ensure last column has enough room */
.admin-page td:last-child {
padding-right: 2.5rem !important;
position: relative;
}
/* Actions container */
.admin-actions {
display: flex;
flex-direction: row;
gap: 0.6rem;
align-items: center;
}
/* Normal light button style for Edit/Delete */
.admin-actions a,
.admin-actions button {
background: #212020 !important;
border: 1px solid #d1d5db !important; /* Light grey border */
color: #374151 !important; /* Dark grey text */
padding: 6px 10px !important;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
}
/* Button hover */
.admin-actions a:hover,
.admin-actions button:hover {
background: #f3f4f6 !important;
}
/* Delete button (danger style) */
.admin-actions .delete-btn {
border-color: #ef4444 !important;
color: #ef4444 !important;
}
.admin-actions .delete-btn:hover {
background: #fee2e2 !important;
}
/* ===== Admin tables & action buttons (final override) ===== */
.admin-table {
width: 100%;
border-collapse: collapse;
background: #212020 !important;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.admin-table thead {
background: #f9fafb;
}
.admin-table tbody tr:nth-child(even) {
background: #f9fafb;
}
.admin-table tbody tr:nth-child(odd) {
background: #212020 !important;
}
.admin-table tbody tr:hover {
background: #f3f4f6;
}
/* Make sure last cell has room so buttons don't touch the edge */
.admin-table td:last-child {
padding-right: 1.75rem;
}
/* Action buttons container */
.admin-actions {
display: inline-flex;
gap: 0.5rem;
align-items: center;
}
/* Edit button */
.edit-btn {
background-color: #2563eb;
border: 1px solid #2563eb;
color: #ffffff;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
text-decoration: none;
display: inline-block;
}
.edit-btn:hover {
background-color: #1d4ed8;
border-color: #1d4ed8;
}
/* Delete button – light, red outline, NO dark box */
.delete-btn {
background-color: #ffffff !important;
border: 1px solid #ef4444 !important;
color: #b91c1c !important;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
text-decoration: none;
display: inline-block;
}
.delete-btn:hover {
background-color: #fee2e2 !important;
border-color: #dc2626 !important;
color: #991b1b !important;
}
/* ========== Modern Admin Dashboard Styling ========== */
/* Overall wrapper */
.admin-dashboard {
padding: 2.5rem 0 3rem;
}
/* Hero / header area */
.admin-dashboard-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, #eff6ff, #e0f2fe);
border-radius: 1.25rem;
border: 1px solid #dbeafe;
}
.admin-hero-text h1 {
font-size: 1.9rem;
margin-bottom: 0.4rem;
}
.admin-hero-text p {
color: #4b5563;
margin: 0;
}
.admin-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Secondary light button */
.btn-secondary-light {
display: inline-block;
padding: 0.55rem 1.1rem;
border-radius: 999px;
border: 1px solid #93c5fd;
background: #212020 !important;
color: #1d4ed8;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
}
.btn-secondary-light:hover {
background: #eff6ff;
}
/* Metric cards row */
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.1rem;
margin-bottom: 2.25rem;
}
.admin-metric-card {
background: #212020 !important;
border-radius: 1rem;
padding: 1rem 1.25rem;
border: 1px solid #e5e7eb;
box-shadow: 0 18px 40px rgba(15,23,42,0.05);
}
.admin-metric-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
margin-bottom: 0.4rem;
}
.admin-metric-value {
font-size: 1.7rem;
font-weight: 700;
color: #ffffff;
}
.admin-metric-foot {
font-size: 0.85rem;
color: #9ca3af;
margin-top: 0.35rem;
}
/* Quick links section */
.admin-quick-links {
margin-bottom: 2.4rem;
}
.admin-quick-links h2 {
font-size: 1.3rem;
margin-bottom: 0.9rem;
}
.admin-quick-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1rem;
}
.admin-quick-link {
display: block;
padding: 0.9rem 1.1rem;
border-radius: 0.9rem;
background: #212020 !important;
border: 1px solid #e5e7eb;
text-decoration: none;
transition: all 0.15s ease;
}
.admin-quick-link:hover {
border-color: #93c5fd;
box-shadow: 0 18px 30px rgba(37,99,235,0.12);
transform: translateY(-1px);
}
.admin-quick-link .ql-title {
display: block;
font-weight: 600;
color: #ffffff;
margin-bottom: 0.2rem;
}
.admin-quick-link .ql-desc {
font-size: 0.85rem;
color: #6b7280;
}
/* Lower two-column panels */
.admin-lower-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
gap: 1.5rem;
}
.admin-panel-card {
background: #212020 !important;
border-radius: 1rem;
padding: 1.1rem 1.25rem;
border: 1px solid #e5e7eb;
box-shadow: 0 18px 40px rgba(15,23,42,0.04);
}
.admin-panel-card .panel-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.8rem;
}
.admin-panel-card .panel-header h2 {
font-size: 1.1rem;
margin: 0;
}
.admin-panel-card .panel-header a {
font-size: 0.85rem;
color: #2563eb;
text-decoration: none;
}
.admin-panel-card .panel-header a:hover {
text-decoration: underline;
}
.panel-list {
list-style: none;
padding: 0;
margin: 0;
}
.panel-list li {
display: flex;
justify-content: space-between;
padding: 0.45rem 0;
font-size: 0.9rem;
border-bottom: 1px dashed #e5e7eb;
}
.panel-list li:last-child {
border-bottom: none;
}
.pl-label {
color: #4b5563;
}
.pl-value {
font-weight: 600;
color: #ffffff;
}
/* Make it behave nicely on mobile */
@media (max-width: 768px) {
.admin-dashboard-hero {
flex-direction: column;
align-items: flex-start;
}
.admin-hero-actions {
justify-content: flex-start;
}
.admin-lower-grid {
grid-template-columns: 1fr;
}
}
/* Inline status dropdown in vehicle admin list */
.inline-status-form {
margin: 0;
}
.inline-status-form select {
font-size: 0.85rem;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid #d1d5db;
background-color: #ffffff;
}
/* Fix oversized Status dropdown in vehicle admin list */
.inline-status-form select {
width: 130px !important; /* Normal fixed width */
padding: 6px 8px !important; /* Compact padding */
font-size: 0.9rem !important; /* Normal text size */
height: auto !important; /* Prevent Safari auto-stretch */
background-color: #fff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
box-shadow: none !important; /* Removes the huge dark shadow box */
appearance: none; /* Cleaner dropdown */
}
/* Make sure the form wrapper doesn't add shadows */
.inline-status-form {
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block;
}
/* ============================================================
Ensure readable black text on white/light backgrounds
============================================================ */
/* Applies to containers, tables, forms, and cards */
.white-bg,
.table,
.admin-table,
.admin-panel-card,
.admin-metric-card,
.inline-status-form select,
.container,
body:not(.dark-mode) .site-main {
color: #ffffff !important; /* modern near-black text */
}
/* Apply black text to standard elements inside those containers */
.white-bg *,
.admin-table *,
.admin-panel-card *,
.admin-metric-card *,
.container *,
.inline-status-form select,
body:not(.dark-mode) .site-main * {
color: #ffffff !important;
}
/* Dropdown text specifically */
.inline-status-form select option {
color: #ffffff !important;
background: #212020 !important;
}
/* Fix inputs appearing grey */
input, select, textarea {
color: #ffffff !important;
}
/* Buttons still use their intended colours */
.btn-primary,
.btn-secondary,
.btn-secondary-light,
.delete-btn,
.edit-btn {
color: inherit;
}
/* ============================================================
Force header + footer text to be white
============================================================ */
/* Header navigation bar */
header,
header *,
.navbar,
.navbar * {
color: #ffffff !important;
}
/* Footer */
footer,
footer * {
color: #ffffff !important;
}
/* Ensure footer links also stay white */
footer a {
color: #ffffff !important;
}
/* Make header dropdown text white as well */
.account-dropdown,
.account-dropdown * {
color: #ffffff !important;
}
/* ============================================================
FORCE HEADER + FOOTER TEXT TO WHITE (final override)
============================================================ */
/* Header area (nav bar, logo, links) */
.site-header,
.site-header *,
.header,
.header *,
.main-header,
.main-header *,
nav.site-nav,
nav.site-nav * {
color: #ffffff !important;
}
/* Footer area */
.site-footer,
.site-footer *,
footer,
footer *,
.footer,
.footer * {
color: #ffffff !important;
}
/* Header & footer links specifically */
.site-header a,
.site-header a *,
.site-footer a,
.site-footer a *,
footer a,
footer a * {
color: #ffffff !important;
}
/* Hover effect (slightly lighter) */
.site-header a:hover,
.site-footer a:hover,
footer a:hover {
color: #e5e7eb !important;
}
/* Vehicle detail hero & image carousel */
.vehicle-main-image {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.vehicle-main-image img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #ffffff;
}
.vehicle-hero-overlay h1 {
margin: 0;
font-size: 1.6rem;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0.25rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
/* Left/right navigation buttons on main image */
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,0.55);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev {
left: 12px;
}
.vehicle-image-nav.next {
right: 12px;
}
.vehicle-image-nav:hover {
background: rgba(0,0,0,0.8);
}
/* Thumbnails row */
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
display: block;
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
/* Basic responsive tweak */
@media (max-width: 768px) {
.vehicle-main-image img {
height: 320px;
}
}
/* Vehicle detail hero & image carousel */
.vehicle-main-image {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.vehicle-main-image img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #ffffff;
}
.vehicle-hero-overlay h1 {
margin: 0;
font-size: 1.6rem;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0.25rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
/* Left/right navigation buttons on main image */
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,0.55);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev {
left: 12px;
}
.vehicle-image-nav.next {
right: 12px;
}
.vehicle-image-nav:hover {
background: rgba(0,0,0,0.8);
}
/* Thumbnails row */
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
display: block;
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
/* Responsive */
@media (max-width: 768px) {
.vehicle-main-image img {
height: 320px;
}
}
.vehicle-main-image {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.vehicle-main-image img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #ffffff;
}
.vehicle-hero-overlay h1 {
margin: 0;
font-size: 1.6rem;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0.25rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,0.55);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev {
left: 12px;
}
.vehicle-image-nav.next {
right: 12px;
}
.vehicle-image-nav:hover {
background: rgba(0,0,0,0.8);
}
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
display: block;
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
@media (max-width: 768px) {
.vehicle-main-image img {
height: 320px;
}
}
.vehicle-main-image {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.vehicle-main-image img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #ffffff;
}
.vehicle-hero-overlay h1 {
margin: 0;
font-size: 1.6rem;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0.25rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
/* Left/right navigation buttons on main image */
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,0.55);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev {
left: 12px;
}
.vehicle-image-nav.next {
right: 12px;
}
.vehicle-image-nav:hover {
background: rgba(0,0,0,0.8);
}
/* Thumbnails row */
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
display: block;
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
@media (max-width: 768px) {
.vehicle-main-image img {
height: 320px;
}
}
/* Vehicle advert hero image + arrows */
.vehicle-main-image {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.vehicle-main-image img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #ffffff;
}
.vehicle-hero-overlay h1 {
margin: 0;
font-size: 1.6rem;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0.25rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
/* Left/right navigation buttons on main image */
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,0.55);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev {
left: 12px;
}
.vehicle-image-nav.next {
right: 12px;
}
.vehicle-image-nav:hover {
background: rgba(0,0,0,0.8);
}
/* Thumbnails row */
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
display: block;
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
@media (max-width: 768px) {
.vehicle-main-image img {
height: 320px;
}
}
/* --- Vehicle detail page layout --- */
.vehicle-detail-page {
background: #f3f4f6;
padding: 2.5rem 0 4rem;
}
.vehicle-detail-page .container {
max-width: 1100px;
}
/* Re-usable elevated card look */
.card-elevated {
background: #212020 !important;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
padding: 1.5rem 1.75rem;
}
/* Hero */
.vehicle-hero {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.75rem;
}
.vehicle-main-image {
position: relative;
padding: 0;
overflow: hidden;
}
.vehicle-main-image img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.vehicle-hero-overlay {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: 1.1rem 1.4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
background: linear-gradient(to top, rgba(15,23,42,0.95), transparent);
color: #ffffff;
}
.vehicle-hero-text h1 {
margin: 0;
font-size: 1.7rem;
font-weight: 700;
}
.vehicle-hero-text .vehicle-subtitle {
margin: 0.25rem 0 0;
font-size: 0.9rem;
opacity: 0.8;
}
.vehicle-hero-overlay .vehicle-price {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
}
/* Image nav arrows (already defined, but refine) */
.vehicle-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: none;
background: rgba(15, 23, 42, 0.75);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
}
.vehicle-image-nav.prev { left: 12px; }
.vehicle-image-nav.next { right: 12px; }
.vehicle-image-nav:hover {
background: rgba(15, 23, 42, 0.92);
}
/* Thumbnails strip */
.vehicle-image-thumbs {
display: flex;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
overflow-x: auto;
}
.vehicle-image-thumbs .thumb-btn {
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.vehicle-image-thumbs img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 10px;
border: 2px solid transparent;
display: block;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.vehicle-image-thumbs img:hover {
transform: translateY(-2px);
}
.vehicle-image-thumbs img.active {
border-color: #2563eb;
}
/* CTA card */
.vehicle-enquiry-cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.75rem;
}
.vehicle-enquiry-cta h2 {
margin: 0 0 0.4rem;
}
.vehicle-enquiry-cta p {
margin: 0;
font-size: 0.95rem;
color: #6b7280;
}
.vehicle-enquiry-cta .cta-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Info + description layout */
.vehicle-info-section {
margin-bottom: 1.75rem;
}
.vehicle-info-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 1.5rem;
}
.vehicle-info-card h3,
.vehicle-description-card h3,
.vehicle-options-section h3 {
margin-top: 0;
margin-bottom: 0.75rem;
}
.vehicle-info-card dl {
margin: 0;
}
.vehicle-info-card dl > div {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
border-bottom: 1px solid #e5e7eb;
font-size: 0.93rem;
}
.vehicle-info-card dt {
font-weight: 600;
color: #4b5563;
}
.vehicle-info-card dd {
margin: 0;
color: #ffffff;
}
.vehicle-description-text {
font-size: 0.95rem;
color: #374151;
}
.highlighted-note {
margin-top: 1rem;
padding: 0.65rem 0.85rem;
border-radius: 10px;
background: #eff6ff;
color: #1d4ed8;
font-weight: 500;
}
/* Options pills */
.vehicle-options-section {
margin-top: 0.5rem;
}
.options-helper {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: #6b7280;
}
.options-pill-container {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.option-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: #f3f4ff;
color: #1d4ed8;
font-size: 0.85rem;
}
/* Responsive */
@media (max-width: 900px) {
.vehicle-info-layout {
grid-template-columns: minmax(0, 1fr);
}
.vehicle-enquiry-cta {
flex-direction: column;
align-items: flex-start;
}
.vehicle-main-image img {
height: 320px;
}
}
/* --- Fix white strip above nav on vehicle advert page --- */
/* Make 100% sure there is no default margin anywhere */
html,
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
/* Remove any top border/margin/padding on the header */
body.vehicle-detail-page .site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Ensure the very first element after the header doesn't add a gap */
body.vehicle-detail-page .vehicle-detail-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* --- Nuclear fix: remove any gap above header on vehicle advert page --- */
body.vehicle-detail-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* First child of body (the header wrapper) should never be pushed down */
body.vehicle-detail-page > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Make sure the header itself is flush with the top */
body.vehicle-detail-page header.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* --- Admin dashboard styling --- */
.dashboard-page {
background: #f3f4f6;
padding: 2.5rem 0 4rem;
}
.dashboard-page .container {
max-width: 1100px;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.dashboard-card {
background: #212020 !important;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
padding: 1rem 1.25rem;
}
.stat-card h2 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
}
.stat-number {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
color: #ffffff;
}
.dashboard-layout {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
.dashboard-card-header h2 {
margin: 0 0 0.75rem;
}
.dashboard-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.dashboard-table th,
.dashboard-table td {
padding: 0.45rem 0.25rem;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
.dashboard-table th {
font-weight: 600;
color: #6b7280;
}
.dashboard-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 900px) {
.dashboard-layout {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Dashboard large action buttons --- */
.dashboard-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.dashboard-action-card {
display: flex;
align-items: center;
justify-content: center;
background: #212020 !important;
border-radius: 14px;
padding: 1.25rem;
text-decoration: none;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
transition: 0.2s ease-in-out;
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
}
.dashboard-action-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}
/* --- Dashboard large action buttons --- */
.dashboard-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.dashboard-action-card {
display: flex;
align-items: center;
justify-content: center;
background: #212020 !important;
border-radius: 14px;
padding: 1.25rem;
text-decoration: none;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
transition: 0.2s ease-in-out;
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
}
.dashboard-action-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}
/* Fix white strip above nav on dashboard */
.dashboard-page {
background-color: #f3f4f6 !important; /* same grey as rest of dashboard */
margin: 0;
padding: 0;
}
/* ---- Auth pages (login, register, password reset) ---- */
body.auth-page {
background-color: #f3f4f6;
}
.auth-page .auth-container {
max-width: 480px;
margin: 3rem auto 4rem; /* centres horizontally */
background: #212020 !important;
border-radius: 16px;
padding: 2rem 2.5rem;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}
.auth-page .auth-container h1 {
font-size: 1.9rem;
margin-bottom: 1rem;
}
.auth-page .auth-container p {
margin-bottom: 1.25rem;
color: #4b5563;
}
.auth-page .form-row {
margin-bottom: 1.25rem;
}
.auth-page .form-row label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
}
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="text"] {
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 8px;
border: 1px solid #d1d5db;
font-size: 0.95rem;
}
.auth-page .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.5rem;
border-radius: 999px;
border: none;
background: #2563eb;
color: #ffffff;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.auth-page .btn-primary:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
/* === Auth pages (login, register, password reset) === */
body.auth-page {
background-color: #f3f4f6;
}
/* Full-width wrapper similar to other pages */
.auth-wrapper {
min-height: calc(100vh - 80px); /* allow for header */
display: flex;
justify-content: center;
align-items: flex-start;
padding: 4rem 1.5rem 5rem;
}
/* Make the card wide, like other big sections */
.auth-wrapper .auth-container {
width: 100%;
max-width: 900px; /* wider than before */
background: #212020 !important;
border-radius: 20px;
padding: 2.5rem 3rem;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}
.auth-wrapper .auth-container h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
.auth-wrapper .auth-container p {
margin-bottom: 1.25rem;
color: #4b5563;
}
/* Input + button styling matches rest of site */
.auth-wrapper .auth-container .form-row {
margin-bottom: 1rem;
}
.auth-wrapper .auth-container input[type="email"],
.auth-wrapper .auth-container input[type="text"],
.auth-wrapper .auth-container input[type="password"] {
width: 100%;
padding: 0.75rem 0.9rem;
border-radius: 10px;
border: 1px solid #d1d5db;
font-size: 0.95rem;
}
.auth-wrapper .auth-container .btn-primary {
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.6rem;
border-radius: 999px;
border: none;
background: #2563eb;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.auth-wrapper .auth-container .btn-primary:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
/* ============================
HEADER OVER HERO IMAGES
============================ */
/* Default header (for pages without a hero) stays as-is;
for hero pages we make it transparent and overlay it. */
body.home-page .site-header,
body
/* Make nav links white when over the hero images */
body.home-page .site-header a,
body
/* Slight text-shadow for readability on bright images */
body.home-page .site-header a,
body
/* ============================
HOME HERO – MAKE IT TALLER
============================ */
/* This assumes your existing home hero section has a class 'home-hero'
(if not, we can rename it later, but this will not break anything). */
body.home-page
/* Make sure the hero image fills the area nicely */
body.home-page .home-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================
GENERIC PAGE HERO
(USED ON STOCK / SOLD / ABOUT / WARRANTY / CONTACT)
============================ */
.page-hero {
position: relative;
padding: 6rem 0 5rem; /* room for header + content */
color: #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg,
rgba(15, 23, 42, 0.90),
rgba(15, 23, 42, 0.55)
);
}
.page-hero__inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.page-hero__inner h1 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.page-hero__inner p {
max-width: 560px;
font-size: 1rem;
line-height: 1.6;
color: #e5e7eb;
}
/* Per-page hero images – put your own images in static/img with these names */
.page-hero--stock {
background-image: url("../img/hero-stock.jpg");
}
.page-hero--sold {
background-image: url("../img/hero-sold.jpg");
}
.page-hero--about {
background-image: url("../img/hero-about.jpg");
}
.page-hero--warranty {
background-image: url("../img/hero-warranty.jpg");
}
.page-hero--contact {
background-image: url("../img/hero-contact.jpg");
}
/* === Force transparent header on all pages === */
.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* ----- HERO & TRANSPARENT NAV OVERLAY FIX ----- */
/* Transparent header overlay on hero pages */
body.home-page .site-header,
body
/* Make nav links white when overlaying hero images */
body.home-page .site-header a,
body
/* Make the hero on the home page double-height */
/* ==== GLOBAL TRANSPARENT HEADER OVER HERO ==== */
.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Make sure nav text is visible over the hero */
.site-header .logo a,
.site-header .main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
/* === HOME HERO IMAGE USING hero-home.jpg === */
/* Try to catch the main hero container on the home page, whichever class it has */
body.home-page .home-hero,
body.home-page .hero,
body.home-page .hero-section {
background-image: url("../img/hero-home.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ffffff; /* fallback if image fails */
min-height: 700px; /* make it tall */
}
/* Make sure the hero doesn't shrink to content only */
body.home-page .home-hero > img,
body.home-page .hero > img,
body.home-page .hero-section > img {
display: none; /* hide any old ![]()
used as background to avoid double stuff */
}
/* === Force transparent, overlay header across the site === */
body.home-page header.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Make nav text white so it looks good on the hero image */
body.home-page header.site-header .logo a,
body.home-page header.site-header .main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
/* === HOME HERO BACKGROUND IMAGE & OVERLAY HEADER === */
/* Big hero image for home page */
body.home-page
/* Optional: dark gradient for text readability */
body.home-page
/* Keep the hero inner content above the overlay */
body.home-page .home-hero > * {
position: relative;
z-index: 1;
}
/* Header overlayed on top of hero image on home page */
body.home-page header.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Make links white and readable over the image */
body.home-page header.site-header .logo a,
body.home-page header.site-header .main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
/* ===== HOME PAGE HERO AS BODY BACKGROUND ===== */
/* Use the uploaded hero image across the top of the home page */
body.home-page {
background-color: #f3f4f6;
}
/* Make the header sit on top of that image */
body.home-page header.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* Nav text readable on top of the photo */
body.home-page header.site-header .logo a,
body.home-page header.site-header .main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
/* Push the main content down so the hero area is visible behind the header */
body.home-page main {
padding-top: 320px; /* effectively the hero height under the header */
}
/* Soft transition from hero into the normal page background */
body.home-page main .container {
background-color: rgba(243, 244, 246, 0.96);
}
/* === Explicit home hero section using hero-home.jpg === */
body.home-page
/* Dark gradient overlay to make future text readable if you add any */
body.home-page
/* Ensure content stays on top of overlay if you later add inner text */
body.home-page .home-hero > * {
position: relative;
z-index: 1;
}
/* Header over the hero image on the home page */
body.home-page header.site-header {
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
color: #fff;
}
/* White nav text on top of the hero */
body.home-page header.site-header .logo a,
body.home-page header.site-header .main-nav a {
color: #ffffff;
margin-left: 1rem;
text-decoration: none;
font-size: 0.95rem;
}
/* Push the rest of the page content down so it doesn't overlap the hero */
body.home-page .container:first-of-type {
margin-top: 2rem;
}
/* FIXED — Home page hero section */
.home-hero {
background-image: url('/static/img/hero-home.jpg');
background-size: cover;
background-position: center center;
min-height: 70vh;
position: relative;
display: flex;
align-items: flex-end;
}
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(15,23,42,0.35), rgba(15,23,42,0.85));
}
.home-hero .hero-content {
position: relative;
padding: 6rem 0 4rem;
color: #ffffff;
}
/* Ensure hero touches the very top */
body.home-page {
padding-top: 0 !important;
margin-top: 0 !important;
}
.hero {
margin-top: 0 !important;
}
/* Remove extra top padding on home page so hero sits flush under the header */
body.home-page .site-main {
padding-top: 0;
}
/* --- Fix: remove white panel behind hero text on home page --- */
.home-page .hero .container {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* --- Home hero text colour fix --- */
.home-page .hero h1,
.home-page .hero p {
color: #ffffff !important;
}
/* --- Smoked tint for hero image --- */
.home-page .hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55); /* adjustable tint strength */
z-index: 1;
}
.home-page .hero .hero-overlay,
.home-page .hero h1,
.home-page .hero p {
position: relative;
z-index: 2;
}
/* --- Global dark background --- */
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
/* --- Dark theme search box --- */
.search-section {
background: #212020 !important; /* dark grey */
padding: 1.2rem;
border-radius: 0.75rem;
/* margin-top: removed */ -60px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #ffffff; /* white text */
}
/* labels */
.search-section label {
color: #e5e5e5 !important;
}
/* input fields */
.search-section input,
.search-section select {
background: #1f1f1f !important;
border: 1px solid #555 !important;
color: #e5e5e5 !important;
}
/* search button stays blue but add contrast */
.search-section .btn-primary {
background: #2563eb !important;
color: #ffffff !important;
}
/* --- Light text for dark background sections --- */
.search-section h2,
.search-section label,
.search-section input::placeholder,
.search-section input,
.search-section select,
.featured-section h2 {
}
.search-section input,
.search-section select {
background-color: #2c2f33 !important;
border: 1px solid #555 !important;
color: #ffffff !important;
}
.btn-primary {
color: #ffffff !important;
}
/* --- Force white text for search + featured headings --- */
.search-section h2,
.featured-section h2 {
}
/* --- Dark Mode Vehicle Cards --- */
.vehicle-card {
background: #2a2a2a !important; /* dark grey card */
color: #ffffff !important; /* white text */
}
.vehicle-card h3,
.vehicle-card .attention,
.vehicle-card .vehicle-meta,
.vehicle-card .price {
color: #ffffff !important; /* make all text inside white */
}
/* ensure badges stay visible */
.badge-reserved { background:#f59e0b !important; }
.badge-sold { background:#dc2626 !important; }
/* ensure placeholder backgrounds blend with dark theme */
.vehicle-image .placeholder {
background: #3a3a3a !important;
color: #d1d5db !important;
}
/* --- Force ALL Vehicle Card Text to White --- */
.vehicle-card,
.vehicle-card * {
color: #ffffff !important;
}
/* --- Global Page Title White Text --- */
h1, h2,
/* --- Force section titles to white --- */
h2,
.section-title,
.featured-section h2,
.search-section h2,
\n
/* --- FINAL OVERRIDE: make all main titles white --- */
.search-section h2,
.featured-section h2,
h1
\n\n
/* === FINAL HEADING COLOUR OVERRIDE === */
h1,
h2,
\n
/* Force section headings to white */
.search-section h2,
.featured-section h2 {
color: #ffffff !important;
}
/* ============================
UNIVERSAL DARK MODE RESET
============================ */
/* Full page dark background */
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
/* Make ALL headings white */
h1, h2, h3, h4, h5, h6 {
color: #ffffff !important;
}
/* Shared section background: slightly lighter grey */
.search-section,
.featured-section,
.stock-section,
.about-section,
.contact-section,
.warranty-section,
.content-section {
background: #1f2937 !important;
border-radius: 0.75rem;
color: #ffffff !important;
}
/* Inputs dark */
input, select, textarea {
background: #0f172a !important;
color: #ffffff !important;
border: 1px solid #475569 !important;
}
/* Search button */
button, .btn, .search-btn {
background: #2563eb !important;
color: #ffffff !important;
}
/* Vehicle cards */
.vehicle-card,
.vehicle-item,
.card {
background: #1f2937 !important;
color: #ffffff !important;
border-radius: 0.75rem;
border: 1px solid #374151 !important;
}
/* Vehicle card titles + details */
.vehicle-card h3,
.vehicle-card h4,
.vehicle-card p,
.vehicle-card span {
color: #ffffff !important;
}
/* Footer */
footer {
background: #1f2937 !important;
color: #ffffff !important;
}
/* Navigation text */
nav a, .navbar a, .nav-link {
color: #ffffff !important;
}
/* DARK THEME OVERRIDES */
/* Global background + text */
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #212020 !important;
color: #ffffff !important;
}
.site-main {
background-color: #ffffff;
}
/* Containers should not re-introduce light backgrounds */
.container {
background-color: transparent;
}
/* Search + featured sections */
.search-section,
.featured-section {
background-color: #ffffff;
color: #f9fafb;
border-radius: 0.75rem;
}
/* Headings (page titles etc.) */
.vehicle-card .vehicle-body,
.vehicle-card .vehicle-body h3,
.vehicle-card .vehicle-body .attention,
.vehicle-card .vehicle-meta,
.vehicle-card .price {
color: #f9fafb;
}
/* Footer same dark tone as cards */
/* Make normal text readable on dark pages (About, Contact, Warranty etc.) */
p, li, label, .info-box, .info-box h3 {
color: #e5e7eb;
}
/* Form fields: dark background + light text */
input,
select,
textarea {
background-color: #ffffff;
color: #e5e7eb;
border-color: #4b5563;
}
/* Home page: keep search card overlapping hero a bit,
but make default margin safe for other pages */
.search-section {
/* margin-top: removed */ 1.5rem;
}
body.home-page .search-section {
/* margin-top: removed */ -40px; /* overlap hero, but not too high */
}
/* Vehicle detail page: push content down so nav doesn’t overlap hero image */
body.vehicle-detail-page .site-main {
padding-top: 2.5rem;
}
/* Make sure the “Find your next car” and “Featured Vehicles” headings are white */
.search-section h2,
.featured-section h2 {
color: #f9fafb;
}
/* Remove any light “edge” around rounded sections by making their parent dark too */
body,
.site-main {
background-color: #ffffff !important;
}
/* --- FORCE HEADINGS WHITE --- */
h1, h2, h3, h4,
/* --- Strong spacing fix for stock page title vs search box --- */
body
body
.home-page .container {
background-color: transparent; /* no light block behind sections */
}
/* Remove the gap where the light background shows through */
.home-page .featured-section {
margin-top: 0 !important; /* kill collapsed margin gap */
padding-top: 1.5rem; /* keep some internal spacing */
background-color: #ffffff; /* match page background */
}
/* --- Home page: remove white slivers around Featured Vehicles --- */
body.home-page,
.home-page .site-main,
.home-page .container {
background-color: #ffffff; /* main dark background */
}
/* Make the search + featured blocks flush with the background */
.home-page .search-section,
.home-page .featured-section {
background-color: #ffffff;
border-radius: 0;
box-shadow: none;
margin-top: 0;
}
/* Give the card list itself its own slightly lighter panel if desired */
.home-page .featured-section {
padding-top: 1.5rem;
}
/* --- Home page: transparent header over hero image --- */
body.home-page .site-header {
background: transparent !important;
box-shadow: none;
border-bottom: none;
}
/* FORCE REMOVE NAVBAR BACKGROUND */
header,
.site-header,
.navbar,
.navbar-default,
.navbar-main,
.top-bar,
.top-header,
#header,
#main-header {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* ensure header text stays visible */
header a,
.site-header a,
.navbar a,
.navbar-default a {
color: #ffffff !important;
}
/* === Footer full-width colour fix === */
.site-footer .footer-inner {
background: transparent !important; /* no separate darker box */
}
/* === Force transparent header over hero image (final override) === */
.site-header,
.site-header .header-inner {
background: transparent !important;
box-shadow: none !important;
}
/* FORCE DARK GREEN FOOTER */
/* FORCE DARK FOOTER */
.site-footer {
background: #121111 !important;
color: #ffffff !important;
}
/* ============================================================
MODERN PUBLIC UI OVERHAUL (header/nav/hero left as-is)
============================================================ */
/* Global layout */
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f3f4f6 !important; /* light grey */
color: #111827 !important; /* near-black text */
}
/* Main content area */
.site-main {
background: #f3f4f6 !important;
padding: 2rem 0 3rem;
}
/* Container */
.container {
width: 92%;
max-width: 1200px;
margin: 0 auto;
}
/* Page titles */
/* Section headings (e.g. Find your next car, Featured Vehicles) */
.search-section h2,
.featured-section h2,
.content-section h2,
.contact-page h2,
.about-page h2,
.warranty-page h2 {
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 1rem;
color: #111827;
}
/* ---------- Search card (public) ---------- */
/* Default search section: clean card on light grey */
.search-section {
background: #212020 !important;
padding: 1.4rem 1.5rem;
border-radius: 0.9rem;
/* margin-top: removed */ 2rem;
box-shadow: 0 18px 40px rgba(15,23,42,0.06);
}
/* Home page only: float slightly over hero */
.home-page .search-section {
/* margin-top: removed */ -60px !important;
}
/* Stock/Sold pages: no overlap, just spacing under title */
/* Form layout inside search */
.search-form .form-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.form-row > div {
flex: 1 1 150px;
}
.form-row .grow {
flex: 2 1 220px;
}
.form-row .align-bottom {
display: flex;
align-items: flex-end;
}
/* Labels + controls */
.search-section label {
display: block;
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: #4b5563;
}
.search-section input,
.search-section select {
width: 100%;
padding: 0.45rem 0.55rem;
border-radius: 0.5rem;
border: 1px solid #d1d5db;
font-size: 0.95rem;
box-sizing: border-box;
background: #212020 !important;
color: #111827;
}
/* Disabled model dropdown */
.model-select:disabled {
background-color: #f3f4f6;
cursor: not-allowed;
}
/* Primary button */
.btn-primary {
display: inline-block;
padding: 0.55rem 1.2rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.95rem;
text-decoration: none;
background: #2563eb;
color: #ffffff;
}
.btn-primary:hover {
background: #1d4ed8;
}
/* ---------- Vehicle cards ---------- */
.vehicle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
margin-top: 1rem;
}
/* Card */
.vehicle-card {
background: #212020 !important;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 18px 40px rgba(15,23,42,0.06);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vehicle-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 55px rgba(15,23,42,0.12);
}
.vehicle-card a {
color: inherit;
text-decoration: none;
}
/* Card image */
.vehicle-image {
position: relative;
}
.vehicle-image img {
width: 100%;
display: block;
}
/* Placeholder image */
.vehicle-image .placeholder {
height: 200px;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
/* Card body */
.vehicle-body {
padding: 0.85rem 1rem 1rem;
}
.vehicle-body h3 {
margin: 0 0 0.25rem;
font-size: 1.05rem;
font-weight: 600;
color: #111827;
}
.vehicle-body .attention {
margin: 0 0 0.4rem;
color: #4b5563;
font-size: 0.9rem;
}
.vehicle-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.8rem;
color: #6b7280;
}
.price {
font-weight: 700;
margin-top: 0.5rem;
font-size: 1.05rem;
color: #111827;
}
/* Status badges */
.badge {
position: absolute;
top: 8px;
left: 8px;
padding: 0.2rem 0.7rem;
border-radius: 999px;
font-size: 0.75rem;
color: #ffffff;
}
.badge-reserved { background: #f59e0b; }
.badge-sold { background: #dc2626; }
/* ---------- Featured section ---------- */
.featured-section {
margin-top: 2.5rem;
}
.featured-section h2 {
margin-bottom: 1rem;
}
/* ---------- Content pages (About, Warranty, Contact) ---------- */
.content-section {
margin-top: 2rem;
}
.content-card {
background: #212020 !important;
padding: 1.75rem 2rem;
border-radius: 1rem;
box-shadow: 0 18px 40px rgba(15,23,42,0.06);
}
.content-card p {
color: #374151;
line-height: 1.6;
margin-bottom: 0.9rem;
}
/* Ensure all text on those pages is readable */
.about-page .container,
.warranty-page .container,
.contact-page .container {
color: #111827;
}
/* Links in content */
.content-card a {
color: #2563eb;
text-decoration: none;
}
.content-card a:hover {
text-decoration: underline;
}
/* ---------- Contact form ---------- */
.contact-page form {
margin-top: 1.25rem;
}
.contact-page form .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.contact-page label {
font-size: 0.9rem;
color: #4b5563;
}
.contact-page input,
.contact-page textarea {
border-radius: 0.5rem;
border: 1px solid #d1d5db;
padding: 0.5rem 0.6rem;
font-size: 0.95rem;
background: #212020 !important;
color: #111827;
}
/* ---------- Vehicle detail page ---------- */
.vehicle-detail-page .container {
margin-top: 1.75rem;
}
.vehicle-detail-page h1,
.vehicle-detail-page h2 {
color: #111827;
}
.vehicle-detail-page .info-box,
.vehicle-detail-page .vehicle-options {
background: #212020 !important;
border-radius: 0.9rem;
padding: 1.25rem 1.4rem;
box-shadow: 0 12px 30px rgba(15,23,42,0.05);
}
/* ---------- Messages ---------- */
.messages {
margin-bottom: 1rem;
}
.message {
padding: 0.6rem 0.8rem;
border-radius: 0.5rem;
font-size: 0.9rem;
}
.message.success {
background: #dcfce7;
color: #166534;
}
.message.error {
background: #fee2e2;
color: #b91c1c;
}
/* ---------- Footer (keep dark, but ensure full width) ---------- */
.site-footer {
background: #121111 !important;
color: #e5e7eb !important;
padding: 2rem 0 1rem;
margin-top: 2.5rem;
}
.site-footer .container {
max-width: 1200px;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.footer-column h4 {
color: #f9fafb;
}
.footer-bottom {
text-align: center;
margin-top: 1.2rem;
font-size: 0.8rem;
color: #9ca3af;
}
/* Footer links */
.site-footer a {
color: #e5e7eb;
text-decoration: none;
}
.site-footer a:hover {
color: #ffffff;
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
.search-section {
padding: 1.1rem 1.1rem;
}
.vehicle-grid {
grid-template-columns: 1fr;
}
.content-card {
padding: 1.4rem 1.3rem;
}
}
/* ===== FINAL DARK-GREY THEME + WHITE TEXT OVERRIDE ===== */
/* Main background: slightly dark grey, lighter than footer */
body {
background: #212020 !important;
color: #ffffff !important;
}
/* Main content area inherits dark background */
.site-main {
background: transparent !important;
}
/* Make headings white (stop any green overrides) */
h1, h2, h3, h4, h5, h6 {
color: #ffffff !important;
}
/* Ensure content pages have white text on dark background */
.about-page .container,
.warranty-page .container,
.contact-page .container,
.about-page .container *,
.warranty-page .container *,
.contact-page .container *,
/* Warranty & text-heavy content sections */
.content-section,
.content-section * {
color: #ffffff !important;
}
/* Keep footer dark (already #121111) but with white text */
.site-footer,
.site-footer * {
color: #ffffff !important;
}
/* ============================================================
HARD OVERRIDE: MAKE ALL TEXT WHITE SITE-WIDE
============================================================ */
body, body * {
color: #ffffff !important;
}
/* Do NOT let inputs become white text on white background */
input, select, textarea {
color: #111827 !important;
background: #212020 !important;
}
/* REMOVE WHITE TITLE BOX ON STOCK + SOLD PAGES */
/* MOVE 'Find your next car' DOWN ON HOME PAGE */
.home-page .search-section-heading,
.home-page h2.search-title,
.home-page h1.search-title,
.home-page .vehicle-search-title {
margin-top: 2.5rem !important; /* push heading lower */
}
/* Extra safety: ensure search box doesn't overlap hero */
.home-page .search-section {
/* margin-top: removed */ -40px !important; /* was -60, reduces overlap */
}
/* --- MATCH VEHICLE ADVERT PAGE BACKGROUND TO SITE GREY --- */
.vehicle-detail,
.vehicle-detail .site-main,
.vehicle-detail body {
background: #1e1e1e !important; /* same grey you use site-wide */
color: #ffffff !important; /* keep text readable */
}
/* White/grey boxes inside vehicle pages should match dark theme */
.vehicle-detail .info-box,
.vehicle-detail .vehicle-options {
background: #2a2a2a !important;
color: #ffffff !important;
border-color: #3a3a3a !important;
}
\n
/* === FINAL VEHICLE DETAIL DARK BACKGROUND OVERRIDE === */
body.vehicle-detail,
.vehicle-detail,
.vehicle-detail .site-main,
.vehicle-detail .container {
background: #1e1e1e !important; /* same grey as rest of site */
color: #ffffff !important;
}
/* Boxes on the advert page */
.vehicle-detail .info-box,
.vehicle-detail .vehicle-options {
background: #2a2a2a !important;
color: #ffffff !important;
border-color: #3a3a3a !important;
}
/* --- Mobile: prevent page titles overlapping the header --- */
@media (max-width: 768px) {
}
/* --- Mobile: keep content below header on non-home pages --- */
@media (max-width: 768px) {
body:not(.home-page) .site-main {
padding-top: 4.5rem;
}
}
/* --- Unified title spacing for Stock & Sold pages (all devices) --- */
/* --- FINAL unified spacing for Stock & Sold page titles & search blocks --- */
.stock-page-title,
.sold-page-title {
margin-top: 4.5rem !important; /* identical spacing */
margin-bottom: 1.5rem !important;
display: block;
}
/* Ensure the search box sits directly under the title, same on both pages */
.stock-page .search-section,
.sold-page .search-section {
margin-top: 0 !important; /* remove accidental extra spacing */
}
/* === UNIVERSAL ADMIN BACKGROUND FIX === */
.admin-page,
.admin-page .site-main,
.admin-page body,
.admin-page .container,
.admin-dashboard,
.admin-page .admin-card,
.admin-page .admin-panel-card,
.admin-page table,
.admin-page form {
background: #212020 !important;
color: #ffffff !important;
}
/* Ensure table rows match the dark theme */
.admin-page table tbody tr {
background: #212020 !important;
}
.admin-page table tbody tr:hover {
background: #2a2a2a !important;
}
/* Inputs still readable */
.admin-page input,
.admin-page select,
.admin-page textarea {
background: #2a2a2a !important;
border: 1px solid #444 !important;
color: #ffffff !important;
}
/* Keep admin containers readable */
.admin-page .container,
.admin-page .admin-card,
.admin-page .admin-panel-card,
.admin-page table,
.admin-page form {
background: #ffffff !important; /* clean white cards on light grey */
color: #111111 !important;
}
/* Main admin background – same as rest of the site */
/* Only the main content containers/cards should be white */
.admin-page .site-main > .container,
.admin-page .admin-dashboard,
.admin-page .admin-card,
.admin-page .admin-panel-card,
.admin-page .admin-table,
.admin-page table,
.admin-page form {
background: #ffffff !important;
color: #111111 !important;
}
/* Make sure table rows don’t go dark */
.admin-page table tr,
.admin-page table td,
.admin-page table th {
background: transparent !important;
color: #111111 !important;
}
/* DO NOT turn the footer container white on admin pages */
.admin-page .site-footer,
.admin-page .site-footer .container {
background: #121111 !important; /* your dark footer colour */
color: #ffffff !important;
}
/* Set ALL admin page backgrounds to the site grey */
.admin-page,
.admin-page body,
/* REMOVE any white background applied to section titles */
.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page .page-title,
.admin-page .section-title {
background: transparent !important;
color: #111111 !important; /* dark text for readability */
padding: 10px 0 !important;
}
/* Tables & data sections stay dark (as you currently have them) */
.admin-page table,
.admin-page tr,
.admin-page td,
.admin-page th {
background: #1c1c1c !important;
color: #ffffff !important;
}
/* Footer stays dark grey */
.admin-page .site-footer,
.admin-page .site-footer .container {
background: #121111 !important;
color: #ffffff !important;
}
/* === ADMIN BACKGROUND FIX (FINAL & FORCEFUL) ============================ */
/* Force Django admin background to the same grey as the site */
body.dashboard,
body.change-list,
body.change-form,
body.login,
#container,
#content,
#content-main,
#changelist,
.module,
.dashboard #content {
background: #e5e5e5 !important;
}
/* Ensure titles are visible */
#content h1,
#content h2,
#content-main h1,
.dashboard #content h1 {
color: #111111 !important;
background: transparent !important;
}
/* Fix inner white blocks */
#content .module,
#content-main .module {
background: #e5e5e5 !important;
}\n\n
/* === FINAL ADMIN BACKGROUND UNIFICATION ======================= */
/* Make the whole admin area (edges + middle) the same grey */
.admin-page .site-main,
.admin-page .container,
.admin-page .site-main .container,
.admin-dashboard,
.admin-dashboard-hero,
.admin-page #content,
.admin-page #content-main {
background-color: #e5e5e5 !important;
}
/* Ensure page titles don't sit on white bars */
.admin-page h1,
.admin-page .page-title {
background: transparent !important;
}
/* ===== Fix home Featured Vehicles background ===== */
/* Make the Featured Vehicles band match the main dark grey */
.home-page .featured-vehicles-section,
.home-page .featured-vehicles,
.home-page .home-featured,
.home-page .vehicle-grid-section,
.home-page .site-main section:last-of-type {
background: #212020 !important; /* same as main page background */
box-shadow: none !important;
border-radius: 0 !important;
}
/* === Unified Admin Background Fix === */
body.admin-area,
.admin-area,
.dashboard-page,
.user-manager-page,
.vehicle-manager-page,
.analytics-page,
.lead-manager-page,
.dashboard-container,
.dashboard-wrapper {
background: #121212 !important;
color: #ffffff !important;
}
/* Fix white sections inside admin pages */
.admin-area * {
background-color: transparent !important;
color: #ffffff !important;
}
/* Unified dark background for all admin pages (dashboard, users, vehicles, leads, analytics) */
.admin-page .site-main {
background: #111827;
}
/* --- FORCE ALL ADMIN BACKGROUNDS TO DARK GREY --- */
.admin-container,
.admin-wrapper,
.dashboard-section,
.dashboard-content,
#dashboard,
body.dashboard,
body.admin,
body[class*="dashboard"],
body[class*="admin"] {
background-color: #1e1e1e !important;
color: #ffffff !important;
}
.dashboard-section * {
color: #ffffff !important;
}
/* === FINAL admin backgrounds: match main site dark grey === */
body.admin-page,
.admin-page .site-main,
.admin-page main.site-main,
.admin-page .container {
background: #121111 !important;
}
/* --- Admin pages: remove remaining light grey bands (user/vehicle/lead/etc) --- */
.admin-page .site-main,
.admin-page .site-main > .container,
.admin-page .admin-dashboard,
.admin-page .admin-dashboard-hero {
background: transparent !important;
}
/* === Vehicle detail page === */
.vd-page {
padding: 40px 0 60px;
}
.vd-header.container,
.vd-breadcrumb.container,
.vd-main.container,
.vd-section.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.vd-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 10px;
}
.vd-header-left {
flex: 1 1 auto;
}
.vd-title {
font-size: 32px;
margin: 0 0 4px;
}
.vd-subtitle {
margin: 0 0 4px;
opacity: 0.8;
}
.vd-reg,
.vd-stock {
margin: 0;
font-size: 13px;
opacity: 0.8;
}
.vd-header-right {
text-align: right;
min-width: 220px;
}
.vd-price-main {
font-size: 26px;
font-weight: 700;
}
.vd-price-sub {
margin-top: 4px;
font-size: 13px;
opacity: 0.8;
}
.vd-cta-primary {
margin-top: 12px;
padding: 10px 24px;
border-radius: 9999px;
border: none;
cursor: pointer;
background: #1e90ff;
color: #fff;
font-weight: 600;
}
/* Breadcrumb */
.vd-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
opacity: 0.75;
margin-bottom: 24px;
}
/* Main layout */
.vd-main {
display: grid;
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
gap: 32px;
margin-bottom: 40px;
}
/* Gallery */
.vd-gallery {
display: flex;
flex-direction: column;
gap: 16px;
}
.vd-main-image-wrapper {
border-radius: 12px;
overflow: hidden;
background: #111;
}
.vd-main-image {
display: block;
width: 100%;
height: auto;
}
.vd-main-image-placeholder {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
}
.vd-thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.vd-thumb-btn {
border: none;
padding: 0;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
flex: 0 0 88px;
opacity: 0.7;
outline: 2px solid transparent;
}
.vd-thumb-btn img {
display: block;
width: 100%;
height: 60px;
object-fit: cover;
}
.vd-thumb-btn.active,
.vd-thumb-btn:hover {
opacity: 1;
outline-color: #1e90ff;
}
.vd-gallery-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
.vd-cta-secondary {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.15);
background: transparent;
color: inherit;
padding: 8px 16px;
font-size: 13px;
cursor: pointer;
}
/* Facts sidebar */
.vd-facts {
background: rgba(255,255,255,0.02);
border-radius: 16px;
padding: 18px 20px;
border: 1px solid rgba(255,255,255,0.06);
}
.vd-facts h2 {
margin-top: 0;
margin-bottom: 12px;
font-size: 18px;
}
.vd-facts dl {
margin: 0;
}
.vd-fact-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px dashed rgba(255,255,255,0.05);
font-size: 13px;
}
.vd-fact-row:last-child {
border-bottom: none;
}
.vd-fact-row dt {
font-weight: 500;
opacity: 0.85;
}
.vd-fact-row dd {
margin: 0;
opacity: 0.9;
text-align: right;
}
.vd-highlight-box {
margin-top: 14px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,215,0,0.07);
border: 1px solid rgba(255,215,0,0.35);
font-size: 13px;
}
.vd-highlight-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
opacity: 0.8;
}
.vd-highlight-value {
font-weight: 600;
}
/* Generic sections */
.vd-section {
margin-bottom: 32px;
}
.vd-section h2 {
font-size: 20px;
margin-bottom: 12px;
}
.vd-panel {
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
padding: 16px 18px;
font-size: 14px;
}
.vd-description {
line-height: 1.5;
}
/* Specification accordions */
.vd-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.vd-accordion details {
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
overflow: hidden;
}
.vd-accordion summary {
cursor: pointer;
padding: 10px 14px;
list-style: none;
font-weight: 600;
position: relative;
}
.vd-accordion summary::-webkit-details-marker {
display: none;
}
.vd-accordion summary::after {
content: "▾";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
}
.vd-accordion details[open] summary::after {
content: "▴";
}
.vd-spec-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.vd-spec-table th,
.vd-spec-table td {
padding: 6px 14px;
border-top: 1px solid rgba(255,255,255,0.04);
}
.vd-spec-table th {
width: 45%;
text-align: left;
opacity: 0.85;
}
/* Enquiry */
#vd-enquiry .vd-panel p {
margin: 4px 0;
}
/* Responsive */
@media (max-width: 900px) {
.vd-header {
flex-direction: column;
align-items: flex-start;
}
.vd-header-right {
text-align: left;
}
.vd-main {
grid-template-columns: minmax(0, 1fr);
}
}
/* === Vehicle detail layout tweaks === */
.vehicle-detail-hero {
max-width: 1200px;
margin: 0 auto 60px;
padding: 40px 20px 0;
}
/* Main row: big image + key details side-by-side */
.vehicle-detail-main {
display: flex;
gap: 32px;
align-items: flex-start;
}
/* Left: main image column */
.vehicle-detail-main-image {
flex: 0 0 68%;
}
/* Main image: fit inside a fixed box, no horizontal scroll */
.vehicle-detail-main-image img {
width: 100%;
height: auto;
max-height: 520px; /* control height so page isn't crazy tall */
object-fit: contain; /* show whole image without cropping */
display: block;
border-radius: 10px;
}
/* Right: key details column */
.vehicle-key-details {
flex: 0 0 32%;
}
/* Thumbnail strip */
.vehicle-thumb-list {
display: flex;
gap: 8px;
overflow-x: auto;
margin-top: 12px;
padding-bottom: 8px;
}
.vehicle-thumb-list img {
height: 90px;
width: auto;
object-fit: cover;
border-radius: 6px;
}
/* Prevent horizontal scrollbars on the page */
body {
overflow-x: hidden;
}
/* Mobile: stack image above key details */
@media (max-width: 960px) {
.vehicle-detail-main {
flex-direction: column;
}
.vehicle-detail-main-image,
.vehicle-key-details {
flex: 0 0 100%;
}
.vehicle-detail-main-image img {
max-height: 380px;
}
}
/* === Vehicle detail image sizing tweaks === */
/* If the main image has one of these IDs, constrain it */
#mainVehicleImage,
#main-image {
max-width: 900px;
width: 100%;
height: auto;
display: block;
margin: 0 auto 16px;
}
/* Generic safety net: any large hero image inside the vehicle detail main area */
.vehicle-detail-main-image img,
.vehicle-main-image img,
.vehicle-hero img {
max-width: 900px;
width: 100%;
height: auto;
object-fit: contain; /* show the whole photo, no cropping */
display: block;
margin: 0 auto;
}
/* Make sure nothing on the page can push wider than the viewport */
body {
overflow-x: hidden;
}
/* === Vehicle detail layout === */
.vehicle-detail-page {
max-width: 1200px;
margin: 0 auto 48px;
padding: 0 24px;
}
.vehicle-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 24px;
}
.vehicle-detail-title {
font-size: 32px;
margin-bottom: 4px;
}
.vehicle-detail-year {
color: #ccc;
margin-bottom: 8px;
}
.vehicle-breadcrumb {
font-size: 13px;
color: #999;
}
.vehicle-breadcrumb a {
color: #ccc;
text-decoration: underline;
}
.vehicle-detail-price-box {
text-align: right;
}
.vehicle-detail-price {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
/* Hero row: main image + sidebar */
.vehicle-hero-row {
display: flex;
align-items: flex-start;
gap: 32px;
margin-bottom: 16px;
}
.vehicle-hero-main {
flex: 3;
min-width: 0;
}
.vehicle-hero-main-image {
width: 100%;
max-height: 550px; /* keeps it from being massive */
object-fit: contain; /* show full image, no cropping */
border-radius: 8px;
display: block;
}
/* Sidebar card */
.vehicle-hero-sidebar {
flex: 2;
max-width: 340px;
}
.vehicle-key-details-card {
background: #111827;
border-radius: 12px;
padding: 16px 20px;
color: #f9fafb;
}
.vehicle-key-details-card h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 18px;
}
.vehicle-key-details-card table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.vehicle-key-details-card th,
.vehicle-key-details-card td {
padding: 4px 0;
}
.vehicle-key-details-card th {
text-align: left;
color: #9ca3af;
font-weight: 400;
}
/* Thumbnails bar */
.vehicle-thumbnails-bar {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 10px 0;
margin-bottom: 24px;
}
.vehicle-thumb {
flex: 0 0 auto;
width: 120px;
height: 80px;
border-radius: 6px;
overflow: hidden;
background: #111827;
}
.vehicle-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Actions */
.vehicle-actions-row {
display: flex;
gap: 12px;
margin-bottom: 32px;
}
.vehicle-actions-row .wide {
flex: 1;
text-align: center;
}
/* Description */
.vehicle-description-section h2 {
font-size: 22px;
margin-bottom: 12px;
}
/* Buttons (reuse your colours) */
.btn-primary,
.btn-secondary {
display: inline-block;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
border: none;
cursor: pointer;
text-align: center;
}
.btn-primary {
background: #2563eb;
color: white;
}
.btn-secondary {
background: transparent;
color: white;
border: 1px solid #4b5563;
}
/* Responsive: stack columns on smaller screens */
@media (max-width: 1024px) {
.vehicle-hero-row {
flex-direction: column;
}
.vehicle-hero-sidebar {
max-width: 100%;
}
.vehicle-detail-header {
flex-direction: column;
align-items: flex-start;
}
.vehicle-detail-price-box {
text-align: left;
}
}
/* --- VEHICLE HERO IMAGE FIX --- */
/* Container that holds the main image — limit its width */
.vehicle-hero-main {
flex: 1;
max-width: 750px; /* controls image width */
display: flex;
justify-content: center;
}
/* Main hero image — scale without cropping */
.vehicle-hero-main-image {
width: 100%;
height: auto;
max-height: 500px; /* prevents tall images overflowing */
object-fit: contain !important;
border-radius: 8px;
}
/* Row containing image + sidebar */
.vehicle-hero-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
max-width: 1200px; /* prevents over-expanding layout */
margin: 0 auto;
}
/* Key Details Box */
.vehicle-hero-sidebar {
flex: 0 0 300px; /* fixed sidebar width */
}
/* ==== VEHICLE DETAIL MAIN IMAGE FIX ==== */
/* Applies to the big hero image on the vehicle page */
#mainImage {
max-width: 900px; /* hard cap for width on large screens */
width: 100%; /* scale down on smaller screens */
height: auto; /* keep aspect ratio, no cropping */
object-fit: contain; /* make sure the whole image is visible */
display: block;
margin: 0 auto 24px; /* center the image with a bit of space below */
}
/* Prevent any horizontal scrolling on the detail page */
body {
overflow-x: hidden;
}
/* ==== HARD CAP FOR VEHICLE DETAIL MAIN IMAGE ==== */
/* This targets any ![]()
inside the main hero/gallery area. Adjust selectors if needed. */
.vehicle-main-image,
.vehicle-main-image img,
#mainImage,
#mainImage img,
.vehicle-main-gallery img,
.vehicle-main img {
max-width: 900px !important; /* never wider than 900px */
width: 100% !important; /* scale with its container */
height: auto !important; /* preserve aspect ratio (no cropping) */
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Also ensure the gallery container itself doesn’t stretch wider than the viewport */
.vehicle-hero-container,
.vehicle-main-gallery,
.vehicle-main {
max-width: 900px !important;
margin: 0 auto !important;
}
/* Make sure the page never scrolls horizontally because of images */
body {
overflow-x: hidden;
}
/* === Vehicle detail main image centering fix === */
#vd-main-image,
.vd-main-image {
max-width: 900px; /* keep the size you liked */
width: 100%;
height: auto;
display: block;
margin: 0 auto; /* centre horizontally */
float: none !important;/* undo any old float rules */
}
/* === Vehicle detail hero wrapper === */
.vehicle-detail-hero,
.vehicle-detail-gallery,
.vd-hero-wrapper {
max-width: 1200px;
margin: 0 auto;
}
/* === Vehicle detail thumb carousel (5 visible + arrows) === */
.thumb-carousel-wrapper{
display:flex;
align-items:center;
gap:10px;
width:100%;
max-width:900px; /* same width as your main image wrapper */
margin:16px 0;
}
.thumb-carousel{
display:flex;
gap:10px;
overflow:hidden; /* hides the rest (so it doesn't make the page wide) */
width:100%;
max-width:760px; /* ~5 thumbs depending on thumb width below */
}
.thumb-carousel .vd-thumb-btn{
flex:0 0 auto;
border:0;
background:transparent;
padding:0;
border-radius:12px;
overflow:hidden;
cursor:pointer;
outline:2px solid transparent;
}
.thumb-carousel .vd-thumb-btn.active{
outline-color:#2b6cff;
}
.thumb-carousel .vd-thumb-btn img{
display:block;
width:140px;
height:90px;
object-fit:cover;
}
.thumb-arrow{
background:#1f1f1f;
border:1px solid rgba(255,255,255,0.12);
color:#fff;
border-radius:10px;
width:42px;
height:42px;
cursor:pointer;
}
.thumb-arrow:hover{ background:#2a2a2a; }
/* Prevent any "black bar" background behind the main image area */
.vd-main-image-wrapper,
.vd-main-image-container{
background:transparent !important;
}
/* Optional: stop anything in gallery area from forcing horizontal scroll */
.vd-main, .vd-gallery { max-width:100%; overflow-x:hidden; }
/* === VD LAYOUT FINAL CLEAN (desktop 2-col, mobile centered) === */
/* Keep the vehicle detail page centered and full width */
.vd-wrap{
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* DESKTOP: image/gallery left, key details + CTAs right */
@media (min-width: 981px){
.vd-wrap .vd-main{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px !important;
gap: 28px !important;
align-items: start !important;
}
.vd-wrap .vd-side{
width: 100% !important;
max-width: 420px !important;
justify-self: end !important;
}
/* Avoid any stray max-width clamps from older rules */
.vd-wrap .vd-main > .vd-card{
max-width: none !important;
}
}
/* MOBILE/TABLET: single column, centered */
@media (max-width: 980px){
.vd-wrap{
padding-left: 14px !important;
padding-right: 14px !important;
}
.vd-wrap .vd-main{
display: grid !important;
grid-template-columns: 1fr !important;
}
.vd-wrap .vd-card,
.vd-wrap .vd-section{
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
}
/* Never allow horizontal overflow */
html, body{ overflow-x: hidden !important; }
/* === VD DESKTOP WIDTH FIX (stop "mobile narrow" on desktop) === */
@media (min-width: 981px){
/* If the vehicle detail page is wrapped in a .container with a hard max-width (often 900px),
this expands it back to the normal desktop width and recenters it. */
.vehicle-detail-page .container,
.vehicle-detail .container,
.vd-main.container,
.vd-section.container{
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Keep your vd wrapper centered and full width inside that container */
.vd-wrap{
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* === end VD DESKTOP WIDTH FIX === */
/* === VD DESKTOP WIDTH FIX (undo 900px container cap on vehicle detail pages) === */
@media (min-width: 981px){
/* Make the vehicle detail page container full desktop width & centered */
.vehicle-detail-page .container,
.vehicle-detail .container{
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Keep consistent side padding (matches your vd-wrap) */
.vehicle-detail-page .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* === end VD DESKTOP WIDTH FIX === */
/* === VD: DESKTOP CONTAINER WIDTH OVERRIDE (vehicle detail only) === */
@media (min-width: 981px) {
/* Override the old cap: .vehicle-detail-page .container { max-width:1100px; } */
.vehicle-detail-page .container {
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* === VD FINAL VEHICLE DETAIL LAYOUT === */
/* Desktop: image left, sidebar (CTAs + Key Details) right
Mobile: everything centered, full width, image never cropped */
.vehicle-detail-page .container{
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.vd-wrap{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
/* Keep the big image from ever being cropped */
.vd-hero{
display: flex;
justify-content: center;
}
.vd-hero img,
#vdMainImg{
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* DESKTOP (2 columns) */
@media (min-width: 981px){
.vehicle-detail-page .container{
max-width: 1200px !important;
}
.vd-main{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px !important;
gap: 28px !important;
align-items: start !important;
}
.vd-side{
width: 100% !important;
max-width: 420px !important;
justify-self: end !important;
}
}
/* MOBILE/TABLET (1 column, centered cards, no horizontal push) */
@media (max-width: 980px){
.vd-wrap{
padding-left: 14px !important;
padding-right: 14px !important;
}
.vd-main{
display: grid !important;
grid-template-columns: 1fr !important;
}
.vd-card,
.vd-section{
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* guard against tiny overflow causing the image to clip */
html, body{
overflow-x: hidden !important;
}
}
/* === END VD FINAL VEHICLE DETAIL LAYOUT === */