/* =================================================================
Dealership site - stylesheet
Measurements & colors matched to the reference layout spec.
Theme tokens live in :root - change them to rebrand.
================================================================= */
/* Ford uses the proprietary FordAntenna typeface. The font itself is
not bundled (it's licensed), so we reference it by name and fall back
to Inter (loaded from Google Fonts) which has a similar geometric
sans-serif feel, then to system sans-serif. If FordAntenna is
installed locally it will win the cascade automatically. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root {
--brand-dark: #102b4e; /* primary navy (top strip, footer top) */
--brand-blue: #066fef; /* accent / buttons */
--brand-blue-d: #0356bd;
--brand-blue-l: #5aa9ff;
--star: #f5a623;
--text: #1d2733;
--text-muted: #5a6675;
--bg: #ffffff;
--bg-alt: #f4f4f4;
--border: #e1e5ea;
--arrow-grey: #afafaf;
--container: 1200px;
--radius: 4px;
--shadow-sm: 0 1px 3px rgba(16,43,78,.10);
--shadow-md: 0 8px 24px rgba(16,43,78,.16);
--transition: .18s ease;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
/* FordAntenna (Ford's official typeface) preferred; Inter is a close
free fallback loaded from Google Fonts; then system sans-serif. */
font-family: "FordAntenna", "Ford Antenna", "FordAntennaCondMedium",
"Antenna", "Inter", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.55;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.22; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: 2px;
}
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 999;
background: var(--brand-blue); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }
/* ---- image placeholder boxes (swap for real ![]()
) -------------- */
.ph {
background:
repeating-linear-gradient(45deg,#e9edf1,#e9edf1 10px,#e3e8ed 10px,#e3e8ed 20px);
border: 1px dashed #9aa7b4;
display: flex; align-items: center; justify-content: center;
color: #6b7886; font-size: 12px; font-weight: 600; text-align: center;
}
.ph::after { content: attr(data-label); padding: 4px 8px; }
.ph-corp-logo { width: 108px; height: 42px; }
.ph-logo { width: 178px; height: 64px; }
/* real logo images (replace the .ph placeholders) */
.logo-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
background: none;
border: 0;
padding: 0;
text-decoration: none;
}
.logo-link img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.logo-link--corp { width: 108px; height: 50px; }
.logo-link--dealer { width: 178px; height: 64px; }
@media (max-width: 1100px) {
.logo-link--corp { width: 84px; height: 38px; }
.logo-link--dealer { width: 150px; height: 50px; }
}
.ph-hero { width: 100%; height: 100%; }
.ph-card { width: 100%; aspect-ratio: 8 / 9; }
.ph-directions{ width: 100%; height: 100%; min-height: 340px; }
.ph-map { width: 100%; height: 300px; }
img.ph-hero, img.ph-card { object-fit: cover; display: block; }
/* ---- buttons ---------------------------------------------------- */
.btn {
display: inline-block; padding: 13px 30px;
font-size: 14px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; border-radius: var(--radius);
cursor: pointer; border: 2px solid transparent;
transition: background var(--transition), color var(--transition);
}
.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { background: var(--brand-blue-d); }
.btn-outline { background: transparent; color: var(--brand-blue); border-color: var(--brand-blue); }
.btn-outline:hover { background: var(--brand-blue); color: #fff; }
/* link-style button used on the CTA image cards */
.btn-link {
display: inline-block; color: #fff; font-weight: 700;
font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
}
.btn-link span { transition: transform var(--transition); display: inline-block; }
.btn-link:hover span { transform: translateX(4px); }
/* ===================================================================
HEADER
=================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff;
box-shadow: var(--shadow-md);
transition: box-shadow var(--transition); }
.site-header.is-stuck { box-shadow: var(--shadow-md); }
/* ----- top phone strip (navy, ~40px) ----- */
.topbar { background: #0a1a30; color: #fff; }
.topbar-inner {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 1px 0; min-height: 40px; padding: 5px 20px;
font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
}
.phone-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.phone-list li {
display: flex; align-items: center; gap: 5px;
padding: 2px 15px; position: relative;
}
.phone-list li + li::before {
content: ""; position: absolute; left: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 13px;
background: rgba(255,255,255,.3);
}
.phone-list strong { font-weight: 400; }
.phone-list a { color: #fff; font-weight: 400; }
.phone-list a:hover { color: var(--brand-blue-l); }
.topbar .address {
display: flex; align-items: center; gap: 6px;
padding-left: 15px; font-weight: 400;
}
.topbar .ico { font-size: 12px; opacity: .9; display: inline-flex; align-items: center; }
.topbar .ico svg { width: 14px; height: 14px; display: block; }
/* ----- main white bar (~75px): logos + nav + search ----- */
.mainbar { background: #fff; position: relative; }
.mainbar-inner {
display: flex; align-items: center; gap: 18px;
min-height: 75px; padding: 6px 36px;
position: relative;
}
/* Center the nav menu relative to the viewport, not the flex slot.
Desktop only — the mobile breakpoint at 1100px takes over below. */
@media (min-width: 1101px) {
.mainbar-inner > .navbar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
flex: none;
}
.mainbar-inner.is-searching > .navbar { display: none; }
}
.logo-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.navbar { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.nav-item { position: relative; }
.nav-link {
display: flex; align-items: center; height: 75px;
color: var(--brand-dark); font-size: 13.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .02em;
padding: 0 13px; white-space: nowrap; transition: color var(--transition);
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--brand-blue); }
.caret { display: none; font-size: 9px; margin-left: 4px; }
.search-btn {
flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 7px;
color: var(--brand-blue); font-weight: 700; font-size: 14px;
text-transform: uppercase; letter-spacing: .04em;
transition: color var(--transition);
}
.search-btn:hover { color: var(--brand-blue-d); }
/* ----- expanding header search ----- */
.header-search { display: none; }
.mainbar-inner.is-searching .navbar { display: none; }
.mainbar-inner.is-searching .header-search {
display: flex; flex: 1; align-items: center;
align-self: center; background: #f7f7f7;
}
.header-search__input {
flex: 1; min-width: 0; height: 48px;
border: 0; background: transparent;
font-size: 17px; color: var(--text); padding: 0 22px;
}
.header-search__input::placeholder { color: #9aa3ad; }
.header-search__input:focus,
.header-search__input:focus-visible { outline: none; }
/* ----- live search results dropdown ----- */
.search-results {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; box-shadow: var(--shadow-md);
border-top: 1px solid var(--border);
max-height: 78vh; overflow-y: auto; z-index: 90;
}
.search-results[hidden] { display: none; }
.search-results__inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
max-width: var(--container); margin: 0 auto; padding: 24px 20px 34px;
}
.search-col h3 {
font-size: 15px; font-weight: 700; color: var(--brand-dark);
text-transform: uppercase; letter-spacing: .03em;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.search-empty { font-size: 14px; color: var(--text-muted); padding: 6px 0; }
/* vehicle result card */
.sr-vehicle {
display: flex; gap: 16px; align-items: center;
border: 1px solid var(--border); border-radius: 4px;
padding: 12px; margin-bottom: 12px;
transition: box-shadow var(--transition);
}
.sr-vehicle:hover { box-shadow: var(--shadow-sm); }
.sr-vehicle__media {
flex: 0 0 104px; height: 78px; border-radius: 3px;
background:
repeating-linear-gradient(45deg,#e9edf1,#e9edf1 10px,#e3e8ed 10px,#e3e8ed 20px);
}
.sr-vehicle__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-vehicle__title { font-size: 14px; color: var(--text); text-transform: uppercase; }
.sr-vehicle__title strong { color: var(--brand-dark); }
.sr-vehicle__price { font-size: 20px; font-weight: 700; color: var(--brand-dark); }
.sr-vehicle__miles { font-size: 13px; color: var(--text-muted); }
/* page result row */
.sr-page {
display: flex; gap: 12px; align-items: flex-start;
padding: 11px 4px; font-size: 15px; color: var(--text);
transition: color var(--transition);
}
.sr-page:hover { color: var(--brand-blue); }
.sr-page svg {
flex: 0 0 20px; width: 20px; height: 20px;
fill: var(--brand-blue); margin-top: 1px;
}
@media (max-width: 700px) {
.search-results__inner { grid-template-columns: 1fr; gap: 20px; }
}
/* ===================================================================
FINANCE CENTER PAGE (finance.html)
=================================================================== */
/* hero photo strip at the top */
.fin-hero { width: 100%; }
.ph-fin-hero { width: 100%; height: 460px; }
.ph-svc-hero { width: 100%; height: 460px; }
.fin-hero__img {
display: block;
width: 100%;
height: 460px;
object-fit: cover;
}
/* main body content - single column, no right sidebar */
.fin-body { padding: 36px 0 30px; }
.fin-body__title { font-size: 36px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.fin-body__lede { font-size: 19px; color: var(--text); margin-bottom: 26px; }
.fin-body p { font-size: 15px; color: var(--text); margin-bottom: 16px; line-height: 1.6; }
.fin-body h2 { font-size: 28px; font-weight: 700; color: var(--text); margin: 32px 0 14px; }
.fin-body ul { margin: 0 0 16px 22px; }
.fin-body li { font-size: 15px; color: var(--text); margin-bottom: 6px; }
/* pickup-and-delivery: intro section without a hero photo */
.pd-intro { padding: 50px 0 30px; }
.pd-intro__cta { margin: 18px 0 12px; }
.pd-intro__cta .btn-pill { padding: 14px 36px; font-size: 15px; }
.pd-intro__disclaimer-link a {
color: var(--brand-blue);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.pd-intro__disclaimer-link a:hover { text-decoration: underline; color: var(--brand-blue-d); }
.pd-intro__h2 {
text-align: center;
font-size: 38px;
font-weight: 700;
margin: 60px 0 18px;
}
.pd-intro__h2 + p { text-align: center; max-width: 920px; margin-left: auto; margin-right: auto; font-size: 17px; }
/* the 3 dark pill CTAs below the body copy */
.fin-ctas {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 22px; padding: 28px 0 8px;
}
.fin-ctas .btn-pill {
display: block; width: 100%; padding: 16px; text-align: center;
font-size: 16px; letter-spacing: .02em;
}
.fin-ctas--two { grid-template-columns: repeat(2, 1fr); }
/* full-width map with a centered "Get Directions" overlay card */
.fin-directions { position: relative; isolation: isolate; }
.fin-directions__map { width: 100%; height: 520px; z-index: 1; }
iframe.fin-directions__map { border: 0; display: block; }
.fin-directions__overlay {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #fff; padding: 44px 56px 40px; text-align: center;
max-width: 640px; width: 90%;
box-shadow: var(--shadow-md);
z-index: 500; /* sit above the Leaflet map */
}
.fin-directions__overlay h2 {
font-size: 36px; font-weight: 700; color: var(--text); margin-bottom: 24px;
}
.fin-directions__form { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.fin-directions__form input {
width: 100%; padding: 14px 18px; font-size: 16px;
background: #f1f1f1; border: 0; border-radius: 4px;
color: var(--text);
}
.fin-directions__form input::placeholder { color: #888; }
.fin-directions__form button { padding: 14px 56px; min-width: 220px; }
@media (max-width: 760px) {
.fin-ctas { grid-template-columns: 1fr; }
.ph-fin-hero { height: 280px; }
.fin-directions__overlay { padding: 30px 24px; }
.fin-directions__overlay h2 { font-size: 28px; }
.fin-directions__map { height: 580px; }
}
/* ===================================================================
SERVICE SUB-PAGES (pickup-and-delivery / ford-app /
ford-mobile-service / collision)
=================================================================== */
/* pickup & delivery: 3-step image (single graphic from Ford) */
.pd-steps-img {
display: block; width: 100%; max-width: 1100px;
height: auto; margin: 30px auto 14px;
}
/* fallback when the file isn't there yet */
div.pd-steps-img { min-height: 200px; }
/* pickup & delivery: image + text feature sections */
.pd-feature {
display: grid; grid-template-columns: 1fr 1fr;
align-items: stretch;
max-width: var(--container);
margin: 36px auto;
padding: 0 20px;
}
.pd-feature + .pd-feature { margin-top: 0; }
.pd-feature__image {
width: 100%;
height: auto;
display: block;
align-self: stretch;
object-fit: cover;
}
.pd-feature__body {
background: var(--bg-alt); padding: 40px 44px;
display: flex; flex-direction: column; justify-content: center;
}
.pd-feature__body h2 {
font-size: 26px; font-weight: 700; color: var(--brand-dark);
margin-bottom: 16px;
}
.pd-feature__body p { font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.pd-feature__small { font-size: 12.5px; color: #555; }
.pd-feature__cta {
align-self: flex-start; margin-top: 8px; padding: 14px 36px;
}
.btn-pill--blue { background: var(--brand-blue); color: #fff; }
.btn-pill--blue:hover { background: var(--brand-blue-d); }
@media (max-width: 760px) {
.pd-feature { grid-template-columns: 1fr; }
.pd-feature__image { height: auto; }
.pd-feature__body { padding: 30px 22px; }
}
/* pickup & delivery: FAQ accordion */
.faq-title {
font-size: 26px; font-weight: 700; color: var(--brand-dark);
text-transform: uppercase; letter-spacing: .02em;
padding-bottom: 16px; border-bottom: 1px solid var(--border);
margin: 30px 0 24px;
}
.faq--full { width: 100%; }
.faq--full .faq__inner { width: 100%; }
.faq-item { margin-bottom: 4px; }
.faq-item__q {
width: 100%; display: flex; justify-content: space-between; align-items: center;
gap: 18px; padding: 28px 60px; cursor: pointer;
background: #5f93c2; color: #fff;
font-family: inherit; font-size: 26px; font-weight: 400;
text-align: left; border: 0;
transition: background var(--transition);
}
.faq-item__q:hover { background: #3f7cb6; }
.faq-item__icon {
flex-shrink: 0; font-size: 0;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
}
.faq-item__icon::after {
content: '\25BE'; /* â–¾ chevron when closed */
font-size: 22px; line-height: 1; color: #fff;
}
.faq-item__q[aria-expanded="true"] { background: #3f7cb6; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after {
content: '\00D7'; /* × when open */
font-size: 30px;
}
.faq-item__a {
background: #3f7cb6; color: #fff;
padding: 14px 60px 60px;
}
.faq-item__a p { font-size: 16px; line-height: 1.55; }
.faq-item__a a { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
.faq-item__q { font-size: 17px; padding: 18px 20px; }
.faq-item__a { padding: 0 20px 20px; }
}
/* Ford App download buttons */
.app-stores {
display: flex; flex-wrap: wrap; gap: 14px;
margin: 18px 0 8px;
}
.app-store {
display: inline-flex; flex-direction: column; justify-content: center;
background: #000; color: #fff; padding: 10px 22px;
border-radius: 8px; min-width: 200px;
text-decoration: none; transition: background var(--transition);
}
.app-store:hover { background: #1d2733; color: #fff; }
.app-store__small { font-size: 11px; opacity: .8; line-height: 1.2; }
.app-store__big { font-size: 19px; font-weight: 700; line-height: 1.1; }
/* ford-app: hero with navy text panel overlapping right side */
.fa-hero {
position: relative;
overflow: hidden;
}
.fa-hero__img {
display: block;
width: 100%;
height: auto;
max-height: 560px;
object-fit: cover;
}
div.fa-hero__img { min-height: 360px; }
.fa-hero__panel {
position: absolute;
top: 50%;
right: 6%;
transform: translateY(-50%);
background: var(--brand-dark);
color: #fff;
padding: 40px 44px;
max-width: 440px;
box-sizing: border-box;
}
.fa-hero__panel h1 {
font-size: 28px; font-weight: 700;
line-height: 1.2;
margin: 0 0 22px;
color: #fff;
}
.fa-hero__panel p {
font-size: 16px; line-height: 1.55;
margin: 0 0 16px;
color: #fff;
}
.fa-hero__panel p:last-child { margin-bottom: 0; }
.fa-hero__panel sup { font-size: 11px; }
/* ford-app: image + text feature rows (white background, both directions) */
.fa-feature {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
max-width: var(--container);
margin: 60px auto;
padding: 0 20px;
}
.fa-feature--reverse .fa-feature__image { order: 2; }
.fa-feature__image {
width: 100%;
height: auto;
display: block;
}
div.fa-feature__image { min-height: 320px; }
.fa-feature__body h2 {
font-size: 26px; font-weight: 700;
color: var(--brand-dark);
margin: 0 0 18px;
}
.fa-feature__body p {
font-size: 16px; line-height: 1.55;
margin: 0 0 18px;
color: #222;
}
.fa-feature__cta {
display: inline-block;
margin-top: 6px;
padding: 14px 36px;
}
@media (max-width: 760px) {
.fa-hero__panel {
position: static;
transform: none;
max-width: 100%;
padding: 30px 22px;
}
.fa-feature {
grid-template-columns: 1fr;
gap: 30px;
margin: 40px auto;
}
.fa-feature--reverse .fa-feature__image { order: 0; }
}
/* ===================================================================
COLLISION CENTER PAGE (collision.html)
=================================================================== */
/* Centered title above the hero */
.coll-title-bar {
background: #fff;
padding: 30px 0 18px;
text-align: center;
}
.coll-title-bar h1 {
font-size: 38px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
letter-spacing: .01em;
margin: 0;
}
/* Hero overrides — bigger overlay panel with stacked CTAs */
.coll-hero { background: #fff; }
.coll-hero .fa-hero__img { max-height: 600px; }
.coll-hero__panel {
padding: 50px 60px;
max-width: 540px;
}
.coll-hero__panel h2 {
font-size: 30px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
line-height: 1.15;
margin: 0 0 26px;
}
.coll-hero__ctas {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.coll-hero__ctas .btn-pill { width: 280px; padding: 14px 30px; text-align: center; }
/* White pill button */
.btn-pill--white {
background: #fff;
color: var(--brand-dark);
border: 1px solid #fff;
}
.btn-pill--white:hover {
background: #e9eef5;
color: var(--brand-dark);
}
/* Light-gray body section */
.coll-body {
background: var(--bg-alt);
padding: 48px 0 56px;
}
.coll-body p {
font-size: 17px;
line-height: 1.6;
color: #222;
margin: 0 0 22px;
}
.coll-body a {
color: var(--brand-dark);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.coll-body a:hover { color: var(--brand-blue); }
/* Centered uppercase H2 for the article sections */
.coll-h2 {
font-size: 30px;
font-weight: 700;
color: var(--brand-dark);
margin: 36px 0 22px;
}
.coll-h2--center {
text-align: center;
margin: 50px auto 24px;
max-width: 980px;
}
/* "Your Rights" 2-column block (image left, list + callout right) */
.coll-rights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: start;
margin: 40px 0 30px;
}
.coll-rights__image {
width: 100%;
height: auto;
display: block;
}
div.coll-rights__image { min-height: 360px; }
.coll-rights__body .coll-h2 { margin-top: 0; }
.coll-list {
list-style: decimal outside;
padding-left: 20px;
margin: 0 0 28px;
}
.coll-list li {
font-size: 17px;
line-height: 1.6;
color: #222;
margin-bottom: 18px;
padding-left: 6px;
}
/* "i" callout box */
.coll-callout {
display: flex;
align-items: flex-start;
gap: 18px;
margin-top: 14px;
}
.coll-callout__icon {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: 50%;
background: var(--brand-blue);
color: #fff;
font-family: Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.coll-callout p {
font-weight: 700;
font-size: 17px;
line-height: 1.55;
color: #222;
margin: 4px 0 0;
}
/* ---- Contact form ---- */
.coll-form-section {
background: var(--bg-alt);
padding: 30px 0 60px;
}
.coll-form-title {
font-size: 34px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
text-align: center;
margin: 0 0 36px;
}
.coll-form {
max-width: 760px;
margin: 0 auto;
}
.coll-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.coll-form__grid .form-field--full {
grid-column: 1 / -1;
}
.coll-form .form-field label {
display: block;
font-size: 13px;
color: #6b7280;
margin-bottom: 6px;
}
.coll-form .form-field .req { color: #6b7280; margin-left: 2px; }
.coll-form .form-field input,
.coll-form .form-field textarea {
width: 100%;
background: #fff;
border: 1px solid #c7ccd1;
padding: 12px 14px;
font-family: inherit;
font-size: 15px;
color: #222;
box-sizing: border-box;
}
.coll-form .form-field input:focus,
.coll-form .form-field textarea:focus {
outline: none;
border-color: var(--brand-blue);
}
.coll-form .form-field textarea {
min-height: 180px;
resize: vertical;
}
.coll-form__radios {
display: flex;
flex-direction: column;
gap: 10px;
padding: 6px 0;
}
.coll-form__radios .form-radio {
display: inline-flex;
align-items: center;
gap: 12px;
color: #6b7280;
font-size: 15px;
}
.coll-form__recaptcha {
text-align: center;
font-size: 14px;
color: #5a6675;
margin: 24px 0 18px;
}
.coll-form__foot {
display: flex;
justify-content: center;
}
.coll-form__submit {
padding: 14px 50px;
}
@media (max-width: 760px) {
.coll-title-bar h1 { font-size: 28px; }
.coll-hero__panel { padding: 30px 24px; max-width: 100%; }
.coll-hero__panel h2 { font-size: 22px; }
.coll-hero__ctas .btn-pill { width: 100%; }
.coll-rights { grid-template-columns: 1fr; gap: 24px; }
.coll-h2 { font-size: 24px; }
.coll-h2--center { font-size: 22px; }
.coll-form-title { font-size: 24px; }
.coll-form__grid { grid-template-columns: 1fr; }
}
/* ===================================================================
FORD MOBILE SERVICE PAGE (ford-mobile-service.html)
=================================================================== */
.fms-title-bar {
background: #fff;
padding: 30px 0 16px;
text-align: center;
}
.fms-title-bar h1 {
font-size: 34px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
margin: 0;
}
.fms-video {
background: #fff;
padding: 6px 0 30px;
}
.fms-video .yt-embed {
max-width: 920px;
margin: 0 auto;
}
.fms-intro {
background: var(--bg-alt);
padding: 40px 0;
}
.fms-intro p {
font-size: 17px;
line-height: 1.6;
color: #222;
margin: 0 0 20px;
}
.fms-checklist {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.fms-checklist li {
position: relative;
padding-left: 28px;
margin-bottom: 8px;
font-size: 17px;
line-height: 1.55;
color: #222;
}
.fms-checklist li::before {
content: '\2713'; /* ✓ */
position: absolute;
left: 0;
top: 0;
color: #222;
font-weight: 700;
}
.fms-vans {
background: #fff;
padding: 30px 0;
}
.fms-vans__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch;
}
.fms-vans__img {
width: 100%;
height: auto;
display: block;
}
div.fms-vans__img { min-height: 320px; }
.fms-services {
background: #fff;
padding: 20px 0 50px;
}
.fms-services p {
font-size: 17px;
line-height: 1.6;
color: #222;
margin: 0 0 18px;
}
.fms-services a {
color: var(--brand-dark);
font-weight: 600;
border-bottom: 1px solid currentColor;
text-decoration: none;
}
.fms-services a:hover { color: var(--brand-blue); }
.fms-h2 {
font-size: 30px;
font-weight: 700;
color: var(--brand-dark);
margin: 30px 0 18px;
}
.fms-services__list {
list-style: disc outside;
padding-left: 22px;
margin: 0 0 22px;
}
.fms-services__list li {
font-size: 17px;
line-height: 1.6;
color: #222;
margin-bottom: 4px;
}
/* ---- Mobile Service form (reuses .coll-form internals) ---- */
.fms-form-section {
background: var(--bg-alt);
padding: 40px 0 60px;
}
.fms-form-title {
font-size: 26px;
font-weight: 700;
color: var(--brand-dark);
margin: 0 0 12px;
}
.fms-form-lede {
font-size: 16px;
color: #222;
margin: 0 0 28px;
}
.fms-form {
max-width: none;
}
@media (max-width: 760px) {
.fms-title-bar h1 { font-size: 26px; }
.fms-vans__row { grid-template-columns: 1fr; gap: 18px; }
.fms-h2 { font-size: 22px; }
}
/* ===================================================================
2024 FORD RANGER PAGE (2024-ford-ranger.html)
=================================================================== */
/* hero with image + left-side white text overlay */
.rg-hero {
position: relative;
width: 100%;
overflow: hidden;
background: #1a1a1a;
}
.rg-hero__img {
display: block;
width: 100%;
height: auto;
max-height: 700px;
object-fit: cover;
}
div.rg-hero__img { min-height: 460px; }
.rg-hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 720px;
pointer-events: none;
}
.rg-hero__overlay > * { pointer-events: auto; }
.rg-hero__eyebrow {
font-size: 28px;
font-weight: 400;
color: #fff;
margin: 0 0 12px;
}
.rg-hero__title {
font-size: 68px;
font-weight: 700;
color: #fff;
line-height: 1.05;
margin: 0 0 30px;
}
.rg-hero__cta {
align-self: flex-start;
padding: 14px 50px;
font-size: 15px;
margin-bottom: 40px;
}
.rg-hero__disc {
font-size: 13px;
line-height: 1.5;
color: #fff;
max-width: 720px;
margin: 0;
opacity: .95;
}
/* bright Ford-blue pill (used for Contact Us on the hero) */
.btn-pill--bright {
background: var(--brand-blue);
color: #fff;
font-weight: 700;
}
.btn-pill--bright:hover { background: var(--brand-blue-d); color: #fff; }
/* alternating feature blocks (image + text side by side) */
.rg-feature {
background: var(--bg-alt);
padding: 30px 0;
}
.rg-feature:nth-child(even) { background: #fff; }
.rg-feature__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.rg-feature--reverse .rg-feature__image { order: 2; }
.rg-feature__image {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
}
div.rg-feature__image { min-height: 320px; }
.rg-feature__body h2 {
font-size: 30px;
font-weight: 700;
color: var(--brand-dark);
margin: 0 0 18px;
}
.rg-feature__body p {
font-size: 17px;
line-height: 1.6;
color: #222;
margin: 0 0 18px;
}
.rg-feature__small {
font-size: 13px;
line-height: 1.55;
color: #555;
}
.rg-feature__body sup {
font-size: 0.7em;
vertical-align: super;
line-height: 0;
}
/* FordPass download band */
.rg-fordpass {
background: var(--bg-alt);
padding: 60px 0;
text-align: center;
}
.rg-fordpass__title {
font-size: 34px;
font-weight: 700;
color: var(--brand-dark);
margin: 0 0 16px;
}
.rg-fordpass__lede {
font-size: 17px;
color: #222;
margin: 0 0 28px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.rg-fordpass__stores {
display: inline-flex;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
}
/* Disclosures accordion */
.rg-disc-wrap { background: #fff; padding: 30px 0 60px; }
.rg-disc { text-align: center; }
.rg-disc__head {
background: none;
border: 0;
font-family: inherit;
font-size: 28px;
font-weight: 700;
color: var(--brand-blue);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.rg-disc__icon {
font-size: 22px;
line-height: 1;
transition: transform var(--transition);
color: var(--brand-blue);
}
.rg-disc__head[aria-expanded="true"] .rg-disc__icon {
transform: rotate(180deg);
}
.rg-disc__body {
text-align: left;
max-width: 1100px;
margin: 26px auto 0;
}
.rg-disc__body p {
font-size: 16px;
line-height: 1.65;
color: #222;
margin: 0 0 22px;
}
@media (max-width: 880px) {
.rg-hero__overlay { padding: 40px 24px; }
.rg-hero__title { font-size: 36px; }
.rg-hero__eyebrow { font-size: 18px; }
.rg-feature { padding: 18px 0; }
.rg-feature__inner { grid-template-columns: 1fr; gap: 24px; }
.rg-feature--reverse .rg-feature__image { order: 0; }
.rg-feature__body h2 { font-size: 22px; }
.rg-fordpass__title { font-size: 24px; }
}
/* ===================================================================
2024 MUSTANG PAGE (2024-mustang.html)
=================================================================== */
/* hero */
.ms-hero {
position: relative;
width: 100%;
overflow: hidden;
background: #0d0d0d;
}
.ms-hero__img {
display: block;
width: 100%;
height: auto;
max-height: 720px;
object-fit: cover;
}
div.ms-hero__img { min-height: 460px; }
.ms-hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
pointer-events: none;
}
.ms-hero__overlay > * { pointer-events: auto; }
.ms-hero__title {
font-size: 56px;
font-weight: 700;
color: #fff;
line-height: 1.05;
letter-spacing: .5px;
margin: 0 0 28px;
max-width: 1000px;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.ms-hero__cta {
align-self: flex-start;
padding: 14px 38px;
font-size: 15px;
}
.ms-hero__caption {
position: absolute;
left: 38px;
bottom: 20px;
margin: 0;
font-size: 14px;
color: #fff;
opacity: .95;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* intro band */
.ms-intro {
background: #fff;
padding: 70px 0 60px;
text-align: center;
}
.ms-intro__title {
font-size: 42px;
font-weight: 800;
color: #111;
margin: 0 0 24px;
}
.ms-intro__lede {
font-size: 19px;
line-height: 1.55;
color: #222;
max-width: 1000px;
margin: 0 auto 32px;
}
.ms-intro__cta {
background: #d9d9d9;
color: #111;
border-color: #d9d9d9;
padding: 12px 38px;
font-size: 14px;
font-weight: 600;
}
.ms-intro__cta:hover { background: #c9c9c9; color: #111; border-color: #c9c9c9; }
/* 3 image boxes — container-width row, slim gap */
.ms-boxes { background: #fff; padding: 10px 0 0; }
.ms-boxes__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.ms-boxes__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 1 / 1;
}
div.ms-boxes__img { min-height: 220px; }
/* 3 feature columns */
.ms-features {
background: #fff;
padding: 50px 0 70px;
}
.ms-features__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
.ms-feature__title {
font-size: 26px;
font-weight: 800;
color: #111;
line-height: 1.15;
margin: 0 0 18px;
}
.ms-feature p {
font-size: 17px;
line-height: 1.55;
color: #222;
margin: 0;
}
.ms-feature sup {
font-size: 0.7em;
vertical-align: super;
line-height: 0;
}
/* bottom banner */
.ms-banner {
background: #0d0d0d;
}
.ms-banner__img {
display: block;
width: 100%;
height: auto;
max-height: 600px;
object-fit: cover;
}
div.ms-banner__img { min-height: 320px; }
/* trademark / disclaimer text */
.ms-legal {
background: #fff;
padding: 36px 0 60px;
}
.ms-legal p {
font-size: 15px;
line-height: 1.55;
color: #222;
margin: 0 0 14px;
}
@media (max-width: 980px) {
.ms-features__grid { grid-template-columns: 1fr; gap: 36px; }
.ms-boxes__row { grid-template-columns: 1fr; }
}
/* ===================================================================
ABOUT US PAGE (about-us.html)
=================================================================== */
.au-hero { background: #0d0d0d; }
.au-hero__img {
display: block;
width: 100%;
height: auto;
max-height: 720px;
object-fit: cover;
}
div.au-hero__img { min-height: 360px; }
.au-body { background: #fff; padding: 40px 0 60px; }
.au-title {
font-size: 56px;
font-weight: 800;
color: #111;
margin: 0 0 36px;
}
.au-content h2.au-h2 {
font-size: 34px;
font-weight: 800;
color: #111;
margin: 36px 0 16px;
}
.au-content h2.au-h2:first-child { margin-top: 0; }
.au-content h3.au-h3 {
font-size: 26px;
font-weight: 800;
color: #111;
margin: 24px 0 16px;
}
.au-content p {
font-size: 17px;
line-height: 1.7;
color: #222;
margin: 0 0 22px;
}
.au-cta-row {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin: 40px 0 10px;
}
.au-cta-row .btn-pill {
flex: 1 1 0;
min-width: 200px;
padding: 18px 28px;
font-size: 15px;
text-align: center;
justify-content: center;
}
@media (max-width: 980px) {
.au-title { font-size: 36px; }
.au-content h2.au-h2 { font-size: 24px; }
.au-content h3.au-h3 { font-size: 20px; }
.au-cta-row .btn-pill { flex: 1 1 100%; }
}
/* ===================================================================
CONTACT US PAGE (contact-us.html)
=================================================================== */
.cu-head { background: #fff; padding: 28px 0 8px; }
.cu-crumbs {
font-size: 14px;
color: #444;
margin: 0 0 18px;
}
.cu-crumbs a { color: #444; text-decoration: underline; }
.cu-crumbs a:hover { color: var(--brand-blue); }
.cu-crumbs [aria-current="page"] { color: #111; }
.cu-title {
font-size: 48px;
font-weight: 800;
color: #111;
margin: 0;
}
.cu-body { background: #fff; padding: 30px 0 80px; }
.cu-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 60px;
align-items: start;
}
.cu-h2 {
font-size: 30px;
font-weight: 800;
color: #111;
margin: 0 0 24px;
}
/* form */
.cu-form { display: flex; flex-direction: column; gap: 22px; }
.cu-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cu-field label, .cu-field legend {
font-size: 15px;
color: #444;
font-weight: 400;
padding: 0;
}
.cu-req { color: #d9342b; margin-left: 2px; }
.cu-field input[type="text"],
.cu-field input[type="email"],
.cu-field input[type="tel"],
.cu-field select,
.cu-field textarea {
width: 100%;
font: inherit;
font-size: 16px;
color: #111;
background: #fff;
border: 1px solid #b8c0c8;
border-radius: 4px;
padding: 12px 14px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.cu-field input:focus,
.cu-field select:focus,
.cu-field textarea:focus {
outline: 0;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(6,111,239,.15);
}
.cu-field input[type="text"],
.cu-field input[type="email"],
.cu-field input[type="tel"] { height: 46px; }
.cu-field select { height: 46px; appearance: auto; }
.cu-field textarea { resize: vertical; min-height: 130px; }
.cu-field--radios {
border: 0;
padding: 0;
}
.cu-field--radios legend { margin-bottom: 8px; }
.cu-radio {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 28px;
font-size: 15px;
color: #444;
cursor: pointer;
}
.cu-radio input { accent-color: var(--brand-blue); }
.cu-recaptcha {
font-size: 13px;
color: #666;
text-align: center;
margin: 6px 0 0;
}
.cu-submit {
align-self: center;
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: 999px;
padding: 14px 44px;
font: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background var(--transition);
margin-top: 6px;
}
.cu-submit:hover { background: var(--brand-blue-d); }
/* map */
.cu-map-wrap { position: relative; }
.cu-map {
width: 100%;
height: 560px;
background: #e6e9ee;
border: 0;
border-radius: 4px;
overflow: hidden;
display: block;
}
/* inline submit-status box (under the Send button) */
.cu-status {
margin-top: 14px;
padding: 0;
font-size: 14px;
line-height: 1.5;
color: #555;
min-height: 1.5em;
}
.cu-status--pending { color: var(--brand-blue); }
.cu-status--ok { color: #15803d; }
.cu-status--err {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
padding: 10px 12px;
border-radius: 4px;
}
.cu-submit:disabled { opacity: 0.65; cursor: not-allowed; }
/* success confirmation that replaces the form */
.cu-confirm {
background: #f4f8ff;
border: 1px solid #cde0ff;
border-radius: 6px;
padding: 28px 30px;
}
.cu-confirm h3 {
font-size: 24px;
font-weight: 800;
color: var(--brand-dark);
margin: 0 0 10px;
}
.cu-confirm p { font-size: 16px; color: #222; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
.cu-layout { grid-template-columns: 1fr; gap: 40px; }
.cu-title { font-size: 32px; }
.cu-h2 { font-size: 22px; }
.cu-map { height: 420px; }
}
/* ===================================================================
SERVICE AREAS PAGE (service-areas.html)
=================================================================== */
.sa-body { background: #fff; padding: 28px 0 80px; }
.sa-title {
font-size: 48px;
font-weight: 800;
color: #111;
margin: 8px 0 22px;
}
.sa-intro {
font-size: 17px;
line-height: 1.65;
color: #222;
max-width: 1000px;
margin: 0 0 36px;
}
.sa-cities {
list-style: disc inside;
padding: 0;
margin: 0;
columns: 1;
}
.sa-cities li {
font-size: 17px;
font-weight: 700;
color: #111;
line-height: 1.6;
padding: 2px 0;
}
@media (max-width: 700px) {
.sa-title { font-size: 32px; }
.sa-intro { font-size: 15.5px; }
}
/* ===================================================================
LEAVE A REVIEW PAGE (leave-us-a-review.html)
=================================================================== */
.lr-body { background: #f4f4f4; padding: 60px 0 80px; }
.lr-title {
font-size: 56px;
font-weight: 800;
color: #111;
text-align: center;
letter-spacing: 1px;
margin: 0 0 18px;
}
.lr-sub {
font-size: 28px;
color: #111;
text-align: center;
margin: 0 0 56px;
font-weight: 500;
}
.lr-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 0 0 50px;
}
.lr-card {
background: #fff;
border-radius: 4px;
box-shadow: var(--shadow-md);
padding: 50px 30px 36px;
text-align: center;
text-decoration: none;
color: #111;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
min-height: 320px;
transition: transform var(--transition), box-shadow var(--transition);
}
.lr-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.lr-card__logo {
width: 150px;
height: 150px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lr-card__logo svg,
.lr-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
.lr-card__name {
font-size: 20px;
font-weight: 700;
color: #444;
margin-top: auto;
}
.lr-readmore { text-align: center; }
.lr-readmore__btn { padding: 16px 42px; font-size: 15px; }
@media (max-width: 980px) {
.lr-grid { grid-template-columns: repeat(2, 1fr); }
.lr-title { font-size: 38px; }
.lr-sub { font-size: 20px; }
}
@media (max-width: 560px) {
.lr-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
CUSTOMER TESTIMONIALS PAGE (customer-testimonials.html)
=================================================================== */
.ct-body { background: #fff; padding: 28px 0 80px; }
.ct-title {
font-size: 48px;
font-weight: 800;
color: #111;
margin: 8px 0 30px;
}
.ct-list { display: block; }
.review-item {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px 0 28px;
}
.review-logo {
flex: 0 0 56px;
width: 56px;
height: 56px;
}
.review-logo svg { width: 100%; height: 100%; }
.review-main { flex: 1 1 auto; min-width: 0; }
.review-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e3e6ea;
flex-wrap: wrap;
}
.review-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
min-width: 0;
}
.review-meta__name { font-weight: 700; color: #111; }
.review-meta__sep { color: #777; }
.review-meta__date { color: #444; }
.ct-list .review-stars {
font-size: 32px;
line-height: 1;
letter-spacing: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.ct-list .review-stars .star { color: #ff8a00; }
.ct-list .review-stars .star--off { color: #d6dadf; }
.review-body {
font-size: 15.5px;
line-height: 1.6;
color: #222;
margin: 14px 0 0;
}
.review-dr-link {
display: inline-block;
margin-top: 10px;
color: var(--brand-blue);
font-size: 14px;
text-decoration: underline;
}
@media (max-width: 700px) {
.review-item { gap: 12px; }
.review-logo { flex: 0 0 44px; width: 44px; height: 44px; }
.review-meta { font-size: 15px; gap: 6px; }
.ct-list .review-stars { font-size: 24px; letter-spacing: 2px; }
.ct-title { font-size: 32px; }
}
/* ===================================================================
CHARITIES WE SUPPORT PAGE (charities-we-support.html)
=================================================================== */
.cw-body { background: #fff; padding: 28px 0 80px; }
.cw-title {
font-size: 48px;
font-weight: 800;
color: #111;
margin: 8px 0 30px;
}
.cw-charity {
padding: 30px 0;
border-bottom: 1px solid #eef0f3;
}
.cw-charity:last-of-type { border-bottom: 0; }
.cw-charity__logo {
text-align: center;
margin: 0 0 22px;
}
.cw-charity__logo img {
display: inline-block;
max-width: 420px;
max-height: 220px;
height: auto;
width: auto;
object-fit: contain;
}
.cw-charity__ph {
display: inline-block;
width: 360px;
height: 180px;
max-width: 100%;
}
.cw-charity p {
font-size: 16px;
line-height: 1.7;
color: #222;
margin: 0 0 14px;
}
.cw-charity p:last-child { margin-bottom: 0; }
.cw-charity strong { color: #111; }
.cw-charity a {
color: var(--brand-blue);
font-weight: 700;
text-decoration: none;
}
.cw-charity a:hover { text-decoration: underline; }
@media (max-width: 700px) {
.cw-title { font-size: 32px; }
.cw-charity__logo img { max-width: 100%; max-height: 160px; }
.cw-charity__ph { width: 100%; height: 160px; }
.cw-charity p { font-size: 15px; }
}
/* ===================================================================
CHARITABLE CONTRIBUTION REQUEST (charitable-contribution-request.html)
=================================================================== */
.cc-body { background: #fff; padding: 28px 0 80px; }
.cc-title {
font-size: 48px;
font-weight: 800;
color: #111;
margin: 8px 0 30px;
}
.cc-h2 {
font-size: 26px;
font-weight: 800;
color: #111;
margin: 32px 0 22px;
}
.cc-h2:first-of-type { margin-top: 0; }
.cc-form { display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.cc-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
}
.cc-rules {
margin: 14px 0 4px;
padding-left: 22px;
font-size: 16px;
line-height: 1.7;
color: #222;
}
.cc-rules li { margin-bottom: 4px; }
@media (max-width: 760px) {
.cc-grid { grid-template-columns: 1fr; gap: 22px; }
.cc-title { font-size: 32px; }
.cc-h2 { font-size: 22px; }
}
/* ===================================================================
BLOG INDEX (blog.html / blog-2.html)
=================================================================== */
.bl-body { background: #fff; padding: 40px 0 60px; }
.bl-title {
font-size: 44px;
font-weight: 800;
color: #111;
margin: 0 0 30px;
}
.bl-post {
padding: 28px 0 32px;
border-bottom: 1px solid #e3e6ea;
}
.bl-post:last-of-type { border-bottom: 0; }
.bl-post__title {
font-size: 28px;
font-weight: 800;
color: #111;
line-height: 1.25;
margin: 0 0 10px;
}
.bl-post__meta {
font-size: 15px;
color: #555;
margin: 0 0 18px;
}
.bl-post__meta a {
color: #555;
text-decoration: none;
}
.bl-post__meta a:hover { color: var(--brand-blue); }
.bl-post__main {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.bl-post__thumb {
width: 200px;
height: 200px;
object-fit: cover;
display: block;
border-radius: 2px;
}
div.bl-post__thumb { min-height: 200px; }
.bl-post__body {
font-size: 16px;
line-height: 1.65;
color: #222;
margin: 0;
}
.bl-post__category {
font-size: 14.5px;
color: #555;
margin: 16px 0 0;
}
.bl-post__category a {
color: var(--brand-blue);
font-weight: 600;
text-decoration: none;
}
.bl-post__category a:hover { text-decoration: underline; }
.bl-pagination {
margin: 40px 0 0;
display: flex;
gap: 24px;
}
.bl-pagination__link {
color: var(--brand-blue);
font-weight: 700;
font-size: 16px;
text-decoration: none;
}
.bl-pagination__link:hover { text-decoration: underline; }
@media (max-width: 700px) {
.bl-title { font-size: 30px; }
.bl-post__title { font-size: 22px; }
.bl-post__main { grid-template-columns: 1fr; gap: 16px; }
.bl-post__thumb { width: 100%; height: auto; max-height: 320px; }
div.bl-post__thumb { min-height: 200px; }
}
@media (max-width: 880px) {
.ms-hero__title { font-size: 28px; }
.ms-hero__overlay { padding: 0 24px; }
.ms-hero__caption { left: 20px; bottom: 14px; font-size: 12px; }
.ms-intro { padding: 40px 0; }
.ms-intro__title { font-size: 28px; }
.ms-intro__lede { font-size: 16px; }
.ms-features { padding: 30px 0 50px; }
.ms-feature__title { font-size: 22px; }
}
/* ===================================================================
FORD RESEARCH PAGE (ford-research.html)
=================================================================== */
.fr-top {
background: #fff;
padding: 40px 0 20px;
}
.fr-title {
font-size: 38px;
font-weight: 700;
color: var(--brand-dark);
text-align: center;
margin: 0 0 28px;
text-transform: capitalize;
}
.fr-top__ctas {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.fr-top__ctas .btn-pill { min-width: 220px; padding: 14px 36px; text-align: center; }
.fr-intro {
background: #fff;
padding: 30px 0 40px;
}
.fr-intro p {
font-size: 17px;
line-height: 1.7;
color: var(--text);
max-width: 1100px;
margin: 0 auto;
}
/* dark navy accordion blocks */
.fr-accordion-wrap {
background: #fff;
padding: 0 0 40px;
}
.fr-accordion { display: flex; flex-direction: column; gap: 1px; }
.fr-item { background: var(--brand-dark); }
.fr-item__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 24px 36px;
background: var(--brand-dark);
color: #fff;
border: 0;
font-family: inherit;
font-size: 24px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background var(--transition);
}
.fr-item__q:hover { background: #0c2240; }
.fr-item__q[aria-expanded="true"] {
background: #0c2240;
border-bottom: 1px solid rgba(255,255,255,.18);
}
.fr-item__icon {
flex-shrink: 0;
font-size: 0;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fr-item__icon::after {
content: '\25BE';
font-size: 20px;
line-height: 1;
color: #fff;
transition: transform var(--transition);
}
.fr-item__q[aria-expanded="true"] .fr-item__icon::after {
transform: rotate(180deg);
}
.fr-item__a {
background: var(--brand-dark);
color: #fff;
padding: 18px 36px 28px;
}
.fr-item__a p {
font-size: 16px;
line-height: 1.65;
color: #fff;
margin: 0;
}
.fr-item__a a { color: #9fc6ff; text-decoration: underline; }
/* More Ford Information block */
.fr-more {
background: #fff;
padding: 40px 0 50px;
text-align: center;
}
.fr-more__title {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin: 0 0 24px;
}
.fr-more__ctas {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.fr-more__ctas .btn-pill { min-width: 280px; padding: 14px 36px; text-align: center; }
/* Browse Inventory block */
.fr-inventory {
background: var(--bg-alt);
padding: 50px 0 60px;
}
.fr-inventory__title {
font-size: 30px;
font-weight: 700;
color: var(--text);
text-align: center;
margin: 0 0 32px;
}
.fr-inventory__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-bottom: 36px;
}
.fr-inventory__foot {
display: flex;
justify-content: center;
}
.fr-inventory__foot .btn-pill { min-width: 320px; padding: 16px 44px; text-align: center; }
@media (max-width: 1080px) {
.fr-inventory__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
.fr-inventory__grid { grid-template-columns: repeat(2, 1fr); }
.fr-title { font-size: 28px; }
.fr-item__q { font-size: 18px; padding: 18px 22px; }
.fr-item__a { padding: 14px 22px 22px; }
}
@media (max-width: 520px) {
.fr-inventory__grid { grid-template-columns: 1fr; }
.fr-top__ctas .btn-pill,
.fr-more__ctas .btn-pill { width: 100%; min-width: 0; }
}
/* ===================================================================
MEET OUR TEAM PAGE (meet-our-team.html)
=================================================================== */
.team-page { padding-bottom: 60px; }
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
margin-top: 18px;
}
.team-card {
background: #fff;
border: 1px solid var(--border);
padding: 0 0 18px;
text-align: center;
display: flex;
flex-direction: column;
}
.team-card__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
margin-bottom: 18px;
background: #f0f0f0;
}
div.team-card__photo { min-height: 220px; }
.team-card__name {
font-size: 18px;
font-weight: 700;
color: #111;
margin: 0 12px 6px;
line-height: 1.2;
}
.team-card__role {
font-size: 14px;
color: #444;
margin: 0 12px 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
@media (max-width: 1000px) {
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.team-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
ACCESSORIES PAGE (accessories.html)
=================================================================== */
/* hero overlay panel — wider than ford-app, big uppercase heading */
.acc-hero { background: #000; }
.acc-hero .fa-hero__img { max-height: 640px; }
.acc-hero__panel {
padding: 50px 56px;
max-width: 560px;
}
.acc-hero__panel h1 {
font-size: 56px;
font-weight: 700;
line-height: 1.05;
text-transform: uppercase;
color: #fff;
margin: 0 0 22px;
letter-spacing: 0;
}
.acc-hero__panel p {
font-size: 17px;
line-height: 1.55;
color: #fff;
margin: 0 0 28px;
}
.acc-hero__cta {
display: inline-block;
padding: 14px 36px;
font-size: 15px;
}
/* form section — light gray with centered title + uppercase */
.acc-form-section {
background: var(--bg-alt);
padding: 50px 0 70px;
}
.acc-form-title {
font-size: 34px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
text-align: center;
margin: 0;
}
.acc-form-subtitle {
font-size: 26px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
text-align: center;
margin: 4px 0 32px;
}
.acc-form-lede {
font-size: 16px;
color: #222;
margin: 0 0 22px;
max-width: 760px;
}
.acc-form {
max-width: none;
}
.acc-success { max-width: 760px; margin: 30px auto 0; }
@media (max-width: 760px) {
.acc-hero__panel { padding: 30px 24px; max-width: 100%; }
.acc-hero__panel h1 { font-size: 36px; }
.acc-form-title { font-size: 24px; }
.acc-form-subtitle { font-size: 18px; }
}
/* ===================================================================
PARTS CENTER PAGE (parts.html)
=================================================================== */
.parts-ctas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 36px 0 10px;
}
.parts-ctas .btn-pill {
width: 100%;
text-align: center;
padding: 18px 20px;
font-size: 16px;
}
@media (max-width: 760px) {
.parts-ctas { grid-template-columns: 1fr; gap: 14px; }
}
/* YouTube embed (responsive 16:9) */
.yt-embed {
position: relative; width: 100%; aspect-ratio: 16 / 9;
margin: 22px 0; background: #000;
}
.yt-embed iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* ===================================================================
PAYMENT CALCULATOR PAGE (payment-calculator.html)
=================================================================== */
.calc-page { background: #fff; padding: 30px 0 60px; }
.calc-title {
font-size: 32px; font-weight: 700; color: var(--text); margin: 14px 0 28px;
}
/* the input card */
.calc {
background: var(--bg-alt);
padding: 28px 30px; max-width: 880px;
}
.calc__field { margin-bottom: 22px; }
.calc__field label {
display: block; font-size: 14px; font-weight: 700;
color: var(--brand-dark); margin-bottom: 8px;
}
.calc__field input,
.calc__field select {
width: 100%; padding: 12px 18px; font-size: 15px;
background: #fff; color: var(--text);
border: 1px solid var(--border); border-radius: 30px;
font-family: inherit;
}
.calc__field select { appearance: auto; cursor: pointer; }
.calc__field input:focus,
.calc__field select:focus { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.calc__custom {
display: inline-block; margin-top: 8px;
background: #d8d8d8; color: var(--brand-dark);
border: 0; padding: 5px 18px; font-size: 12px; font-weight: 600;
font-family: inherit; border-radius: 3px; cursor: pointer;
transition: background var(--transition);
}
.calc__custom:hover { background: #c4c4c4; }
.calc__submit { text-align: center; margin-top: 22px; }
.calc__submit button { padding: 14px 38px; min-width: 240px; }
/* results panel */
.calc-details { max-width: 880px; padding: 28px 4px 0; }
.calc-details h2 {
font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 16px;
}
.calc-financed {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
padding: 8px 0 14px;
}
.calc-financed__label { font-weight: 700; color: var(--text); }
.calc-financed__value { font-weight: 700; color: var(--brand-dark); }
.calc-results {
display: grid; grid-template-columns: 1fr auto 1fr;
gap: 24px; align-items: center;
padding: 16px 0;
}
.calc-result { text-align: center; }
.calc-result__label {
display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px;
}
.calc-result__value {
display: block; font-size: 24px; font-weight: 700; color: var(--brand-dark);
}
.calc-result--center { padding: 0 22px; }
.calc-freq {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-bottom: 4px;
}
.calc-freq__arrow {
background: none; border: 0; cursor: pointer; padding: 2px 8px;
font-size: 20px; line-height: 1; color: var(--brand-dark);
transition: color var(--transition);
}
.calc-freq__arrow:hover { color: var(--brand-blue); }
.calc-freq__label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.calc-disclaimer {
font-size: 12.5px; color: #5a6675; line-height: 1.6;
margin: 28px 0 0;
}
@media (max-width: 760px) {
.calc__row { grid-template-columns: 1fr; }
.calc-results { grid-template-columns: 1fr; }
}
/* ===================================================================
FINANCE APPLICATION PAGE (apply-for-financing.html)
=================================================================== */
.finapp-page { background: #fff; padding: 30px 0 60px; }
.finapp-title {
font-size: 32px; font-weight: 700; color: var(--text);
margin: 14px 0 30px;
}
/* the bordered application card */
.finapp {
border: 1px solid var(--text);
max-width: 880px; margin: 0 auto;
background: #fff;
}
.finapp__body { padding: 40px 60px; }
.finapp__head { text-align: center; margin-bottom: 36px; }
.finapp__head h2 {
font-size: 26px; font-weight: 400; color: var(--text); margin-bottom: 12px;
}
.finapp__head p {
font-size: 14px; color: var(--text-muted);
max-width: 460px; margin: 0 auto; line-height: 1.55;
}
/* underline-style form fields */
.finapp-field { margin-bottom: 30px; }
.finapp-field__row {
display: flex; justify-content: space-between; align-items: baseline;
}
.finapp-field label {
display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px;
}
.finapp-field__hint { font-size: 12.5px; color: var(--text-muted); }
.finapp-field input,
.finapp-field select {
width: 100%; border: 0; border-bottom: 1px solid #d4d4d4;
background: transparent; padding: 7px 0;
font-size: 16px; font-family: inherit; color: var(--text);
}
.finapp-field select { appearance: auto; padding: 7px 0; }
.finapp-field input:focus,
.finapp-field select:focus {
outline: none; border-bottom-color: var(--brand-blue);
}
/* the gray Continue button */
.finapp__submit { text-align: center; margin-top: 30px; }
.finapp__submit button {
background: #ededed; color: #888; border: 0;
padding: 14px 70px; font-size: 14px; font-weight: 600;
font-family: inherit; cursor: pointer; border-radius: 2px;
transition: background var(--transition), color var(--transition);
}
.finapp__submit button:hover { background: #0a1a30; color: #fff; }
/* "You should know" disclosure */
.finapp-disclosure { background: #f1f1f1; padding: 22px 30px; }
.finapp-disclosure h3 {
font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.finapp-disclosure p { font-size: 14px; color: var(--text); line-height: 1.6; }
.finapp-disclosure a { color: var(--brand-blue); text-decoration: underline; }
/* re-center the success card for this page */
.finapp-success { max-width: 880px; }
@media (max-width: 600px) {
.finapp__body { padding: 28px 22px; }
.finapp-disclosure { padding: 18px 22px; }
.finapp-field__row { flex-direction: column; }
}
/* ===================================================================
SIMPLE TITLE-ONLY PAGE (e.g. get-prequalified.html)
=================================================================== */
.simple-page { background: #fff; padding: 32px 0 80px; }
.simple-page__breadcrumb {
font-size: 14px; color: var(--text); margin-bottom: 28px;
}
.simple-page__breadcrumb a { color: var(--text); }
.simple-page__breadcrumb a:hover { color: var(--brand-blue); }
.simple-page__title {
font-size: 32px; font-weight: 700; color: var(--text); line-height: 1.25;
}
/* ===================================================================
404 ERROR PAGE
=================================================================== */
.errpage { background: #fff; padding: 36px 0 80px; }
.err-layout { display: block; }
.err-main h1 { font-size: 26px; color: var(--brand-dark); margin-bottom: 12px; }
.err-main p { font-size: 14px; color: var(--text); margin-bottom: 22px; }
.err-search { display: flex; flex-wrap: wrap; gap: 12px; }
.err-search input {
width: 280px; max-width: 100%; padding: 9px 12px; font-size: 14px;
color: var(--text); border: 1px solid var(--border); border-radius: 3px;
}
.btn-search-dark {
background: #0a1a30; color: #fff; border: 0; cursor: pointer;
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; padding: 9px 24px; border-radius: 16px;
font-family: inherit; transition: background var(--transition);
}
.btn-search-dark:hover { background: #14315a; }
/* dealership info card */
.info-card { border: 1px solid var(--border); }
.info-card__title {
font-size: 18px; font-weight: 700; color: var(--brand-dark);
padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.info-group { border-bottom: 1px solid var(--border); }
.info-group:last-child { border-bottom: 0; }
.info-group__head {
display: flex; align-items: center; gap: 8px;
background: #f1f1f1; padding: 8px 18px;
font-size: 13px; font-weight: 700; color: var(--brand-dark);
}
.info-group__head svg { width: 15px; height: 15px; fill: var(--brand-dark); flex-shrink: 0; }
.info-rows { padding: 9px 18px 13px; }
.info-row {
display: flex; justify-content: space-between; gap: 14px;
font-size: 13px; color: var(--text); padding: 4px 0;
}
.info-row span:last-child { white-space: nowrap; }
.info-map { padding: 14px; }
.info-map .ph-map { height: 160px; }
@media (max-width: 860px) {
.err-layout { grid-template-columns: 1fr; gap: 28px; }
}
/* ----- dropdowns ----- */
.dropdown {
position: absolute; top: 100%; left: 0; min-width: 240px;
background: #fff; border: 0;
box-shadow: var(--shadow-md);
list-style: none; padding: 8px 0;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.dropdown li a {
display: block; padding: 13px 26px; font-size: 14px; color: var(--text);
text-transform: uppercase; white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.dropdown li a:hover { background: var(--bg-alt); color: var(--brand-blue); }
.nav-item:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:last-child > .dropdown,
.nav-item:nth-last-child(2) > .dropdown { left: auto; right: 0; }
.dropdown.mega {
display: grid; min-width: 900px; padding: 0;
grid-template-columns: repeat(4, 1fr);
}
/* "New" links sit as a block at the top-left */
.mega-col:first-child {
grid-column: 1; grid-row: 1; padding: 16px 22px 18px;
}
/* the four category columns fill the row below */
.mega-col:not(:first-child) { grid-row: 2; padding-bottom: 16px; }
.mega-col:first-child h4 { display: none; }
.mega-col h4 {
font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
font-weight: 700; color: var(--brand-dark);
background: #eef0f2; padding: 13px 18px; margin: 0 0 6px;
}
.mega-col a {
display: block; padding: 6px 18px; font-size: 12.5px;
text-transform: uppercase; letter-spacing: .02em;
color: var(--text); transition: color var(--transition);
}
.mega-col:first-child a { padding: 6px 0; }
.mega-col a:hover { color: var(--brand-blue); }
/* ----- sectioned dropdown (Service & Parts): navy headers + 2 columns ----- */
.dropdown.dropdown-sections { min-width: 840px; padding: 0; }
.ddsection-head {
background: #1a3a5e; color: #fff;
font-size: 14px; font-weight: 700;
text-transform: uppercase; letter-spacing: .02em;
padding: 13px 26px;
}
.ddsection-head a { color: inherit; text-decoration: none; }
.ddsection-head a:hover { text-decoration: underline; }
.ddsection-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ddsection-grid a {
display: block; padding: 13px 26px; font-size: 14px;
color: var(--text); text-transform: uppercase;
transition: background var(--transition), color var(--transition);
}
.ddsection-grid a:hover { background: var(--bg-alt); color: var(--brand-blue); }
/* ----- hamburger ----- */
.nav-toggle {
display: none; background: none; border: 0;
padding: 10px; margin-left: auto; cursor: pointer;
}
.nav-toggle span {
display: block; width: 26px; height: 3px; background: var(--brand-dark);
margin: 5px 0; border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ===================================================================
HERO CAROUSEL (full-width, 1800x625 ratio)
=================================================================== */
.hero { background: #000; }
.carousel { position: relative; overflow: hidden; }
.slides { position: relative; aspect-ratio: 1800 / 625; }
.slide {
position: absolute; inset: 0;
opacity: 0; visibility: hidden;
transition: opacity .6s ease, visibility .6s ease;
}
.slide.is-active { opacity: 1; visibility: visible; }
.car-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
background: var(--arrow-grey); color: #fff; border: 0;
font-size: 28px; line-height: 1; width: 46px; height: 60px;
cursor: pointer; z-index: 2; transition: background var(--transition);
}
.car-arrow:hover { background: #8d8d8d; }
.car-prev { left: 0; }
.car-next { right: 0; }
.car-dots {
position: absolute; bottom: 16px; left: 0; right: 0;
display: flex; justify-content: center; gap: 9px; z-index: 2;
}
.car-dots button {
width: 11px; height: 11px; border-radius: 50%;
border: 2px solid #fff; background: transparent; cursor: pointer;
transition: background var(--transition);
}
.car-dots button.is-active { background: #fff; }
/* ===================================================================
THREE CTA CARDS (full-image tiles with text overlay)
=================================================================== */
.cta-cards { padding: 50px 0; background: #f5f5f5; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cta-card {
position: relative; border-radius: 6px; overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.cta-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cta-card__content {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 30px;
background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
}
.cta-card__content h3 {
color: #fff; font-size: 28px; font-weight: 700;
margin-bottom: 12px; text-transform: uppercase; line-height: 1.1;
}
/* ===================================================================
REVIEWS (3-per-view carousel)
=================================================================== */
.reviews { background: var(--bg-alt); padding: 56px 0; }
.reviews-head { text-align: center; margin-bottom: 32px; }
.reviews-head h2 {
font-size: 31px; color: var(--brand-dark); text-transform: uppercase;
}
.reviews-tagline { font-size: 17px; font-weight: 600; color: var(--text); margin: 12px 0 4px; }
.reviews-subline { font-size: 14.5px; color: var(--text-muted); }
.reviews-carousel { position: relative; padding: 0 56px; }
.reviews-viewport { overflow: hidden; padding: 10px 4px 30px; }
.reviews-track { display: flex; gap: 26px; transition: transform .4s ease; }
.review-card {
flex: 0 0 calc((100% - 52px) / 3);
background: #0a1a30; color: #fff;
border: 0;
border-radius: 4px; padding: 32px 32px 36px;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
min-height: 360px;
display: flex; flex-direction: column;
display: flex; flex-direction: column;
}
.reviews .review-head {
display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 1px solid rgba(255,255,255,.25);
padding-bottom: 16px; margin-bottom: 20px;
}
.reviews .review-info { display: flex; flex-direction: column; gap: 4px; }
.reviews .review-source {
font-weight: 800; color: #fff; font-size: 22px;
text-transform: uppercase; letter-spacing: .5px;
}
.reviews .review-date {
font-size: 15px; color: #fff;
text-transform: uppercase; letter-spacing: .5px;
}
.reviews .review-stars {
color: #ff8a00;
font-size: 26px; line-height: 1; letter-spacing: 3px;
white-space: nowrap;
}
.reviews .review-body { flex: 1; }
.reviews .review-body p {
font-size: 17px; line-height: 1.5; color: #fff; margin: 0;
}
.rev-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 46px; border: 0; cursor: pointer;
background: var(--arrow-grey); color: #fff; font-size: 24px; line-height: 1;
transition: background var(--transition);
}
.rev-arrow:hover { background: #8d8d8d; }
.rev-arrow:disabled { opacity: .4; cursor: default; }
.rev-prev { left: 0; }
.rev-next { right: 0; }
.reviews-foot { text-align: center; margin-top: 34px; }
/* ===================================================================
TVM PROMO BANNER (homepage)
=================================================================== */
.tvm-banner { background: #fff; padding: 24px 0 8px; }
.tvm-banner__link { display: block; }
.tvm-banner__link img,
.tvm-banner__img {
display: block;
width: 100%;
max-width: 1400px;
height: auto;
margin: 0 auto;
border-radius: 2px;
}
div.tvm-banner__img { min-height: 100px; aspect-ratio: 1400 / 150; }
/* ===================================================================
DIRECTIONS (full map on top, then photo + white card)
=================================================================== */
.directions {
position: relative;
padding: 0;
isolation: isolate;
background: #e6e9ee;
overflow: hidden;
}
.directions__map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.directions__inner {
position: relative;
z-index: 2;
padding: 70px 20px;
}
.directions-row {
display: grid; grid-template-columns: 1fr 1fr;
box-shadow: 0 12px 28px rgba(0,0,0,.18);
background: #fff;
border-radius: 4px;
overflow: hidden;
}
.directions-photo { display: flex; }
.directions-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.directions-card {
background: #fff; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
padding: 44px 40px;
}
.directions-form__wrap {
position: relative;
flex: 1 1 240px;
}
.directions-form__wrap input { width: 100%; padding-right: 38px; }
.directions-form__pin {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--brand-blue);
display: inline-flex;
}
.directions-form__pin svg { width: 18px; height: 18px; display: block; }
.directions-card h2 {
font-size: 30px; color: var(--brand-dark);
font-weight: 800; line-height: 1.2;
margin-bottom: 26px;
}
.directions-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.directions-form input {
flex: 1 1 240px; padding: 12px 14px; font-size: 14px;
border: 1px solid var(--border); border-radius: var(--radius);
}
/* ===================================================================
WELCOME
=================================================================== */
.welcome { background: var(--bg-alt); padding: 56px 0; }
.welcome-title {
font-size: 46px; font-weight: 400; color: #15181d;
text-transform: uppercase; margin-bottom: 22px;
}
.welcome-inner h2 {
font-size: 34px; font-weight: 400; color: #15181d;
margin: 34px 0 12px;
}
.welcome-inner p { color: var(--text); font-size: 17px; margin-bottom: 15px; }
.welcome-inner .btn { margin-top: 18px; }
/* ===================================================================
FOOTER (navy top band + black legal bar + white disclaimer)
=================================================================== */
.footer-top { background: #0a1a30; color: #d8dde5; }
.footer-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 44px 30px; padding: 60px 20px 54px;
}
.footer-col h4 {
color: #fff; font-size: 19px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px;
}
.footer-col a {
display: block; font-size: 15px; padding: 8px 0;
color: #d8dde5; transition: color var(--transition);
}
.footer-col a:hover { color: #fff; }
/* column 1: links styled like headings, no */
.footer-col--plain a {
color: #fff; font-size: 19px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; padding: 9px 0;
}
.footer-social { display: flex; align-items: center; gap: 24px; align-self: start; }
.social-icon {
display: flex; align-items: center;
color: var(--brand-blue-l); line-height: 1;
transition: color var(--transition), transform var(--transition);
}
.social-icon svg { width: 22px; height: 22px; display: block; }
.social-icon--text { font-size: 23px; font-weight: 700; }
.social-icon--wide svg { width: auto; height: 22px; }
.social-icon:hover { color: #fff; transform: translateY(-2px); }
.footer-legal { background: #000; color: #c4cbd6; padding: 26px 0; }
.footer-legal-links {
list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
justify-content: center; font-size: 12.5px;
}
.footer-legal-links a:hover { color: #fff; }
/* === legal links black bar (display-only, all unclickable) === */
.footer-legal { background: #000; padding: 38px 0; }
.footer-legal__row {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.footer-legal__row:last-child { margin-bottom: 0; }
.footer-legal__row li {
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 0 14px;
line-height: 1.4;
border-right: 1px solid rgba(255,255,255,.45);
cursor: default;
user-select: none;
pointer-events: none;
}
.footer-legal__row li:first-child { padding-left: 0; }
.footer-legal__row li:last-child { border-right: 0; }
.footer-legal__adchoices {
display: inline-flex;
align-items: center;
gap: 5px;
background: #c4c4c4;
color: #000;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 2px;
letter-spacing: .2px;
}
.footer-legal__adchoices-arrow {
display: inline-block;
width: 0; height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid #1c8ed1;
}
.footer-disclaimer { background: #fff; padding: 44px 0; }
.footer-disclaimer p { font-size: 12.5px; color: #6b7280; line-height: 1.7; }
/* ===================================================================
RESPONSIVE
=================================================================== */
@media (max-width: 1200px) {
.nav-link { padding: 0 9px; font-size: 12.5px; }
}
@media (max-width: 1170px) {
.topbar-inner { font-size: 10px; }
}
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 960px) {
.topbar-inner { gap: 1px 2px; }
.phone-list li { padding: 2px 9px; }
.topbar .address { padding-left: 9px; }
.ph-corp-logo { width: 84px; height: 34px; }
.ph-logo { width: 150px; height: 46px; }
.mainbar-inner { min-height: 62px; gap: 12px; }
.nav-toggle { display: block; }
.navbar {
position: absolute; top: 100%; left: 0; right: 0; display: none;
background: #fff; border-top: 1px solid var(--border);
box-shadow: var(--shadow-md); max-height: 74vh; overflow-y: auto;
}
.navbar.open { display: block; }
.nav-menu { flex-direction: column; }
.nav-item { width: 100%; border-top: 1px solid var(--border); }
.nav-item:first-child { border-top: 0; }
.nav-link {
height: auto; padding: 13px 20px;
justify-content: space-between;
}
.caret { display: inline; }
.dropdown, .dropdown.mega {
position: static; display: none; opacity: 1; visibility: visible;
transform: none; box-shadow: none; border: 0;
border-top: 1px solid var(--border); min-width: 0; width: 100%;
background: var(--bg-alt); grid-template-columns: 1fr;
}
.nav-item.open > .dropdown, .nav-item.open > .dropdown.mega { display: block; }
.dropdown li a { padding-left: 34px; }
.mega-col { padding: 6px 0; }
.mega-col h4 { padding: 8px 20px 6px; }
.mega-col a { padding: 6px 0 6px 34px; }
.ddsection-grid { grid-template-columns: 1fr; }
.ddsection-head { padding: 11px 20px; }
.ddsection-grid a { padding: 9px 20px 9px 34px; }
.search-btn { display: none; }
.cards-grid { grid-template-columns: 1fr; }
.cta-card__content h3 { font-size: 24px; }
.directions-row { grid-template-columns: 1fr; }
.ph-directions { min-height: 260px; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.reviews-head h2, .directions-card h2 { font-size: 24px; }
.welcome-title { font-size: 30px; }
.welcome-inner h2 { font-size: 24px; }
.welcome-inner p { font-size: 16px; }
}
@media (max-width: 767px) {
.review-card { flex-basis: 100%; }
.reviews-carousel { padding: 0 44px; }
.footer-grid { grid-template-columns: 1fr; }
.car-arrow { width: 38px; height: 50px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ===================================================================
NEW VEHICLES PAGE (vehicle results / VRP)
=================================================================== */
/* page head (breadcrumb + title) - sits at the top of the results column */
.page-head { margin-bottom: 16px; }
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
font-size: 13px; color: var(--text-muted); margin-bottom: 8px;
}
.breadcrumb a:hover { color: var(--brand-blue); }
.page-title { font-size: 30px; color: var(--brand-dark); text-transform: uppercase; }
/* promo banner strip */
.vrp-banner { margin-bottom: 20px; }
.ph-vrp-banner { width: 100%; height: 130px; }
.vrp-banner__link { display: block; }
.vrp-banner__img {
display: block;
width: 100%;
height: auto;
max-height: 150px;
object-fit: cover;
border-radius: 2px;
}
/* layout - 3 distinct zones: white header, white filter rail, gray body */
.vrp { background: #f3f3f3; padding: 0 0 50px; }
.vrp-layout {
display: grid; grid-template-columns: 234px minmax(0, 1fr);
gap: 22px; padding: 0 20px 0 0; align-items: stretch;
}
/* min-width:0 stops the results column (and its feature strip) from
blowing the grid wider than the page */
.vrp-results { min-width: 0; padding-top: 26px; }
/* ----- filters: white rail flush to the page's left edge ----- */
.vrp-filters {
background: #fff; border-right: 1px solid var(--border);
padding: 26px 16px 40px;
}
/* price range */
.filter-price__title {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--brand-dark); margin-bottom: 14px;
}
.price-slider { position: relative; height: 22px; margin: 0 11px 14px; }
.price-slider__track {
position: absolute; top: 50%; left: 0; right: 0; height: 4px;
transform: translateY(-50%); background: #d6d6d6; border-radius: 2px;
}
.price-slider__handle {
position: absolute; top: 50%; width: 22px; height: 22px;
transform: translate(-50%, -50%);
background: #1d2733; border-radius: 50%; cursor: pointer;
}
.price-slider__handle--min { left: 0; }
.price-slider__handle--max { left: 100%; }
.price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.price-inputs input {
flex: 1; min-width: 0; text-align: center;
padding: 7px 4px; font-size: 12px; color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
}
.price-inputs__dash { color: #aab1ba; }
/* filter tiles */
.filter-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The modal filter sets .is-tile-hidden when its selections don't
match a card. The chip-strip filter sets .is-hidden. Either one
present should hide the card. */
.vehicle-card.is-tile-hidden { display: none; }
.filter-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 13px 6px;
background: var(--bg-alt); border: 0; border-radius: 4px;
cursor: pointer; transition: background var(--transition);
}
.filter-tile:hover { background: #e7e9ec; }
.filter-tile svg { width: 21px; height: 21px; fill: var(--brand-dark); }
.filter-tile span { font-size: 12px; color: var(--brand-dark); }
/* ----- results ----- */
.vrp-results-head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 20px;
}
.vrp-results-head h1 { font-size: 19px; color: var(--brand-dark); font-weight: 700; }
.vrp-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.vrp-sort select {
padding: 7px 10px; font-size: 14px;
border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
}
/* grid / list view toggle */
.vrp-tools { display: flex; align-items: center; gap: 16px; }
.vrp-view { display: flex; }
.vrp-view__btn {
width: 34px; height: 34px; padding: 0; cursor: pointer;
border: 1px solid var(--border); background: #fff;
display: flex; align-items: center; justify-content: center;
}
.vrp-view__btn + .vrp-view__btn { border-left: 0; }
.vrp-view__btn svg { width: 18px; height: 18px; fill: #9aa3ad; }
.vrp-view__btn.is-active { background: #0a1a30; border-color: #0a1a30; }
.vrp-view__btn.is-active svg { fill: #fff; }
.vehicle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
/* === pagination pager (rendered above + below the grid) === */
.vrp-pager {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
padding: 26px 0;
}
.vrp-pager__btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid #d1d5db;
background: #fff;
cursor: pointer;
color: #1d2733;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
font-family: inherit;
transition: background var(--transition), border-color var(--transition);
}
.vrp-pager__btn svg { width: 20px; height: 20px; }
.vrp-pager__btn:hover:not(:disabled) {
background: #f4f4f4;
border-color: #9ca3af;
}
.vrp-pager__btn:disabled {
opacity: 0.32;
cursor: not-allowed;
}
.vrp-pager__info {
font-size: 17px;
font-weight: 600;
color: #1d2733;
min-width: 130px;
text-align: center;
}
@media (max-width: 600px) {
.vrp-pager { gap: 14px; padding: 18px 0; }
.vrp-pager__btn { width: 38px; height: 38px; }
.vrp-pager__info { font-size: 15px; min-width: 110px; }
}
/* full-card promotional ad that replaces a listing slot */
.vehicle-card--ad {
display: block;
position: relative;
overflow: hidden;
border: 0;
border-radius: 6px;
background: #0a1a30;
text-decoration: none;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: var(--shadow-sm);
}
.vehicle-card--ad:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.vehicle-card--ad .vehicle-ad__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
div.vehicle-ad__img { min-height: 320px; }
/* list view: ad becomes a wide horizontal banner */
.vehicle-grid.is-list .vehicle-card--ad { aspect-ratio: auto; }
.vehicle-grid.is-list .vehicle-card--ad .vehicle-ad__img { max-height: 200px; }
/* list view: one card per row, image beside the details */
.vehicle-grid.is-list { grid-template-columns: 1fr; }
.vehicle-grid.is-list .vehicle-card { flex-direction: row; }
.vehicle-grid.is-list .vehicle-card__media { flex: 0 0 40%; }
.vehicle-grid.is-list .ph-vehicle { height: 100%; }
.vehicle-grid.is-list .vehicle-card__body { flex: 1; }
.vehicle-card {
min-width: 0;
border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
background: #fff; display: flex; flex-direction: column;
transition: box-shadow var(--transition), transform var(--transition);
}
.vehicle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.vehicle-card__media { position: relative; }
.ph-vehicle { width: 100%; aspect-ratio: 4 / 3; }
.vehicle-badge {
position: absolute; top: 10px; left: 10px;
background: var(--brand-blue); color: #fff;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; padding: 4px 9px; border-radius: 3px;
}
.vehicle-badge--used { background: #5a6470; }
.vehicle-badge--certified { background: #0a7d3e; }
/* ----- used page: type toggles (New / Certified / Used) ----- */
.type-toggles {
display: flex; gap: 6px;
padding-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.type-toggle {
flex: 1; display: flex; flex-direction: column;
align-items: center; gap: 9px;
}
.type-toggle__label { font-size: 13px; font-weight: 600; color: var(--brand-dark); }
.toggle {
position: relative; width: 50px; height: 27px; flex-shrink: 0;
padding: 0; border: 0; border-radius: 14px; cursor: pointer;
background: #c8ccd2; transition: background var(--transition);
}
.toggle.is-on { background: #0a1a30; }
.toggle__dot {
position: absolute; top: 3px; left: 3px;
width: 21px; height: 21px; border-radius: 50%;
background: #fff; transition: left var(--transition);
}
.toggle.is-on .toggle__dot { left: 26px; }
/* ----- used page: applied-filter chips ----- */
.vrp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.vrp-chip {
display: inline-flex; align-items: center; gap: 9px;
background: #e6e6e6; color: var(--brand-dark);
font-size: 13px; font-weight: 700; font-family: inherit;
padding: 9px 18px; border-radius: 20px;
border: 0; cursor: pointer; transition: background var(--transition);
}
.vrp-chip:hover { background: #dadada; }
.vrp-chip--clear { background: #0a1a30; color: #fff; }
.vrp-chip--clear:hover { background: #14315a; }
.vrp-chip__x { font-size: 14px; opacity: .7; }
.vehicle-card__body { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.vehicle-title { font-size: 14px; color: var(--brand-dark); margin-bottom: 4px; }
.vehicle-stock { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.vehicle-specs { list-style: none; margin-bottom: 12px; }
.vehicle-specs li {
display: flex; justify-content: space-between;
font-size: 12px; color: var(--text); padding: 4px 0;
border-bottom: 1px solid var(--border);
}
.vehicle-specs li span { color: var(--text-muted); }
.vehicle-pricing { display: flex; align-items: baseline; gap: 10px; margin: auto 0 14px; }
.vehicle-msrp { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.vehicle-price { font-size: 18px; font-weight: 700; color: var(--brand-dark); }
.vehicle-ctas { display: grid; gap: 7px; }
.vehicle-ctas .btn { padding: 9px 8px; font-size: 11px; text-align: center; }
/* Carfax + Play Video buttons inside used-vehicle cards */
.btn-carfax, .btn-playvideo {
display: inline-block; text-decoration: none; line-height: 0;
transition: opacity var(--transition);
}
.btn-carfax { margin: 4px 0 12px; }
.btn-playvideo { margin: 10px 0 0; }
.btn-carfax img { display: block; width: auto; height: auto; max-width: 140px; }
.btn-playvideo img { display: block; width: auto; height: auto; max-width: 170px; }
.btn-carfax:hover, .btn-playvideo:hover { opacity: .85; }
/* ----- New card enhancements: swatches, key features, ON LOT, SPECIAL OFFER ----- */
/* SPECIAL OFFER banner that prefixes cards on the specials page */
.vehicle-card--special { padding-top: 0; }
.vehicle-card--special .vehicle-card__special {
background: var(--brand-dark);
color: #fff;
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
padding: 11px 8px;
text-transform: uppercase;
}
/* ON LOT badge that sits above the title in the body */
.vehicle-onlot {
display: inline-block;
background: var(--brand-dark);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
padding: 3px 8px;
text-transform: uppercase;
margin-bottom: 8px;
align-self: flex-start;
}
/* color swatch dot next to the color name */
.vehicle-specs li.has-swatch { gap: 8px; }
.vehicle-specs li.has-swatch > span:first-child { flex: 0 0 70px; }
.vehicle-specs li.has-swatch .vehicle-swatch-wrap {
display: inline-flex; align-items: center; gap: 8px;
margin-left: auto;
}
.color-swatch {
width: 12px; height: 12px; border-radius: 50%;
border: 1px solid rgba(0,0,0,.25);
display: inline-block; flex-shrink: 0;
}
/* KEY FEATURES row at the bottom of the specs list */
.vehicle-features {
display: flex; align-items: flex-start; gap: 8px;
margin: 10px 0 12px;
padding-top: 8px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.vehicle-features__label {
font-size: 11px; font-weight: 700; color: var(--text-muted);
letter-spacing: .06em; text-transform: uppercase;
flex-basis: 100%;
margin-bottom: 2px;
}
.vehicle-features__icons {
display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.vehicle-features__icon {
width: 18px; height: 18px; color: var(--text);
flex-shrink: 0;
}
.vehicle-features__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
/* MSRP+adjustment pricing variant (used on specials cards) */
.vehicle-pricing--detailed {
display: grid; grid-template-columns: 1fr auto;
gap: 4px 8px;
margin: 10px 0 14px;
font-size: 12px;
border-top: 1px solid var(--border);
padding-top: 8px;
}
.vehicle-pricing--detailed .vp-label { color: var(--text); }
.vehicle-pricing--detailed .vp-value { color: var(--text); text-align: right; font-weight: 600; }
.vehicle-pricing--detailed .vp-row--total { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.vehicle-pricing--detailed .vp-row--total .vp-value {
font-size: 18px; font-weight: 700; color: var(--brand-dark);
}
/* Green Confirm Availability button (vehicle cards only) */
.vehicle-card .btn-primary,
.vehicle-card .btn.btn-primary {
background: #0a8a4a; color: #fff; font-weight: 700; letter-spacing: .03em;
}
.vehicle-card .btn-primary:hover { background: #086e3a; }
/* ----- SEO copy block ----- */
.vrp-seo { background: #fff; padding: 40px 0; }
.vrp-seo-inner { padding: 0 20px; }
.vrp-seo h1 { font-size: 30px; font-weight: 700; color: #15181d; margin-bottom: 14px; }
.vrp-seo h2 { font-size: 22px; font-weight: 700; color: #15181d; margin: 26px 0 10px; }
.vrp-seo p { color: var(--text); margin-bottom: 12px; }
.vrp-seo ul { margin: 0 0 14px 22px; }
.vrp-seo li { color: var(--text); margin-bottom: 6px; }
.vrp-seo a { color: var(--text); }
.vrp-seo a:hover { text-decoration: underline; }
@media (max-width: 1300px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
.vrp-layout { grid-template-columns: 1fr; padding: 0; }
.vrp-filters { border-right: 0; border-bottom: 1px solid var(--border); }
.vrp-results { padding: 22px 18px 0; }
.vehicle-grid { grid-template-columns: repeat(2, 1fr); }
.filter-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.page-title { font-size: 24px; }
}
@media (max-width: 600px) {
.vehicle-grid { grid-template-columns: 1fr; }
.vehicle-grid.is-list .vehicle-card { flex-direction: column; }
.vehicle-grid.is-list .vehicle-card__media { flex: none; }
}
/* ----- interactive filter modals ----- */
.price-slider__fill {
position: absolute; top: 50%; height: 4px;
transform: translateY(-50%); background: #1d2733; border-radius: 2px;
}
.filter-tile.is-active { box-shadow: inset 0 0 0 2px #0a1a30; }
.fmodal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(10,20,35,.55);
display: flex; align-items: flex-start; justify-content: center;
padding: 40px 16px; overflow-y: auto;
}
.fmodal-overlay[hidden] { display: none; }
.fmodal {
background: #fff; width: 100%; max-width: 760px;
box-shadow: var(--shadow-md);
display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.fmodal__head {
display: flex; align-items: stretch; justify-content: space-between;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.fmodal__title { font-size: 20px; font-weight: 700; color: #15181d; padding: 20px 24px; }
.fmodal__close {
border: 0; border-left: 1px solid var(--border); background: #fff;
width: 62px; font-size: 26px; line-height: 1; color: #333; cursor: pointer;
}
.fmodal__close:hover { background: var(--bg-alt); }
.fmodal__body {
background: var(--bg-alt); padding: 22px 24px;
overflow-y: auto; flex: 1; min-height: 0;
}
.fmodal__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 16px 24px; background: #fff;
border-top: 1px solid var(--border); flex-shrink: 0;
}
.fmodal__clear {
background: none; border: 0; color: var(--text-muted); font-size: 15px;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.fmodal__clear:hover { color: var(--brand-dark); }
.fmodal__apply {
background: #0a1a30; color: #fff; border: 0;
padding: 15px 30px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.fmodal__apply:hover { background: #14315a; }
.fopt-grid { display: grid; gap: 14px; }
.fopt-grid[data-cols="1"] { grid-template-columns: 1fr; }
.fopt-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.fopt-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.fopt {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: #fff; border: 1px solid transparent;
padding: 15px 16px; cursor: pointer; text-align: left;
transition: border-color var(--transition);
}
.fopt:hover { border-color: #bcc4cf; }
.fopt__label { display: block; font-size: 15px; font-weight: 700; color: #15181d; }
.fopt__count { display: block; font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.fopt__check {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
border: 1px solid #c4ccd6; background: #fff;
display: flex; align-items: center; justify-content: center;
}
.fopt.is-selected .fopt__check { background: #0a1a30; border-color: #0a1a30; }
.fopt.is-selected .fopt__check::after {
content: ""; width: 9px; height: 5px; margin-top: -2px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
.fmodal-slider { padding: 16px 12px 6px; }
.fslider { position: relative; height: 24px; }
.fslider__track {
position: absolute; top: 50%; left: 0; right: 0; height: 3px;
transform: translateY(-50%); background: #1d2733;
}
.fslider__handle {
position: absolute; top: 50%; width: 20px; height: 20px;
transform: translate(-50%, -50%); background: #0a1a30;
border-radius: 50%; cursor: grab;
}
.fslider__handle:active { cursor: grabbing; }
.fslider__labels {
display: flex; justify-content: space-between;
font-size: 13px; color: var(--text-muted); margin-top: 6px;
}
@media (max-width: 600px) {
.fopt-grid[data-cols="2"], .fopt-grid[data-cols="3"] { grid-template-columns: 1fr; }
.fmodal__title { font-size: 17px; padding: 16px; }
.fmodal__close { width: 52px; }
.fmodal__apply { padding: 13px 18px; font-size: 14px; }
.fmodal__body { padding: 16px; }
}
/* ----- keyword search + feature quick-filter strip ----- */
.inv-search {
display: flex; align-items: center;
border: 1px solid var(--border); background: #fff; margin-bottom: 14px;
}
.inv-search__input {
flex: 1; min-width: 0; border: 0; background: transparent;
padding: 15px 18px; font-size: 16px; color: var(--text);
}
.inv-search__input::placeholder { color: #9aa3ad; }
.inv-search__clear {
border: 0; background: none; cursor: pointer;
padding: 0 18px; font-size: 15px; color: #9aa3ad; white-space: nowrap;
}
.inv-search__clear:hover { color: var(--brand-dark); }
.feature-bar {
display: flex; align-items: center; gap: 6px;
border: 1px solid var(--border); background: #fff;
padding: 8px; margin-bottom: 22px;
}
.feature-bar__arrow {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--border); background: #fff;
font-size: 20px; line-height: 1; color: var(--brand-dark); cursor: pointer;
transition: background var(--transition);
}
.feature-bar__arrow:hover { background: var(--bg-alt); }
.feature-bar__track {
flex: 1; min-width: 0; display: flex; gap: 4px;
overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.feature-bar__track::-webkit-scrollbar { display: none; }
.feature-chip {
flex-shrink: 0; display: flex; align-items: center; gap: 9px;
padding: 9px 14px; border: 0; background: none; cursor: pointer;
font-size: 14px; color: var(--brand-dark); white-space: nowrap;
border-radius: 4px;
transition: background var(--transition), color var(--transition);
}
.feature-chip:hover { background: var(--bg-alt); }
.feature-chip.is-active { background: #0a1a30; color: #fff; }
.feature-chip svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.vehicle-card.is-hidden { display: none; }
.vehicle-card.type-hidden { display: none; }
.vrp-noresults {
display: none; padding: 36px 0; text-align: center;
font-size: 16px; color: var(--text-muted);
}
.vrp-noresults.is-shown { display: block; }
/* ===================================================================
VEHICLE FINDER PAGE (finder.html)
1:1 recreation of the dealership "0 results" vehicle finder form.
=================================================================== */
/* 3 distinct zones: white header, white left rail, gray content body */
.finder-page { background: #f3f3f3; }
.finder-layout {
display: grid; grid-template-columns: 300px minmax(0, 1fr);
align-items: stretch;
}
.finder-side { background: #fff; border-right: 1px solid var(--border); }
.finder-main { min-width: 0; padding: 26px 36px 60px; }
.finder-main .vrp-banner { margin-bottom: 22px; }
/* results count + view / sort tools */
.finder-results-head {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 14px; margin-bottom: 16px;
}
.finder-results-head h1 { font-size: 30px; font-weight: 400; color: #15181d; }
/* applied-filter chips */
.finder-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.finder-chip {
display: inline-flex; align-items: center; gap: 9px;
background: #e6e6e6; color: var(--brand-dark);
font-size: 13px; font-weight: 700;
padding: 9px 18px; border-radius: 20px;
}
.finder-chip--clear { background: #0a1a30; color: #fff; }
.finder-chip__x { font-size: 14px; opacity: .75; }
/* "Don't worry..." headline */
.finder-noresults { text-align: center; margin-bottom: 30px; }
.finder-noresults h2 {
font-size: 26px; font-weight: 400; color: var(--brand-dark); margin-bottom: 10px;
}
.finder-noresults p {
color: var(--text); font-size: 15px; max-width: 720px; margin: 0 auto;
}
/* ----- the finder form ----- */
.finder-form { max-width: 1120px; margin: 0 auto; }
.finder-form__heading {
font-size: 24px; font-weight: 400; color: #2b2b2b; margin: 30px 0 14px;
}
.finder-form__heading:first-child { margin-top: 0; }
/* light-gray field panel */
.finder-panel {
background: #efefef; padding: 30px;
display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px;
}
.ffield { display: flex; flex-direction: column; }
.ffield--full { grid-column: 1 / -1; }
.ffield label { font-size: 14px; color: #767676; margin-bottom: 8px; }
.ffield .req { color: #c0392b; margin-left: 2px; }
.ffield input,
.ffield select,
.ffield textarea {
padding: 12px 13px; font-size: 15px; font-family: inherit;
color: var(--text); background: #fff;
border: 1px solid #cfcfcf; border-radius: 2px;
}
.ffield select { height: 46px; cursor: pointer; }
.ffield textarea { resize: vertical; min-height: 150px; }
.ffield-radios { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 6px; }
.ffield-radio {
display: flex; align-items: center; gap: 10px;
font-size: 15px; color: #767676;
}
.ffield-radio input { width: 17px; height: 17px; }
/* consent + recaptcha + submit */
.finder-form__consent {
text-align: center; font-size: 14px; color: #555;
margin: 26px auto 6px; max-width: 760px;
}
.finder-form__recaptcha {
text-align: center; font-size: 12px; font-weight: 700;
color: #333; margin-bottom: 16px;
}
.finder-form__submit { text-align: center; }
/* rounded pill buttons */
.btn-pill {
display: inline-block; cursor: pointer;
font-size: 15px; font-weight: 700; line-height: 1.2;
padding: 14px 36px; border-radius: 26px; border: 0;
font-family: inherit; transition: background var(--transition);
}
.btn-pill--blue { background: var(--brand-blue); color: #fff; }
.btn-pill--blue:hover { background: var(--brand-blue-d); }
.btn-pill--navy { background: #0a1a30; color: #fff; }
.btn-pill--navy:hover { background: #14315a; }
/* Contact Us / Reset Search row under the form */
.finder-actions {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 18px; margin: 32px 0 6px;
}
/* ----- confirmation message (shown after submit) ----- */
.finder-success {
max-width: 620px; margin: 30px auto 10px;
border: 1px solid #cfe8d4; background: #f1faf2;
border-radius: 6px; padding: 36px 32px; text-align: center;
}
.finder-success:focus { outline: none; }
.finder-success__icon {
width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
background: #2e9c4a; display: flex; align-items: center; justify-content: center;
}
.finder-success__icon svg { width: 28px; height: 28px; fill: #fff; }
.finder-success h2 { font-size: 22px; color: var(--brand-dark); margin-bottom: 8px; }
.finder-success p { font-size: 14.5px; color: var(--text-muted); }
@media (max-width: 960px) {
.finder-layout { grid-template-columns: 1fr; }
.finder-side { display: none; }
.finder-main { padding: 24px 18px 46px; }
.finder-results-head h1 { font-size: 24px; }
}
@media (max-width: 600px) {
.finder-panel { grid-template-columns: 1fr; padding: 20px; }
}
/* ===================================================================
MOBILE POLISH LAYER
Cross-cutting rules that round out the per-section breakpoints above.
Three tiers: <960 (tablet), <720 (phone landscape), <480 (small phone).
=================================================================== */
/* ---------- ≤960px: tablet polish ---------- */
@media (max-width: 960px) {
.container { padding-left: 18px; padding-right: 18px; }
/* hero carousel: smaller text overlays and arrows */
.car-arrow { width: 38px; height: 50px; font-size: 22px; }
.car-dots button { width: 9px; height: 9px; }
/* CTA cards: 2-up before going single-column */
.cards-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* TVM banner: tighter padding */
.tvm-banner { padding: 18px 0 4px; }
/* welcome section */
.welcome { padding: 36px 0; }
/* directions card on tablet */
.directions-card { padding: 32px 24px; }
.directions__map { height: 100%; }
/* vehicle ad tile: clamp aspect so it doesn't dwarf its row */
.vehicle-card--ad { aspect-ratio: 7 / 12; }
}
/* ---------- ≤720px: phone landscape / small tablet ---------- */
@media (max-width: 720px) {
.container { padding-left: 14px; padding-right: 14px; }
/* topbar: only show Main phone, hide rest until needed */
.topbar-inner { flex-direction: column; gap: 4px; padding: 6px 14px; }
.phone-list { flex-wrap: wrap; justify-content: center; gap: 0 10px; }
.phone-list li:nth-child(n+3) { display: none; }
.topbar .address { padding-left: 0; font-size: 11px; text-align: center; }
.topbar-inner { font-size: 11px; }
/* mainbar: smaller logos + tighter padding */
.mainbar-inner { padding: 6px 14px; min-height: 56px; gap: 8px; }
.logo-link--corp { width: 64px; height: 28px; }
.logo-link--dealer { width: 120px; height: 40px; }
/* hero text on mobile */
.hero { background: #000; }
.slides { aspect-ratio: 4 / 3; }
/* CTA cards stack */
.cards-grid { grid-template-columns: 1fr; gap: 14px; }
/* reviews section */
.reviews { padding: 36px 0; }
.reviews-head h2 { font-size: 22px; }
.reviews-tagline { font-size: 15px; }
.reviews-subline { font-size: 13.5px; }
.reviews-carousel { padding: 0 36px; }
.review-card { padding: 22px 22px 24px; min-height: 280px; }
.reviews .review-source { font-size: 18px; }
.reviews .review-date { font-size: 13px; }
.reviews .review-stars { font-size: 20px; letter-spacing: 2px; }
.reviews .review-body p { font-size: 15px; }
/* directions section */
.directions__inner { padding: 40px 14px; }
.directions-card h2 { font-size: 22px; }
.directions-photo { min-height: 220px; }
.directions-photo img { min-height: 220px; }
/* welcome */
.welcome-title { font-size: 26px; }
.welcome-inner h2 { font-size: 20px; }
.welcome-inner p, .welcome-inner li { font-size: 15px; }
/* footer */
.footer-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
.footer-col h4 { margin-top: 6px; }
.footer-col a { padding: 4px 0; }
.footer-social { justify-content: center; flex-wrap: wrap; gap: 14px; }
.footer-disclaimer { padding: 28px 0; }
.footer-disclaimer p { font-size: 12px; }
/* inventory pages */
.vrp-results { padding: 18px 14px 0; }
.vehicle-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vehicle-card__body { padding: 14px; }
.vehicle-title { font-size: 16px; }
.vehicle-stock, .vehicle-specs li { font-size: 12.5px; }
.vehicle-pricing { gap: 6px; }
.vehicle-msrp { font-size: 13px; }
.vehicle-price { font-size: 18px; }
.vehicle-card--ad { aspect-ratio: 7 / 11; }
/* VRP search + feature strip */
.inv-search__input { padding: 12px 14px; font-size: 14px; }
.vrp-chips { gap: 8px; margin-bottom: 16px; padding-bottom: 8px; overflow-x: auto; flex-wrap: nowrap; }
.vrp-chips > * { flex: 0 0 auto; }
/* finance / forms */
.fin-hero img.ph-fin-hero,
.fin-hero img.ph-svc-hero { max-height: 280px; object-fit: cover; }
.fin-body__title { font-size: 26px; }
.fin-body__lede { font-size: 16px; }
.fin-body h2 { font-size: 22px; }
.fin-ctas { grid-template-columns: 1fr; gap: 12px; }
/* contact / charity / about page titles */
.cu-title, .ct-title, .cw-title, .sa-title, .cc-title { font-size: 28px; }
/* about us */
.au-hero__img { max-height: 360px; }
.au-title { font-size: 32px; }
/* meet our team */
.team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
/* leave a review tiles */
.lr-title { font-size: 30px; }
.lr-sub { font-size: 17px; margin-bottom: 32px; }
.lr-card { padding: 30px 18px 24px; min-height: 220px; gap: 18px; }
.lr-card__logo { width: 110px; height: 110px; }
/* mustang page */
.ms-hero__title { font-size: 22px; }
.ms-intro { padding: 32px 0; }
.ms-intro__title { font-size: 24px; }
.ms-features { padding: 24px 0 44px; }
/* ranger page */
.rg-hero__title { font-size: 28px; }
.rg-hero__overlay { padding: 30px 18px; }
.rg-feature { padding: 18px 0; }
.rg-feature__body h2 { font-size: 20px; }
.rg-feature__body p { font-size: 15px; }
/* ford research accordion */
.fr-title { font-size: 26px; }
.fr-inventory { grid-template-columns: 1fr; }
/* charities */
.cw-charity { padding: 22px 0; }
.cw-charity__logo img { max-height: 140px; }
/* customer testimonials */
.ct-list .review-item { padding: 18px 0 22px; }
.ct-list .review-meta { font-size: 14px; }
.ct-list .review-stars { font-size: 22px !important; letter-spacing: 1px !important; }
/* blog cards */
.bl-title { font-size: 26px; }
.bl-post__title { font-size: 20px; }
.bl-post__body { font-size: 14.5px; }
/* breadcrumbs */
.cu-crumbs { font-size: 12.5px; margin-bottom: 14px; }
/* page hero titles (research/inventory) */
.page-title, .vrp-head h1 { font-size: 22px; }
}
/* ---------- ≤480px: small phone (iPhone SE / older Android) ---------- */
@media (max-width: 480px) {
.container { padding-left: 12px; padding-right: 12px; }
/* topbar: ultra-compact, only phone number visible */
.topbar-inner { padding: 5px 12px; }
.phone-list li:nth-child(n+2) { display: none; }
.phone-list li { padding: 1px 0; }
.topbar .address { font-size: 10.5px; }
/* mainbar: tiny logos */
.logo-link--corp { width: 52px; height: 24px; }
.logo-link--dealer { width: 96px; height: 34px; }
.mainbar-inner { min-height: 50px; padding: 4px 12px; gap: 6px; }
/* hero: tighter aspect on tiny phones */
.slides { aspect-ratio: 5 / 4; }
.car-arrow { width: 32px; height: 42px; font-size: 18px; }
.car-dots { bottom: 10px; }
/* TVM banner: edge-to-edge */
.tvm-banner { padding: 14px 0 2px; }
/* inventory cards: single column */
.vehicle-grid { grid-template-columns: 1fr; }
.vehicle-card--ad { aspect-ratio: 16 / 9; max-height: 240px; }
.vehicle-card--ad .vehicle-ad__img { object-position: center; }
/* reviews carousel */
.reviews-carousel { padding: 0 28px; }
.review-card { padding: 20px 18px 22px; min-height: 240px; }
.reviews .review-source { font-size: 16px; }
.reviews .review-stars { font-size: 18px; }
/* directions */
.directions-card { padding: 26px 18px; }
.directions-card h2 { font-size: 20px; }
.directions-form input { font-size: 13px; padding: 11px 12px; }
.directions__inner { padding: 32px 12px; }
/* footer disclaimer */
.footer-disclaimer p { font-size: 11.5px; line-height: 1.6; }
/* page titles */
.page-title, .cu-title, .ct-title, .cw-title, .sa-title, .cc-title,
.au-title, .lr-title, .bl-title, .fr-title { font-size: 24px; }
.ms-hero__title { font-size: 18px; }
.rg-hero__title { font-size: 22px; }
/* meet our team: 1 column on tiny */
.team-grid { grid-template-columns: 1fr !important; }
/* forms across pages: native controls full width, comfortable touch targets */
.cu-form input, .cu-form select, .cu-form textarea,
.cc-form input, .cc-form select, .cc-form textarea,
.fin-form input, .fin-form select, .fin-form textarea,
.acc-form input, .acc-form select, .acc-form textarea,
.coll-form input, .coll-form select, .coll-form textarea,
.fms-form input, .fms-form select, .fms-form textarea {
font-size: 15px;
padding: 11px 12px;
}
.cu-submit, .cc-submit, .btn-primary, .btn-pill {
width: 100%;
box-sizing: border-box;
justify-content: center;
text-align: center;
}
/* leave-a-review cards */
.lr-card { min-height: 180px; padding: 24px 14px 18px; }
.lr-card__logo { width: 90px; height: 90px; }
.lr-card__name { font-size: 17px; }
/* customer testimonials */
.ct-list .review-stars { font-size: 18px !important; }
/* tighter section spacing globally */
section { scroll-margin-top: 60px; }
}
/* Make every image safe by default so nothing ever overflows */
img { max-width: 100%; height: auto; }
/* Prevent horizontal scroll on any phone */
html, body { overflow-x: hidden; }
/* ===================================================================
VEHICLE DETAIL PAGE (VDP) -- per-listing template
=================================================================== */
/* dark sticky title bar */
.vdp-bar {
position: sticky;
top: 0;
z-index: 50;
background: #2b2e34;
color: #fff;
}
.vdp-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 20px;
}
.vdp-bar__heading { min-width: 0; }
.vdp-bar__title {
font-size: 22px;
font-weight: 700;
margin: 0;
line-height: 1.25;
letter-spacing: .2px;
}
.vdp-bar__cond { color: #fff; font-weight: 800; }
.vdp-bar__meta {
font-size: 13px;
color: #bcc1c7;
margin: 4px 0 0;
letter-spacing: .04em;
}
.vdp-bar__sep { margin: 0 6px; }
.vdp-bar__actions { display: flex; gap: 10px; flex-shrink: 0; }
.vdp-action {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.25);
background: transparent;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.vdp-action:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.vdp-action svg { width: 16px; height: 16px; display: block; }
/* two-column layout: main + sticky sidebar */
.vdp-body { background: #fff; padding: 24px 0 60px; }
.vdp-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 32px;
align-items: start;
}
/* === HERO image + play button === */
.vdp-hero {
position: relative;
width: 100%;
background: #0d0d0d;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.vdp-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
div.vdp-hero__img { min-height: 360px; }
.vdp-hero__play {
position: absolute;
inset: 0;
margin: auto;
width: 96px;
height: 96px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.85);
color: #111;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition), background var(--transition);
}
.vdp-hero__play:hover { background: #fff; transform: scale(1.05); }
.vdp-hero__play svg { width: 38px; height: 38px; margin-left: 4px; }
.vdp-hero[data-video=""] .vdp-hero__play { display: none; }
/* thumbnail strip below the hero */
.vdp-thumbs {
display: flex;
gap: 8px;
margin-top: 12px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 6px;
}
.vdp-thumb {
flex: 0 0 96px;
height: 70px;
padding: 0;
border: 2px solid transparent;
border-radius: 4px;
background: #f4f4f4;
cursor: pointer;
overflow: hidden;
transition: border-color .15s ease, transform .15s ease;
}
.vdp-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vdp-thumb:hover { transform: translateY(-1px); }
.vdp-thumb.is-active { border-color: var(--brand-blue); }
@media (max-width: 720px) {
.vdp-thumb { flex: 0 0 72px; height: 52px; }
}
/* 3 blue action pills */
.vdp-actions-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
margin: 28px 0 8px;
}
.vdp-pill {
background: var(--brand-blue);
color: #fff;
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
padding: 14px 38px;
border-radius: 999px;
transition: background var(--transition);
}
.vdp-pill:hover { background: var(--brand-blue-d); }
/* generic section + h2 */
.vdp-section { margin: 40px 0; }
.vdp-h2 {
font-size: 26px;
font-weight: 700;
color: #111;
margin: 0 0 18px;
}
/* === BASIC INFO specs box === */
.vdp-specs {
background: #f4f4f4;
padding: 20px 26px;
border-radius: 4px;
}
.vdp-specs__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 10px 0;
border-bottom: 1px solid #e3e6ea;
}
.vdp-specs__row:last-child { border-bottom: 0; }
.vdp-specs__cell {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: 15px;
}
.vdp-specs__cell span { font-weight: 700; color: #111; }
.vdp-specs__cell strong {
font-weight: 400;
color: #222;
text-align: right;
}
/* === KEY FEATURES icon tiles === */
.vdp-features {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.vdp-feature-tile {
border: 1px solid #e3e6ea;
border-radius: 4px;
padding: 26px 12px 20px;
background: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
min-height: 130px;
}
.vdp-feature-tile__icon {
font-size: 22px;
line-height: 1;
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
}
.vdp-feature-tile__icon svg { width: 26px; height: 26px; display: block; }
.vdp-feature-tile__label {
font-size: 13px;
font-weight: 700;
color: #111;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.3;
}
/* === OTHER VEHICLES YOU MAY LIKE === */
.vdp-other-wrap { background: #f4f4f4; padding: 32px; border-radius: 4px; }
.vdp-other {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vdp-other__card {
background: #fff;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.vdp-other__link { display: block; }
.vdp-other__media { aspect-ratio: 4 / 3; background: #ddd; }
.vdp-other__media .ph { width: 100%; height: 100%; }
.vdp-other__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdp-other__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #e3e6ea;
}
.vdp-other__compare {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f4f4f4;
border: 0;
font-size: 12.5px;
font-weight: 600;
color: #444;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
}
.vdp-other__compare svg { width: 14px; height: 14px; }
.vdp-other__heart {
width: 28px; height: 28px;
border-radius: 50%;
border: 0;
background: transparent;
color: #888;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.vdp-other__heart svg { width: 16px; height: 16px; }
.vdp-other__title {
display: block;
padding: 12px 14px 16px;
font-size: 15px;
font-weight: 700;
color: #111;
line-height: 1.35;
text-decoration: none;
}
.vdp-other__title:hover { color: var(--brand-blue); }
/* === ACCORDION (Vehicle Details + Engine) === */
.vdp-acc {
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
.vdp-acc__head {
width: 100%;
background: #0a1a30;
color: #fff;
border: 0;
padding: 16px 22px;
font-family: inherit;
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
text-align: left;
}
.vdp-acc__ico {
display: inline-flex;
align-items: center;
justify-content: center;
}
.vdp-acc__ico svg { width: 22px; height: 22px; }
.vdp-acc__label { flex: 1; }
.vdp-acc__caret {
font-size: 14px;
transition: transform var(--transition);
}
.vdp-acc__head[aria-expanded="true"] .vdp-acc__caret { transform: rotate(180deg); }
.vdp-acc__body { background: #f4f4f4; padding: 22px 26px; }
.vdp-acc__body[hidden] { display: none; }
.vdp-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.vdp-detail-grid > div {
background: #fff;
padding: 14px 18px;
border-bottom: 1px solid #e3e6ea;
font-size: 14.5px;
color: #222;
}
.vdp-detail-grid > div:nth-last-child(-n+2):not(:nth-child(odd):last-child) { border-bottom: 0; }
/* === PREMIUM OPTIONS LIST === */
.vdp-options__list {
list-style: none;
margin: 0;
padding: 0;
background: #f4f4f4;
border-radius: 4px;
padding: 6px 26px;
}
.vdp-options__list li {
padding: 14px 0;
font-size: 15px;
color: #222;
border-bottom: 1px solid #e3e6ea;
}
.vdp-options__list li:last-child { border-bottom: 0; }
/* engine accordion uses lighter chrome */
.vdp-acc--engine .vdp-acc__head {
background: #0a1a30;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 15px;
}
/* === GET DIRECTIONS / CONTACT US dual card === */
.vdp-contact {
position: relative;
margin-top: 50px;
isolation: isolate;
border-radius: 4px;
overflow: hidden;
min-height: 380px;
background: #e6e9ee;
}
.vdp-contact__map {
position: absolute;
inset: 0;
z-index: 1;
background-image: url("images/aaa.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vdp-contact__cards {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 60px 40px;
}
.vdp-contact__card {
background: #fff;
padding: 30px 26px 26px;
border-radius: 2px;
box-shadow: var(--shadow-md);
}
.vdp-contact__h3 {
font-size: 22px;
font-weight: 700;
color: #111;
margin: 0 0 16px;
text-align: center;
}
.vdp-contact__form { display: flex; flex-direction: column; gap: 10px; }
.vdp-contact__form input {
width: 100%;
padding: 12px 14px;
font-size: 14px;
border: 0;
border-bottom: 1px solid #c0c4ca;
background: transparent;
outline: none;
}
.vdp-contact__form input:focus { border-bottom-color: var(--brand-blue); }
.vdp-contact__addr {
font-size: 14px;
color: #222;
margin: 4px 0 12px;
text-align: center;
}
.vdp-contact__row {
font-size: 15px;
color: #222;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
}
.vdp-contact__row a { color: #222; text-decoration: none; }
.vdp-contact__row a:hover { color: var(--brand-blue); }
.vdp-contact__btn {
margin-top: 14px;
background: #0a1a30;
color: #fff;
border: 0;
border-radius: 999px;
padding: 14px 22px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-decoration: none;
display: inline-block;
text-align: center;
cursor: pointer;
transition: background var(--transition);
}
.vdp-contact__btn:hover { background: #14315a; }
/* disclaimer */
.vdp-disclaimer {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid #e3e6ea;
font-size: 13px;
color: #666;
line-height: 1.65;
}
.vdp-disclaimer p { margin: 0 0 10px; }
.vdp-disclaimer strong { color: #111; }
/* === RIGHT STICKY SIDEBAR === */
.vdp-side {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 0;
}
.vdp-pricing {
background: #fff;
border: 1px solid #d8dee5;
box-shadow: var(--shadow-sm);
padding: 22px 24px 20px;
border-radius: 0;
}
.vdp-pricing__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: #222;
padding: 6px 0;
}
.vdp-pricing__info { display: inline-flex; align-items: center; gap: 6px; }
.vdp-pricing__info svg { width: 14px; height: 14px; color: #444; }
.vdp-pricing__row--sale {
font-size: 22px;
font-weight: 800;
color: #111;
margin-top: 4px;
}
.vdp-pricing__details {
margin: 14px 0 0;
font-size: 14px;
}
.vdp-pricing__details a {
color: var(--brand-blue);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.vdp-pricing__details a:hover { text-decoration: underline; }
.vdp-status {
background: #ebedf0;
color: #1a1a1a;
padding: 18px 24px;
font-size: 18px;
font-weight: 700;
border-left: 1px solid #d8dee5;
border-right: 1px solid #d8dee5;
}
.vdp-cta {
display: block;
background: #2ec06b;
color: #fff;
text-align: center;
padding: 22px 20px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
border: 0;
cursor: pointer;
transition: background var(--transition);
}
.vdp-cta:hover { background: #25a55a; color: #fff; }
/* ----- VDP responsive ----- */
@media (max-width: 1100px) {
.vdp-features { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
.vdp-layout { grid-template-columns: 1fr; }
.vdp-side { position: static; }
.vdp-other { grid-template-columns: repeat(2, 1fr); }
.vdp-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.vdp-bar__title { font-size: 17px; }
.vdp-bar__meta { font-size: 11.5px; }
.vdp-bar__inner { padding: 12px 14px; gap: 10px; }
.vdp-action { width: 32px; height: 32px; }
.vdp-action svg { width: 14px; height: 14px; }
.vdp-h2 { font-size: 22px; }
.vdp-pill { padding: 12px 22px; font-size: 13px; flex: 1 1 auto; min-width: 0; text-align: center; }
.vdp-actions-row { gap: 10px; }
.vdp-specs__row { grid-template-columns: 1fr; gap: 8px; }
.vdp-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vdp-other { grid-template-columns: 1fr; }
.vdp-other-wrap { padding: 18px; }
.vdp-detail-grid { grid-template-columns: 1fr; }
.vdp-acc__head { padding: 14px 16px; font-size: 15px; }
.vdp-acc__body { padding: 16px; }
.vdp-contact__cards { grid-template-columns: 1fr; padding: 30px 18px; }
.vdp-hero__play { width: 72px; height: 72px; }
.vdp-hero__play svg { width: 28px; height: 28px; }
.vdp-pricing__row--sale { font-size: 20px; }
}
@media (max-width: 480px) {
.vdp-bar__actions { gap: 6px; }
.vdp-bar__title { font-size: 15px; }
.vdp-pill { width: 100%; }
.vdp-cta { padding: 18px 14px; font-size: 16px; }
}
/* =================================================================
PRIVACY POLICY PAGE
================================================================= */
.pp-hero {
background: var(--brand-dark);
color: #fff;
padding: 48px 0 28px;
}
.pp-hero h1 { font-size: 32px; font-weight: 700; margin: 0 0 14px; }
.pp-updated { font-size: 13px; opacity: .8; margin: 0 0 10px; }
.pp-notice {
font-size: 13px;
background: rgba(255,255,255,.08);
border-left: 3px solid var(--brand-blue-l);
padding: 10px 14px;
margin: 0;
border-radius: 0 4px 4px 0;
line-height: 1.55;
}
.pp-body { background: #fff; padding: 40px 0 80px; }
.pp-body .container { max-width: 1080px; }
.pp-body h2 {
font-size: 24px;
font-weight: 700;
color: var(--brand-dark);
margin: 42px 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--border);
}
.pp-body h2:first-of-type { margin-top: 20px; }
.pp-body h3 {
font-size: 18px;
font-weight: 700;
color: var(--brand-dark);
margin: 30px 0 10px;
}
.pp-body h4 {
font-size: 15.5px;
font-weight: 700;
color: var(--text);
margin: 22px 0 8px;
}
.pp-body p {
font-size: 14.5px;
line-height: 1.7;
color: var(--text);
margin: 0 0 14px;
}
.pp-body a { color: var(--brand-blue); }
.pp-body a:hover { text-decoration: underline; }
.pp-callout {
background: #fff4e5;
border-left: 3px solid #ff8a00;
padding: 10px 14px;
border-radius: 0 4px 4px 0;
margin: 14px 0 !important;
font-size: 14px !important;
}
.pp-toc {
list-style: none;
padding: 14px 18px;
margin: 0 0 24px;
background: var(--bg-alt);
border-radius: 4px;
}
.pp-toc li { padding: 4px 0; }
.pp-toc a { font-weight: 600; }
.pp-list {
margin: 0 0 18px;
padding-left: 22px;
}
.pp-list > li {
font-size: 14.5px;
line-height: 1.7;
color: var(--text);
margin-bottom: 10px;
}
.pp-list > li > strong { color: var(--brand-dark); }
.pp-table-wrap {
overflow-x: auto;
margin: 14px 0 26px;
border: 1px solid var(--border);
border-radius: 4px;
}
.pp-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
line-height: 1.6;
min-width: 600px;
}
.pp-table th {
background: var(--brand-dark);
color: #fff;
text-align: left;
font-weight: 700;
padding: 12px 14px;
vertical-align: top;
border-right: 1px solid rgba(255,255,255,.15);
}
.pp-table th:last-child { border-right: 0; }
.pp-table td {
padding: 12px 14px;
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
vertical-align: top;
color: var(--text);
}
.pp-table td:last-child { border-right: 0; }
.pp-table tr:nth-child(even) td { background: var(--bg-alt); }
.pp-table--3 td { width: 33.333%; }
.pp-table--3 td p {
font-size: 13.5px !important;
margin: 0 0 10px !important;
line-height: 1.6 !important;
}
.pp-table--3 td p:last-child { margin-bottom: 0 !important; }
.pp-table--3 td p strong { color: var(--brand-dark); }
/* Make the Privacy Policy entry in the legal footer actually clickable
while leaving the other legal-bar items as display-only. */
.footer-legal__row li a {
color: inherit;
text-decoration: none;
pointer-events: auto;
cursor: pointer;
}
.footer-legal__row li:has(a) {
pointer-events: auto;
cursor: pointer;
}
.footer-legal__row li a:hover { text-decoration: underline; }
@media (max-width: 720px) {
.pp-hero { padding: 32px 0 22px; }
.pp-hero h1 { font-size: 24px; }
.pp-body { padding: 28px 0 60px; }
.pp-body h2 { font-size: 20px; margin-top: 32px; }
.pp-body h3 { font-size: 16px; }
.pp-body p, .pp-list > li { font-size: 14px; }
.pp-table { font-size: 12.5px; min-width: 520px; }
.pp-table th, .pp-table td { padding: 10px 11px; }
}