/* Autorix skin. Globally loaded via the root layout.
The page is wrapped in .site-theme for brand overrides.
Source: a static Bootstrap HTML template (Autorix). We keep its OWN classes
and its OWN fonts (Chakra Petch + Mulish, pulled by style.css's Google Fonts
@import). Only the accent/dark colors are remapped to the Service Pros brand,
done directly in the copied vendor style.css :root variables (the whole sheet
drives color through those vars, so editing :root recolors everything):
accent #b50c09 (--e-global-color-accent, the primary red) -> #bc1622
red #c43d3a (--e-global-color-red, secondary red) -> #bc1622
heading #262626 (--e-global-color-primary, dark headings) -> #070719
gold #fbc729 (--e-global-color-yellow, rating/highlight) -> #ffba00 (brand gold)
Autorix's signature dark-navy section backgrounds (#141e34 family) are LEFT
intact -- they are the template's dark identity (footer/dark bands), close in
spirit to brand navy; flattening them all to one hex would kill its depth.
Neutral greys/whites are untouched.
CSS SET: only the sheets every Autorix page actually loads in are
bundled -- bootstrap.min.css, style.css, mobile.css, owl.carousel/theme. The
folder also ships custom-style.css / super-classes.css / special-classes.css,
but NO Autorix page links them (verified by grepping every page head); they
are blog/shop leftover utility sheets and, if imported, would override the
live look (e.g. custom-style's `a{color:#fff}` whitens all links). Excluded on
purpose to match the actual rendered template.
Import order mirrors the source : bootstrap base -> owl carousel ->
main style.css -> responsive mobile.css (so mobile wins at small widths).
url() paths in the copied CSS were rewritten to absolute /theme/...
(images -> /theme/images/). Font Awesome is kept as a single CDN import
(the source loaded it from cdnjs); its CSS is self-contained on the CDN. */
/* Font Awesome 6 is loaded as a parallel hamburger covers mobile). */
.site-theme .home-header-section .navbar-collapse {
flex-grow: 0;
align-items: center;
visibility: visible !important;
}
.site-theme .home-header-section .navbar-nav {
align-items: center;
gap: 6px;
}
.site-theme .home-header-section .navbar-nav .nav-link {
padding: 8px 14px !important;
/* Light nav text. Bootstrap's .navbar-light default (rgba(0,0,0,.55)) is what
renders these dark — override it to near-white for the dark/scrimmed band. */
color: rgba(255, 255, 255, 0.92) !important;
transition: color 0.2s ease;
}
.site-theme .home-header-section .navbar-nav .nav-link:hover,
.site-theme .home-header-section .navbar-nav .nav-link:focus {
color: #fff !important;
}
.site-theme .btn-talk {
margin-left: 26px !important;
}
.site-theme .btn-talk a {
padding: 12px 22px !important;
}
/* ---- Desktop dropdown (pure CSS — this site runs no Bootstrap JS) -----------
Bootstrap's .dropdown-menu is display:none until JS toggles .show, which never
runs here, so the Services caret showed but the panel never opened. Reveal the
panel on hover/focus of the parent nav-item instead (keyboard-reachable via
:focus-within). Higher specificity than vendor .dropdown-menu so it wins. */
.site-theme .home-header-section .nav-item.dropdown {
position: relative;
}
.site-theme .home-header-section .spag-dropdown {
display: block; /* override vendor .dropdown-menu { display: none } */
position: absolute;
top: 100%;
left: 0;
min-width: 252px;
margin: 0;
padding: 8px;
list-style: none;
background: #0a132a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(7, 7, 25, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
z-index: 1000;
}
.site-theme .home-header-section .nav-item.dropdown:hover .spag-dropdown,
.site-theme .home-header-section .nav-item.dropdown:focus-within .spag-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-theme .home-header-section .spag-dropdown li {
list-style: none;
/* Override the horizontal nav-list rules (inline-block + margin-left) the
vendor applies to header s, which were offsetting items unevenly. */
display: block;
margin: 0;
}
.site-theme .home-header-section .spag-dropdown-item {
display: block;
padding: 9px 14px;
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
text-decoration: none;
border-radius: 6px;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.site-theme .home-header-section .spag-dropdown-item:hover,
.site-theme .home-header-section .spag-dropdown-item:focus {
background: rgba(188, 22, 34, 0.16);
color: #fff;
}
/* Mobile submenu — indent the service children under the Services row. */
.site-theme .spag-mobile-sub {
list-style: none;
margin: 4px 0 0;
padding: 0 0 0 12px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
/* ---- No-JS hamburger (native ) ----------------------------------- */
.site-theme .spag-mobile {
display: none;
position: relative;
margin-left: auto;
}
.site-theme .spag-mobile > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 8px;
}
.site-theme .spag-mobile > summary::-webkit-details-marker {
display: none;
}
.site-theme .spag-mobile > summary .navbar-toggler-icon {
width: 24px;
height: 2px;
background: #fff;
display: block;
background-image: none;
}
.site-theme .spag-mobile-list {
position: absolute;
right: 0;
top: calc(100% + 10px);
min-width: 220px;
margin: 0;
padding: 8px;
list-style: none;
background: #0a132a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(7, 7, 25, 0.5);
z-index: 1000;
}
.site-theme .spag-mobile-list li {
list-style: none;
}
.site-theme .spag-mobile-list a {
display: block;
padding: 10px 14px;
color: #fff;
text-transform: uppercase;
font-size: 15px;
text-decoration: none;
border-radius: 6px;
}
.site-theme .spag-mobile-list a:hover {
background: rgba(188, 22, 34, 0.16);
color: #fff;
}
.site-theme .spag-mobile-cta {
background: #bc1622;
margin-top: 4px;
text-align: center;
font-weight: 700;
}
/* Swap desktop nav <-> hamburger at autorix's lg breakpoint (992px). */
@media (max-width: 991px) {
.site-theme .home-header-section .navbar-collapse {
display: none !important;
}
.site-theme .spag-mobile {
display: inline-block;
}
/* Trim the top bar so it never overflows on phones: drop the location line
and the extra social icons, keep hours (left) + phone (right). The li
selector outranks a lone .spag-topbar-hide-sm, so match the li explicitly. */
.site-theme .spag-topbar li.spag-topbar-hide-sm,
.site-theme .spag-topbar-social li:not(:first-child) {
display: none;
}
.site-theme .spag-topbar .container-fluid {
padding: 8px 16px;
}
.site-theme .main-header .container-fluid {
padding: 12px 16px;
}
}
/* ---- Footer spacing (tame the source's 156px band; even column rhythm) ----- */
.site-theme .spag-footer.footer-section {
padding: 72px 0 64px;
}
.site-theme .spag-foot-col {
margin-bottom: 34px;
}
.site-theme .spag-footer .navbar-brand-footer img {
max-height: 56px;
width: auto;
}
.site-theme .spag-footer .social-icons ul {
margin: 0;
padding: 0;
}
/* Recent-post list */
.site-theme .spag-foot-posts {
margin: 0;
padding: 0;
}
.site-theme .spag-foot-post {
display: flex;
gap: 12px;
margin-bottom: 16px;
align-items: flex-start;
}
.site-theme .spag-foot-post-img img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 6px;
}
.site-theme .spag-foot-post-body {
display: flex;
flex-direction: column;
}
.site-theme .spag-foot-post-title {
color: #fff;
font-size: 14px;
line-height: 20px;
font-weight: 600;
}
.site-theme .spag-foot-post:hover .spag-foot-post-title {
color: #bc1622;
}
.site-theme .spag-foot-post-date {
color: #a4abbb;
font-size: 13px;
margin-top: 4px;
}
/* Address + Services lists */
.site-theme .spag-foot-address {
margin: 0;
padding: 0;
}
.site-theme .spag-foot-address .list-item {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
color: #a4abbb;
font-size: 15px;
line-height: 24px;
/* Narrow column — let the long email/address wrap instead of overflowing. */
overflow-wrap: anywhere;
}
.site-theme .spag-foot-address .fa-icon {
position: absolute;
left: 0;
top: 4px;
color: #bc1622;
font-size: 16px;
}
/* Shared footer link column (Company + Services). */
.site-theme .spag-foot-linklist {
margin: 0;
padding: 0;
}
.site-theme .spag-foot-linklist li {
margin-bottom: 11px;
}
.site-theme .spag-foot-linklist a,
.site-theme .spag-foot-address a {
color: #a4abbb;
font-size: 15px;
}
.site-theme .spag-foot-linklist a:hover,
.site-theme .spag-foot-address a:hover {
color: #bc1622;
}
.site-theme .spag-footer .footer-bar {
padding: 22px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Bottom bar: copyright left, legal/utility links right (stacks centered on mobile). */
.site-theme .spag-foot-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
}
.site-theme .spag-foot-bottom p {
color: #a4abbb;
}
.site-theme .spag-foot-bottom p a {
color: #fff;
}
.site-theme .spag-foot-bottom p a:hover {
color: #bc1622;
}
.site-theme .spag-foot-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin: 0;
padding: 0;
}
.site-theme .spag-foot-legal li {
position: relative;
}
.site-theme .spag-foot-legal li:not(:last-child)::after {
content: "";
position: absolute;
right: -9px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 12px;
background: rgba(255, 255, 255, 0.22);
}
.site-theme .spag-foot-legal a {
color: #a4abbb;
font-size: 14px;
}
.site-theme .spag-foot-legal a:hover {
color: #bc1622;
}
@media (max-width: 575px) {
.site-theme .spag-foot-bottom {
flex-direction: column;
justify-content: center;
text-align: center;
}
.site-theme .spag-foot-legal {
justify-content: center;
}
}
/* ===========================================================================
STEP 3 — Home page (scoped). autorix has no real home equivalents for blog/
FAQ/areas/partners/stats, so those use neutral spag-* classes styled here;
hero/about/services/testimonials/appointment reuse the source's own classes.
=========================================================================== */
/* ---- Shared primitives ---------------------------------------------------- */
.site-theme .spag-eyebrow {
position: relative;
display: inline-block;
color: #bc1622;
font-family: "Chakra Petch", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
padding-left: 38px;
}
.site-theme .spag-eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 3px;
background: #bc1622;
box-shadow: 0 6px 0 #bc1622, 0 -6px 0 #bc1622;
}
.site-theme .spag-eyebrow-center {
padding-left: 0;
}
.site-theme .spag-eyebrow-center::before {
left: 50%;
transform: translate(-50%, -50%) translateY(-14px);
width: 40px;
height: 3px;
box-shadow: none;
}
.site-theme .spag-section-title {
color: #070719;
font-size: 40px;
line-height: 1.18;
font-weight: 700;
margin-bottom: 18px;
}
.site-theme .spag-title-light {
color: #fff;
}
.site-theme .spag-center {
text-align: center;
margin-top: 34px;
}
/* Pill buttons (mirror .banner-btn) */
.site-theme .spag-btn {
display: inline-flex;
align-items: center;
gap: 14px;
background: #bc1622;
border: 1px solid #bc1622;
color: #fff;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
padding: 15px 30px;
border-radius: 57px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.site-theme .spag-btn i {
font-size: 18px;
}
.site-theme .spag-btn:hover {
background: #070719;
border-color: #070719;
color: #fff;
transform: translateY(-4px);
}
.site-theme .spag-btn-outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
}
.site-theme .spag-btn-outline:hover {
background: #bc1622;
border-color: #bc1622;
}
.site-theme .spag-btn-dark {
background: #070719;
border-color: #070719;
}
.site-theme .spag-btn-dark:hover {
background: #fff;
border-color: #fff;
color: #bc1622;
}
.site-theme .spag-btn-blue {
background: #0A6FB8;
border-color: #0A6FB8;
text-transform: none;
}
.site-theme .spag-btn-blue:hover {
background: #085a96;
border-color: #085a96;
color: #fff;
}
/* ---- Hero ------------------------------------------------------------------ */
.site-theme .spag-hero {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
}
.site-theme .spag-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.site-theme .spag-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(7, 7, 25, 0.92) 0%, rgba(7, 7, 25, 0.72) 45%, rgba(7, 7, 25, 0.35) 100%);
}
.site-theme .spag-hero-inner {
position: relative;
z-index: 2;
padding-top: 70px;
padding-bottom: 70px;
}
.site-theme .spag-hero-content {
max-width: 620px;
}
.site-theme .spag-hero-content h1 {
color: #fff;
font-size: 56px;
line-height: 1.08;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 20px;
}
.site-theme .spag-hero-content p {
color: #d7dce0;
font-size: 19px;
line-height: 30px;
margin-bottom: 30px;
}
.site-theme .spag-hero-btns {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
/* ---- About (autorix dark band) -------------------------------------------- */
.site-theme .spag-about.about-us-section {
background: #141e34;
padding: 90px 0;
position: relative;
}
.site-theme .spag-about.about-us-section::after,
.site-theme .spag-about.about-us-section::before {
display: none; /* drop the source's decorative car/bg images */
}
.site-theme .spag-about .spag-about-figure {
margin: 0;
}
.site-theme .spag-about .spag-about-figure img {
width: 100%;
border-radius: 12px;
display: block;
}
.site-theme .spag-about .about-content {
padding-left: 30px;
}
.site-theme .spag-about .about-content h2 {
color: #fff;
font-size: 40px;
line-height: 1.18;
text-transform: none;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.site-theme .spag-about-owned {
color: #bc1622 !important;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.site-theme .spag-about .about-content > p {
color: #c7cdd8;
font-size: 16px;
line-height: 27px;
margin-bottom: 26px;
}
.site-theme .spag-eyebrow-light {
color: #ff5a64;
}
/* ---- Services -------------------------------------------------------------- */
.site-theme .spag-services.our-services-section {
background: #f5f7fa;
background-image: none;
padding: 88px 0;
}
.site-theme .spag-services h2.spag-section-title {
padding: 0;
text-transform: none;
margin-bottom: 40px;
}
/* Widen the gutter between service cards (default Bootstrap 30px h / 26px v felt
tight). HORIZONTAL: bump column padding to 22px (=44px between cards) with a
matching negative row margin so the outer cards stay aligned to the container
edge; overflow:hidden clips the small row bleed (no horizontal scrollbar).
VERTICAL: the cards are height:100% in a single wrapping flex row, so a card
margin-bottom gets absorbed and produced no gap between rows — use the flex
container's row-gap instead (no effect on the single-line title row).
Shared by the home services grid and the Services page (.spag-svc-grid). */
.site-theme .spag-services {
overflow: hidden;
}
.site-theme .spag-services > .container > .row {
margin-left: -22px;
margin-right: -22px;
row-gap: 44px;
}
.site-theme .spag-services > .container > .row > [class*="col-"] {
padding-left: 22px;
padding-right: 22px;
}
.site-theme .spag-service-card.our-services-outer {
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 38px 0 #dae0e5;
padding: 40px 28px 34px;
text-align: center;
height: 100%;
margin-bottom: 0; /* vertical gap handled by the row's row-gap */
border-bottom: 3px solid transparent;
transition: all 0.3s ease-in-out;
}
.site-theme .spag-service-card.our-services-outer:hover {
transform: translateY(-6px);
border-bottom-color: #bc1622;
}
.site-theme .spag-service-icon {
width: 84px;
height: 84px;
margin: 0 auto 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(188, 22, 34, 0.1);
color: #bc1622;
font-size: 34px;
}
.site-theme .spag-service-card .our-services-content {
margin-top: 0;
}
.site-theme .spag-service-card .our-services-content h5 {
color: #070719;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 12px;
}
.site-theme .spag-service-card .our-services-content p {
color: #696969;
font-size: 15px;
line-height: 25px;
padding: 0;
margin-bottom: 16px;
}
.site-theme .spag-service-card .our-services-content a {
color: #bc1622;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
}
/* ---- Testimonials (autorix dark carousel band, static grid) --------------- */
.site-theme .spag-tests.carousel-section {
background: #0a132a;
padding: 84px 0;
overflow: hidden;
}
/* Drop the source's decorative carousel flourishes — their ::after bled ~23px
past the right edge and added a faint horizontal scrollbar on the home page. */
.site-theme .spag-tests.carousel-section::before,
.site-theme .spag-tests.carousel-section::after {
display: none;
}
.site-theme .spag-tests .spag-test-card.carosel-text {
background: #141e34;
border-radius: 12px;
padding: 34px 32px;
margin-bottom: 26px;
height: 100%;
}
.site-theme .spag-tests .carosel-ul {
margin-bottom: 14px;
}
.site-theme .spag-tests .carosel-ul li i {
color: #ffba00;
font-size: 15px;
margin-right: 2px;
}
.site-theme .spag-tests .carosel-p {
font-size: 17px;
line-height: 28px;
margin-bottom: 22px;
}
.site-theme .spag-test-author {
display: flex;
align-items: center;
gap: 14px;
}
.site-theme .spag-test-monogram {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
flex-shrink: 0;
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.5px;
}
.site-theme .spag-test-author h6 {
color: #fff;
font-size: 17px;
font-weight: 700;
margin: 0;
display: block;
}
.site-theme .spag-test-author .ceo {
color: #a4abbb;
font-size: 14px;
margin: 2px 0 0;
display: block;
}
/* ---- Book an appointment (mission section + red box) ----------------------- */
.site-theme .spag-appointment.mission-section {
background: #f5f7fa;
padding: 88px 0;
}
.site-theme .spag-appointment .about-us-content {
padding-right: 24px;
}
.site-theme .spag-appointment .spag-section-title {
text-transform: none;
margin-bottom: 16px;
}
.site-theme .spag-appointment-lead {
color: #696969;
font-size: 16px;
line-height: 27px;
margin-bottom: 24px;
}
.site-theme .spag-reasons {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.site-theme .spag-reasons li {
display: flex;
align-items: center;
gap: 10px;
color: #070719;
font-weight: 600;
font-size: 15px;
}
.site-theme .spag-reasons li i {
color: #fff;
background: #bc1622;
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.site-theme .spag-appointment-box.mission-red-box {
margin-left: 0;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
padding: 38px 34px;
border-radius: 14px;
}
.site-theme .spag-appointment-box h5 {
margin-bottom: 22px;
font-size: 24px;
}
.site-theme .spag-appointment-box .spag-field {
margin-bottom: 14px;
}
.site-theme .spag-appointment-box .form-control.input-text {
display: block;
width: 100%;
background: #fff;
border: none;
border-radius: 8px;
padding: 13px 16px;
font-size: 15px;
line-height: 1.5;
color: #070719;
font-family: "Mulish", sans-serif;
box-sizing: border-box;
}
/* Single-line controls need an explicit height — without it they collapse
to ~36px and clip their text against the vertical padding. */
.site-theme .spag-appointment-box input.form-control.input-text,
.site-theme .spag-appointment-box select.form-control.input-text {
height: 50px;
}
/* Reset the native select chrome so the control matches the design and the
label is never clipped; supply a custom chevron. */
.site-theme .spag-appointment-box select.form-control.input-text {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23070719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px 16px;
}
.site-theme .spag-appointment-box textarea.input-text {
resize: vertical;
min-height: 110px;
}
.site-theme .spag-appointment-box .spag-center {
margin-top: 20px;
}
.site-theme .spag-field-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: inherit;
}
.site-theme .spag-required {
color: #ffd24a;
margin-left: 2px;
}
.site-theme .spag-required-note {
font-size: 13px;
opacity: 0.85;
margin-bottom: 14px;
}
/* Off-screen honeypot — hidden from real users, harvested by bots. */
.spag-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* Submission status banners inside the red form box. */
.site-theme .spag-appointment-box .spag-form-alert {
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 18px;
color: #fff;
font-weight: 600;
}
.site-theme .spag-appointment-box .spag-form-alert-success {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.site-theme .spag-appointment-box .spag-form-alert-error {
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.site-theme .spag-appointment-box .spag-btn-dark {
background: #070719;
border-color: #070719;
}
/* ---- Blog ------------------------------------------------------------------ */
.site-theme .spag-blog {
background: #fff;
padding: 88px 0;
}
.site-theme .spag-blog .spag-section-title {
margin-bottom: 40px;
}
.site-theme .spag-blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 38px 0 #dae0e5;
margin-bottom: 26px;
height: 100%;
display: flex;
flex-direction: column;
}
.site-theme .spag-blog-thumb {
display: block;
overflow: hidden;
}
.site-theme .spag-blog-thumb img {
width: 100%;
height: 210px;
object-fit: cover;
transition: transform 0.4s ease;
}
.site-theme .spag-blog-card:hover .spag-blog-thumb img {
transform: scale(1.05);
}
.site-theme .spag-blog-body {
padding: 24px 26px 28px;
}
.site-theme .spag-blog-meta {
display: flex;
gap: 18px;
margin-bottom: 12px;
}
.site-theme .spag-blog-meta li {
color: #8a8f9c;
font-size: 13px;
}
.site-theme .spag-blog-meta li i {
color: #bc1622;
margin-right: 5px;
}
.site-theme .spag-blog-body h5 {
font-size: 19px;
line-height: 26px;
font-weight: 700;
margin-bottom: 16px;
}
.site-theme .spag-blog-body h5 a {
color: #070719;
text-decoration: none;
}
.site-theme .spag-blog-body h5 a:hover {
color: #bc1622;
}
.site-theme .spag-blog-readmore {
color: #bc1622;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ---- FAQ ------------------------------------------------------------------- */
.site-theme .spag-faq {
background: #f5f7fa;
padding: 88px 0;
}
.site-theme .spag-faq .spag-section-title {
margin-bottom: 36px;
}
.site-theme .spag-faq-item {
background: #fff;
border-radius: 10px;
padding: 24px 28px;
margin-bottom: 16px;
box-shadow: 0 4px 20px 0 rgba(218, 224, 229, 0.5);
}
.site-theme .spag-faq-item h5 {
display: flex;
align-items: flex-start;
gap: 12px;
color: #070719;
font-size: 19px;
font-weight: 700;
margin-bottom: 10px;
}
.site-theme .spag-faq-item h5 i {
color: #bc1622;
font-size: 18px;
margin-top: 3px;
}
.site-theme .spag-faq-item p {
color: #696969;
font-size: 15px;
line-height: 25px;
margin: 0;
padding-left: 30px;
}
/* ---- Service areas --------------------------------------------------------- */
.site-theme .spag-areas {
background: #fff;
padding: 88px 0;
}
.site-theme .spag-areas-intro {
color: #696969;
font-size: 16px;
margin: 0 auto 36px;
max-width: 620px;
}
.site-theme .spag-area-card {
display: flex;
align-items: center;
gap: 14px;
background: #f5f7fa;
border: 1px solid #e5e5e5;
border-radius: 10px;
padding: 18px 22px;
margin-bottom: 22px;
text-decoration: none;
color: #070719;
font-weight: 700;
font-size: 17px;
transition: all 0.25s ease;
}
.site-theme .spag-area-card i {
color: #bc1622;
font-size: 20px;
}
.site-theme .spag-area-card:hover {
background: #bc1622;
border-color: #bc1622;
color: #fff;
transform: translateY(-3px);
}
.site-theme .spag-area-card:hover i {
color: #fff;
}
/* ---- Partner logos (placeholders only) ------------------------------------ */
.site-theme .spag-partners {
background: #f5f7fa;
padding: 80px 0;
}
.site-theme .spag-partner-grid {
align-items: center;
margin-top: 10px;
}
.site-theme .spag-partner-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #a4abbb;
padding: 14px 8px;
}
.site-theme .spag-partner-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ---- Stats band (real facts) ---------------------------------------------- */
.site-theme .spag-stats {
background: #070719;
padding: 64px 0;
}
.site-theme .spag-stat {
text-align: center;
padding: 14px 8px;
}
.site-theme .spag-stat-icon {
font-size: 34px;
color: #bc1622;
margin-bottom: 12px;
}
.site-theme .spag-stat h3 {
color: #fff;
font-size: 34px;
font-weight: 700;
margin-bottom: 4px;
}
.site-theme .spag-stat p {
color: #a4abbb;
font-size: 15px;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ---- Dealer side-door band (R12 — Trust-Blue, non-consumer) ---------------- */
.site-theme .spag-dealer-band {
background: #0A6FB8;
padding: 56px 24px;
text-align: center;
}
.site-theme .spag-dealer-band .spag-eyebrow {
color: rgba(255, 255, 255, 0.75);
}
.site-theme .spag-dealer-band h2 {
color: #fff;
font-size: 30px;
font-weight: 700;
margin: 12px 0 24px;
}
.site-theme .spag-dealer-band .spag-btn-blue {
background: #fff;
border-color: #fff;
color: #0A6FB8;
}
.site-theme .spag-dealer-band .spag-btn-blue:hover {
background: #e6f0fa;
border-color: #e6f0fa;
color: #085a96;
}
@media (max-width: 575px) {
.site-theme .spag-dealer-band h2 { font-size: 22px; }
}
/* ---- Home responsive ------------------------------------------------------- */
@media (max-width: 991px) {
.site-theme .spag-hero-content h1 { font-size: 40px; }
.site-theme .spag-about .about-content { padding-left: 0; margin-top: 30px; }
.site-theme .spag-appointment .about-us-content { padding-right: 0; margin-bottom: 30px; }
.site-theme .spag-section-title { font-size: 32px; }
}
@media (max-width: 575px) {
.site-theme .spag-hero-content h1 { font-size: 32px; }
.site-theme .spag-reasons { grid-template-columns: 1fr; }
}
/* ===========================================================================
STEP 4 — Services page (scoped). Hero intro block + CTA band; the card grid
reuses the home .spag-service-card styling for one consistent grid.
=========================================================================== */
/* ---- Services hero (two-column intro, replaces breadcrumb banner) --------- */
.site-theme .spag-svc-hero {
background: #fff;
padding: 70px 0 60px;
}
.site-theme .spag-svc-hero-content {
padding-right: 30px;
}
.site-theme .spag-svc-hero-title {
color: #070719;
/* Trimmed from 44px: this is now a section intro under the dark page-title
banner, so it sits a tier below the hero h1 rather than competing with it. */
font-size: 32px;
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 18px;
}
.site-theme .spag-svc-hero-accent {
color: #bc1622;
}
.site-theme .spag-svc-hero-content > p {
color: #696969;
font-size: 17px;
line-height: 28px;
margin-bottom: 28px;
}
.site-theme .spag-svc-hero-figure {
margin: 0;
}
.site-theme .spag-svc-hero-figure img {
width: 100%;
border-radius: 12px;
display: block;
}
/* ---- Services grid (light band; one icon-led card grid) ------------------- */
.site-theme .spag-svc-grid.our-services-section {
padding: 84px 0;
}
.site-theme .spag-svc-grid .our-services-content h5 a {
color: #070719;
text-decoration: none;
}
.site-theme .spag-svc-grid .our-services-content h5 a:hover {
color: #bc1622;
}
/* ---- CTA band -------------------------------------------------------------- */
.site-theme .spag-cta {
background: #070719;
padding: 72px 0;
position: relative;
}
.site-theme .spag-cta-inner {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.site-theme .spag-cta-inner h2 {
color: #fff;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
margin-bottom: 8px;
}
.site-theme .spag-cta-accent {
color: #bc1622;
}
/* On the navy CTA band the global red-button hover (-> navy) would blend in;
keep it red, just darker. */
.site-theme .spag-cta .spag-btn:hover {
background: #a3121d;
border-color: #a3121d;
}
@media (max-width: 991px) {
.site-theme .spag-svc-hero-content { padding-right: 0; margin-bottom: 30px; }
.site-theme .spag-svc-hero-title { font-size: 26px; }
.site-theme .spag-cta-inner h2 { font-size: 30px; }
}
/* ===========================================================================
STEP 5 — Service Detail page (scoped). autorix has no native detail layout;
we adapt a breadcrumb hero + sidebar/main two-column body.
=========================================================================== */
/* ---- Hero / breadcrumb ----------------------------------------------------- */
.site-theme .spag-detail-hero {
position: relative;
/* The header is transparent and overlays the top of this band (~122px:
top bar + nav), so the top padding must clear it AND leave breathing room
before the title. The taller band also reveals more of the background photo. */
padding: 188px 0 96px;
display: flex;
align-items: center;
overflow: hidden;
}
.site-theme .spag-detail-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.site-theme .spag-detail-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(7, 7, 25, 0.9) 0%, rgba(7, 7, 25, 0.72) 100%);
}
.site-theme .spag-detail-hero-inner {
position: relative;
z-index: 2;
text-align: center;
}
.site-theme .spag-detail-hero-inner h1 {
color: #fff;
font-size: 48px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px;
}
.site-theme .spag-breadcrumb {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-theme .spag-breadcrumb li {
color: #a4abbb;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
}
.site-theme .spag-breadcrumb li:not(:last-child)::after {
content: "/";
margin-left: 10px;
color: #6b7387;
}
.site-theme .spag-breadcrumb a {
color: #fff;
text-decoration: none;
}
.site-theme .spag-breadcrumb a:hover {
color: #bc1622;
}
.site-theme .spag-breadcrumb li:last-child span {
color: #bc1622;
}
/* Shorter header on mobile (hamburger bar) — trim the top clearance + title. */
@media (max-width: 991px) {
.site-theme .spag-detail-hero { padding: 128px 0 64px; }
.site-theme .spag-detail-hero-inner h1 { font-size: 34px; }
}
/* ---- Body ------------------------------------------------------------------ */
.site-theme .spag-detail-body {
background: #fff;
padding: 84px 0;
}
/* Sidebar */
.site-theme .spag-detail-widget {
background: #f5f7fa;
border-radius: 12px;
padding: 26px 24px;
margin-bottom: 28px;
}
.site-theme .spag-detail-widget h3 {
color: #070719;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 2px solid #e5e5e5;
}
.site-theme .spag-detail-widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-theme .spag-detail-widget li {
margin-bottom: 10px;
}
.site-theme .spag-detail-widget li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 13px 16px;
color: #070719;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all 0.25s ease;
}
.site-theme .spag-detail-widget li a i {
color: #bc1622;
font-size: 13px;
opacity: 0;
transform: translateX(-6px);
transition: all 0.25s ease;
}
.site-theme .spag-detail-widget li a:hover,
.site-theme .spag-detail-widget li.spag-current a {
background: #bc1622;
border-color: #bc1622;
color: #fff;
}
.site-theme .spag-detail-widget li a:hover i,
.site-theme .spag-detail-widget li.spag-current a i {
color: #fff;
opacity: 1;
transform: translateX(0);
}
/* Sidebar CTA box */
.site-theme .spag-detail-cta {
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 28px;
min-height: 260px;
}
.site-theme .spag-detail-cta img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.site-theme .spag-detail-cta-overlay {
position: relative;
z-index: 1;
background: linear-gradient(180deg, rgba(7, 7, 25, 0.55) 0%, rgba(7, 7, 25, 0.85) 100%);
height: 100%;
min-height: 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 26px 24px;
}
.site-theme .spag-detail-cta-overlay h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
margin-bottom: 18px;
}
/* Sidebar note */
.site-theme .spag-detail-note {
background: #070719;
border-radius: 12px;
padding: 28px 24px;
text-align: center;
}
.site-theme .spag-detail-note i {
color: #bc1622;
font-size: 30px;
margin-bottom: 12px;
}
.site-theme .spag-detail-note h4 {
color: #fff;
font-size: 19px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.site-theme .spag-detail-note p {
color: #a4abbb;
font-size: 14px;
line-height: 22px;
margin: 0;
}
/* Main column */
.site-theme .spag-detail-main {
padding-left: 14px;
}
.site-theme .spag-detail-topimg {
margin: 0 0 28px;
}
.site-theme .spag-detail-topimg img,
.site-theme .spag-detail-twoimg img {
width: 100%;
border-radius: 12px;
display: block;
}
.site-theme .spag-detail-main h2 {
color: #070719;
font-size: 30px;
line-height: 1.25;
font-weight: 700;
margin-bottom: 16px;
}
.site-theme .spag-detail-main h3 {
color: #070719;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
margin: 26px 0 14px;
}
.site-theme .spag-detail-main p {
color: #696969;
font-size: 16px;
line-height: 27px;
margin-bottom: 18px;
}
.site-theme .spag-detail-list {
margin: 0 0 8px;
padding: 0;
list-style: none;
}
.site-theme .spag-detail-list li {
display: flex;
gap: 12px;
margin-bottom: 16px;
color: #696969;
font-size: 16px;
line-height: 26px;
}
.site-theme .spag-detail-list li i {
color: #bc1622;
font-size: 19px;
margin-top: 3px;
flex-shrink: 0;
}
.site-theme .spag-detail-list strong {
color: #070719;
}
.site-theme .spag-detail-two {
margin-top: 30px;
}
.site-theme .spag-detail-twoimg {
margin: 0 0 22px;
}
.site-theme .spag-detail-links {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.site-theme .spag-detail-links a {
display: flex;
align-items: center;
gap: 10px;
background: #f5f7fa;
border-left: 3px solid #bc1622;
border-radius: 6px;
padding: 13px 16px;
color: #070719;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all 0.25s ease;
}
.site-theme .spag-detail-links a i {
color: #bc1622;
}
.site-theme .spag-detail-links a:hover {
background: #bc1622;
color: #fff;
}
.site-theme .spag-detail-links a:hover i {
color: #fff;
}
@media (max-width: 991px) {
.site-theme .spag-detail-hero-inner h1 { font-size: 34px; }
.site-theme .spag-detail-main { padding-left: 0; margin-top: 36px; }
.site-theme .spag-detail-links { grid-template-columns: 1fr; }
}
/* ===========================================================================
STEP 6 — Location page (scoped). autorix has no native location layout; we
adapt two-column blocks, a coverage grid with static Google Maps iframes, and
an office reference box, reusing the detail hero / check-list / CTA styles.
=========================================================================== */
/* ---- Two-column blocks (overview / services / reference) ------------------ */
.site-theme .spag-loc-split {
background: #fff;
padding: 84px 0;
}
.site-theme .spag-loc-services {
background: #f5f7fa;
}
.site-theme .spag-loc-reference {
background: #f5f7fa;
}
.site-theme .spag-loc-content {
padding: 0 10px;
}
.site-theme .spag-loc-content > p {
color: #696969;
font-size: 16px;
line-height: 27px;
margin-bottom: 22px;
}
.site-theme .spag-loc-figure {
margin: 0;
}
.site-theme .spag-loc-figure img {
width: 100%;
border-radius: 12px;
display: block;
}
.site-theme .spag-loc-services .spag-detail-list,
.site-theme .spag-loc-content .spag-detail-list {
margin-top: 6px;
}
/* ---- Meeting block --------------------------------------------------------- */
.site-theme .spag-loc-meeting {
background: #fff;
padding: 84px 0;
}
.site-theme .spag-loc-meeting-intro {
color: #696969;
font-size: 16px;
line-height: 27px;
max-width: 720px;
margin: 0 auto 30px;
}
.site-theme .spag-loc-meeting-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 30px;
}
/* ---- Coverage / parks grid (with static Google Maps iframes) -------------- */
.site-theme .spag-loc-parks {
background: #f5f7fa;
padding: 84px 0;
}
.site-theme .spag-loc-park {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 38px 0 #dae0e5;
margin-bottom: 26px;
height: 100%;
}
.site-theme .spag-loc-park-map {
line-height: 0;
}
.site-theme .spag-loc-park-map iframe {
width: 100%;
height: 200px;
border: 0;
display: block;
}
.site-theme .spag-loc-form-embed {
line-height: 0;
}
.site-theme .spag-loc-form-embed iframe {
display: block;
width: 100%;
max-width: 720px;
margin: 0 auto;
height: 700px;
border: 0;
}
.site-theme .spag-loc-park-body {
padding: 22px 24px 26px;
}
.site-theme .spag-loc-park-body h3 {
color: #070719;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.site-theme .spag-loc-park-body > p {
color: #696969;
font-size: 15px;
line-height: 24px;
margin-bottom: 14px;
}
.site-theme .spag-loc-meta {
display: flex;
align-items: flex-start;
gap: 10px;
color: #4c5667;
font-size: 14px;
line-height: 22px;
margin-bottom: 8px;
}
.site-theme .spag-loc-meta i {
color: #bc1622;
font-size: 15px;
margin-top: 3px;
flex-shrink: 0;
}
/* ---- Office reference box --------------------------------------------------- */
.site-theme .spag-loc-office {
background: #070719;
border-radius: 12px;
padding: 30px 28px;
}
.site-theme .spag-loc-office h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
}
.site-theme .spag-loc-office-note {
color: #ffba00;
font-size: 14px;
font-style: italic;
margin-bottom: 16px;
}
.site-theme .spag-loc-office .spag-loc-meta {
color: #c7cdd8;
}
.site-theme .spag-loc-office .spag-loc-park-map {
margin-top: 16px;
border-radius: 10px;
overflow: hidden;
}
@media (max-width: 991px) {
.site-theme .spag-loc-figure { margin-top: 28px; }
.site-theme .spag-loc-services .order-lg-1 { margin-top: 28px; }
.site-theme .spag-loc-meeting-list { grid-template-columns: 1fr; }
.site-theme .spag-loc-reference .spag-loc-office { margin-top: 28px; }
}
/* --- Navbar transition (ported from Template 2 / autocare) --- */
.site-theme > .main-header.stricky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #0a132a;
}
@supports (animation-timeline: scroll()) {
.site-theme > .main-header.stricky {
background-color: transparent;
animation: hx-header-solidify linear both;
animation-timeline: scroll(root);
animation-range: 0 160px;
}
.site-theme > .main-header.stricky .header-top {
overflow: hidden;
animation: hx-topbar-collapse linear both;
animation-timeline: scroll(root);
animation-range: 0 120px;
}
}
@keyframes hx-header-solidify {
to {
background-color: #0a132a;
box-shadow: 0 2px 14px rgba(7, 7, 25, 0.28);
}
}
@keyframes hx-topbar-collapse {
from { max-height: 80px; }
to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
}
/* Hero clears the fixed header so the image bleeds up behind it */
.site-theme .spag-hero { position: relative; overflow: hidden; }
.site-theme .spag-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.site-theme .spag-hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(7, 7, 25, 0.62); }
.site-theme .spag-hero-inner { position: relative; z-index: 2; }
/* ---- Dealers & Fleets ------------------------------------------------------ */
.site-theme .spag-dealers {
/* inherits site font (Chakra Petch / Hind) — no font-family override */
}
/* Hero — Trust-Blue overlay tint (overrides the base dark gradient from .spag-detail-hero-overlay) */
.site-theme .spag-dealers-hero .spag-detail-hero-overlay {
background: linear-gradient(90deg, rgba(8, 58, 98, 0.92) 0%, rgba(10, 111, 184, 0.78) 100%);
}
/* Breadcrumb on photo+blue overlay — keep current crumb legible (base colors it red) */
.site-theme .spag-dealers-hero .spag-breadcrumb li:last-child span {
color: rgba(255, 255, 255, 0.75);
}
.site-theme .spag-dealers-hero .spag-breadcrumb a:hover {
color: rgba(255, 255, 255, 1);
}
/* Eyebrow: spag-eyebrow-light already renders light; ensure no left-bar decoration in centered context */
.site-theme .spag-dealers-hero .spag-eyebrow {
padding-left: 0;
text-align: center;
}
.site-theme .spag-dealers-hero .spag-eyebrow::before {
display: none;
}
/* Subhead: white + centered, spacing before the CTA */
.site-theme .spag-dealers-hero .spag-hero-sub {
color: rgba(255, 255, 255, 0.92);
max-width: 640px;
margin: 0 auto 24px;
}
.site-theme .spag-hero-sub {
color: rgba(255, 255, 255, 0.9);
font-size: 17px;
line-height: 1.65;
max-width: 680px;
margin: 0 auto 32px;
}
/* Section base — width/alignment governed by .container/.col-lg-10.offset-lg-1 */
.site-theme .spag-dealers .spag-section {
padding: 72px 0;
}
/* Alternating background (applied to the outer section, not the inner container) */
.site-theme .spag-section-alt {
background: #f5f7fa;
}
.site-theme .spag-section-alt .spag-dealers .spag-section,
.site-theme .spag-dealers .spag-section-alt > .spag-section {
background: transparent;
}
/* Value bullets */
.site-theme .spag-dealers .spag-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.site-theme .spag-dealers .spag-bullets li {
color: #444;
font-size: 16px;
line-height: 1.6;
padding-left: 22px;
position: relative;
}
.site-theme .spag-dealers .spag-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #0A6FB8;
}
.site-theme .spag-dealers .spag-bullets li strong {
color: #070719;
}
/* How-it-works steps */
.site-theme .spag-dealers .spag-steps {
padding-left: 20px;
margin: 20px 0 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.site-theme .spag-dealers .spag-steps li {
color: #333;
font-size: 16px;
line-height: 1.6;
padding-left: 6px;
}
.site-theme .spag-dealers .spag-steps li::marker {
color: #0A6FB8;
font-weight: 700;
}
.site-theme .spag-dealers .spag-also-handle {
color: #555;
font-size: 15px;
line-height: 1.65;
border-left: 3px solid #0A6FB8;
padding-left: 14px;
margin-top: 8px;
}
/* Proof points */
.site-theme .spag-dealers .spag-proof {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.site-theme .spag-dealers .spag-proof li {
color: #444;
font-size: 16px;
line-height: 1.6;
padding-left: 28px;
position: relative;
}
.site-theme .spag-dealers .spag-proof li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #0A6FB8;
font-weight: 700;
font-size: 17px;
}
/* FAQ — dl/dt/dd variant (scoped to .spag-dealers to avoid collision with
the existing .spag-faq section wrapper used on consumer pages) */
.site-theme .spag-dealers .spag-faq {
background: transparent;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.site-theme .spag-dealers .spag-faq div {
border: 1px solid #e0e6ed;
border-radius: 8px;
padding: 20px 24px;
background: #fff;
}
.site-theme .spag-dealers .spag-faq dt {
color: #070719;
font-size: 17px;
font-weight: 700;
margin-bottom: 8px;
}
.site-theme .spag-dealers .spag-faq dd {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.65;
}
/* Final CTA band — h2 uses .spag-section-title.spag-title-light for font/size parity */
.site-theme .spag-dealers .spag-cta-band {
background: #0A6FB8;
padding: 72px 0;
text-align: center;
max-width: 100%;
}
/* Responsive */
@media (max-width: 767px) {
.site-theme .spag-dealers .spag-section {
padding: 48px 0;
}
}
/* ---- Dealers & Fleets form ------------------------------------------------ */
/* Scoped to .spag-dealers — never touches .spag-appointment-box (consumer red). */
.site-theme .spag-dealers .spag-dealer-form-box {
background: #fff;
max-width: 640px;
margin: 0 auto;
padding: 32px;
border-radius: 14px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.site-theme .spag-dealers .spag-dealer-form-box h2 {
margin-bottom: 8px;
}
.site-theme .spag-dealers .spag-dealer-form-box > p {
color: #555;
margin-bottom: 22px;
}
.site-theme .spag-dealers .spag-dealer-form-box .spag-field {
margin-bottom: 14px;
}
.site-theme .spag-dealers .spag-dealer-form-box .form-control.input-text {
display: block;
width: 100%;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 13px 16px;
font-size: 15px;
line-height: 1.5;
color: #070719;
font-family: "Mulish", sans-serif;
box-sizing: border-box;
}
.site-theme .spag-dealers .spag-dealer-form-box input.form-control.input-text {
height: 50px;
}
.site-theme .spag-dealers .spag-dealer-form-box textarea.input-text {
resize: vertical;
min-height: 110px;
}
.site-theme .spag-dealers .spag-dealer-form-box .form-control.input-text:focus {
outline: none;
border-color: #0A6FB8;
box-shadow: 0 0 0 3px rgba(10, 111, 184, 0.15);
}
.site-theme .spag-dealers .spag-form-success {
background: rgba(10, 111, 184, 0.10);
border: 1px solid #0A6FB8;
color: #08436f;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 18px;
font-weight: 600;
}
.site-theme .spag-dealers .spag-form-error {
background: #fdecec;
border: 1px solid #d9534f;
color: #a12d2a;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 18px;
font-weight: 600;
}
@media (max-width: 767px) {
.site-theme .spag-dealers .spag-dealer-form-box {
padding: 20px 16px;
}
}
.site-theme .spag-hero-content { padding-top: 180px; }
/* A2P/TCR SMS consent. Separated from the fields above by a rule so it reads as
its own distinct consent rather than bundled form terms (per the compliance
review). Colour is inherited so one block works on both the red appointment
box and the white contact/dealer forms. */
.site-theme .spag-sms-consent {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid color-mix(in oklch, currentColor 25%, transparent);
}
.site-theme .spag-sms-consent-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: 400;
margin-bottom: 0;
}
.site-theme .spag-sms-consent-label + .spag-sms-consent-label {
margin-top: 14px;
}
.site-theme .spag-sms-consent-box {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3px;
cursor: pointer;
}
/* Sized to match .spag-field-label and rendered at full opacity: A2P/TCR
expects consent to be clear and conspicuous, so it must not read as fine
print set below the form's own labels. */
.site-theme .spag-sms-consent-text {
font-size: 14px;
line-height: 1.6;
}
.site-theme .spag-sms-consent-text a {
color: inherit;
text-decoration: underline;
}
/* Shared Privacy Policy / Terms sentence, rendered once below both checkboxes. */
.site-theme .spag-sms-consent-links {
font-size: 14px;
line-height: 1.6;
margin: 14px 0 0;
}
.site-theme .spag-sms-consent-links a {
color: inherit;
text-decoration: underline;
}
/* Hand-authored legal copy appended under the WP-sourced body. Separated by a
rule so it reads as an addition, not a continuation of the imported text. */
.site-theme .spag-legal-supplement {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid color-mix(in oklch, currentColor 15%, transparent);
}
.site-theme .spag-legal-supplement ul {
padding-left: 20px;
list-style: disc;
}
.site-theme .spag-legal-supplement li {
margin-bottom: 8px;
}