/* Theme Name: Vehica Child Theme URI: https://vehicatheme.com/ Author: TangibleDesign Author URI: https://tangibledesign.net/ Description: Vehica Template: vehica Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: translation-ready Text Domain: vehica */ /* =================================================================== Car card customizations (child theme only) =================================================================== */ /* Subtle lift + shadow on hover for the whole card (dark card: #222732) */ .vehica-car-card__inner { transition: box-shadow .25s ease, transform .25s ease; } @media (min-width: 1023px) { .vehica-car-card__inner:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .28); transform: translateY(-4px); } } /* Cleaner title: allow two lines instead of hard truncation */ .vehica-car-card__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 42px; } /* "Get Approved" / "Schedule Test Drive" buttons (base styles are inline; these add interaction states inline styles can't express). */ .am-btn { transition: filter .18s ease, box-shadow .18s ease, transform .05s ease !important; cursor: pointer; } .am-btn--approve:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .am-btn--approve:active { transform: translateY(1px); } .am-btn--testdrive:hover { background-color: var(--primary, #e8a33d) !important; color: #fff !important; } /* Schedule Test Drive intentionally hidden for now. Delete this rule (and the inline display:none in card_v2.php) to bring it back. */ .am-btn--testdrive.am-hidden { display: none !important; } /* =================================================================== "Get Approved" Gravity Forms popup (modal in wp_footer) =================================================================== */ .am-modal { position: fixed; inset: 0; z-index: 99999; display: none; } .am-modal.am-modal--open { display: block; } /* Lock the page behind the popup; only the dialog scrolls. Toggled on by the modal JS (class am-no-scroll). */ html.am-no-scroll, html.am-no-scroll body { overflow: hidden !important; } .am-modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); } .am-modal__dialog { position: relative; background: #fff; width: calc(100% - 32px); max-width: 640px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 5vh auto; padding: 34px 34px 28px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } .am-modal__close { position: absolute; top: 8px; right: 14px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: #999; cursor: pointer; } .am-modal__close:hover { color: #222; } /* Header */ .am-modal__header { text-align: center; margin: 0 0 22px; padding: 0 20px; } .am-modal__title { margin: 0 0 6px; font-size: 27px; font-weight: 800; line-height: 1.15; color: #111; } .am-modal__subtitle { margin: 0; font-size: 15px; color: #6b7280; } /* Vehicle block: photo (left) + name (right) */ .am-modal__vehicle { display: flex; align-items: center; gap: 22px; margin: 0 0 24px; } .am-modal__vehicle-photo { flex: 0 0 46%; max-width: 46%; } .am-modal__vehicle-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; } .am-modal__vehicle-name { flex: 1 1 auto; text-align: center; font-size: 23px; font-weight: 800; line-height: 1.25; color: #111; } /* No photo → just the centered name */ .am-modal__vehicle--no-photo { justify-content: center; } .am-modal__vehicle--no-photo .am-modal__vehicle-name { flex: 0 1 auto; } /* ---- Gravity Forms tidy-up (shared by the modal AND the inline form) ---- Keyed off the shared .am-gf-styled wrapper class so BOTH #am-approve-modal and #am-inline-approve get identical field styling. Specificity drops from (id+class) to (class+class) but these rules are !important, so no change. */ .am-gf-styled .gform_wrapper, .am-gf-styled .gform_wrapper form { margin: 0 !important; } /* Stack all fields full width, even GF's grid columns */ .am-gf-styled .gform_fields { display: block !important; grid-template-columns: none !important; } .am-gf-styled .gfield { margin: 0 0 14px !important; padding: 0 !important; width: 100% !important; } /* Mobile: stacked labels + boxes need more air between consecutive fields */ @media (max-width: 782px) { .am-gf-styled .gfield, .am-gf-styled .gform_wrapper fieldset.gfield { margin: 0 0 20px !important; } .am-gf-styled .gform_wrapper .gfield_label, .am-gf-styled .gform_wrapper .gform-field-label--type-sub { margin: 0 0 8px !important; } } /* Hidden-field wrappers (lead id / Vehicle / VIN / Stock) are invisible but still .gfield divs — without this they collect the field margins above and stack up as phantom vertical space in the form. */ .am-gf-styled .gform_wrapper .gfield.gform_hidden, .am-gf-styled .gform_wrapper .gfield--type-hidden, .am-gf-styled .gform_wrapper .gfield--input-type-hidden { margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } /* Field labels — visible above each input. Covers simple-field labels AND the Name field's First/Last sub-labels. */ .am-gf-styled .gform_wrapper .gfield_label, .am-gf-styled .gform_wrapper .gform-field-label--type-sub { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 0 6px !important; padding: 0 !important; clip: auto !important; overflow: visible !important; white-space: normal !important; font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; } /* Hide the redundant complex-field legend ("Name") — First/Last sub-labels cover it. display:none (not sr-only clip) so it can't overlap the First Name label. Must come AFTER the rule above to win (same specificity, source order). */ .am-gf-styled .gform_wrapper .gfield_label_before_complex { display: none !important; } /* Reset the
GF wraps complex fields (Name, Address…) in — removes the default browser border/box, but keeps field spacing below. */ .am-gf-styled .gform_wrapper fieldset { border: 0 !important; margin: 0 0 14px !important; padding: 0 !important; min-width: 0 !important; } /* Name field: First | Last side by side; stacks on mobile */ .am-gf-styled .gform_wrapper .ginput_container_name { display: flex !important; gap: 12px; grid-template-columns: none !important; } .am-gf-styled .gform_wrapper .ginput_container_name > span { flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; } /* Inputs / selects / textareas */ .am-gf-styled .gform_wrapper input[type="text"], .am-gf-styled .gform_wrapper input[type="email"], .am-gf-styled .gform_wrapper input[type="tel"], .am-gf-styled .gform_wrapper input[type="number"], .am-gf-styled .gform_wrapper input[type="url"], .am-gf-styled .gform_wrapper textarea, .am-gf-styled .gform_wrapper select { width: 100% !important; box-sizing: border-box !important; padding: 14px 16px !important; border: 1px solid #dcdfe3 !important; border-radius: 8px !important; background: #fff !important; color: #222 !important; font-size: 15px !important; line-height: 1.3 !important; transition: border-color .15s ease, box-shadow .15s ease; } .am-gf-styled .gform_wrapper textarea { min-height: 110px; } .am-gf-styled .gform_wrapper input:focus, .am-gf-styled .gform_wrapper textarea:focus, .am-gf-styled .gform_wrapper select:focus { outline: 0 !important; border-color: var(--primary, #e8a33d) !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) !important; } .am-gf-styled .gform_wrapper ::placeholder { color: #9aa1ab; opacity: 1; } /* Consent / checkbox row */ .am-gf-styled .gform_wrapper .gfield_consent_label, .am-gf-styled .gform_wrapper .gchoice label, .am-gf-styled .gform_wrapper .gfield--type-consent label, .am-gf-styled .gform_wrapper .gfield--type-checkbox .gchoice label, .am-gf-styled .gform_wrapper .gfield_description:not(.validation_message) { font-size: 13px; line-height: 1.45; color: #6b7280; font-weight: 400; } /* Agreement checkbox: box + disclosure text flow together on ONE line (the description is reordered after the checkbox via flex). Applies to the popup and stacked forms; the inline layout has its own copy. */ .am-gf-styled .gform_wrapper .gfield--type-checkbox { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; } .am-gf-styled .gform_wrapper .gfield--type-checkbox .ginput_container_checkbox { order: 1; /* shrinkable (0 1) so a LONG choice label wraps inside the box instead of overflowing; doesn't grow, so a separate description still sits beside */ flex: 0 1 auto; min-width: 0; } /* Box + label as a flex pair: label text wraps next to the checkbox */ .am-gf-styled .gform_wrapper .gfield--type-checkbox .gchoice { display: flex; align-items: flex-start; gap: 8px; } .am-gf-styled .gform_wrapper .gfield--type-checkbox .gchoice input[type="checkbox"] { flex: none; margin-top: 2px; } .am-gf-styled .gform_wrapper .gfield--type-checkbox .gchoice label { flex: 1 1 auto; min-width: 0; white-space: normal; } .am-gf-styled .gform_wrapper .gfield--type-checkbox .gfield_description:not(.validation_message) { order: 2; flex: 1 1 200px; margin: 0; padding: 0; } .am-gf-styled .gform_wrapper .gfield--type-checkbox .validation_message { order: 3; flex: 1 1 100%; } /* Submit button */ .am-gf-styled .gform_footer { margin: 18px 0 0 !important; padding: 0 !important; } .am-gf-styled .gform_footer input[type="submit"], .am-gf-styled .gform_wrapper .gform_button { width: 100% !important; padding: 15px 20px !important; border: 0 !important; border-radius: 8px !important; background: var(--primary, #e8a33d) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .am-gf-styled .gform_footer input[type="submit"]:hover, .am-gf-styled .gform_wrapper .gform_button:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } /* Validation messages */ .am-gf-styled .gform_wrapper .gfield_description.validation_message, .am-gf-styled .gform_wrapper .validation_message { font-size: 12px; color: #c0392b; margin-top: 5px; } /* ---- Submitting overlay: dim the form + centered primary spinner ---- */ .am-modal__body { position: relative; } /* Hide Gravity Forms' default inline loader (we show our own) */ .am-gf-styled .gform-loader { display: none !important; } .am-modal__loading { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .72); border-radius: 8px; } .am-modal__body.am-is-loading .am-modal__loading { display: flex; } .am-modal__spinner { width: 46px; height: 46px; border: 4px solid rgba(0, 0, 0, .12); border-top-color: var(--primary, #e8a33d); border-radius: 50%; animation: am-spin .7s linear infinite; } @keyframes am-spin { to { transform: rotate(360deg); } } /* ---- Success panel (shown after a successful AJAX submit) ---- */ .am-modal__success { text-align: center; padding: 26px 8px 14px; animation: am-success-in .35s ease both; } @keyframes am-success-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .am-modal__success-icon { color: var(--primary, #e8a33d); width: 86px; height: 86px; margin: 6px auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .04); } .am-modal__success-ring { opacity: .25; } .am-modal__success-check { stroke-dasharray: 36; stroke-dashoffset: 36; animation: am-check-draw .45s .18s ease forwards; } @keyframes am-check-draw { to { stroke-dashoffset: 0; } } .am-modal__success-title { margin: 0 0 10px; font-size: 26px; font-weight: 800; color: #111; } .am-modal__success-text { margin: 0 auto 26px; max-width: 360px; font-size: 15px; line-height: 1.55; color: #6b7280; } .am-modal__success-close { display: inline-block; min-width: 170px; padding: 14px 30px; border: 0; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .am-modal__success-close:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } /* Mobile: full-screen popup, stacked vehicle block */ @media (max-width: 600px) { .am-modal__dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; /* accounts for mobile browser chrome */ max-height: 100vh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 58px 18px 28px; /* extra top room for the pinned close button */ /* overflow-y:auto + overscroll-behavior:contain inherited from base rule, so the full-screen dialog scrolls internally for long forms */ } .am-modal__close { position: fixed; top: 10px; right: 12px; z-index: 2; font-size: 34px; line-height: 1; width: 44px; height: 44px; } .am-modal__vehicle { flex-direction: column; gap: 14px; } .am-modal__vehicle-photo, .am-modal__vehicle--no-photo .am-modal__vehicle-photo { flex-basis: auto; max-width: 100%; width: 100%; } .am-modal__title { font-size: 23px; } .am-gf-styled .gform_wrapper .ginput_container_name { flex-direction: column; gap: 14px; } /* Center the thank-you within the full-screen popup (modal only — the inline success panel must NOT inherit this near-full-viewport min-height) */ #am-approve-modal .am-modal__success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - 100px); } } /* =================================================================== [am_financing_block] — trust cards (left) + inline pre-approval form (right) Mobile- and tablet-responsive by default. am- namespace, var(--primary). =================================================================== */ /* Trust-cards wrapper ([am_financing_block]). The pre-approval form is now a separate shortcode ([am_approve_form]), so Elementor controls the columns. */ .am-trust-cards { display: flex; flex-direction: column; gap: 18px; width: 100%; } /* ---- Trust cards ---- */ .am-trust-card { border-radius: 14px; padding: 24px 26px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); } .am-trust-card--dark { background: #1f242e; color: #fff; } .am-trust-card--light { background: #f6f7f9; color: #1f242e; border: 1px solid #e6e8ec; } .am-trust-card__body { display: flex; align-items: flex-start; gap: 20px; } .am-trust-card__text { flex: 1 1 auto; min-width: 0; } .am-trust-card__icon { flex: 0 0 auto; order: 2; /* icon on the right, matching the reference */ width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; background: rgba(232, 163, 61, .14); color: var(--primary, #e8a33d); } .am-trust-card--dark .am-trust-card__icon { background: rgba(255, 255, 255, .08); } .am-trust-card__title { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.25; } .am-trust-card__desc { margin: 0; font-size: 15px; line-height: 1.55; color: inherit; opacity: .92; } .am-trust-card--light .am-trust-card__desc { color: #4b5563; opacity: 1; } .am-trust-card__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: #6b7280; } .am-trust-card__btn { display: inline-block; margin-top: 16px; padding: 12px 26px; border: 2px solid var(--primary, #e8a33d); border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .am-trust-card__btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .am-trust-card__btn--outline { background: transparent; color: var(--primary, #e8a33d); } .am-trust-card__btn--outline:hover { background: var(--primary, #e8a33d); color: #fff; filter: none; } /* ---- Inline pre-approval form panel ---- */ .am-inline-approve { background: #fff; border-radius: 14px; padding: 28px 26px 24px; box-shadow: 0 12px 36px rgba(0, 0, 0, .12); border: 1px solid #eceef1; } .am-inline-approve__header { text-align: center; margin: 0 0 22px; } .am-inline-approve__title { margin: 0 0 6px; font-size: 25px; font-weight: 800; line-height: 1.15; color: #111; } .am-inline-approve__subtitle { margin: 0; font-size: 15px; color: #6b7280; } .am-inline-approve__unavailable { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: #6b7280; text-align: center; } .am-inline-approve__call { margin: 18px 0 0; text-align: center; } .am-inline-approve__call a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--primary, #e8a33d); text-decoration: none; } .am-inline-approve__call a:hover { filter: brightness(1.08); } /* The form + its loading overlay live in this relative wrapper, so the absolute overlay covers ONLY the GF form (not the header / success / call lines) — mirroring the popup's .am-modal__body overlay scoping. */ .am-inline-approve__formwrap { position: relative; } /* Inline-form loading overlay trigger (the existing trigger is keyed to .am-modal__body, which the inline form does not use). */ .am-inline-approve.am-is-loading .am-modal__loading { display: flex; } /* The inline success panel reuses .am-modal__success; the modal-only mobile rule that stretches it to ~full viewport height has been rescoped to #am-approve-modal (see styleCssModifications), so here it stays in-flow. Add a little breathing room. */ .am-inline-approve__success { margin-top: 4px; } /* ---- Responsive ---- */ @media (max-width: 600px) { .am-trust-card { padding: 20px; } /* Hide the decorative icon on mobile (reference uses elementor-hidden-mobile) */ .am-trust-card__icon { display: none; } .am-trust-card__title { font-size: 18px; } .am-inline-approve { padding: 22px 18px 20px; } .am-inline-approve__title { font-size: 22px; } } /* =================================================================== AM Process Steps widget (the "How It Works" 3-step flow) =================================================================== */ .am-process { width: 100%; text-align: center; } .am-process__title { margin: 0 0 36px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #1f242e; } .am-process__highlight { color: var(--primary, #e8a33d); } .am-process__steps { display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap; } .am-process__step { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 26px 24px; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); } .am-process__step-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary, #e8a33d); margin-bottom: 8px; } .am-process__step-title { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: #1f242e; } .am-process__step-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6b7280; } .am-process__arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 26px; color: var(--primary, #e8a33d); } .am-process__cta { margin-top: 32px; } .am-process__btn { display: inline-block; padding: 15px 34px; border: 0; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .am-process__btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } /* Tablet / mobile: stack the steps, point the arrow down */ @media (max-width: 900px) { .am-process__steps { flex-direction: column; align-items: stretch; gap: 14px; } .am-process__arrow { padding: 2px 0; transform: rotate(90deg); } } @media (max-width: 600px) { .am-process__title { font-size: 24px; } } /* =================================================================== AM Locations widget (location cards) =================================================================== */ .am-locations { width: 100%; } .am-locations__head { text-align: center; max-width: 860px; margin: 0 auto 36px; } .am-locations__title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #1f242e; } .am-locations__highlight { color: var(--primary, #e8a33d); } .am-locations__subtitle { margin: 0; font-size: 15px; line-height: 1.6; color: #6b7280; } .am-locations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .am-location-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e8ec; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); } .am-location-card__image { height: 200px; background-color: #eef0f3; background-position: center; background-size: cover; background-repeat: no-repeat; } .am-location-card__pin { width: 54px; height: 54px; margin: -27px auto 0; border-radius: 50%; background: var(--primary, #e8a33d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); position: relative; z-index: 1; } .am-location-card__content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 22px 22px; text-align: center; } .am-location-card__name { margin: 10px 0 12px; font-size: 21px; font-weight: 800; color: #1f242e; } .am-location-card__phone { margin: 0 0 10px; } .am-location-card__phone a { display: inline-flex; align-items: center; gap: 8px; color: var(--primary, #e8a33d); font-weight: 700; text-decoration: none; } .am-location-card__phone a:hover { filter: brightness(1.08); } .am-location-card__address { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #4b5563; } .am-location-card__address i { color: var(--primary, #e8a33d); margin-top: 3px; } .am-location-card__hours { margin-bottom: 18px; padding: 14px 16px; background: #f6f7f9; border-radius: 8px; font-size: 13.5px; line-height: 1.65; color: #4b5563; text-align: left; } .am-location-card__btn { margin-top: auto; display: block; padding: 14px 16px; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; text-align: center; transition: filter .15s ease, box-shadow .15s ease; } .am-location-card__btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } /* Tablet: 2 columns. Mobile: single column. */ @media (max-width: 1000px) { .am-locations__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .am-locations__grid { grid-template-columns: 1fr; } .am-locations__title { font-size: 24px; } } /* =================================================================== AM Reviews Section widget (branded chrome around the Google reviews plugin output). The plugin styles its own cards/stars/Google badge. =================================================================== */ .am-reviews { width: 100%; text-align: center; } .am-reviews__head { max-width: 900px; margin: 0 auto 28px; } .am-reviews__title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #1f242e; } .am-reviews__highlight { color: var(--primary, #e8a33d); } .am-reviews__subtitle { margin: 0; font-size: 15px; line-height: 1.6; color: #6b7280; } .am-reviews__widget { margin: 0 auto; } .am-reviews__cta { margin-top: 28px; } .am-reviews__btn { display: inline-block; padding: 15px 34px; border: 0; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .am-reviews__btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .am-reviews__placeholder { max-width: 600px; margin: 0 auto; padding: 28px; border: 1px dashed #cfd4da; border-radius: 10px; color: #9aa1ab; font-size: 14px; } @media (max-width: 600px) { .am-reviews__title { font-size: 24px; } } /* =================================================================== AM Hero widget (overlay content; the background is on the section) =================================================================== */ .am-hero { display: flex; align-items: center; gap: 48px; width: 100%; } .am-hero__content { flex: 1 1 0; min-width: 0; padding: 40px 0; } .am-hero__title { margin: 0 0 18px; font-size: 42px; font-weight: 800; line-height: 1.12; color: #fff; } .am-hero__desc { margin: 0 0 28px; max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .9); } .am-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .am-hero__btn { display: inline-block; padding: 15px 30px; border: 2px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: filter .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; } .am-hero__btn--primary { background: var(--primary, #e8a33d); color: #fff; border-color: var(--primary, #e8a33d); } .am-hero__btn--primary:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .am-hero__btn--outline { background: rgba(255, 255, 255, .06); color: #fff; border-color: #fff; } .am-hero__btn--outline:hover { background: #fff; color: #1f242e; } .am-hero__media { flex: 0 1 480px; min-width: 0; } .am-hero__image-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); } .am-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; /* crop to fill */ object-fit: cover; } .am-hero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; text-align: left; } /* Dark-text variant (for light section backgrounds) */ .am-hero--dark .am-hero__title { color: #1f242e; } .am-hero--dark .am-hero__desc { color: #4b5563; } .am-hero--dark .am-hero__btn--outline { background: transparent; color: #1f242e; border-color: #1f242e; } .am-hero--dark .am-hero__btn--outline:hover { background: #1f242e; color: #fff; } /* Responsive: stack, center, shrink */ @media (max-width: 900px) { .am-hero { flex-direction: column; gap: 26px; } .am-hero__content { padding: 28px 0 0; text-align: center; } .am-hero__desc { margin-left: auto; margin-right: auto; } .am-hero__buttons { justify-content: center; } .am-hero__media { flex-basis: auto; width: 100%; } .am-hero__title { font-size: 32px; } } @media (max-width: 600px) { .am-hero__title { font-size: 26px; } .am-hero__btn { padding: 13px 22px; } /* Hide the hero image on small / mobile devices */ .am-hero__media { display: none; } } /* =================================================================== Hide the Vehica Classic search bar on the HOMEPAGE only. Stopgap — for a true removal, delete the widget in Elementor (page 13767). Scoped to body.home so the /search/ results page is unaffected. =================================================================== */ body.home .elementor-widget:has(> .elementor-widget-container > .vehica-search-classic-v2), body.home .vehica-search-classic-v2 { display: none !important; } /* =================================================================== Inline (single-row) layout variant of the AM Pre-Approval Form. Toggled via the widget's "Layout = Inline" option (adds the .am-inline-approve--inline modifier). Placeholder-driven (labels hidden). =================================================================== */ /* Header on one line */ .am-inline-approve--inline .am-inline-approve__header { text-align: center; margin: 0 0 16px; } .am-inline-approve--inline .am-inline-approve__title, .am-inline-approve--inline .am-inline-approve__subtitle { display: inline; margin: 0; } .am-inline-approve--inline .am-inline-approve__title { font-size: 22px; } .am-inline-approve--inline .am-inline-approve__subtitle { margin-left: 8px; font-size: 15px; } /* The form becomes a flex row: the fields block grows, submit sits at the end */ .am-inline-approve--inline .gform_wrapper form { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 10px; } .am-inline-approve--inline .gform_body { /* basis 0 (not auto): a full-width consent row inside the fields would otherwise inflate the body's natural width and wrap Submit below */ flex: 1 1 0%; min-width: 0; } .am-inline-approve--inline .gform_fields { display: flex !important; flex-wrap: wrap; /* !important: GF's theme row-gap variable otherwise overrides this and leaves a tall band between the inputs row and the consent line */ gap: 8px 10px !important; grid-template-columns: none !important; } /* Visible input fields share the row; Name (First|Last) gets extra width */ .am-inline-approve--inline .gfield:not(.gform_hidden):not(.gfield--type-consent):not(.gfield--type-checkbox) { flex: 1 1 150px; width: auto !important; margin: 0 !important; } .am-inline-approve--inline .gfield--type-name { flex: 2 1 240px; } /* Consent / agreement checkboxes on their own full-width line below the inputs. Checkbox + description flow as ONE small-print line (Wheel City style): the description is reordered after the checkbox via flex. */ .am-inline-approve--inline .gfield--type-consent, .am-inline-approve--inline .gfield--type-checkbox { flex: 1 1 100%; width: 100% !important; margin: 6px 0 0 !important; } .am-inline-approve--inline .gfield--type-checkbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .am-inline-approve--inline .gfield--type-checkbox .ginput_container_checkbox { order: 1; flex: 0 1 auto; min-width: 0; } .am-inline-approve--inline .gfield--type-checkbox .gfield_description { order: 2; flex: 1 1 200px; margin: 0; padding: 0; } /* Placeholder-only: hide the labels in the inline layout */ .am-inline-approve--inline .gfield_label, .am-inline-approve--inline .gform-field-label--type-sub { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Submit at the end of the input row (auto width, not full) */ .am-inline-approve--inline .gform_footer { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; } .am-inline-approve--inline .gform_footer input[type="submit"], .am-inline-approve--inline .gform_wrapper .gform_button { width: auto !important; padding: 14px 30px !important; margin-top: 22px !important; /* drop the button to line up with the inputs (below the labels) */ } /* Tablet / mobile: stack back to full-width fields */ @media (max-width: 782px) { .am-inline-approve--inline .gform_wrapper form, .am-inline-approve--inline .gform_fields { display: block !important; } .am-inline-approve--inline .gfield:not(.gform_hidden) { flex: none; width: 100% !important; margin: 0 0 12px !important; } .am-inline-approve--inline .gform_footer input[type="submit"], .am-inline-approve--inline .gform_wrapper .gform_button { width: 100% !important; } } /* =================================================================== AM Feature Grid widget ("why choose us" — 2-col icon + text items) =================================================================== */ .am-features { width: 100%; } .am-features__head { text-align: center; max-width: 900px; margin: 0 auto 34px; } .am-features__title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #1f242e; } .am-features__highlight { color: var(--primary, #e8a33d); } .am-features__subtitle { margin: 0; font-size: 15px; line-height: 1.6; color: #6b7280; } .am-features__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 44px; max-width: 980px; margin: 0 auto; } .am-feature { display: flex; align-items: flex-start; gap: 16px; } .am-feature__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .am-feature__text { flex: 1 1 auto; min-width: 0; } .am-feature__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #1f242e; } .am-feature__desc { margin: 0; font-size: 14px; line-height: 1.55; color: #6b7280; } .am-features__cta { margin-top: 34px; text-align: center; } .am-features__btn { display: inline-block; padding: 15px 40px; border: 0; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .am-features__btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } /* Tablet / mobile: single column */ @media (max-width: 768px) { .am-features__grid { grid-template-columns: 1fr; gap: 20px; } .am-features__title { font-size: 24px; } } /* ================================================================== * * AM Generic Form widget — intro + any Gravity Form (left) and an * optional dealership sidebar (right). Native GF styling untouched. * ================================================================== */ .am-genform { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; } .am-genform__main { flex: 1 1 60%; min-width: 0; } .am-genform--full .am-genform__main { flex-basis: 100%; } .am-genform__sidebar { flex: 0 0 320px; max-width: 100%; box-sizing: border-box; } .am-genform__heading { font-size: 30px; line-height: 1.2; margin: 0 0 18px; } .am-genform__intro, .am-genform__privacy { margin: 0 0 16px; line-height: 1.6; } .am-genform__notice { margin: 4px 0 0; padding: 18px 20px; background: #f6f7f9; border: 1px solid #e3e6ea; border-radius: 8px; color: #555; } .am-genform__form { margin-top: 10px; } /* Sidebar buttons (brand-colored, like the reference green bars) */ .am-genform__sidebtn { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 12px 16px; margin-bottom: 10px; background: var(--primary, #2e7d32); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 4px; transition: filter .15s ease; } .am-genform__sidebtn:hover { filter: brightness(1.08); color: #fff; } .am-genform__sidebtn i { font-size: 14px; flex: 0 0 auto; } /* Dealer info + Hours share the underlined-heading look */ .am-genform__info { margin-top: 24px; } .am-genform__dealer, .am-genform__hours-title { display: flex; align-items: center; gap: 8px; font-size: 19px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--primary, #2e7d32); } .am-genform__dealer i, .am-genform__hours-title i { color: var(--primary, #2e7d32); font-size: 15px; flex: 0 0 auto; } .am-genform__dealer span { flex: 1 1 auto; } .am-genform__address { margin: 10px 0; line-height: 1.5; color: #444; } .am-genform__line { margin: 5px 0; } .am-genform__label { color: #555; } .am-genform__line a { color: inherit; text-decoration: none; } .am-genform__line a:hover { color: var(--primary, #2e7d32); } /* Hours table — modern + borderless by default (the theme adds cell borders; we strip them here and rebuild a clean look). */ .am-genform__hours { margin-top: 24px; } .am-genform__hours-table { width: 100%; border-collapse: collapse; font-size: 15px; } /* Kill any inherited table/cell borders + cell backgrounds from the theme. */ .am-genform__hours-table, .am-genform__hours-table thead, .am-genform__hours-table tbody, .am-genform__hours-table tr, .am-genform__hours-table th, .am-genform__hours-table td { border: 0 !important; background: transparent; box-shadow: none; } .am-genform__hours-table th, .am-genform__hours-table td { padding: 9px 2px; font-weight: 400; vertical-align: top; line-height: 1.4; } .am-genform__hours-table th { text-align: left; padding-right: 16px; white-space: nowrap; color: #1f2937; font-weight: 600; } .am-genform__hours-table td { width: 100%; text-align: right; color: #4b5563; font-variant-numeric: tabular-nums; } .am-genform__closed { color: #b00020; font-weight: 600; } /* Style: Clean (default) — hairline divider between rows, none on the last. */ .am-genform__hours--clean .am-genform__hours-table tr + tr th, .am-genform__hours--clean .am-genform__hours-table tr + tr td { border-top: 1px solid #eceef1 !important; } /* Style: Striped — zebra rows, no lines. */ .am-genform__hours--striped .am-genform__hours-table th, .am-genform__hours--striped .am-genform__hours-table td { padding-left: 10px; padding-right: 10px; } .am-genform__hours--striped .am-genform__hours-table tr:nth-child(odd) th, .am-genform__hours--striped .am-genform__hours-table tr:nth-child(odd) td { background: #f6f7f9 !important; } /* Style: Borderless (plain) — base styles only, nothing extra to add. */ /* Highlight today's row (optional). Brand-tinted background + accent bar. */ .am-genform__hours-table tr.am-genform__today th, .am-genform__hours-table tr.am-genform__today td { background: #f1f5f9 !important; background: color-mix(in srgb, var(--primary, #2e7d32) 9%, #fff) !important; color: var(--primary, #2e7d32); } .am-genform__hours-table tr.am-genform__today th { box-shadow: inset 3px 0 0 var(--primary, #2e7d32); padding-left: 9px; } .am-genform__hours-table tr.am-genform__today .am-genform__closed { color: var(--primary, #2e7d32); } /* Responsive: sidebar drops below the application on tablet / mobile */ @media (max-width: 900px) { .am-genform { flex-direction: column; gap: 28px; } .am-genform__main, .am-genform__sidebar { flex-basis: 100%; width: 100%; } .am-genform__sidebar { max-width: 520px; } } @media (max-width: 600px) { .am-genform { gap: 22px; } .am-genform__heading { font-size: 24px; } } /* ================================================================== * * AM Featured Cars widget — heading + responsive card grid + View All. * Cards reuse Vehica's .vehica-car-card markup/CSS; this only lays out * the grid and guarantees the whole-card click overlay works off the * Vue search page. * ================================================================== */ .am-featured { width: 100%; } .am-featured__head { text-align: center; max-width: 840px; margin: 0 auto 30px; } /* Related Listings: clean left-aligned heading (like the native widget) — one dark color, bold, no brand-colored highlight, no theme h2 quirks. */ .am-featured--related .am-featured__head { text-align: left; max-width: none; margin: 0 0 18px; } .am-featured--related .am-featured__title { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--am-rel-title, #1f2733); margin: 0 0 6px; } .am-featured--related .am-featured__highlight { color: inherit; /* drop the brand-colored highlight on the related heading */ } .am-featured--related .am-featured__subtitle { margin: 0; color: #6b7280; } .am-featured__title { font-size: 30px; line-height: 1.2; margin: 0 0 12px; } .am-featured__highlight { color: var(--primary, #e8a33d); } .am-featured__subtitle { margin: 0; color: #6b7280; line-height: 1.6; } .am-featured__grid { display: grid; gap: 24px; } .am-featured__grid--c6 { grid-template-columns: repeat(6, 1fr); } .am-featured__grid--c5 { grid-template-columns: repeat(5, 1fr); } .am-featured__grid--c4 { grid-template-columns: repeat(4, 1fr); } .am-featured__grid--c3 { grid-template-columns: repeat(3, 1fr); } .am-featured__grid--c2 { grid-template-columns: repeat(2, 1fr); } .am-featured__cell { min-width: 0; } .am-featured__grid .vehica-car-card { width: 100%; margin: 0; } /* Whole-card click-to-view overlay (the Get Approved button sits above at z-index:20). */ .am-featured .vehica-car-card__inner { position: relative; } .am-featured .vehica-car-card-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; } .am-featured__cta { text-align: center; margin-top: 32px; } .am-featured__viewall { display: inline-block; padding: 14px 34px; border-radius: 8px; background: var(--primary, #e8a33d); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; text-decoration: none; transition: filter .15s ease, box-shadow .15s ease; } .am-featured__viewall:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); color: #fff; } .am-featured__empty { padding: 30px; text-align: center; color: #888; border: 1px dashed #ccd2da; border-radius: 10px; } /* Carousel variant — horizontal scroll-snap track with arrows + autoplay. --am-fcols = cards per view on desktop (steps down responsively). */ .am-featured__carousel { position: relative; --am-fcols: 4; } .am-featured__carousel--c6 { --am-fcols: 6; } .am-featured__carousel--c5 { --am-fcols: 5; } .am-featured__carousel--c3 { --am-fcols: 3; } .am-featured__carousel--c2 { --am-fcols: 2; } .am-featured__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .am-featured__track::-webkit-scrollbar { display: none; } .am-featured__cslide { flex: 0 0 calc((100% - (var(--am-fcols) - 1) * 24px) / var(--am-fcols)); scroll-snap-align: start; min-width: 0; } .am-featured__carousel .vehica-car-card { width: 100%; margin: 0; } .am-featured__cbtn { position: absolute; top: 38%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--primary, #e8a33d); color: #fff; cursor: pointer; z-index: 30; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); transition: filter .15s ease; } .am-featured__cbtn:hover { filter: brightness(1.08); } .am-featured__cbtn--prev { left: 6px; } .am-featured__cbtn--next { right: 6px; } .am-featured__cbtn i { font-size: 16px; } /* Everything already fits → no need for arrows. */ .am-featured__carousel--static .am-featured__cbtn { display: none; } @media (max-width: 1100px) { .am-featured__carousel .am-featured__cslide { flex-basis: calc((100% - 2 * 24px) / 3); } } @media (max-width: 900px) { .am-featured__carousel .am-featured__cslide { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 600px) { .am-featured__carousel .am-featured__cslide { flex-basis: 85%; } .am-featured__cbtn { width: 38px; height: 38px; } } /* Responsive column step-down */ @media (max-width: 1280px) { .am-featured__grid--c6 { grid-template-columns: repeat(4, 1fr); } .am-featured__grid--c5 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1100px) { .am-featured__grid--c6, .am-featured__grid--c5, .am-featured__grid--c4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .am-featured__grid--c6, .am-featured__grid--c5, .am-featured__grid--c4, .am-featured__grid--c3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .am-featured__grid--c6, .am-featured__grid--c5, .am-featured__grid--c4, .am-featured__grid--c3, .am-featured__grid--c2 { grid-template-columns: 1fr; } .am-featured__title { font-size: 24px; } } /* ================================================================== * * AM Info Bar widget — centered contact bar. Background/text fall back * to var(--primary)/#fff but are overridable via --am-bar-bg/--am-bar-fg. * ================================================================== */ .am-infobar { width: 100%; background: var(--am-bar-bg, var(--primary, #2e7d32)); color: var(--am-bar-fg, #fff); } .am-infobar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 26px; max-width: 1200px; margin: 0 auto; padding: 10px 16px; } .am-infobar__item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; transition: opacity .15s ease; } /* Long values (e.g. a full address) wrap — keep the wrapped lines centered. */ .am-infobar__item span { text-align: center; } a.am-infobar__item:hover { color: inherit; opacity: .82; } .am-infobar__item i { font-size: 15px; flex: 0 0 auto; } .am-infobar__item--icon i { font-size: 17px; } @media (max-width: 600px) { .am-infobar__inner { gap: 7px 16px; padding: 9px 12px; } .am-infobar__item { font-size: 12px; gap: 6px; } .am-infobar__item i { font-size: 13px; } } /* ================================================================== * * AM Slider widget — self-contained autoplay image slider. * ================================================================== */ .am-slider { position: relative; width: 100%; overflow: hidden; } .am-slider__viewport { position: relative; width: 100%; } .am-slider__track { position: relative; width: 100%; } /* Crossfade: the active slide is in flow (sets the height to the real image), the rest are stacked over it and faded out — so images show at their true proportions with no cropping/zoom. */ .am-slider__slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .am-slider__slide.is-active { position: relative; opacity: 1; pointer-events: auto; } .am-slider__slide a, .am-slider__slide img { display: block; width: 100%; } .am-slider__slide img { height: auto; } /* Arrows */ .am-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; cursor: pointer; z-index: 3; transition: background .15s ease; } .am-slider__arrow:hover { background: rgba(0, 0, 0, .65); } .am-slider__arrow--prev { left: 14px; } .am-slider__arrow--next { right: 14px; } .am-slider__arrow i { font-size: 16px; line-height: 1; } /* Dots */ .am-slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 9px; z-index: 3; } .am-slider__dot { width: 11px; height: 11px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; opacity: .8; transition: background .15s ease, opacity .15s ease; } .am-slider__dot.is-active { background: var(--primary, #fff); border-color: #fff; opacity: 1; } @media (max-width: 768px) { .am-slider--hide-mobile { display: none !important; } .am-slider__arrow { width: 36px; height: 36px; } .am-slider__arrow--prev { left: 8px; } .am-slider__arrow--next { right: 8px; } } /* ================================================================== * * AM Down Payment widget — small "Down Payment As Low As: $####" badge. * --am-dp lets a per-widget accent color override var(--primary). * ================================================================== */ .am-downpay-wrap { width: 100%; } .am-downpay-wrap--left { text-align: left; } .am-downpay-wrap--center { text-align: center; } .am-downpay-wrap--right { text-align: right; } .am-downpay { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 16px; border-radius: 10px; line-height: 1.2; font-size: 15px; /* primary-tinted pill (plain fallbacks first, color-mix overrides where supported) */ background: #f2f6f3; background: color-mix(in srgb, var(--am-dp, var(--primary, #2e7d32)) 8%, #fff); border: 1px solid #e1e7e3; border-color: color-mix(in srgb, var(--am-dp, var(--primary, #2e7d32)) 22%, #fff); } .am-downpay__icon { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--am-dp, var(--primary, #2e7d32)); color: #fff; font-size: 15px; } .am-downpay__label { color: #4b5563; font-weight: 600; } .am-downpay__amount { color: var(--am-dp, var(--primary, #2e7d32)); font-weight: 800; font-size: 19px; white-space: nowrap; } /* Full-width variant: stretch to the column, amount pinned to the right. */ .am-downpay--full { display: flex; width: 100%; box-sizing: border-box; } .am-downpay--full .am-downpay__amount { margin-left: auto; } @media (max-width: 480px) { .am-downpay { gap: 8px; padding: 8px 13px; font-size: 13px; } .am-downpay__amount { font-size: 16px; } .am-downpay__icon { width: 30px; height: 30px; } } /* ================================================================== * * AM Get Approved Button widget — standalone CTA that opens the * Get Approved modal (same look as the inventory-card approve button). * ================================================================== */ .am-approve-btn-wrap { display: flex; width: 100%; } .am-approve-btn-wrap--left { justify-content: flex-start; } .am-approve-btn-wrap--center { justify-content: center; } .am-approve-btn-wrap--right { justify-content: flex-end; } .am-approve-btn { display: inline-block; box-sizing: border-box; text-align: center; padding: 14px 28px; border-radius: 8px; background-color: var(--primary, #e8a33d); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; line-height: 1.3; text-decoration: none; border: 2px solid var(--primary, #e8a33d); cursor: pointer; transition: filter .15s ease; } .am-approve-btn:hover, .am-approve-btn:focus { color: #fff; filter: brightness(1.08); } .am-approve-btn--outline { background-color: transparent; color: var(--primary, #e8a33d); } .am-approve-btn--outline:hover, .am-approve-btn--outline:focus { color: var(--primary, #e8a33d); } .am-approve-btn--full { display: block; width: 100%; } @media (max-width: 600px) { .am-approve-btn { padding: 13px 22px; font-size: 13px; } } /* ================================================================== * * AM Welcome Banner widget — full-width image (or primary gradient) * with a translucent content panel on the left or right. * ================================================================== */ .am-welcome { position: relative; display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 56px 6%; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .am-welcome--right { justify-content: flex-end; } .am-welcome--left { justify-content: flex-start; } /* No image set → modern gradient from --am-welcome-bg (the widget's color override), falling back to the primary color. Plain fallback first. */ .am-welcome--noimg { background: var(--am-welcome-bg, var(--primary, #e8a33d)); background: linear-gradient(135deg, color-mix(in srgb, var(--am-welcome-bg, var(--primary, #e8a33d)) 35%, #0f172a) 0%, color-mix(in srgb, var(--am-welcome-bg, var(--primary, #e8a33d)) 80%, #0f172a) 55%, var(--am-welcome-bg, var(--primary, #e8a33d)) 100%); } .am-welcome--noimg.am-welcome--flat { background: var(--am-welcome-bg, var(--primary, #e8a33d)); } .am-welcome__panel { max-width: 560px; padding: 34px 38px; border-radius: 16px; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .25); color: #fff; } .am-welcome__eyebrow { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; opacity: .92; } .am-welcome__title { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.12; color: #fff; } /* Primary accent bar under the title. */ .am-welcome__title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--primary, #e8a33d); } .am-welcome__text { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .92); } .am-welcome__btn { display: inline-block; margin-top: 24px; padding: 13px 30px; border-radius: 8px; background-color: var(--primary, #e8a33d); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; line-height: 1.3; text-decoration: none; border: 2px solid var(--primary, #e8a33d); transition: filter .15s ease; } .am-welcome__btn:hover, .am-welcome__btn:focus { color: #fff; filter: brightness(1.08); } @media (max-width: 768px) { .am-welcome { padding: 30px 18px; } .am-welcome__panel { max-width: 100%; padding: 26px 22px; border-radius: 14px; } } /* ================================================================== * * AM Map widget — reuses the am-genform two-column layout/sidebar; * the main column hosts a rounded Google Map with a floating card. * ================================================================== */ .am-map__frame { position: relative; border-radius: 16px; overflow: hidden; background: #eef1f4; border: 1px solid #eceef1; box-shadow: 0 12px 36px rgba(0, 0, 0, .12); } .am-map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .am-map__card { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 12px; max-width: min(86%, 360px); padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); } .am-map__card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; font-size: 17px; color: var(--primary, #e8a33d); background: #f6f0e6; background: color-mix(in srgb, var(--primary, #e8a33d) 12%, #fff); } .am-map__card-name { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; color: #111; } .am-map__card-addr { display: block; margin-top: 2px; font-size: 13px; color: #6b7280; } @media (max-width: 600px) { .am-map__frame { border-radius: 12px; } .am-map__card { top: 10px; left: 10px; right: 10px; max-width: none; padding: 10px 13px; } } /* ================================================================== * * AM Map Banner widget — full-width edge-to-edge map with the same * floating location card as AM Map. * ================================================================== */ .am-map-banner { position: relative; width: 100%; overflow: hidden; background: #eef1f4; } .am-map-banner .am-map__card { top: 24px; left: 24px; } @media (max-width: 600px) { .am-map-banner .am-map__card { top: 12px; left: 12px; right: 12px; max-width: none; } } /* ================================================================== * * AM Store Hours widget — compact footer hours list: uppercase title * in the primary color (overridable via --am-hours-title) + day rows. * ================================================================== */ .am-hours-wrap { display: flex; justify-content: flex-start; } /* Mobile: footer columns stack full-width, so center the block by default. (The widget's Alignment control overrides this per device when set.) */ @media (max-width: 767px) { .am-hours-wrap { justify-content: center; } } .am-hours { display: inline-block; } .am-hours__title { margin: 0 0 10px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--am-hours-title, var(--primary, #e8a33d)); } .am-hours__table { border-collapse: collapse; } .am-hours__table th { text-align: left; font-weight: 400; padding: 3px 18px 3px 0; white-space: nowrap; } .am-hours__table th::after { content: ":"; } .am-hours__table td { padding: 3px 0; white-space: nowrap; } .am-hours--light { color: #d1d5db; } .am-hours--light .am-hours__table td { color: #fff; } .am-hours--dark { color: #4b5563; } .am-hours--dark .am-hours__table td { color: #111; } .am-hours__closed { font-weight: 700; } /* Today's row (optional, marked client-side by am_hours_today_script) */ .am-hours__today th, .am-hours__today td { color: var(--am-hours-title, var(--primary, #e8a33d)); font-weight: 700; } /* ================================================================== * * AM Text Content widget — am-genform layout with a rich-text body. * ================================================================== */ .am-text__body { font-size: 16px; line-height: 1.75; color: #374151; } .am-text__body p { margin: 0 0 16px; } .am-text__body h2, .am-text__body h3, .am-text__body h4 { margin: 28px 0 12px; line-height: 1.25; font-weight: 800; color: #111; } .am-text__body h2:first-child, .am-text__body h3:first-child, .am-text__body h4:first-child { margin-top: 0; } .am-text__body h2 { font-size: 24px; } .am-text__body h3 { font-size: 20px; } .am-text__body h4 { font-size: 17px; } .am-text__body ul, .am-text__body ol { margin: 0 0 16px; padding-left: 24px; } .am-text__body li { margin: 0 0 6px; } .am-text__body a { color: var(--primary, #e8a33d); font-weight: 600; text-decoration: none; } .am-text__body a:hover { text-decoration: underline; } .am-text__body blockquote { margin: 0 0 16px; padding: 14px 20px; border-left: 4px solid var(--primary, #e8a33d); background: #f8f9fb; border-radius: 0 10px 10px 0; } .am-text__body img { max-width: 100%; height: auto; border-radius: 12px; } /* Tables (e.g. the federal FACTS privacy-notice disclosure table) */ .am-text__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; } .am-text__body th, .am-text__body td { border: 1px solid #e5e7eb; padding: 10px 14px; text-align: left; vertical-align: top; } .am-text__body thead th, .am-text__body table tr:first-child th { background: #4b5563; color: #fff; font-weight: 700; } .am-text__body tbody tr:nth-child(even) td { background: #f8f9fa; } @media (max-width: 600px) { .am-text__body table { display: block; overflow-x: auto; } } /* ---- Federal GLBA "FACTS" privacy-notice table layout (am-facts) ---- Used by the privacy-policy page HTML pasted into AM Legal Text. */ .am-text__body table.am-facts { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; } .am-text__body .am-facts th, .am-text__body .am-facts td { border: 1px solid #4b5563; padding: 10px 14px; vertical-align: top; text-align: left; background: #fff; } .am-text__body .am-facts tbody tr:nth-child(even) td { background: #fff; } /* no zebra in the legal form */ /* Black side cells: FACTS / Why? / What? / How? / Questions? */ .am-text__body .am-facts th.am-facts__facts, .am-text__body .am-facts th.am-facts__q { background: #1f2328; color: #fff; font-weight: 800; width: 200px; vertical-align: middle; } .am-text__body .am-facts th.am-facts__facts { font-size: 34px; } .am-text__body .am-facts th.am-facts__q { font-size: 24px; } /* Gray full-width section band: To limit our sharing / Who we are / etc. */ .am-text__body .am-facts tr.am-facts__band th { background: #6b7280; color: #fff; font-size: 17px; font-weight: 700; } /* Disclosure table header row */ .am-text__body .am-facts--share thead th { background: #6b7280; color: #fff; font-weight: 700; } /* Light-gray label column (questions / definitions / form labels) */ .am-text__body .am-facts th.am-facts__label { background: #e9ebee; font-weight: 400; width: 32%; } /* Mail-in form write-in lines */ .am-text__body .am-facts__line { border-bottom: 2px solid #111; height: 22px; margin: 0 0 24px; } .am-text__body .am-facts td:last-child .am-facts__line { margin-bottom: 0; } @media (max-width: 600px) { .am-text__body .am-facts th.am-facts__facts, .am-text__body .am-facts th.am-facts__q { width: 110px; font-size: 19px; } .am-text__body .am-facts th.am-facts__facts { font-size: 22px; } .am-text__body .am-facts th.am-facts__label { width: 38%; } } /* ================================================================== * * AM Legal Text widget — plain document column for legal pages. * ================================================================== */ .am-legal { max-width: 960px; margin: 0 auto; } .am-legal__heading { margin: 0 0 6px; font-size: 32px; font-weight: 800; line-height: 1.2; color: #111; } .am-legal__updated { margin: 0 0 26px; font-size: 14px; color: #6b7280; } .am-legal__heading + .am-legal__body { margin-top: 22px; } .am-legal__body { font-size: 15.5px; } @media (max-width: 600px) { .am-legal__heading { font-size: 25px; } } /* ================================================================== * * AM WhatsApp Button widget — rounded chat CTA (wa.me link). * --am-wa overrides the color per widget; default WhatsApp green. * ================================================================== */ .am-wa-wrap { display: flex; width: 100%; } .am-wa-wrap--left { justify-content: flex-start; } .am-wa-wrap--center { justify-content: center; } .am-wa-wrap--right { justify-content: flex-end; } .am-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 13px 26px; border-radius: 10px; background-color: var(--am-wa, #25d366); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.25; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); transition: filter .15s ease, box-shadow .15s ease, transform .05s ease; } .am-wa:hover, .am-wa:focus { color: #fff; filter: brightness(1.06); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); } .am-wa:active { transform: translateY(1px); } .am-wa__icon { display: inline-flex; font-size: 21px; line-height: 1; } .am-wa--full { display: flex; width: 100%; } @media (max-width: 600px) { .am-wa { padding: 12px 20px; font-size: 14px; } .am-wa__icon { font-size: 19px; } } /* ================================================================== * * "Down Payment As Low As: $X" line under the Get Approved button on * inventory cards (card_v2). Light label, primary-color amount. * ================================================================== */ .am-card-downpay { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; margin: 14px 0 8px; font-size: 13px; line-height: 1.3; text-align: center; } .am-card-downpay__label { color: #c7ccd4; font-weight: 600; } .am-card-downpay__amount { color: var(--primary, #e8a33d); font-weight: 800; font-size: 15px; white-space: nowrap; }