/* ========================================================================== Swift Autos — modern re-skin overlay (2026) Loads AFTER style.css + custom.css and restyles the existing markup. No structural changes: typography, color, depth, motion only. ========================================================================== */ /* Kill horizontal page overflow (decorative hero/footer glows, an oversized mobile-menu logo holder, and a hidden off-screen Roadster session iframe were pushing scrollWidth ~51px past the viewport, letting the page swipe sideways to reveal white space). Fixed FABs are relative to the viewport, not the body, so this does not clip the WhatsApp button. */ html, body { max-width: 100%; } :root { --sa-orange: #F36609; --sa-orange-hot: #FF7A1A; --sa-orange-deep: #D95400; --sa-ink: #0E1217; --sa-ink-soft: #1A2129; --sa-body: #3D4654; --sa-muted: #76808F; --sa-surface: #F6F7F9; --sa-line: #E6E9EE; --sa-radius: 18px; --sa-radius-pill: 999px; --sa-shadow-sm: 0 1px 2px rgba(14, 18, 23, .05), 0 4px 12px rgba(14, 18, 23, .06); --sa-shadow-lg: 0 6px 16px rgba(14, 18, 23, .10), 0 24px 48px rgba(14, 18, 23, .12); --sa-font-display: 'Clash Display', 'Archivo', sans-serif; --sa-font-body: 'Archivo', 'Helvetica Neue', sans-serif; } /* -------------------------------------------------------------------------- Foundation -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* nothing may widen the page past the viewport (mobile rubber-banding, clipped right edge) — decorative offsets are clipped instead. NOTE: this MUST stay on only, never . overflow-x on makes it a second vertical scroll container (overflow-y coerces to auto), which shows a DOUBLE right-hand scrollbar on Windows. `clip` avoids the coercion in modern browsers; `hidden` is the old-browser fallback. */ body { overflow-x: hidden; overflow-x: clip; } body { font-family: var(--sa-font-body) !important; color: var(--sa-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sa-orange); color: #fff; } h1, h2, h3, h4, h5, h6, .site-title, .widecolumn h2, .man-with-car-section h2, .left-single-cont h1 { font-family: var(--sa-font-display) !important; font-weight: 600; letter-spacing: -0.015em; color: var(--sa-ink); } p { line-height: 1.7; } /* Thin modern scrollbar */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--sa-surface); } ::-webkit-scrollbar-thumb { background: #C3CAD4; border-radius: 8px; border: 3px solid var(--sa-surface); } ::-webkit-scrollbar-thumb:hover { background: var(--sa-orange); } /* -------------------------------------------------------------------------- Header / navigation — dark glass bar -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 9990; background: rgba(13, 16, 21, .82) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } .main-navigation li a, #menu-main-menu li a { font-family: var(--sa-font-body) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: .12em; text-transform: uppercase; position: relative; transition: color .18s ease; } .main-navigation li a:hover, #menu-main-menu li a:hover { color: var(--sa-orange-hot) !important; } /* animated underline on nav links */ #menu-main-menu > li > a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; background: linear-gradient(90deg, var(--sa-orange-hot), var(--sa-orange-deep)); border-radius: 2px; transition: width .22s ease, left .22s ease; } #menu-main-menu > li > a:hover::after, #menu-main-menu > li.current-menu-item > a::after { width: 60%; left: 20%; } /* "Lease by Make" kept in the DOM for SEO but hidden from sighted users. Off-screen (not display:none) so the brand links stay crawlable/followable. */ #menu-main-menu > li.sa-nav-seo-only, .main-navigation li.sa-nav-seo-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; } /* dropdown panels */ .main-navigation ul ul { background: rgba(15, 19, 25, .96) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; box-shadow: var(--sa-shadow-lg); } /* LEASE BY MAKE — two-column makes panel with a shop CTA footer */ @media screen and (min-width: 910px) { .main-navigation ul ul:before, .main-navigation ul ul:after { display: none !important; } .main-navigation .mh-make-menu > ul.sub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; width: 400px; padding: 14px !important; border-radius: 16px; overflow: visible; background: #1B222C !important; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); } .main-navigation .mh-make-menu .sub-menu li { background: transparent !important; border: none !important; margin: 0 !important; } .main-navigation .mh-make-menu .sub-menu li a, .main-navigation .mh-make-menu .sub-menu li a:link, .main-navigation .mh-make-menu .sub-menu li a:visited { display: block; width: auto !important; padding: 11px 14px !important; border-radius: 10px; font-size: 13px !important; font-weight: 700 !important; color: #FFFFFF !important; background: rgba(255, 255, 255, .08); transition: background .15s ease, color .15s ease, transform .15s ease; } .main-navigation .mh-make-menu .sub-menu li a:hover { background: rgba(243, 102, 9, .16); color: #fff !important; transform: translateX(2px); } .main-navigation .mh-make-menu .sub-menu li.mh-more-makes { grid-column: 1 / -1; margin-top: 10px !important; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09) !important; } .main-navigation .mh-make-menu .sub-menu li.mh-more-makes a { text-align: center; background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)) !important; color: #fff !important; border-radius: 999px; font-weight: 700 !important; letter-spacing: .1em; box-shadow: 0 6px 18px rgba(243, 102, 9, .35); } .main-navigation .mh-make-menu .sub-menu li.mh-more-makes a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(243, 102, 9, .5); } } /* phone moved to the far right of the nav as a clean call CTA */ #site-header-menu { display: flex; align-items: center; } .site-header-phone { display: inline-flex; align-items: center; gap: 9px; margin-left: 30px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--sa-radius-pill); font: 700 14.5px/1 var(--sa-font-body) !important; letter-spacing: .02em; color: #fff !important; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .site-header-phone i { color: var(--sa-orange-hot); font-size: 14px; } .site-header-phone:hover { background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)); border-color: transparent; color: #fff !important; transform: translateY(-1px); } .site-header-phone:hover i { color: #fff; } @media (max-width: 909px) { .site-header-phone { display: none; } } /* phone + credit application strip */ .mob-header .sel1 a { font-weight: 700; letter-spacing: .04em; transition: color .18s ease; } .mob-header .sel1 a:hover { color: var(--sa-orange-hot); } .mob-header .sel2 a, .area-credit-btn a { background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)) !important; border-radius: var(--sa-radius-pill) !important; font-weight: 700 !important; letter-spacing: .08em; box-shadow: 0 6px 18px rgba(243, 102, 9, .35); transition: transform .18s ease, box-shadow .18s ease; } .mob-header .sel2 a:hover, .area-credit-btn a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(243, 102, 9, .5); } /* -------------------------------------------------------------------------- Hero (Revolution Slider) — bigger type, gradient scrim, pill CTA -------------------------------------------------------------------------- */ #rev_slider_1_1_wrapper rs-module::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, rgba(8, 10, 14, .72) 0%, rgba(8, 10, 14, .35) 45%, rgba(8, 10, 14, 0) 70%), linear-gradient(0deg, rgba(8, 10, 14, .55) 0%, rgba(8, 10, 14, 0) 30%); } #slider-1-slide-1-layer-1 { font-family: var(--sa-font-display) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; text-shadow: 0 10px 40px rgba(0, 0, 0, .45); } #slider-1-slide-1-layer-2 { font-family: var(--sa-font-body) !important; font-weight: 700 !important; } a.lease-btn { font-family: var(--sa-font-body) !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)) !important; border: none !important; border-radius: var(--sa-radius-pill) !important; padding: 16px 38px !important; box-shadow: 0 8px 24px rgba(243, 102, 9, .45); transition: transform .18s ease, box-shadow .18s ease; } a.lease-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px rgba(243, 102, 9, .6); color: #fff !important; } /* -------------------------------------------------------------------------- Buttons — one consistent pill language everywhere -------------------------------------------------------------------------- */ .leas-button, .deals-cta.row a, .vc_btn3.vc_btn3-style-modern, .vc_btn3.vc_btn3-style-classic, button.vc_btn3, .get-in-touch-form input[type="submit"], .wpcf7 input[type="submit"], .ctct-form-button { background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)) !important; color: #fff !important; border: none !important; border-radius: var(--sa-radius-pill) !important; font-family: var(--sa-font-body) !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(243, 102, 9, .32); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .leas-button:hover, .deals-cta.row a:hover, .vc_btn3:hover, .get-in-touch-form input[type="submit"]:hover, .wpcf7 input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(243, 102, 9, .48); color: #fff !important; } /* -------------------------------------------------------------------------- Sections — air, hierarchy, surface alternation -------------------------------------------------------------------------- */ #about_us, #advantage_sec, #faq_sec { padding-top: 40px; padding-bottom: 40px; } /* big section titles */ .wpb_content_element h2, #deals_sec h2, #faq_sec h2, #contact_us h2, .deal-page h1 { font-family: var(--sa-font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* orange kicker bar under section headings that already use one keeps working; give generic h2s a refined size bump on large screens */ @media (min-width: 992px) { .wpb_content_element h2 { font-size: 38px; } } /* brand logo carousel — flat, calm */ .brands { background: var(--sa-surface); border-top: 1px solid var(--sa-line); border-bottom: 1px solid var(--sa-line); } .brands_item img { filter: grayscale(1) opacity(.55); transition: filter .25s ease, transform .25s ease; } .brands_item:hover img { filter: grayscale(0) opacity(1); transform: scale(1.06); } .brands_nav { border-radius: 50%; background: #fff !important; border: 1px solid var(--sa-line); box-shadow: var(--sa-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .brands_nav:hover { transform: scale(1.08); box-shadow: var(--sa-shadow-lg); } /* old-style deal boxes (brand pages etc.) */ .deals-section, .deal-page .deals-section { background: #fff; border: 1px solid var(--sa-line) !important; border-radius: var(--sa-radius) !important; overflow: hidden; box-shadow: var(--sa-shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .deals-section:hover { transform: translateY(-5px); box-shadow: var(--sa-shadow-lg); } /* owl carousel dots / arrows */ .owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; background: #CBD2DB; transition: width .2s ease, background .2s ease; } .owl-theme .owl-dots .owl-dot.active span { width: 26px; border-radius: 6px; background: var(--sa-orange); } /* counters (advantage section) */ .counter-section { border-radius: var(--sa-radius); } /* FAQ accordion (WPBakery tta) */ .vc_tta.vc_general .vc_tta-panel { margin-bottom: 12px !important; } .vc_tta.vc_general .vc_tta-panel-heading { background: #fff !important; border: 1px solid var(--sa-line) !important; border-radius: 14px !important; box-shadow: var(--sa-shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; } .vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-heading, .vc_tta.vc_general .vc_tta-panel-heading:hover { border-color: var(--sa-orange) !important; } .vc_tta.vc_general .vc_tta-panel-title > a { font-family: var(--sa-font-body) !important; font-weight: 600 !important; color: var(--sa-ink) !important; } .vc_tta.vc_general .vc_tta-panel-body { background: var(--sa-surface) !important; border: 1px solid var(--sa-line) !important; border-top: none !important; border-radius: 0 0 14px 14px !important; } /* -------------------------------------------------------------------------- Forms — rounded fields, orange focus ring -------------------------------------------------------------------------- */ .get-in-touch-form input:not([type="submit"]), .get-in-touch-form textarea, .get-in-touch-form select, .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 textarea, .wpcf7 select { background: #fff !important; border: 1.5px solid var(--sa-line) !important; border-radius: 12px !important; padding: 12px 16px !important; font-family: var(--sa-font-body) !important; color: var(--sa-ink) !important; transition: border-color .18s ease, box-shadow .18s ease; } .get-in-touch-form input:focus, .get-in-touch-form textarea:focus, .wpcf7 input:focus, .wpcf7 textarea:focus { outline: none !important; border-color: var(--sa-orange) !important; box-shadow: 0 0 0 4px rgba(243, 102, 9, .15) !important; } /* -------------------------------------------------------------------------- Credit Application — modern polish + fix the $ overlap on money fields -------------------------------------------------------------------------- */ /* the whole form sits on a clean card */ .page-id-259 .site-content { background: #F6F7F9; } .page-id-259 form.wpcf7-form { background: #fff; max-width: 1040px; margin: 10px auto 30px; padding: 34px 36px 30px; border: 1px solid var(--sa-line); border-radius: 20px; box-shadow: var(--sa-shadow-sm); } .credit-form label { font: 700 11.5px/1.5 var(--sa-font-body) !important; letter-spacing: .09em; text-transform: uppercase; color: #5A6473 !important; } /* "Employment Information" divider */ h4.credit-info { font: 600 22px/1.2 var(--sa-font-display) !important; color: var(--sa-ink) !important; border-top: 1px solid var(--sa-line); padding-top: 26px !important; margin-top: 14px !important; } /* $ prefix: anchor it to the field wrap, vertically centre it, and pad the input so the placeholder / typed text never sits on top of it. Selectors are deliberately specific to outrank the global .wpcf7 input rule. */ .page-id-259 .currency-parent span.wpcf7-form-control-wrap { position: relative !important; display: block !important; } .page-id-259 .currency-parent span.wpcf7-form-control-wrap::before { content: '$'; top: 0 !important; bottom: 0 !important; left: 16px !important; transform: translateY(2px) !important; display: flex !important; align-items: center !important; font-size: 15px !important; line-height: 1 !important; color: #76808F !important; z-index: 2; } .page-id-259 form.wpcf7-form .currency-parent input.currency-class { padding-left: 30px !important; } /* license upload fields read as drop zones */ .credit-form input[type="file"] { width: 100%; background: #F6F7F9 !important; border: 1.5px dashed #CBD2DB !important; border-radius: 12px !important; padding: 14px 16px !important; cursor: pointer; color: #5A6473 !important; } .credit-form input[type="submit"] { margin-top: 14px !important; } /* -------------------------------------------------------------------------- Swift Deals grid — align plugin cards with the new language -------------------------------------------------------------------------- */ .sd-card { border-radius: var(--sa-radius); border-color: var(--sa-line); } .sd-title { font-family: var(--sa-font-body) !important; letter-spacing: -0.005em; } /* Price number: distinctive display face, still orange + bold. */ .sd-price { font-family: var(--sa-font-display) !important; font-weight: 700 !important; letter-spacing: -0.01em; } .sd-price small { font-family: var(--sa-font-body) !important; font-weight: 600 !important; } /* Give the lease terms room to breathe above the CTA. */ .sd-terms { margin-bottom: 18px !important; } /* Make every deal card obviously tappable: a full-width primary CTA button instead of a small corner pill, an image zoom + button glow on hover, and an explicit pointer cursor. */ .sd-card { cursor: pointer; } .sd-card-img img { transition: transform .25s ease; } .sd-card:hover .sd-card-img img { transform: scale(1.045); } .sd-cta { align-self: stretch !important; margin-top: auto !important; text-align: center; background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)) !important; color: #fff !important; padding: 15px 24px !important; font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: .02em; border-radius: 999px !important; box-shadow: 0 10px 22px rgba(243, 102, 9, .30), inset 0 1px 0 rgba(255, 255, 255, .28) !important; transition: box-shadow .18s ease, transform .18s ease; } .sd-card:hover .sd-cta { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(243, 102, 9, .46), inset 0 1px 0 rgba(255, 255, 255, .3) !important; } /* Per request: keep the card CTA button on the home deals grid, but remove it from the /deals/ page (those cards are still fully clickable). */ .deal-page .sd-cta { display: none !important; } /* Home hero featured-deal: a clear "Get This Deal" button in the price chip so the big top car reads as tappable, like the deal cards. */ .mh-price-chip-cta { display: block; margin-top: 11px; text-align: center; background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)); color: #fff !important; font: 700 13px/1 var(--sa-font-body); letter-spacing: .02em; padding: 11px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(243, 102, 9, .3); transition: box-shadow .18s ease, transform .18s ease; } .mh-hero-car:hover .mh-price-chip-cta { box-shadow: 0 12px 26px rgba(243, 102, 9, .45); } /* -------------------------------------------------------------------------- Footer — deep ink, quiet text, orange hovers -------------------------------------------------------------------------- */ .sa-footer { position: relative; background: linear-gradient(180deg, #11161D 0%, #0B0E13 100%) !important; color: #9AA4B2; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .06); } .sa-footer-glow { position: absolute; left: -180px; top: -220px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(243, 102, 9, .12), transparent 62%); pointer-events: none; } .sa-footer-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 56px 24px 26px; } .sa-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); } /* brand column */ .sa-footer-logo img { height: 46px; width: auto; margin-bottom: 18px; } .sa-footer-tagline { font: 400 14.5px/1.7 var(--sa-font-body); color: #8B95A5; max-width: 340px; margin: 0 0 22px; } .sa-footer-social { display: flex; gap: 10px; } .sa-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #C7CEDA !important; font-size: 15px; transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease; } .sa-footer-social a:hover { background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)); border-color: transparent; color: #fff !important; transform: translateY(-3px); } /* link + contact columns */ .sa-footer-col h4 { font: 700 12px/1 var(--sa-font-body) !important; letter-spacing: .18em; text-transform: uppercase; color: #fff !important; margin: 0 0 18px; } .sa-footer-col ul { list-style: none; margin: 0; padding: 0; } .sa-footer-col li { margin-bottom: 11px; } .sa-footer-col ul a { font: 500 14.5px/1.3 var(--sa-font-body); color: #9AA4B2 !important; text-decoration: none !important; transition: color .15s ease, padding-left .15s ease; } .sa-footer-col ul a:hover { color: var(--sa-orange-hot) !important; padding-left: 4px; } .sa-footer-line { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; font: 500 14.5px/1.5 var(--sa-font-body); color: #C7CEDA !important; text-decoration: none !important; transition: color .15s ease; } .sa-footer-line i { color: var(--sa-orange); font-size: 14px; margin-top: 3px; width: 16px; text-align: center; flex-shrink: 0; } .sa-footer-line:hover { color: #fff !important; } .sa-footer-credit { display: inline-block; margin-top: 8px; background: linear-gradient(135deg, var(--sa-orange-hot), var(--sa-orange-deep)); color: #fff !important; font: 700 12.5px/1 var(--sa-font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; padding: 13px 22px; border-radius: 999px; box-shadow: 0 6px 18px rgba(243, 102, 9, .35); transition: transform .18s ease, box-shadow .18s ease; } .sa-footer-credit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(243, 102, 9, .5); color: #fff !important; } /* bottom bar */ .sa-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; font: 500 13px/1.4 var(--sa-font-body); color: #6B7585; } .sa-footer-bottom-links { display: flex; gap: 22px; } .sa-footer-bottom-links a { color: #6B7585 !important; text-decoration: none !important; transition: color .15s ease; } .sa-footer-bottom-links a:hover { color: var(--sa-orange-hot) !important; } @media (max-width: 860px) { .sa-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; } .sa-footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .sa-footer-grid { grid-template-columns: 1fr; gap: 32px; } .sa-footer-inner { padding: 44px 22px 22px; } .sa-footer-bottom { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- Imagery & misc polish -------------------------------------------------------------------------- */ .entry-content img, .wpb_single_image img, .big-car-img img, .product-single-img img { border-radius: var(--sa-radius); } /* back-to-top / misc fixed buttons inherit pill look */ #toTop, .to-top, .back-to-top { border-radius: 50% !important; background: var(--sa-ink) !important; box-shadow: var(--sa-shadow-lg); } /* keyboard focus visibility, sitewide */ a:focus-visible, button:focus-visible { outline: 3px solid rgba(243, 102, 9, .5); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- Mobile menu (WP Mobile Menu / "mobmenu" slide-out) cleanup The plugin renders its OWN fixed bar + a duplicate of the primary menu (#mobmenuleft.wp-mobile-menu), so the desktop .main-navigation rules don't reach it. Three fixes here: hide the SEO-only "Lease by Make" branch in the mobile list, swap the white-background JPG logo for the transparent PNG, and kill the leftover legacy top gap above the hero. -------------------------------------------------------------------------- */ /* 1) "Lease by Make" stays in the page source for SEO (the off-screen copy in the hidden desktop #masthead), but must not appear in the mobile menu. The visible "SHOP" item the filter injects is kept. */ #mobmenuleft .sa-nav-seo-only, .wp-mobile-menu .sa-nav-seo-only, .mobmenu .sa-nav-seo-only { display: none !important; } /* 2) Mobile bar logo: the plugin's "standard logo" is a white-background JPG, which paints a white box on the dark bar. Swap it for the site's transparent PNG (root-relative so it works on every domain) and center it vertically in the ~50px bar so it isn't jammed against the top edge. */ .mob-menu-logo-holder { display: flex !important; align-items: center; justify-content: center; height: 50px; } img.mob-standard-logo { content: url('/wp-content/uploads/2018/06/logo.png'); height: 28px !important; width: auto !important; } /* 3) Legacy mobile spacing pushed the page 110–140px down to clear an old, tall header. The current mobile bar is ~50px and its clearance already comes from the body offset, so drop the extra margin → no white gap. */ @media only screen and (max-width: 768px) { .home div#page, body.home #page.site { margin-top: 0 !important; } } /* 4) Nav underline bar: WordPress marks several same-target custom links (HOME, ABOUT, etc.) as "current" at once, so the orange ::after bar appeared under some items and not others. Remove it entirely — the hover/active color change is enough. */ #menu-main-menu > li > a::after, #menu-main-menu > li > a:hover::after, #menu-main-menu > li.current-menu-item > a::after { display: none !important; } /* 5) Inner-page top spacing: non-home pages (deals, credit, brand, model…) carried 160–240px of legacy #page padding sized for the OLD tall fixed header, which now shows as a big white gap under the ~50px mobile bar (the bar is already cleared by the body offset). Zero it on mobile so content sits right under the bar, matching the home page. */ @media only screen and (max-width: 768px) { body #page.site { padding-top: 0 !important; } } /* ============================================================ MOBILE CLEANUP (<=768px) — keep the desktop look, fix the things that make the phone view feel like a squished desktop. ============================================================ */ @media (max-width: 768px) { /* 1) The fixed orange "Contact Us" side tab (.icon-bar) sits on top of cards, form fields and CTA buttons on every page. Hide it on phones — contact links already live in the menu, footer and on each page's own contact section. */ .icon-bar { display: none !important; } /* 2) Home hero stat numbers (10+ / 1000+ / $0) were being forced to 6px by a leftover #home_sec strong rule from the old slider hero, so only the labels showed. Restore a readable size. */ #home_sec .mh-hero-stats strong { font-size: 22px !important; line-height: 1 !important; } /* 3) The brand-page deals modal auto-opens after 3s; its Bootstrap backdrop renders solid opaque black (it uses .show while the dim rule targets .in), so phones got a black screen, and the modal itself is clunky on a small viewport. Suppress it on phones and restore page scrolling (Bootstrap locks body scroll while open). Desktop is unaffected. */ #dealsModal, .modal-backdrop { display: none !important; } body.modal-open { overflow: auto !important; padding-right: 0 !important; } /* 4) Model-page CTA buttons are inline s with a background; when the longer phrasing wraps to two lines on a phone the background breaks across lines and clips the text. Render them as solid blocks. */ .lease-a-honda a, .lease-a-honda.by.the.way a, .btn-get-honda-lease { display: inline-block !important; line-height: 1.4 !important; } } /* ============================================================ HOME HERO featured-deal slider — swipe + cleaner mobile dots ============================================================ */ /* Anchor the floating price chip to the car image instead of the whole slider, so on short mobile images it no longer overlaps (and hides) the dots/arrow row sitting below the image. */ .mh-hero-link { position: relative; } /* Allow a horizontal swipe gesture while keeping vertical page scroll. */ .mh-hero-slider { touch-action: pan-y; } @media (max-width: 768px) { /* Phones: drop the arrows entirely (the left one sat behind the price chip anyway). The slider is swipeable and the dots show position. */ .mh-hero-arrow { display: none !important; } .mh-hero-controls { margin-top: 16px; } } /* ============================================================ Mobile bar: vertically center the hamburger icon ============================================================ */ /* The WP Mobile Menu hamburger glyph was top-aligned in the 50px bar (center at ~15px) while the logo centers at 25px, so they looked misaligned. Center the icon in its holder to match the logo. */ @media (max-width: 768px) { .mobmenul-container { display: flex !important; align-items: center; height: 50px; } } /* ============================================================ Home hero: restore the bold "swift" word + tighten mobile top ============================================================ */ @media (max-width: 768px) { /* The legacy "#home_sec strong { font-size: 6px }" rule (from the old slider) also shrank the bold "swift" in the hero subtext to near nothing. Match it to the surrounding paragraph text. */ #home_sec .mh-hero-sub strong { font-size: inherit !important; } /* Trim the oversized gap between the top bar and the NY/NJ/CT chip: the section padding (54px) and the grid padding (40px) stacked to ~94px. Pull it in to a tidy ~24px. */ #home_sec { padding-top: 10px; } #home_sec .mh-hero-grid { padding-top: 14px; } } /* ============================================================ Mobile slide-out menu — dark glass, on-brand (orange/ink) The WP Mobile Menu drawer shipped as a plain light-grey panel with grey Dosis text, which clashed with the dark/orange site. Restyle it to match the header: dark glass, white uppercase items, orange accents. ============================================================ */ @media (max-width: 768px) { /* Panel: dark glass instead of plain white */ .mobmenu-panel, .mobmenu-left-alignment { background: rgba(13, 16, 21, .985) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-right: 1px solid rgba(255, 255, 255, .08); box-shadow: 26px 0 70px rgba(0, 0, 0, .55); } .mobmenu-content { padding-top: 8px; } /* "Menu" eyebrow at the top of the panel */ #mobmenuleft.wp-mobile-menu::before { content: "Menu"; display: block; font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #F36609; padding: 6px 28px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); } /* Menu list */ #mobmenuleft.wp-mobile-menu { padding: 4px 0 26px !important; } #mobmenuleft > li { border-bottom: 1px solid rgba(255, 255, 255, .055); } #mobmenuleft > li:last-child { border-bottom: none; } #mobmenuleft > li > a { color: #E6EAF0 !important; font-family: 'Archivo', 'Helvetica Neue', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .15em; text-transform: uppercase; padding: 17px 28px !important; position: relative; transition: color .16s ease, background .16s ease, padding-left .16s ease; } /* hover / tap: orange wash + left accent bar */ #mobmenuleft > li > a:hover, #mobmenuleft > li > a:active { color: #fff !important; background: linear-gradient(90deg, rgba(243, 102, 9, .18), rgba(243, 102, 9, 0)) !important; box-shadow: inset 4px 0 0 #FF7A1A; padding-left: 32px !important; } /* submenu links (if ever shown) — dimmer + indented */ #mobmenuleft .sub-menu a, #mobmenuleft ul ul a { color: #AAB2BF !important; font-size: 13px !important; letter-spacing: .08em; padding-left: 40px !important; } /* Close (X) — orange, larger tap target, top-right */ .mob-icon-cancel-1, .mob-cancel-button { color: #FF7A1A !important; font-size: 26px !important; opacity: .95; transition: transform .18s ease, opacity .18s ease; } .mob-icon-cancel-1:hover, .mob-cancel-button:hover { transform: rotate(90deg); opacity: 1; } } /* ------------------------------------------------------------ Fix: the slide-out panel sits flush at the viewport's left edge when closed (translateX(-100%)), so its drop shadow bled rightward onto the page as a black haze. Only cast the shadow once the panel is actually open (.show-panel). ------------------------------------------------------------ */ @media (max-width: 768px) { .mobmenu-panel, .mobmenu-left-alignment { box-shadow: none !important; } .mobmenu-panel.show-panel, .mobmenu-left-alignment.show-panel { box-shadow: 26px 0 70px rgba(0, 0, 0, .45) !important; } } /* ------------------------------------------------------------ Fix: menu items needed a double-tap on phones. The :hover accent (background + padding shift) made touch browsers treat the first tap as a "hover preview" and only navigate on the second tap. On touch devices (hover: none) neutralize the :hover state so the first tap navigates; :active still gives tap feedback and desktop mouse hover is unchanged. ------------------------------------------------------------ */ @media (hover: none) { #mobmenuleft > li > a:hover { color: #E6EAF0 !important; background: transparent !important; box-shadow: none !important; padding-left: 28px !important; } } /* -------------------------------------------------------------------------- Mobile horizontal-overflow fixes (2026-07-10) Symptom: the site could be swiped side-to-side on mobile, revealing blank space (page wider than the viewport). Cause 1 (SITE-WIDE): custom.css sets `footer#colophon { position: inherit }` inside @media (max-width:909px). That ID rule outranks modern.css's `.sa-footer { position: relative }`, so on mobile the footer drops to `static` and its own `overflow:hidden` stops containing the absolutely- positioned `.sa-footer-glow`. The glow then resolves against the initial containing block and pushes ~60px past the viewport. `overflow-x` on can't catch it because the overflow lands on . Re-assert the footer as a containing block at higher specificity than that ID rule. (Harmless at all widths — the footer is already `relative` on desktop.) -------------------------------------------------------------------------- */ footer#colophon.sa-footer { position: relative; } /* Cause 2 (/deals/ only): two Bootstrap `.row`s sit as direct children of `.site-content`, which has no horizontal padding, so their -15px gutter margins leak 15px past the viewport edge on narrow screens. Zero the leak on mobile; the inner columns keep their own padding, so the layout simply gains a small even gutter instead of overflowing. */ @media (max-width: 767px) { .site-content > .row { margin-left: 0; margin-right: 0; } }