/*
Theme Name: Westgate Motors Used Cars Theme
Theme URI: https://github.com/westgate-motors/theme
Author: Westgate Motors
Author URI: https://westgatemotors.co.uk
Description: A bold, high-performance WordPress theme designed specifically for Westgate Motors used car dealership based in Manchester, UK. Featuring custom Barlow Condensed headings, Inter body text, full compatibility with Gutenberg / Elementor, and support for the Vehicle custom post type.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: westgate-motors
Tags: automotive, used-cars, responsive, clean, high-performance, dealership

=== RESET & BASE SYSTEM ===
*/

*/
:root {
--racing-red: #C8102E;
--racing-red-hover: #E01A3F;
--charcoal-black: #0E0E11;
--light-gray: #050507;
--card-bg: #121215;
--card-shadow: 0 4px 20px rgba(0,0,0,0.5);
--hover-shadow: 0 10px 30px rgba(200, 16, 46, 0.15);
--border-color: #222227;
--text-primary: #F3F4F6;
--text-muted: #94A3B8;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text-primary);
background-color: var(--light-gray);
line-height: 1.6;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, .brand-heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ffffff;
margin: 0 0 1rem 0;
}
a {
color: var(--racing-red);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--racing-red-hover);
}
.button-primary {
background-color: var(--racing-red);
color: #ffffff !important;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
text-transform: uppercase;
padding: 0.75rem 1.5rem;
border-radius: 4px;
border: none;
cursor: pointer;
display: inline-block;
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
letter-spacing: 0.05em;
}
.button-primary:hover {
background-color: var(--racing-red-hover);
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(200, 16, 46, 0.4);
}
.button-secondary {
background-color: var(--charcoal-black);
color: #ffffff !important;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
text-transform: uppercase;
padding: 0.75rem 1.5rem;
border-radius: 4px;
border: 1px solid var(--border-color);
cursor: pointer;
display: inline-block;
transition: background-color 0.2s ease, border-color 0.2s ease;
letter-spacing: 0.05em;
}
.button-secondary:hover {
background-color: #1A1A22;
border-color: rgba(255, 255, 255, 0.2);
}
/* === NAVIGATION HEADER === */
.dealer-header {
background-color: var(--charcoal-black);
color: #ffffff;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
border-bottom: 1px solid var(--border-color);
}
.dealer-header .header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
.dealer-header .logo-placeholder {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.8rem;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
}
.dealer-header .logo-placeholder span {
color: var(--racing-red);
}
.primary-nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5rem;
}
.primary-nav-menu ul li a {
color: #CBD5E0;
font-family: 'Barlow Condensed', sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 1.05rem;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
}
.primary-nav-menu ul li a:hover,
.primary-nav-menu ul li.current-menu-item a {
color: var(--racing-red-hover);
border-bottom-color: var(--racing-red-hover);
}
/* === HERO HOMEPAGE === */
.hero-banner {
position: relative;
background-color: var(--charcoal-black);
color: #ffffff;
padding: 6rem 1.5rem;
text-align: center;
background-image: linear-gradient(rgba(10,10,12,0.85), rgba(10,10,12,0.98)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&q=80&w=1200');
background-size: cover;
background-position: center;
}
.hero-banner h1 {
font-size: 3.5rem;
color: #ffffff;
margin-bottom: 0.5rem;
line-height: 1.1;
}
.hero-banner p {
font-size: 1.25rem;
max-width: 600px;
margin: 1rem auto 2rem auto;
color: #CBD5E0;
}
.hero-ctas {
display: flex;
justify-content: center;
gap: 1rem;
}
/* === VEHICLE CARD GRID === */
.vehicle-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
@media(max-width: 960px) {
.vehicle-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 640px) {
.vehicle-grid {
grid-template-columns: 1fr;
}
}
.vehicle-card {
background-color: var(--card-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
border: 1px solid var(--border-color);
}
.vehicle-card:hover {
transform: translateY(-5px);
box-shadow: var(--hover-shadow);
border-color: var(--racing-red);
}
.vehicle-card-thumbnail {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background-color: #1a1a20;
}
.vehicle-card-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vehicle-card-badge {
position: absolute;
top: 10px;
left: 10px;
background-color: var(--racing-red);
color: #ffffff;
padding: 0.25rem 0.6rem;
font-size: 0.75rem;
font-weight: bold;
border-radius: 4px;
text-transform: uppercase;
}
.vehicle-card-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.vehicle-card-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #ffffff;
}
.vehicle-card-price {
font-size: 1.6rem;
color: var(--racing-red);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
margin-bottom: 1rem;
}
.vehicle-card-specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 1rem;
font-size: 0.85rem;
color: var(--text-muted);
border-top: 1px solid var(--border-color);
padding-top: 1rem;
margin-bottom: 1.25rem;
}
.vehicle-card-specs span {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* === FILTERS SECTION === */
.vehicle-filters-bar {
background-color: var(--card-bg);
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
max-width: 1200px;
margin: 2rem auto 0 auto;
border: 1px solid var(--border-color);
}
.vehicle-filters-form {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media(max-width: 800px) {
.vehicle-filters-form {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 500px) {
.vehicle-filters-form {
grid-template-columns: 1fr;
}
}
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
margin-bottom: 0.4rem;
color: #ffffff;
}
.filter-group select {
padding: 0.6rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--charcoal-black);
font-family: 'Inter', sans-serif;
color: var(--text-primary);
}
/* === SINGLE VEHICLE LAYOUT === */
.single-vehicle-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1.5rem;
}
.single-vehicle-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--border-color);
padding-bottom: 1.5rem;
}
@media(max-width: 768px) {
.single-vehicle-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
.single-vehicle-title-area h1 {
font-size: 2.8rem;
margin: 0;
color: #ffffff;
}
.single-vehicle-price-badge {
text-align: right;
}
@media(max-width: 768px) {
.single-vehicle-price-badge {
text-align: left;
}
}
.single-vehicle-price-badge .price {
font-size: 3rem;
color: var(--racing-red);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
line-height: 1;
}
.single-vehicle-price-badge .vat {
font-size: 0.85rem;
color: var(--text-muted);
}
.vehicle-gallery-wrapper {
background: #000000;
border-radius: 8px;
overflow: hidden;
position: relative;
margin-bottom: 2rem;
border: 1px solid var(--border-color);
}
.main-gallery-slider {
position: relative;
aspect-ratio: 16/9;
}
.main-gallery-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-vehicle-columns {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
@media(max-width: 900px) {
.single-vehicle-columns {
grid-template-columns: 1fr;
}
}
.specs-grid-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
background-color: var(--card-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--card-shadow);
border: 1px solid var(--border-color);
}
.specs-grid-table td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.specs-grid-table tr:last-child td {
border-bottom: none;
}
.specs-grid-table td.label-cell {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
text-transform: uppercase;
color: var(--text-muted);
width: 35%;
}
.specs-grid-table td.value-cell {
font-weight: 600;
color: #ffffff;
}
.description-box {
background-color: var(--card-bg);
padding: 2rem;
border-radius: 8px;
box-shadow: var(--card-shadow);
margin-bottom: 2rem;
border: 1px solid var(--border-color);
}
.sidebar-lead-form {
background-color: var(--charcoal-black);
color: #ffffff;
padding: 2rem;
border-radius: 8px;
align-self: start;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
border: 1px solid var(--border-color);
}
.sidebar-lead-form h3 {
color: #ffffff;
border-bottom: 2px solid var(--racing-red);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.wpforms-field {
margin-bottom: 1.25rem;
}
.wpforms-field label {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
margin-bottom: 0.4rem;
color: #CBD5E0;
}
.wpforms-field input, .wpforms-field select, .wpforms-field textarea {
width: 100%;
padding: 0.75rem;
background-color: rgba(255,255,255,0.04);
border: 1px solid var(--border-color);
border-radius: 4px;
color: #ffffff;
box-sizing: border-box;
}
.wpforms-field input:focus, .wpforms-field select:focus, .wpforms-field textarea:focus {
outline: none;
border-color: var(--racing-red);
background-color: rgba(255,255,255,0.08);
}
/* === TRUST SECTION === */
.trust-section {
background-color: var(--charcoal-black);
padding: 5rem 1.5rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.trust-section-title {
text-align: center;
max-width: 600px;
margin: 0 auto 3.5rem auto;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
@media(max-width: 1024px) {
.trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 580px) {
.trust-grid {
grid-template-columns: 1fr;
}
}
.trust-card {
text-align: center;
}
.trust-icon {
width: 60px;
height: 60px;
background-color: rgba(200, 16, 46, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem auto;
color: var(--racing-red);
border: 1px solid rgba(200, 16, 46, 0.25);
}
/* === FINANCING LOAN CALCULATOR === */
.calculator-container {
background-color: var(--card-bg);
border-radius: 8px;
padding: 2.5rem;
box-shadow: var(--card-shadow);
margin: 2rem 0;
border: 1px solid var(--border-color);
}
.calculator-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
@media(max-width: 768px) {
.calculator-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.slider-group {
margin-bottom: 2rem;
}
.slider-group label {
display: flex;
justify-content: space-between;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 0.5rem;
}
.slider-group input[type="range"] {
width: 100%;
accent-color: var(--racing-red);
}
.calc-results {
background-color: var(--charcoal-black);
padding: 2.5rem;
border-radius: 8px;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid var(--border-color);
}
.calc-results .result-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.25rem;
letter-spacing: 0.05em;
color: #94A3B8;
}
.calc-results .result-amount {
font-size: 3.5rem;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
color: var(--racing-red);
margin: 0.5rem 0;
}
/* === FOOTER AREA === */
.dealer-footer {
background-color: var(--charcoal-black);
color: #CBD5E0;
padding: 4rem 1.5rem 2rem 1.5rem;
border-top: 1px solid var(--border-color);
}
.footer-columns {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
}
@media(max-width: 960px) {
.footer-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 580px) {
.footer-columns {
grid-template-columns: 1fr;
}
}
.footer-widget-title {
color: #ffffff;
border-bottom: 2px solid var(--racing-red);
display: inline-block;
padding-bottom: 0.25rem;
margin-bottom: 1.5rem;
}
.copyright-section {
max-width: 1200px;
margin: 3rem auto 0 auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.05);
display: flex;
justify-content: space-between;
font-size: 0.85rem;
}
@media(max-width: 580px) {
.copyright-section {
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
}
/* === BENTO GRID SYSTEM === */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}
.bento-card {
background-color: var(--card-bg);
border-radius: 16px;
padding: 2rem;
box-shadow: var(--card-shadow);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--text-primary);
}
.bento-card:hover {
transform: translateY(-4px);
box-shadow: var(--hover-shadow);
border-color: var(--racing-red);
}
.bento-col-12 { grid-column: span 12; }
.bento-col-8 { grid-column: span 8; }
.bento-col-6 { grid-column: span 6; }
.bento-col-4 { grid-column: span 4; }
.hero-bento-card {
background-color: var(--charcoal-black);
color: #ffffff;
background-image: linear-gradient(rgba(10,10,12,0.55), rgba(8,8,10,0.95)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&q=80&w=1200');
background-size: cover;
background-position: center;
border: 1px solid var(--border-color);
min-height: 380px;
}
.status-badge {
align-self: flex-start;
background-color: var(--racing-red);
color: #ffffff;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 4px;
letter-spacing: 0.08em;
margin-bottom: 2rem;
}
.bento-card h2, .bento-card h3 {
margin-top: 0;
color: #ffffff;
}
.bento-card .bento-tag {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.8rem;
color: var(--racing-red);
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.25rem;
display: block;
}
.bento-perks-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.bento-perk-item {
background-color: var(--charcoal-black);
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.bento-perk-item h4 {
margin: 0.25rem 0;
font-size: 1.1rem;
color: #ffffff;
}
.bento-perk-item p {
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
.bento-mini-calc-output {
background: var(--charcoal-black);
color: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
margin-top: 1.5rem;
border: 1px solid var(--border-color);
}
.bento-mini-calc-output .total-val {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2.2rem;
font-weight: 900;
color: var(--racing-red);
line-height: 1.1;
margin-bottom: 0.2rem;
}
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.bento-col-12, .bento-col-8, .bento-col-6, .bento-col-4 {
grid-column: span 2;
}
}
@media (max-width: 640px) {
.bento-grid {
grid-template-columns: 1fr;
}
.bento-col-12, .bento-col-8, .bento-col-6, .bento-col-4 {
grid-column: span 1;
}
.bento-perks-list {
grid-template-columns: 1fr;
}
}