/* ========================================================================== Simple Auto DFW — Main Stylesheet Organized by: Tokens > Base/Utilities > Components > Sections ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { --primary-orange: #F4510B; --bright-orange: #FF6A00; --deep-orange: #C93600; --dark: #111111; --dark-secondary: #1B1B1B; --charcoal: #292929; --soft-background: #F7F7F5; --white: #FFFFFF; --muted-text: #666666; --border-color: rgba(17, 17, 17, 0.10); --gradient-orange: linear-gradient(135deg, #FF6A00 0%, #F4510B 48%, #C93600 100%); --gradient-dark: linear-gradient(135deg, #101010 0%, #222222 100%); --shadow-orange: 0 18px 60px rgba(244, 81, 11, 0.22); --shadow-soft: 0 10px 40px rgba(17, 17, 17, 0.08); --shadow-card: 0 4px 24px rgba(17, 17, 17, 0.06); --font-heading: 'Poppins', 'Sora', sans-serif; --font-heading-alt: 'Sora', 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --radius-sm: 10px; --radius-card: 20px; --radius-lg: 28px; --radius-pill: 999px; --max-width: 1320px; --header-height: 88px; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: auto; /* Lenis handles smooth scroll via JS */ /* Belt-and-suspenders with body's overflow-x below: while #car-journey is pinned, GSAP applies position:fixed to .car-journey-pin, which escapes any ancestor's overflow:hidden unless that ancestor establishes a containing block (transform/filter/will-change) — ours doesn't. Root overflow-x:hidden reliably clips it regardless. */ overflow-x: hidden; } body { font-family: var(--font-body); color: var(--dark); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--dark); margin: 0; } p { color: var(--muted-text); margin: 0; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* Bootstrap's own .container-xl gutter defaults to a fairly tight 12px each side — enough padding is set explicitly here so content never sits flush against the viewport edge, regardless of Bootstrap's grid defaults. */ .container-xl { max-width: var(--max-width); padding-left: 20px; padding-right: 20px; } /* Skip link */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--dark); color: var(--white); padding: 12px 20px; z-index: 2000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Focus states */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bright-orange); outline-offset: 2px; } /* -------------------------------------------------------------------------- 3. UTILITIES / SHARED -------------------------------------------------------------------------- */ .text-orange-highlight { background: var(--gradient-orange); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-heading-wrap { margin-bottom: 48px; } .section-heading { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .section-subheading { font-size: 1.05rem; color: var(--muted-text); max-width: 640px; margin-left: auto; margin-right: auto; } .why-simple-auto-section .section-subheading, .locations-section .section-subheading { margin-left: 0; } .rounded-28 { border-radius: var(--radius-lg); overflow: hidden; } section { padding: 96px 0; position: relative; } /* Buttons */ .btn { font-family: var(--font-heading); font-weight: 600; border-radius: var(--radius-pill); padding: 0.85rem 1.9rem; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; border: 2px solid transparent; } .btn-lg { padding: 1rem 2.3rem; font-size: 1.05rem; } .btn-sm { padding: 0.55rem 1.3rem; font-size: 0.9rem; } .btn-orange { background: var(--gradient-orange); color: var(--white); border-color: transparent; } .btn-orange:hover, .btn-orange:focus-visible { color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-orange); } .btn-outline-dark { background: transparent; color: var(--dark); border-color: var(--dark); } .btn-outline-dark:hover, .btn-outline-dark:focus-visible { background: var(--dark); color: var(--white); transform: translateY(-3px); } .btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); } .btn-outline-light:hover, .btn-outline-light:focus-visible { background: var(--white); color: var(--dark); transform: translateY(-3px); } .btn-dark { background: var(--dark); color: var(--white); } .btn-dark:hover, .btn-dark:focus-visible { color: var(--white); transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,0.35); } /* Image placeholders */ .image-placeholder { background: linear-gradient(135deg, rgba(244,81,11,0.16) 0%, rgba(41,41,41,0.12) 100%); border: 1px dashed rgba(17,17,17,0.18); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted-text); text-align: center; padding: 20px; width: 100%; overflow: hidden; } .image-placeholder i { font-size: 2.2rem; color: var(--primary-orange); } .image-placeholder span { font-size: 0.85rem; font-weight: 500; max-width: 220px; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-16x10 { aspect-ratio: 16 / 10; } .ratio-16x6 { aspect-ratio: 16 / 6; } /* -------------------------------------------------------------------------- 4. HEADER / NAVBAR -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease; background: transparent; } .site-header.scrolled { background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); box-shadow: 0 4px 24px rgba(17,17,17,0.08); } #main-navbar { padding: 18px 0; transition: padding 0.3s ease; } .site-header.scrolled #main-navbar { padding: 12px 0; } .brand-logo { height: 44px; width: auto; } .brand-logo-sm { height: 36px; width: auto; } .main-nav-links .nav-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--dark); padding: 0.5rem 1rem; position: relative; } .main-nav-links .nav-link.active, .main-nav-links .nav-link:hover { color: var(--primary-orange); } .main-nav-links .nav-link.active::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 0.15rem; height: 2px; background: var(--gradient-orange); border-radius: 2px; } .navbar-actions { gap: 1.2rem; } .badge-spanish { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--deep-orange); background: rgba(244,81,11,0.10); padding: 6px 12px; border-radius: var(--radius-pill); } .nav-phone { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--dark); white-space: nowrap; } .nav-phone i { color: var(--primary-orange); margin-right: 4px; } .btn-nav-cta { padding: 0.65rem 1.4rem; font-size: 0.9rem; } .navbar-toggler { border: none; font-size: 1.6rem; background: none; color: var(--dark); } .navbar-toggler:focus { box-shadow: none; } .offcanvas-body .badge-spanish { display: inline-flex; } .mobile-nav-links .nav-link { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; padding: 0.6rem 0; color: var(--dark); border-bottom: 1px solid var(--border-color); } /* -------------------------------------------------------------------------- 5. HERO -------------------------------------------------------------------------- */ #hero-canvas-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 700px; z-index: -1; pointer-events: none; overflow: hidden; } #hero-canvas-wrap canvas { display: block; width: 100%; height: 100%; } .hero-section { padding-top: calc(var(--header-height) + 64px); padding-bottom: 80px; position: relative; overflow: hidden; } .eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-orange); margin-bottom: 18px; } .hero-heading { font-size: clamp(2.1rem, 4.4vw, 4.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; } .hero-paragraph { font-size: 1.15rem; max-width: 540px; margin-bottom: 32px; } .hero-cta-group { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .hero-microcopy { font-size: 0.9rem; color: var(--muted-text); margin-bottom: 36px; } .hero-trust-bullets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .hero-trust-bullets li { font-size: 0.92rem; font-weight: 500; color: var(--dark); display: flex; align-items: center; gap: 8px; } .hero-trust-bullets i { color: var(--primary-orange); } .hero-visual { position: relative; } .hero-image-frame { position: relative; max-width: 520px; margin: 0 auto; } .hero-glow { position: absolute; inset: -10%; background: radial-gradient(circle, rgba(255,106,0,0.35) 0%, rgba(244,81,11,0.12) 45%, transparent 70%); filter: blur(30px); z-index: -1; } .hero-vehicle-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); position: relative; z-index: 1; } .floating-card { position: absolute; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); padding: 12px 18px; display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--dark); } .floating-card i { color: var(--primary-orange); font-size: 1.1rem; } .floating-card-1 { top: 8%; left: -8%; } .floating-card-2 { bottom: 18%; right: -10%; } .floating-card-3 { bottom: -6%; left: 12%; } /* -------------------------------------------------------------------------- 6. TRUST STRIP -------------------------------------------------------------------------- */ .trust-strip { padding: 40px 0; background: var(--soft-background); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .trust-item i { font-size: 1.6rem; color: var(--primary-orange); } .trust-item span { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--dark); } /* -------------------------------------------------------------------------- 7. PRE-APPROVAL FORM -------------------------------------------------------------------------- */ .preapproval-section { background: var(--white); } .preapproval-form-card { max-width: 880px; margin: 0 auto; background: var(--soft-background); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-card); } .form-label { font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--dark); margin-bottom: 6px; } .form-control, .form-select { border-radius: var(--radius-sm); border: 1px solid var(--border-color); padding: 0.75rem 1rem; font-family: var(--font-body); } .form-control:focus, .form-select:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 3px rgba(244,81,11,0.15); } .consent-check { font-size: 0.9rem; } .form-check-input:checked { background-color: var(--primary-orange); border-color: var(--primary-orange); } .form-disclaimer-note { font-size: 0.8rem; color: var(--muted-text); margin-top: 12px; margin-bottom: 0; } .honeypot-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- 8. HOW IT WORKS -------------------------------------------------------------------------- */ .how-it-works-section { background: var(--soft-background); } .steps-wrap { position: relative; padding-top: 20px; } .steps-connector { position: absolute; top: -10px; left: 0; width: 100%; height: 120px; z-index: 0; } #stepsPath { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .step-card { position: relative; z-index: 1; background: var(--white); border-radius: var(--radius-card); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-card); border: 1px solid var(--border-color); } .step-number { display: inline-block; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--white); background: var(--gradient-orange); width: 52px; height: 52px; line-height: 52px; border-radius: 50%; margin-bottom: 20px; } .step-title { font-size: 1.3rem; margin-bottom: 12px; } .step-desc { font-size: 0.95rem; } /* -------------------------------------------------------------------------- 9. WHY SIMPLE AUTO -------------------------------------------------------------------------- */ .why-simple-auto-section { background: var(--white); } .benefit-list { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; } .benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--dark); } .benefit-list i { color: var(--primary-orange); font-size: 1.15rem; margin-top: 2px; } .metric-cards { margin-top: 12px; } .metric-card { background: var(--soft-background); border-radius: var(--radius-card); padding: 24px; text-align: center; border: 1px solid var(--border-color); } .metric-number { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 2rem; background: var(--gradient-orange); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric-label { font-size: 0.85rem; color: var(--muted-text); font-weight: 500; } /* -------------------------------------------------------------------------- 10. VEHICLE CATEGORIES -------------------------------------------------------------------------- */ .vehicle-categories-section { background: var(--soft-background); } .category-card { display: block; background: var(--white); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); transition: transform 0.35s ease, box-shadow 0.35s ease; } .category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-orange); } .category-img { border-radius: 0; aspect-ratio: 4/3; } .category-card:hover .category-img i { transform: scale(1.15); } .category-img i { transition: transform 0.35s ease; } .category-card-body { padding: 24px; } .category-name { font-size: 1.15rem; margin-bottom: 8px; } .category-desc { font-size: 0.88rem; margin-bottom: 16px; } .category-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--primary-orange); display: inline-flex; align-items: center; gap: 6px; } .category-card:hover .category-link i { transform: translateX(4px); } .category-link i { transition: transform 0.3s ease; } .category-footnote { font-size: 0.85rem; color: var(--muted-text); margin: 32px 0 20px; } /* -------------------------------------------------------------------------- 11. FEATURED VEHICLES -------------------------------------------------------------------------- */ .featured-vehicles-section { background: var(--white); } .vehicle-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .vehicle-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); } .vehicle-img { border-radius: 0; aspect-ratio: 16/10; } .vehicle-card-body { padding: 22px; } .vehicle-title { font-size: 1.1rem; margin-bottom: 6px; } .vehicle-meta { font-size: 0.8rem; margin-bottom: 10px; } .vehicle-price { font-family: var(--font-heading); font-weight: 700; color: var(--primary-orange); margin-bottom: 16px; } .vehicle-card-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 12. FINANCING BENEFITS (dark) -------------------------------------------------------------------------- */ .financing-benefits-section { background: var(--gradient-dark); overflow: hidden; } .financing-benefits-section p, .financing-benefits-section .section-subheading { color: rgba(255,255,255,0.7); } .financing-bg-fx { position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(244,81,11,0.18) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,106,0,0.14) 0%, transparent 50%); pointer-events: none; } .benefit-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); padding: 32px 24px; height: 100%; position: relative; z-index: 1; } .benefit-card i { font-size: 1.8rem; color: var(--bright-orange); margin-bottom: 16px; display: block; } .benefit-card h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 10px; } .benefit-card p { font-size: 0.88rem; margin: 0; } .financing-cta-panel { margin-top: 56px; background: var(--gradient-orange); border-radius: var(--radius-lg); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; position: relative; z-index: 1; } .financing-cta-panel h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 8px; } .financing-cta-panel p { color: rgba(255,255,255,0.9); margin: 0; } .financing-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; } .financing-cta-buttons .btn-orange { background: var(--white); color: var(--primary-orange); } .financing-cta-buttons .btn-orange:hover { color: var(--deep-orange); } /* -------------------------------------------------------------------------- 13. COMPARISON TABLE -------------------------------------------------------------------------- */ .comparison-section { background: var(--soft-background); } .comparison-table-wrap { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } .comparison-table { margin: 0; background: var(--white); } .comparison-table thead th { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: 20px 28px; border: none; } .comparison-table thead th:first-child { background: var(--charcoal); color: var(--white); } .comparison-table thead th:last-child { background: var(--gradient-orange); color: var(--white); } .comparison-table tbody td { padding: 18px 28px; border-color: var(--border-color); font-size: 0.95rem; vertical-align: middle; } .comparison-table tbody td i { margin-right: 10px; } .comparison-table tbody td:first-child i { color: #C93600; } .comparison-table tbody td:last-child i { color: var(--primary-orange); } .comparison-table tbody td:last-child { font-weight: 600; color: var(--dark); } /* -------------------------------------------------------------------------- 14. TESTIMONIALS -------------------------------------------------------------------------- */ .testimonials-section { background: var(--white); } .testimonial-slider { max-width: 760px; margin: 0 auto; position: relative; } .testimonial-track { position: relative; min-height: 260px; } .testimonial-slide { display: none; text-align: center; background: var(--soft-background); border-radius: var(--radius-lg); padding: 48px; border: 1px solid var(--border-color); position: relative; } .testimonial-slide.active { display: block; } .testimonial-stars { color: var(--bright-orange); font-size: 1.1rem; margin-bottom: 18px; } .testimonial-text { font-size: 1.1rem; color: var(--dark); font-style: italic; margin-bottom: 24px; } .testimonial-author { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .testimonial-name { font-family: var(--font-heading); font-weight: 700; } .testimonial-city { font-size: 0.85rem; color: var(--muted-text); } .testimonial-google-icon { color: #4285F4; font-size: 1.3rem; } .testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; } .testimonial-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--white); color: var(--dark); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .testimonial-btn:hover { background: var(--gradient-orange); color: var(--white); border-color: transparent; } .testimonial-dots { display: flex; gap: 8px; } .testimonial-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-color); border: none; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.25s ease; } .testimonial-dot.active { background: var(--primary-orange); transform: scale(1.2); } /* -------------------------------------------------------------------------- 15. BILINGUAL BANNER -------------------------------------------------------------------------- */ .bilingual-banner { padding: 0 0 96px; } .bilingual-inner { background: var(--charcoal); border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .bilingual-copy h2 { color: var(--white); font-size: 1.7rem; margin-bottom: 10px; } .bilingual-es { color: var(--bright-orange); } .bilingual-copy p { color: rgba(255,255,255,0.7); max-width: 480px; margin: 0; } .bilingual-actions { display: flex; gap: 14px; flex-wrap: wrap; } .bilingual-actions .btn-outline-dark { border-color: rgba(255,255,255,0.5); color: var(--white); } .bilingual-actions .btn-outline-dark:hover { background: var(--white); color: var(--dark); } /* -------------------------------------------------------------------------- 16. FAQ -------------------------------------------------------------------------- */ .faq-section { background: var(--soft-background); } .faq-accordion { max-width: 860px; margin: 0 auto; } .accordion-item { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-card) !important; margin-bottom: 16px; overflow: hidden; } .accordion-button { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; padding: 22px 26px; color: var(--dark); background: var(--white); } .accordion-button:not(.collapsed) { color: var(--primary-orange); background: var(--white); box-shadow: none; } .accordion-button:focus { box-shadow: none; } .accordion-button::after { background-size: 1.1rem; } .accordion-body { padding: 0 26px 24px; color: var(--muted-text); font-size: 0.95rem; } /* -------------------------------------------------------------------------- 17. LOCATIONS -------------------------------------------------------------------------- */ .locations-section { background: var(--white); } .location-card { background: var(--soft-background); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); } .location-map-placeholder { border-radius: 0; aspect-ratio: 16/9; } .location-card-body { padding: 32px; } .location-name { font-size: 1.3rem; margin-bottom: 14px; } .location-address, .location-hours { font-size: 0.92rem; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; } .location-address i, .location-hours i { color: var(--primary-orange); margin-top: 3px; } .location-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 12px; } .schedule-visit-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--primary-orange); display: inline-flex; align-items: center; gap: 6px; } /* -------------------------------------------------------------------------- 18. FINAL CTA -------------------------------------------------------------------------- */ .final-cta-section { background: var(--gradient-orange); padding: 100px 0; position: relative; overflow: hidden; } .final-cta-road { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); opacity: 0.5; pointer-events: none; } .final-cta-road svg { width: 100%; height: 100px; } .final-cta-heading { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 18px; position: relative; z-index: 1; } .final-cta-copy { color: rgba(255,255,255,0.92); max-width: 620px; margin: 0 auto 36px; font-size: 1.05rem; position: relative; z-index: 1; } .final-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 19. FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--dark); color: rgba(255,255,255,0.7); padding: 80px 0 0; } .footer-top { padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-logo { height: 42px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); } .footer-desc { font-size: 0.9rem; line-height: 1.7; max-width: 340px; } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: var(--white); transition: all 0.25s ease; } .footer-social a:hover { background: var(--gradient-orange); border-color: transparent; transform: translateY(-3px); } .footer-heading { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--white); margin-bottom: 20px; } .footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .footer-links a, .footer-contact a { font-size: 0.9rem; color: rgba(255,255,255,0.7); transition: color 0.2s ease; } .footer-links a:hover, .footer-contact a:hover { color: var(--bright-orange); } .footer-contact li { font-size: 0.9rem; display: flex; align-items: flex-start; gap: 8px; } .footer-contact i { color: var(--primary-orange); margin-top: 3px; } .footer-spanish { color: rgba(255,255,255,0.7); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; } .footer-copyright { margin: 0; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { color: rgba(255,255,255,0.6); } .footer-legal-links a:hover { color: var(--white); } .footer-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.45); padding: 20px 0 32px; max-width: 900px; line-height: 1.6; } /* -------------------------------------------------------------------------- 20. MOBILE STICKY CTA -------------------------------------------------------------------------- */ .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--white); border-top: 1px solid var(--border-color); box-shadow: 0 -6px 24px rgba(17,17,17,0.1); display: flex; padding-bottom: env(safe-area-inset-bottom, 0); transition: transform 0.3s ease; } .mobile-sticky-cta.is-hidden { transform: translateY(100%); } .sticky-cta-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: 0.7rem; font-weight: 600; color: var(--dark); } .sticky-cta-item i { font-size: 1.2rem; color: var(--primary-orange); } .sticky-cta-primary { background: var(--gradient-orange); color: var(--white); margin: 6px 4px; border-radius: var(--radius-sm); } .sticky-cta-primary i { color: var(--white); } /* -------------------------------------------------------------------------- 21. THANK YOU PAGE -------------------------------------------------------------------------- */ .thank-you-section { padding-top: calc(var(--header-height) + 100px); padding-bottom: 140px; min-height: 70vh; display: flex; align-items: center; } .thank-you-card { max-width: 620px; margin: 0 auto; } .thank-you-icon i { font-size: 4rem; color: var(--primary-orange); margin-bottom: 24px; } .thank-you-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; } .thank-you-copy { font-size: 1.05rem; margin-bottom: 36px; } .thank-you-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 22. CAR JOURNEY (scroll-driven section) Base rules below (no extra class) are the accessible static fallback: normal stacked flow, everything visible, no pin, no absolute overlay. animations.js adds "journey-animated" (+ "journey-desktop" or "journey-mobile") only when GSAP/ScrollTrigger/MotionPathPlugin are available AND prefers-reduced-motion is not set — that unlocks the pinned/parallax overlay rules further below. -------------------------------------------------------------------------- */ .car-journey-section { position: relative; overflow: hidden; background: var(--soft-background); padding: 96px 0; } .car-journey-pin { position: relative; width: 100%; overflow-x: hidden; } .journey-bg-text { position: absolute; top: 50%; left: 50%; /* Centered regardless of rendered width — it's meant to bleed off both edges symmetrically and gets clipped by the overflow-x:hidden chain (html > .car-journey-pin) rather than ever causing page-level scroll. */ transform: translate(-50%, -50%); font-family: var(--font-heading); font-weight: 800; font-size: clamp(3.5rem, 13vw, 11rem); color: rgba(244, 81, 11, 0.05); white-space: nowrap; letter-spacing: -0.02em; z-index: 0; pointer-events: none; user-select: none; } .journey-bg-glow { position: absolute; inset: -10%; background: radial-gradient(circle at 20% 30%, rgba(255, 106, 0, 0.10) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(244, 81, 11, 0.08) 0%, transparent 50%); z-index: 0; pointer-events: none; } .journey-inner { position: relative; /* Matches the z-index:3 already set on the individual text blocks (.journey-intro/.journey-mid-message/.journey-final) below — keeps the whole text layer explicitly above the road+car group (z-index 1–2). */ z-index: 3; } /* Progress indicator — hidden in the static fallback (no meaningful scroll progress to show without JS), shown once .journey-animated is active. */ .journey-progress { display: none; align-items: center; gap: 14px; } .journey-progress-track { width: 140px; height: 4px; background: rgba(17, 17, 17, 0.1); border-radius: var(--radius-pill); overflow: hidden; } .journey-progress-fill { height: 100%; width: 0%; background: var(--gradient-orange); border-radius: var(--radius-pill); } .journey-progress-label { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--dark); white-space: nowrap; } .journey-intro { max-width: 560px; } .journey-heading { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: 14px 0 18px; } .journey-copy { font-size: 1.05rem; max-width: 460px; } .journey-mid-message { margin: 60px 0; text-align: center; } .journey-mid-message p { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.6rem); color: var(--dark); line-height: 1.3; white-space: normal; margin: 0 auto; max-width: min(90vw, 640px); padding: 0 16px; box-sizing: border-box; } .journey-final { text-align: center; margin-top: 60px; } .journey-final-heading { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 auto 24px; max-width: min(90vw, 700px); padding: 0 16px; box-sizing: border-box; word-wrap: break-word; } .journey-final-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Road + car — static baseline: normal flow, centered, capped width */ .journey-road-wrap { position: relative; width: 100%; max-width: 900px; margin: 60px auto 0; aspect-ratio: 1600 / 600; } .journey-road-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .journey-road-base { fill: none; stroke: var(--charcoal); stroke-width: 10; stroke-linecap: round; opacity: 0.18; } .journey-road-progress { fill: none; stroke: var(--bright-orange); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.55)); } /* Explicit stacking order for the whole section (lowest to highest), rather than relying on DOM order: bg-text/glow (0) < road (1) < car+shadow (2) < text content blocks (3, set alongside their .journey-animated positioning further down). Only one text block is ever visible at a time via autoAlpha. */ .journey-car { position: relative; width: 240px; margin: 0 auto; z-index: 2; } .journey-car-shadow { position: absolute; left: 50%; bottom: -6px; width: 70%; height: 22px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0) 70%); border-radius: 50%; z-index: 0; } .journey-car-visual { position: relative; z-index: 1; transform-origin: 50% 70%; } .journey-car-img { width: 100%; height: auto; display: block; } /* -------------------- Animated (desktop/tablet) overlay -------------------- */ .journey-animated.journey-desktop .car-journey-pin { height: 100vh; min-height: 560px; display: flex; align-items: center; overflow: hidden; } .journey-animated.journey-desktop .journey-inner { width: 100%; height: 100%; } .journey-animated.journey-desktop .journey-progress { position: absolute; top: 32px; right: 0; z-index: 3; } .journey-animated.journey-desktop .journey-intro { position: absolute; top: 14%; left: 0; z-index: 3; } .journey-animated.journey-desktop .journey-mid-message { position: absolute; top: 50%; left: 50%; /* No CSS `transform` here on purpose — animations.js also writes `y` (and xPercent/yPercent for centering) to this element via gsap.set(). GSAP's inline transform write REPLACES the full transform string; a stylesheet-authored translate(-50%,-50%) here would get silently discarded the first time GSAP touches it, undoing the centering and pushing this width:100% block off the right edge of the viewport. GSAP owns xPercent:-50/yPercent:-50 instead (set once in animations.js). */ margin: 0; width: 100%; z-index: 3; /* Hidden by default the instant .journey-animated applies — this is a CSS-level safety net so the block can never flash visible before (or if) animations.js's gsap.set(autoAlpha) runs. JS overrides this via inline style once the scrub timeline starts updating. */ opacity: 0; visibility: hidden; } .journey-animated.journey-desktop .journey-final { position: absolute; bottom: 6%; left: 50%; /* Same reasoning as .journey-mid-message above — centering is owned by GSAP (xPercent:-50) rather than a CSS transform, since this element also receives a `y` tween. */ margin: 0; width: 100%; z-index: 3; padding: 0 24px; /* Same CSS-level safety net as .journey-mid-message above. */ opacity: 0; visibility: hidden; } .journey-animated.journey-desktop .journey-road-wrap { position: absolute; inset: 0; max-width: none; margin: 0; aspect-ratio: auto; z-index: 1; } .journey-animated.journey-desktop .journey-car { position: absolute; top: 0; left: 0; width: clamp(220px, 22vw, 420px); margin: 0; will-change: transform; } /* -------------------- Animated mobile (no pin, simple horizontal tween) -------------------- */ .journey-animated.journey-mobile .journey-progress { display: flex; margin-bottom: 28px; } /* Same CSS-level safety net as the desktop rules above — hidden the instant .journey-animated applies, JS overrides via inline autoAlpha as it scrubs. */ .journey-animated.journey-mobile .journey-mid-message, .journey-animated.journey-mobile .journey-final { opacity: 0; visibility: hidden; } .journey-animated.journey-mobile .journey-road-wrap { height: 220px; max-width: 100%; aspect-ratio: auto; margin-top: 32px; overflow: hidden; } .journey-animated.journey-mobile .journey-car { position: absolute; top: auto; bottom: 30px; left: 0; width: 220px; will-change: transform; } /* -------------------------------------------------------------------------- 23. ALERTS (form feedback) -------------------------------------------------------------------------- */ .alert { border-radius: var(--radius-sm); font-size: 0.92rem; margin-bottom: 24px; } /* -------------------------------------------------------------------------- 24. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Animation base state — JS (GSAP) animates these to visible; this is the no-JS fallback so critical content never stays hidden if scripts fail. */ [data-anim] { opacity: 1; } .js-anim-ready [data-anim] { opacity: 0; }