/* * ╔══════════════════════════════════════════════════════════════════╗ * GOOD GUYS AUTO SALES — COMPLETE SITE CSS OVERRIDE v4.0 * Replaces ALL previous CSS files entirely. * * FONT SYSTEM * Primary → Playfair Display (headlines, vehicle titles, hero) * Secondary → Inter (body, pricing, navigation, specs) * Tertiary → Inter Light (callouts, taglines, accents) * * COLOR SYSTEM * Near-Black #050505 page base * Deep Plum #0D0020 nebula layer * Rich Purple #1C0035 card / panel bg * Royal Violet #2A004F navbar bg * Vivid Violet #5800A0 glow / mid accent * Gold #C6A96B primary luxury accent * Bright Gold #E8A000 CTA / pinstripe * Chrome White #F0EEF8 heading text * Soft Gray #CFCFCF subheadline / body * Muted Gray #8880A0 specs / muted * * NO red. NO pink. Price = Gold. Mileage = Muted Gray. * ╚══════════════════════════════════════════════════════════════════╝ */ /* ── 0. GOOGLE FONTS ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── 1. ROOT VARIABLES ────────────────────────────────────── */ :root { --black: #050505; --plum-deep: #0D0020; --plum-rich: #1C0035; --purple-royal: #2A004F; --purple-vivid: #5800A0; --gold: #C6A96B; --gold-bright: #E8A000; --gold-pale: #F2D890; --chrome: #F0EEF8; --gray-soft: #CFCFCF; --gray-muted: #8880A0; --gray-dim: #5A5470; --white: #FFFFFF; } /* ── 2. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box !important; } html { scroll-behavior: smooth !important; } /* ── 3. BODY + NEBULA SPARKLE BACKGROUND ─────────────────── */ /* * Deep purple nebula field matching the logo's bg: * Smoky violet cloud pools + sharp white/gold star pinpoints * with four-point diamond cross-sparkles, exactly like logo image 1. */ body { background-color: #050505 !important; color: #CFCFCF !important; font-family: 'Inter', 'Arial Narrow', sans-serif !important; font-size: 16px !important; line-height: 1.75 !important; margin: 0 !important; padding: 0 !important; background-image: /* Nebula cloud pools — layered violet smoke */ radial-gradient(ellipse 75% 50% at 8% 18%, rgba(88,0,160,0.32) 0%, transparent 65%), radial-gradient(ellipse 60% 45% at 92% 82%, rgba(88,0,160,0.26) 0%, transparent 62%), radial-gradient(ellipse 85% 60% at 50% 50%, rgba(28,0,53,0.65) 0%, transparent 78%), radial-gradient(ellipse 45% 35% at 22% 72%, rgba(88,0,160,0.2) 0%, transparent 58%), radial-gradient(ellipse 38% 28% at 78% 22%, rgba(88,0,160,0.18) 0%, transparent 55%), /* Star field tile — white stars with 4-point sparkle diamonds */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3C!-- === 4-POINT DIAMOND SPARKLES (like logo bg) === --%3E%3C!-- Large bright sparkle --%3E%3Cpolygon points='80,60 82,68 80,76 78,68' fill='%23ffffff' opacity='0.95'/%3E%3Cpolygon points='80,60 88,68 80,76 72,68' fill='%23ffffff' opacity='0.22'/%3E%3Ccircle cx='80' cy='68' r='1.2' fill='%23ffffff' opacity='1'/%3E%3C!-- Gold sparkle --%3E%3Cpolygon points='220,40 222,49 220,58 218,49' fill='%23E8A000' opacity='0.9'/%3E%3Cpolygon points='220,40 229,49 220,58 211,49' fill='%23E8A000' opacity='0.2'/%3E%3Ccircle cx='220' cy='49' r='1' fill='%23F2D890' opacity='1'/%3E%3C!-- White sparkle mid-right --%3E%3Cpolygon points='620,90 622,100 620,110 618,100' fill='%23ffffff' opacity='0.92'/%3E%3Cpolygon points='620,90 630,100 620,110 610,100' fill='%23ffffff' opacity='0.18'/%3E%3Ccircle cx='620' cy='100' r='1.1' fill='%23ffffff' opacity='1'/%3E%3C!-- Tiny scattered dots --%3E%3Ccircle cx='340' cy='30' r='1.4' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='340' cy='30' r='3.5' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='500' cy='55' r='1' fill='%23C6A96B' opacity='0.75'/%3E%3Ccircle cx='150' cy='80' r='1.2' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='720' cy='45' r='0.9' fill='%23E8A000' opacity='0.7'/%3E%3C!-- ROW 2 sparkles --%3E%3Cpolygon points='40,170 42,180 40,190 38,180' fill='%23ffffff' opacity='0.88'/%3E%3Cpolygon points='40,170 50,180 40,190 30,180' fill='%23ffffff' opacity='0.16'/%3E%3Ccircle cx='40' cy='180' r='1' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='380,150 382,160 380,170 378,160' fill='%23C6A96B' opacity='0.9'/%3E%3Cpolygon points='380,150 390,160 380,170 370,160' fill='%23C6A96B' opacity='0.18'/%3E%3Ccircle cx='380' cy='160' r='1.1' fill='%23F2D890' opacity='1'/%3E%3Cpolygon points='740,160 742,170 740,180 738,170' fill='%23ffffff' opacity='0.85'/%3E%3Cpolygon points='740,160 750,170 740,180 730,170' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='740' cy='170' r='1' fill='%23ffffff' opacity='1'/%3E%3Ccircle cx='170' cy='145' r='1.3' fill='%23E8A000' opacity='0.72'/%3E%3Ccircle cx='170' cy='145' r='3' fill='%23E8A000' opacity='0.12'/%3E%3Ccircle cx='560' cy='130' r='1' fill='%23ffffff' opacity='0.6'/%3E%3C!-- ROW 3 --%3E%3Cpolygon points='190,270 192,282 190,294 188,282' fill='%23ffffff' opacity='0.92'/%3E%3Cpolygon points='190,270 202,282 190,294 178,282' fill='%23ffffff' opacity='0.19'/%3E%3Ccircle cx='190' cy='282' r='1.3' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='550,250 552,261 550,272 548,261' fill='%23E8A000' opacity='0.88'/%3E%3Cpolygon points='550,250 561,261 550,272 539,261' fill='%23E8A000' opacity='0.17'/%3E%3Ccircle cx='550' cy='261' r='1.1' fill='%23F2D890' opacity='1'/%3E%3Ccircle cx='700' cy='240' r='1.4' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='700' cy='240' r='3.5' fill='%23ffffff' opacity='0.11'/%3E%3Ccircle cx='90' cy='250' r='1' fill='%23C6A96B' opacity='0.68'/%3E%3Ccircle cx='420' cy='290' r='1.2' fill='%23ffffff' opacity='0.55'/%3E%3C!-- ROW 4 center --%3E%3Cpolygon points='310,370 312,382 310,394 308,382' fill='%23ffffff' opacity='0.9'/%3E%3Cpolygon points='310,370 322,382 310,394 298,382' fill='%23ffffff' opacity='0.17'/%3E%3Ccircle cx='310' cy='382' r='1.2' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='670,350 672,362 670,374 668,362' fill='%23C6A96B' opacity='0.88'/%3E%3Cpolygon points='670,350 682,362 670,374 658,362' fill='%23C6A96B' opacity='0.16'/%3E%3Ccircle cx='670' cy='362' r='1.1' fill='%23F2D890' opacity='1'/%3E%3Ccircle cx='50' cy='360' r='1.3' fill='%23E8A000' opacity='0.7'/%3E%3Ccircle cx='50' cy='360' r='3' fill='%23E8A000' opacity='0.11'/%3E%3Ccircle cx='480' cy='340' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='760' cy='380' r='0.9' fill='%23ffffff' opacity='0.45'/%3E%3C!-- ROW 5 --%3E%3Cpolygon points='120,460 122,472 120,484 118,472' fill='%23ffffff' opacity='0.88'/%3E%3Cpolygon points='120,460 132,472 120,484 108,472' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='120' cy='472' r='1.1' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='460,450 462,462 460,474 458,462' fill='%23E8A000' opacity='0.86'/%3E%3Cpolygon points='460,450 472,462 460,474 448,462' fill='%23E8A000' opacity='0.16'/%3E%3Ccircle cx='460' cy='462' r='1.2' fill='%23F2D890' opacity='1'/%3E%3Ccircle cx='650' cy='440' r='1.4' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='650' cy='440' r='3.5' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='280' cy='490' r='1' fill='%23C6A96B' opacity='0.62'/%3E%3C!-- ROW 6 --%3E%3Cpolygon points='580,550 582,562 580,574 578,562' fill='%23ffffff' opacity='0.9'/%3E%3Cpolygon points='580,550 592,562 580,574 568,562' fill='%23ffffff' opacity='0.17'/%3E%3Ccircle cx='580' cy='562' r='1.2' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='200,540 202,552 200,564 198,552' fill='%23C6A96B' opacity='0.85'/%3E%3Cpolygon points='200,540 212,552 200,564 188,552' fill='%23C6A96B' opacity='0.15'/%3E%3Ccircle cx='200' cy='552' r='1' fill='%23F2D890' opacity='1'/%3E%3Ccircle cx='760' cy='530' r='1.3' fill='%23E8A000' opacity='0.72'/%3E%3Ccircle cx='760' cy='530' r='3' fill='%23E8A000' opacity='0.11'/%3E%3Ccircle cx='40' cy='560' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='380' cy='580' r='1.1' fill='%23ffffff' opacity='0.55'/%3E%3C!-- ROW 7 bottom --%3E%3Cpolygon points='340,660 342,672 340,684 338,672' fill='%23ffffff' opacity='0.88'/%3E%3Cpolygon points='340,660 352,672 340,684 328,672' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='340' cy='672' r='1.2' fill='%23ffffff' opacity='1'/%3E%3Cpolygon points='680,640 682,652 680,664 678,652' fill='%23E8A000' opacity='0.84'/%3E%3Cpolygon points='680,640 692,652 680,664 668,652' fill='%23E8A000' opacity='0.15'/%3E%3Ccircle cx='680' cy='652' r='1.1' fill='%23F2D890' opacity='1'/%3E%3Ccircle cx='90' cy='650' r='1.4' fill='%23C6A96B' opacity='0.75'/%3E%3Ccircle cx='90' cy='650' r='3.5' fill='%23C6A96B' opacity='0.12'/%3E%3Ccircle cx='500' cy='700' r='1.2' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='770' cy='700' r='0.9' fill='%23E8A000' opacity='0.55'/%3E%3C!-- Tiny background fill dots --%3E%3Ccircle cx='255' cy='20' r='0.7' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='680' cy='20' r='0.8' fill='%23C6A96B' opacity='0.38'/%3E%3Ccircle cx='440' cy='120' r='0.7' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='800' cy='200' r='0.6' fill='%23E8A000' opacity='0.32'/%3E%3Ccircle cx='30' cy='320' r='0.8' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='800' cy='440' r='0.7' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='140' cy='620' r='0.8' fill='%23C6A96B' opacity='0.4'/%3E%3Ccircle cx='620' cy='740' r='0.7' fill='%23ffffff' opacity='0.38'/%3E%3C/svg%3E") !important; background-size: cover, cover, cover, cover, cover, 800px 800px !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important; } /* ── 4. TYPOGRAPHY SYSTEM ─────────────────────────────────── */ /* PRIMARY — Playfair Display: hero headlines, vehicle titles */ h1, h2, h3, .hero-title, .vehicle-title, .card-title, .listing-title, .section-title { font-family: 'Playfair Display', 'Georgia', serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.1 !important; color: #F0EEF8 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } h1 { font-size: clamp(3rem, 7vw, 5.5rem) !important; letter-spacing: 0.1em !important; } h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important; } h3 { font-size: clamp(1.4rem, 2.8vw, 2rem) !important; letter-spacing: 0.06em !important; } h4 { font-family: 'Playfair Display', serif !important; font-size: 1.3rem !important; letter-spacing: 0.05em !important; color: #F0EEF8 !important; } /* SECONDARY — Inter: body, navigation, pricing, specs */ p, li, span, td, .nav-link, .dropdown-item, .price, .mileage, .spec, .form-label, label, .footer-link, .btn { font-family: 'Inter', 'Helvetica Neue', sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* TERTIARY — Inter Light: callouts, taglines, accents */ .tagline, .subtitle, .section-sub, blockquote, .callout, .accent-text, small, .small-text { font-family: 'Inter', sans-serif !important; font-weight: 300 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #C6A96B !important; font-size: 0.85rem !important; } /* Body paragraph */ p { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.8 !important; color: #CFCFCF !important; max-width: 72ch !important; } /* Links */ a { color: #C6A96B !important; text-decoration: none !important; transition: color 0.22s !important; -webkit-font-smoothing: antialiased !important; } a:hover { color: #E8A000 !important; } strong { color: #F0EEF8 !important; } em { color: #C6A96B !important; font-style: italic !important; } /* ── 5. TOP CONTACT BAR ───────────────────────────────────── */ /* * Dark brushed-metal gunmetal with gold pinstripe bottom edge. * "Loan Application" CTA replaces "Call Now". */ .contact-bar, .header-top, .top-contact, .top-bar-info, div[class*="top-bar"], div[class*="topbar"], div[class*="header-top"] { background: linear-gradient( 180deg, #1e1a2c 0%, #161320 50%, #0f0c18 100% ) !important; border-bottom: 1px solid rgba(198,169,107,0.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 12px rgba(0,0,0,0.75) !important; padding: 10px 36px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; } /* Gold pinstripe line at bottom of top bar */ .contact-bar::after, .header-top::after, div[class*="top-bar"]::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, #C6A96B 20%, #E8A000 50%, #C6A96B 80%, transparent 100% ) !important; pointer-events: none !important; } /* ALL links in top bar — crisp, zero blur */ .contact-bar a, .header-top a, .top-contact a, div[class*="top-bar"] a, div[class*="header-top"] a, a[href^="tel:"], a[href^="mailto:"] { font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #CFCFCF !important; filter: none !important; -webkit-filter: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; transform: none !important; -webkit-font-smoothing: antialiased !important; transition: color 0.2s !important; } a[href^="tel:"]:hover, a[href^="mailto:"]:hover, .contact-bar a:hover { color: #C6A96B !important; } /* Icons in top bar — no blur */ a[href^="tel:"] i, a[href^="mailto:"] i, a[href^="tel:"] svg, a[href^="mailto:"] svg { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; } /* "LOAN APPLICATION" CTA button in top bar — replaces Call Now */ .contact-bar a[href*="loan-application"], .header-top a[href*="loan-application"], div[class*="top-bar"] a[href*="loan-application"], a.top-bar-cta, .top-cta-btn { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.78rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #C6A96B 0%, #E8A000 100%) !important; color: #050505 !important; padding: 7px 20px !important; border-radius: 1px !important; border: none !important; box-shadow: 0 2px 12px rgba(198,169,107,0.35) !important; transition: all 0.22s !important; white-space: nowrap !important; } .contact-bar a[href*="loan-application"]:hover { background: linear-gradient(135deg, #E8A000 0%, #C6A96B 100%) !important; box-shadow: 0 4px 20px rgba(232,160,0,0.45) !important; color: #050505 !important; } /* ── 6. LOGO AREA — top of page ───────────────────────────── */ /* * Logo sits prominently at very top of navbar. * Wide / centered on desktop. The logo IS the brand statement — * no need to repeat "Good Guys Auto Sales" in text below it. */ .navbar-brand, .logo-wrap, header .logo, .site-logo { padding: 6px 0 !important; display: flex !important; align-items: center !important; } .navbar-brand img, header img.logo, .site-logo img { max-height: 82px !important; width: auto !important; /* No blur, no artificial filter — logo has its own built-in effects */ filter: none !important; -webkit-filter: none !important; image-rendering: auto !important; -webkit-font-smoothing: antialiased !important; opacity: 1 !important; display: block !important; transition: opacity 0.25s !important; } .navbar-brand img:hover { opacity: 0.88 !important; } /* Suppress any auto-generated text name below/beside logo */ .navbar-brand span, .site-name, .brand-name, .navbar-brand .site-title { display: none !important; } /* ── 7. MAIN NAVBAR ───────────────────────────────────────── */ header, .navbar, nav.navbar, #header, .site-header { background: linear-gradient( 180deg, #1C0035 0%, #2A004F 52%, #1C0035 100% ) !important; border-bottom: 2px solid transparent !important; border-image: linear-gradient(90deg, transparent 0%, #C6A96B 18%, #E8A000 50%, #C6A96B 82%, transparent 100% ) 1 !important; box-shadow: 0 6px 44px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04) !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; padding: 0 !important; } /* Nav links — Inter, spaced, crisp */ .navbar-nav .nav-link, .navbar-nav > li > a, nav ul li a { font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #CFCFCF !important; padding: 14px 20px !important; border-bottom: 2px solid transparent !important; transition: color 0.2s, border-color 0.2s !important; -webkit-font-smoothing: antialiased !important; filter: none !important; } .navbar-nav .nav-link:hover, .navbar-nav > li > a:hover { color: #C6A96B !important; border-bottom-color: #C6A96B !important; } .navbar-nav .nav-link.active, .navbar-nav > li.active > a { color: #E8A000 !important; border-bottom-color: #E8A000 !important; } /* HAMBURGER MENU — three dashes, gold color, clearly visible */ .navbar-toggler { border: 1px solid rgba(198,169,107,0.5) !important; border-radius: 2px !important; padding: 6px 10px !important; background: rgba(28,0,53,0.6) !important; transition: background 0.2s, border-color 0.2s !important; cursor: pointer !important; } .navbar-toggler:hover { background: rgba(42,0,79,0.8) !important; border-color: #E8A000 !important; } /* Gold three-dash hamburger icon */ .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Crect y='0' width='28' height='2.5' rx='1' fill='%23C6A96B'/%3E%3Crect y='9' width='28' height='2.5' rx='1' fill='%23C6A96B'/%3E%3Crect y='18' width='28' height='2.5' rx='1' fill='%23C6A96B'/%3E%3C/svg%3E") !important; width: 28px !important; height: 22px !important; display: block !important; filter: none !important; } /* Ensure hamburger is visible even if toggler-icon has inherited styles */ button.navbar-toggler span.navbar-toggler-icon { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; background-color: transparent !important; } /* "Apply Now / Loan Application" in nav — gold CTA button */ .navbar-nav a[href*="loan-application"], nav a[href*="loan-application"] { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.78rem !important; letter-spacing: 0.16em !important; background: linear-gradient(135deg, #C6A96B 0%, #E8A000 100%) !important; color: #050505 !important; padding: 9px 24px !important; border-radius: 1px !important; border: none !important; box-shadow: 0 3px 16px rgba(198,169,107,0.4) !important; margin-left: 12px !important; transition: all 0.22s !important; border-image: none !important; border-bottom: none !important; white-space: nowrap !important; } .navbar-nav a[href*="loan-application"]:hover { background: linear-gradient(135deg, #E8A000 0%, #C6A96B 100%) !important; color: #050505 !important; box-shadow: 0 6px 24px rgba(232,160,0,0.52) !important; transform: translateY(-1px) !important; } /* Dropdown */ .dropdown-menu, .navbar-nav .dropdown-menu { background: linear-gradient(160deg, #130020, #1C0035) !important; border: 1px solid rgba(198,169,107,0.2) !important; border-top: 2px solid #C6A96B !important; border-radius: 0 0 4px 4px !important; box-shadow: 0 18px 56px rgba(0,0,0,0.9) !important; padding: 8px 0 !important; } .dropdown-menu .dropdown-item, .dropdown-menu a { font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #CFCFCF !important; padding: 12px 28px !important; border-bottom: 1px solid rgba(88,0,160,0.12) !important; background: transparent !important; transition: background 0.15s, color 0.15s !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu a:hover { background: rgba(42,0,79,0.7) !important; color: #C6A96B !important; } /* ── 8. HERO SECTION ──────────────────────────────────────── */ .jumbotron, .hero, .hero-banner, #hero, .homepage-hero, section.hero { position: relative !important; overflow: hidden !important; background: linear-gradient( 158deg, #050505 0%, #0D0020 28%, #1C0035 55%, #2A004F 75%, #0D0020 100% ) !important; min-height: 600px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 100px 36px 80px !important; } /* Violet glow centre — nebula lighting */ .jumbotron::after, .hero::after, .homepage-hero::after { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient( ellipse 65% 62% at 50% 58%, rgba(88,0,160,0.38) 0%, transparent 72% ) !important; pointer-events: none !important; z-index: 0 !important; } /* "Apply for Financing" flame band at very top of hero */ .jumbotron::before, .hero::before, .homepage-hero::before { content: 'APPLY FOR FINANCING · ANY CREDIT WELCOME · GET APPROVED TODAY' !important; display: block !important; width: 100% !important; background: linear-gradient( 90deg, rgba(5,5,5,0) 0%, #C6A96B 15%, #E8A000 35%, #F2D890 50%, #E8A000 65%, #C6A96B 85%, rgba(5,5,5,0) 100% ) !important; color: #050505 !important; font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.28em !important; text-align: center !important; padding: 12px 20px !important; margin-bottom: 44px !important; position: relative !important; z-index: 2 !important; } .jumbotron > *, .hero > *, .homepage-hero > * { position: relative !important; z-index: 1 !important; } /* Hero H1 — Playfair, massive, gold underline */ .jumbotron h1, .hero h1, .homepage-hero h1 { font-size: clamp(3.5rem, 8vw, 6.5rem) !important; letter-spacing: 0.1em !important; line-height: 1.05 !important; margin-bottom: 20px !important; } .jumbotron h1::after, .hero h1::after { content: '' !important; display: block !important; margin: 22px auto 0 !important; width: 160px !important; height: 2px !important; background: linear-gradient( 90deg, transparent, #C6A96B, #E8A000, #F2D890, #E8A000, #C6A96B, transparent ) !important; } /* Hero subheadline */ .jumbotron p, .hero .lead, .hero-sub { font-family: 'Inter', sans-serif !important; font-size: clamp(1rem, 2vw, 1.25rem) !important; font-weight: 400 !important; color: #CFCFCF !important; letter-spacing: 0.02em !important; margin-top: 16px !important; max-width: 600px !important; } /* ── 9. BUTTONS ───────────────────────────────────────────── */ .btn, button, input[type="submit"], input[type="button"], a.btn { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.16em !important; font-size: 0.82rem !important; text-transform: uppercase !important; border-radius: 1px !important; transition: all 0.24s ease !important; cursor: pointer !important; -webkit-font-smoothing: antialiased !important; filter: none !important; } /* Primary CTA — gold gradient with shimmer */ .btn-primary, a.btn-primary, .cta-btn, input[type="submit"] { background: linear-gradient(135deg, #C6A96B 0%, #E8A000 100%) !important; border: none !important; color: #050505 !important; padding: 15px 40px !important; box-shadow: 0 4px 22px rgba(198,169,107,0.38) !important; position: relative !important; overflow: hidden !important; } /* Shimmer sweep on hover */ .btn-primary::before, a.btn-primary::before { content: '' !important; position: absolute !important; top: 0 !important; left: -80% !important; width: 55% !important; height: 100% !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.22), transparent ) !important; transform: skewX(-18deg) !important; transition: left 0.55s !important; } .btn-primary:hover::before { left: 130% !important; } .btn-primary:hover, a.btn-primary:hover, input[type="submit"]:hover { background: linear-gradient(135deg, #E8A000 0%, #C6A96B 100%) !important; box-shadow: 0 8px 30px rgba(232,160,0,0.52) !important; transform: translateY(-2px) !important; } /* Secondary — outlined chrome */ .btn-secondary, .btn-outline, .btn-default, a.btn-secondary, .btn-danger { background: transparent !important; border: 1px solid rgba(240,238,248,0.35) !important; color: #F0EEF8 !important; padding: 13px 36px !important; } .btn-secondary:hover, a.btn-secondary:hover, .btn-danger:hover { border-color: #C6A96B !important; color: #C6A96B !important; box-shadow: 0 4px 18px rgba(198,169,107,0.28) !important; transform: translateY(-2px) !important; } /* ── 10. VEHICLE / INVENTORY CARDS ───────────────────────── */ .vehicle-card, .car-card, .inventory-card, .listing-card, .card { background: linear-gradient(160deg, #100020 0%, #1C0035 100%) !important; border: 1px solid rgba(88,0,160,0.28) !important; border-radius: 2px !important; overflow: hidden !important; box-shadow: 0 6px 32px rgba(0,0,0,0.65) !important; transition: transform 0.3s cubic-bezier(.2,.8,.3,1), box-shadow 0.3s, border-color 0.3s !important; position: relative !important; } /* Gold top-edge on hover */ .vehicle-card::before, .card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, #C6A96B, #E8A000, #C6A96B, transparent) !important; opacity: 0 !important; transition: opacity 0.3s !important; z-index: 2 !important; } .vehicle-card:hover::before, .card:hover::before { opacity: 1 !important; } .vehicle-card:hover, .car-card:hover, .card:hover { transform: translateY(-7px) !important; box-shadow: 0 22px 56px rgba(88,0,160,0.22), 0 6px 20px rgba(198,169,107,0.1) !important; border-color: rgba(198,169,107,0.4) !important; } /* Car photo — object-position shows bottom of car (wheels in frame) */ .vehicle-card img, .car-card img, .inventory-card img, .listing-card img, .card img, .card-img-top, .vehicle-photo, img[class*="vehicle"], img[class*="car-img"] { width: 100% !important; height: 215px !important; object-fit: cover !important; object-position: center 82% !important; display: block !important; border-bottom: 1px solid rgba(198,169,107,0.15) !important; transition: transform 0.4s cubic-bezier(.2,.8,.3,1) !important; } .vehicle-card:hover img, .card:hover .card-img-top { transform: scale(1.05) !important; } /* Card body — generous padding (luxury = breathing room) */ .card-body, .vehicle-info, .listing-info { padding: 22px 24px !important; background: transparent !important; } /* Vehicle title — Playfair 22–26px per spec */ .card-title, .vehicle-title, .listing-title { font-family: 'Playfair Display', serif !important; font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #F0EEF8 !important; margin-bottom: 8px !important; line-height: 1.2 !important; } /* PRICE — Inter SemiBold, gold, 18–20px per spec */ .price, .vehicle-price, .listing-price, .card .price, [class*="price"], [class*="Price"], span[class*="amount"] { font-family: 'Inter', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #C6A96B !important; letter-spacing: 0.04em !important; background: none !important; filter: none !important; } /* MILEAGE / SPECS — Inter Regular, muted gray, 14–16px per spec */ .mileage, .vehicle-mileage, [class*="mileage"], [class*="miles"], span[class*="odometer"], .spec, [class*="spec"] { font-family: 'Inter', sans-serif !important; font-size: 0.88rem !important; font-weight: 400 !important; color: #8880A0 !important; letter-spacing: 0.04em !important; background: none !important; filter: none !important; } /* View Details */ .card .btn, .vehicle-card .btn, .listing-card .btn, .view-details { display: inline-block !important; margin-top: 14px !important; font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #CFCFCF !important; border: 1px solid rgba(198,169,107,0.3) !important; padding: 8px 22px !important; border-radius: 1px !important; background: transparent !important; transition: all 0.22s !important; } .card .btn:hover, .view-details:hover { border-color: #C6A96B !important; color: #C6A96B !important; box-shadow: 0 3px 14px rgba(198,169,107,0.22) !important; } /* Photo thumbnails */ .vehicle-photos, .photo-strip, .gallery-thumbs { display: flex !important; gap: 4px !important; padding: 6px !important; background: #050505 !important; overflow-x: auto !important; scrollbar-width: thin !important; scrollbar-color: #C6A96B #1C0035 !important; } .vehicle-photos img, .gallery-thumbs img { width: 56px !important; height: 42px !important; object-fit: cover !important; object-position: center 82% !important; border-radius: 1px !important; cursor: pointer !important; border: 1px solid rgba(88,0,160,0.35) !important; flex-shrink: 0 !important; transition: border-color 0.15s, transform 0.15s !important; } .vehicle-photos img:hover, .gallery-thumbs img:hover { border-color: #C6A96B !important; transform: scale(1.1) !important; } /* ── 11. SEARCH BAR ───────────────────────────────────────── */ input[placeholder*="stock"], input[placeholder*="VIN"], input[placeholder*="vin"], input[name*="search"], input[id*="search"], input[type="search"], .search-input { background: rgba(28,0,53,0.75) !important; border: 1px solid rgba(88,0,160,0.45) !important; border-radius: 1px !important; color: #F0EEF8 !important; font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; padding: 12px 18px !important; transition: border-color 0.2s !important; } input[placeholder*="stock"]::placeholder, input[type="search"]::placeholder { color: rgba(88,0,160,0.55) !important; font-style: italic !important; /* JS required to change placeholder text — see bottom comments */ } input[type="search"]:focus, input[placeholder*="stock"]:focus { border-color: #C6A96B !important; box-shadow: 0 0 0 3px rgba(198,169,107,0.12) !important; outline: none !important; } /* ── 12. SECTIONS — large padding (luxury = breathing room) ── */ section, .section, .page-section { padding: 100px 36px !important; position: relative !important; } section:nth-child(even) { background: rgba(28,0,53,0.28) !important; } /* Section title — Playfair, wide spacing, gold underline */ section > h2, .section-heading { text-align: center !important; margin-bottom: 56px !important; letter-spacing: 0.1em !important; } section > h2::after, .section-heading::after { content: '' !important; display: block !important; margin: 18px auto 0 !important; width: 80px !important; height: 1px !important; background: linear-gradient( 90deg, transparent, #C6A96B, #E8A000, #C6A96B, transparent ) !important; } /* ── 13. TESTIMONIALS SECTION ────────────────────────────── */ /* * Quotes use Playfair italic 28–32px per spec. * Customer names use Inter Medium. */ .testimonials-section, .reviews-section, .testimonials { background: linear-gradient(160deg, #0D0020, #1C0035) !important; padding: 100px 36px !important; } .testimonial-card, .review-card, .quote-block { background: rgba(5,5,5,0.5) !important; border: 1px solid rgba(198,169,107,0.15) !important; border-left: 3px solid #C6A96B !important; padding: 40px 44px !important; border-radius: 2px !important; margin-bottom: 28px !important; position: relative !important; } .testimonial-card::before { content: '\201C' !important; position: absolute !important; top: 16px !important; left: 24px !important; font-family: 'Playfair Display', serif !important; font-size: 5rem !important; line-height: 1 !important; color: rgba(198,169,107,0.18) !important; pointer-events: none !important; } /* Quote text — Playfair italic */ .testimonial-quote, .review-text, blockquote, .quote-text { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-size: clamp(1.1rem, 2vw, 1.4rem) !important; font-weight: 400 !important; line-height: 1.7 !important; color: #CFCFCF !important; letter-spacing: 0.01em !important; margin-bottom: 20px !important; } /* Customer name — Inter Medium */ .testimonial-name, .review-name, .quote-author, cite { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #C6A96B !important; } /* * INLINE TESTIMONIALS — injected via CSS content for the 4 reviews. * NOTE: These will display if Carsforsale allows a .testimonials-block div. * For best results, add the HTML directly to a custom content block. * * HTML to paste into Carsforsale custom HTML section: * *
*

What Our Customers Say

*
*

Consigned my vehicle and did a great job selling it.

* — Andrew W. *
*
*

The gentleman that owns this is absolutely awesome to work with! * He was very patient, helpful, and fair! He has integrity and you don't see that much anymore, * thank you guys for all of your help getting me on the road!

* — Rachelle W. *
*
*

Great experience! Excellent customer service for the UHaul side * and automotive sales! Bobby was a pleasure to deal with and very knowledgeable! * Definitely recommend to anyone!

* — Justin M. *
*
*

Owner was polite, respectful and honest with the truck I was buying. * Will buy from him again.

* — Nelma M. *
*
*/ /* ── 14. ABOUT / WELCOME BLOCK ────────────────────────────── */ .about-block, .welcome-section, .dealership-info { background: linear-gradient(135deg, #100020 0%, #1C0035 100%) !important; border-left: 2px solid #C6A96B !important; padding: 56px 64px !important; border-radius: 2px !important; box-shadow: 0 10px 50px rgba(0,0,0,0.65) !important; max-width: 960px !important; margin: 0 auto !important; } .about-block p { font-size: 1.05rem !important; line-height: 1.88 !important; max-width: 68ch !important; } /* ── 15. FORMS ────────────────────────────────────────────── */ form, .contact-form, .lead-form { background: linear-gradient(160deg, #100020 0%, #1C0035 100%) !important; border: 1px solid rgba(88,0,160,0.28) !important; border-top: 2px solid #C6A96B !important; border-radius: 2px !important; padding: 48px 52px !important; box-shadow: 0 12px 50px rgba(0,0,0,0.7) !important; max-width: 700px !important; margin: 0 auto !important; } .form-group, .form-field { margin-bottom: 24px !important; } label, .form-label { display: block !important; font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #C6A96B !important; margin-bottom: 8px !important; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], textarea, select, .form-control { width: 100% !important; background: rgba(5,5,5,0.8) !important; border: 1px solid rgba(88,0,160,0.4) !important; color: #F0EEF8 !important; padding: 13px 18px !important; border-radius: 1px !important; font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; font-weight: 400 !important; transition: border-color 0.22s, box-shadow 0.22s !important; outline: none !important; } input:focus, textarea:focus, select:focus, .form-control:focus { border-color: #C6A96B !important; box-shadow: 0 0 0 3px rgba(198,169,107,0.12) !important; } input::placeholder, textarea::placeholder { color: rgba(88,0,160,0.5) !important; font-style: italic !important; } select option { background: #1C0035 !important; color: #F0EEF8 !important; } form input[type="submit"], form button[type="submit"], form .btn-submit { width: 100% !important; padding: 16px !important; font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #C6A96B 0%, #E8A000 100%) !important; border: none !important; color: #050505 !important; border-radius: 1px !important; cursor: pointer !important; margin-top: 14px !important; box-shadow: 0 6px 24px rgba(198,169,107,0.38) !important; transition: all 0.24s !important; } form input[type="submit"]:hover, form button[type="submit"]:hover { background: linear-gradient(135deg, #E8A000 0%, #C6A96B 100%) !important; box-shadow: 0 9px 32px rgba(232,160,0,0.5) !important; transform: translateY(-2px) !important; } /* LOAN APPLICATION: top position, no VIN, "Information" not "Personal Information" */ .loan-form, form[id*="loan"], form[class*="loan"], form[action*="loan"], .financing-form, #loan-application form { border-top: 2px solid #C6A96B !important; max-width: 760px !important; margin: 30px auto !important; } /* Hide VIN field entirely */ input[name*="vin"], input[id*="vin"], input[name*="VIN"], input[id*="VIN"], input[placeholder*="VIN"], input[placeholder*="vin"], .vin-field, [class*="vin-"], [id*="vin-"], label[for*="vin"], label[for*="VIN"], .vin-label, /* Also hide any heading/label that says "Personal Information" */ legend[class*="personal"], fieldset[class*="personal"] > legend { display: none !important; } /* Relabel "Personal Information" heading — CSS content override */ legend, .form-section-title, fieldset legend, h3[class*="personal"], h4[class*="personal"], .personal-info-title { font-family: 'Playfair Display', serif !important; font-size: 1.3rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #F0EEF8 !important; margin-bottom: 20px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(198,169,107,0.22) !important; } /* Override "Personal Information" text to "Information" via CSS attr */ legend[id*="personal"]::before, .personal-information::before { content: 'Information' !important; } legend[id*="personal"], .personal-information { font-size: 0 !important; /* hide original text */ display: block !important; } legend[id*="personal"]::before, .personal-information::before { font-size: 1.3rem !important; } /* ── 16. FAQ ACCORDION ────────────────────────────────────── */ .accordion-item, .faq-item { background: rgba(16,0,32,0.85) !important; border: 1px solid rgba(88,0,160,0.22) !important; border-radius: 2px !important; margin-bottom: 10px !important; overflow: hidden !important; } .accordion-button, .faq-question { background: rgba(28,0,53,0.8) !important; color: #D8D4E8 !important; font-family: 'Playfair Display', serif !important; font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; border: none !important; padding: 18px 28px !important; width: 100% !important; text-align: left !important; cursor: pointer !important; transition: background 0.2s, color 0.2s !important; } .accordion-button:hover, .accordion-button:not(.collapsed) { background: rgba(42,0,79,0.9) !important; color: #C6A96B !important; } .accordion-body, .faq-answer { background: rgba(5,5,5,0.65) !important; color: #CFCFCF !important; padding: 22px 28px !important; line-height: 1.82 !important; font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; } .accordion-body strong { color: #C6A96B !important; } /* ── 17. CTA / GUARANTEE BANNERS ──────────────────────────── */ .financing-callout, .guarantee-banner, .satisfaction-banner, .cta-banner { background: linear-gradient(135deg, #2A004F 0%, #1C0035 100%) !important; border: 1px solid rgba(198,169,107,0.2) !important; border-top: 2px solid #C6A96B !important; text-align: center !important; padding: 80px 40px !important; border-radius: 2px !important; box-shadow: 0 12px 50px rgba(0,0,0,0.7) !important; } .financing-callout h2, .guarantee-banner h2, .satisfaction-banner h1 { color: #C6A96B !important; font-family: 'Playfair Display', serif !important; letter-spacing: 0.1em !important; margin-bottom: 16px !important; } .financing-callout p, .guarantee-banner p { color: #CFCFCF !important; font-size: 1.05rem !important; } .financing-callout .btn { background: linear-gradient(135deg, #C6A96B, #E8A000) !important; color: #050505 !important; border: none !important; margin-top: 24px !important; } /* ── 18. SHOP BY STYLE ────────────────────────────────────── */ .body-style-block, .shop-style-item, .category-block { background: linear-gradient(160deg, #100020, #1C0035) !important; border: 1px solid rgba(88,0,160,0.25) !important; border-radius: 2px !important; overflow: hidden !important; text-align: center !important; transition: transform 0.28s, border-color 0.28s !important; } .body-style-block:hover, .shop-style-item:hover { transform: translateY(-5px) !important; border-color: rgba(198,169,107,0.4) !important; } .body-style-block img, .shop-style-item img { width: 100% !important; aspect-ratio: 16/9 !important; object-fit: cover !important; object-position: center 78% !important; filter: brightness(0.75) !important; transition: filter 0.3s !important; } .body-style-block:hover img, .shop-style-item:hover img { filter: brightness(1) !important; } .body-style-block h3, .shop-style-item h3 { font-family: 'Playfair Display', serif !important; font-size: 1.1rem !important; color: #F0EEF8 !important; padding: 16px 12px !important; letter-spacing: 0.06em !important; } /* ── 19. POPULAR MAKES / MODELS ───────────────────────────── */ .popular-makes a, .make-list a, .model-list a { display: block !important; padding: 10px 0 !important; border-bottom: 1px solid rgba(88,0,160,0.15) !important; color: #CFCFCF !important; font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; letter-spacing: 0.04em !important; transition: color 0.15s, padding-left 0.2s !important; } .popular-makes a:hover, .make-list a:hover { color: #C6A96B !important; padding-left: 10px !important; } /* ── 20. GALLERY / LIGHTBOX ───────────────────────────────── */ .gallery img, .photo-gallery img { width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; object-position: center 82% !important; border-radius: 1px !important; border: 1px solid rgba(88,0,160,0.25) !important; cursor: pointer !important; transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s !important; } .gallery img:hover, .photo-gallery img:hover { transform: scale(1.04) !important; border-color: #C6A96B !important; box-shadow: 0 6px 24px rgba(198,169,107,0.25) !important; } .lightbox, .modal-backdrop { background: rgba(5,5,5,0.96) !important; } .lightbox img, .modal img { border: 1px solid rgba(198,169,107,0.35) !important; box-shadow: 0 0 70px rgba(198,169,107,0.18) !important; max-width: 90vw !important; max-height: 85vh !important; object-fit: contain !important; object-position: center 82% !important; } .gallery-prev, .gallery-next, .slick-prev, .slick-next, .carousel-control-prev, .carousel-control-next { background: rgba(28,0,53,0.88) !important; border: 1px solid rgba(198,169,107,0.38) !important; color: #C6A96B !important; border-radius: 50% !important; width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.22s !important; z-index: 10 !important; filter: none !important; } .gallery-prev:hover, .gallery-next:hover, .carousel-control-prev:hover, .carousel-control-next:hover { background: #C6A96B !important; color: #050505 !important; } /* ── 21. FOOTER ───────────────────────────────────────────── */ footer, .site-footer, #footer { background: linear-gradient(180deg, #080014 0%, #050505 100%) !important; border-top: 1px solid transparent !important; border-image: linear-gradient( 90deg, transparent, #C6A96B, #E8A000, #C6A96B, transparent ) 1 !important; color: #5A5470 !important; padding: 80px 36px 36px !important; } footer h4, footer h5, .site-footer h4 { font-family: 'Playfair Display', serif !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #C6A96B !important; margin-bottom: 20px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(198,169,107,0.18) !important; } footer a, .site-footer a { font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; letter-spacing: 0.04em !important; color: #5A5470 !important; transition: color 0.18s !important; } footer a:hover, .site-footer a:hover { color: #C6A96B !important; } footer ul, .footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; } footer ul li, .footer-links li { padding: 7px 0 !important; border-bottom: 1px solid rgba(88,0,160,0.12) !important; } /* Small accent text — Inter Light with wide tracking */ footer p, .footer-tagline { font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 0.78rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: #5A5470 !important; } .hours-table td { padding: 6px 12px 6px 0 !important; color: #CFCFCF !important; font-family: 'Inter', sans-serif !important; font-size: 0.88rem !important; border-bottom: 1px solid rgba(88,0,160,0.12) !important; } .hours-table td:last-child { color: #C6A96B !important; text-align: right !important; } .footer-bottom, .footer-legal { border-top: 1px solid rgba(88,0,160,0.18) !important; margin-top: 44px !important; padding-top: 24px !important; font-family: 'Inter', sans-serif !important; font-size: 0.72rem !important; font-weight: 300 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(88,0,160,0.55) !important; text-align: center !important; } .footer-bottom a { color: rgba(88,0,160,0.55) !important; } .footer-bottom a:hover { color: #C6A96B !important; } /* ── 22. TABLES ───────────────────────────────────────────── */ table { width: 100% !important; border-collapse: collapse !important; } th { font-family: 'Inter', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #C6A96B !important; background: rgba(42,0,79,0.85) !important; padding: 14px 18px !important; border-bottom: 1px solid #C6A96B !important; } td { font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; color: #CFCFCF !important; padding: 12px 18px !important; border-bottom: 1px solid rgba(88,0,160,0.12) !important; } tr:hover td { background: rgba(88,0,160,0.07) !important; } /* ── 23. MISC GLOBALS ─────────────────────────────────────── */ hr { border: none !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(88,0,160,0.35), #C6A96B, rgba(88,0,160,0.35), transparent ) !important; margin: 56px 0 !important; } .badge, .tag { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-radius: 1px !important; padding: 4px 10px !important; font-size: 0.68rem !important; } .badge-primary, .badge-featured { background: #C6A96B !important; color: #050505 !important; } .badge-secondary { background: rgba(88,0,160,0.5) !important; color: #F0EEF8 !important; } .alert-success, .form-success { background: rgba(16,0,32,0.85) !important; border: 1px solid #C6A96B !important; color: #C6A96B !important; font-family: 'Inter', sans-serif !important; border-radius: 2px !important; padding: 14px 22px !important; } .alert-danger, .form-error { background: rgba(16,0,32,0.85) !important; border: 1px solid rgba(207,207,207,0.3) !important; color: #F0EEF8 !important; font-family: 'Inter', sans-serif !important; border-radius: 2px !important; padding: 14px 22px !important; } ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-track { background: #050505 !important; } ::-webkit-scrollbar-thumb { background: #5800A0 !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb:hover { background: #C6A96B !important; } ::selection { background: #C6A96B !important; color: #050505 !important; } /* ── 24. PAGINATION ───────────────────────────────────────── */ .pagination { display: flex !important; gap: 6px !important; justify-content: center !important; padding: 28px 0 !important; } .page-item .page-link, .pagination a { font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; background: rgba(28,0,53,0.75) !important; border: 1px solid rgba(88,0,160,0.35) !important; color: #CFCFCF !important; border-radius: 1px !important; padding: 9px 16px !important; transition: all 0.2s !important; } .page-item.active .page-link, .pagination a.active, .page-item .page-link:hover { background: #C6A96B !important; border-color: #C6A96B !important; color: #050505 !important; } /* ── 25. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 1024px) { section { padding: 80px 28px !important; } form, .about-block { padding: 44px 36px !important; } } @media (max-width: 768px) { body { font-size: 15px !important; } h1 { font-size: 2.6rem !important; } h2 { font-size: 2rem !important; } section { padding: 56px 20px !important; } form, .contact-form, .loan-form { padding: 30px 22px !important; } .testimonial-card { padding: 28px 24px !important; } .about-block { padding: 36px 28px !important; } } @media (max-width: 480px) { h1 { font-size: 2rem !important; } h2 { font-size: 1.65rem !important; } .btn-primary, .btn-secondary { width: 100% !important; display: block !important; text-align: center !important; } section { padding: 44px 16px !important; } } @media print { body { background: #fff !important; color: #000 !important; } header, footer, nav { display: none !important; } } /* * ╔══ CARSFORSALE CUSTOM JS — PASTE INTO JS FIELD ════════════╗ * * // 1. Fix search placeholder * document.querySelectorAll( * 'input[placeholder*="stock"], input[placeholder*="VIN"], input[placeholder*="vin"]' * ).forEach(el => el.placeholder = 'Search For Your Dream Car'); * * // 2. Remove "40" from financing FAQ * document.querySelectorAll('p, li, .accordion-body, .faq-answer, div') * .forEach(el => { * if (el.children.length) return; * el.innerHTML = el.innerHTML * .replace(/over 40 different banks/gi, 'banks and credit unions') * .replace(/40 different banks/gi, 'banks and credit unions') * .replace(/over 40 banks/gi, 'banks') * .replace(/40 banks/gi, 'banks'); * }); * * // 3. Remove "VIN" label from loan form * document.querySelectorAll('label, legend, h3, h4, span') * .forEach(el => { * if (/\bvin\b/i.test(el.textContent)) el.closest('.form-group, fieldset') && * (el.closest('.form-group, fieldset').style.display = 'none'); * }); * * // 4. Rename "Personal Information" to "Information" * document.querySelectorAll('legend, h3, h4, .form-section-title') * .forEach(el => { * el.textContent = el.textContent.replace(/personal information/gi, 'Information'); * }); * * ╠══ SEO — CARSFORSALE PAGE SETTINGS ════════════════════════╣ * * Title: Good Guys Auto Sales | Corvettes, Lifted Trucks & Custom Cars — Cheyenne, WY * Meta: Cheyenne's home for Corvettes, lifted trucks, one-of-a-kind rides * & everyday vehicles. Flexible financing for all credit types. * 1215 Logan Ave — (307) 207-2196 — Apply online today. * * Keywords: luxury cars cheyenne wy · buy a car cheyenne wy * financing a car cheyenne wy · local dealership cheyenne wy * lifted trucks cheyenne wyoming · corvette for sale cheyenne wy * bad credit car financing cheyenne · used trucks cheyenne wyoming * schedule test drive cheyenne wyoming · hot rod cars cheyenne wy * * LocalBusiness + AutoDealer JSON-LD in : * "name": "Good Guys Auto Sales" * "address": "1215 Logan Ave, Cheyenne, WY 82001" * "telephone": "+13072072196" * "url": "https://www.goodguysautosalesllc.com/" * "openingHours": "Mo-Fr 09:00-17:00, Sa 10:00-16:00, Su 10:00-14:00" * ╚═══════════════════════════════════════════════════════════╝ */