/* ============================================================ AITCOH Financing Application — findealers.aitcoh.com Two pages per brand/BRAND.md, one shared stylesheet: index.html = Products (Trust Blue) dealers.html = Dealerships (Dealer Green) The body class sets the page accent custom properties; every accent-dependent rule below reads them. Fonts self-hosted (brand/assets/fonts variable TTFs). ============================================================ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../assets/fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations'); } :root { /* Canonical BRAND.md tokens */ --trust-blue: #255ea0; --trust-blue-dark: #1b477e; --trust-blue-light: #d9ecff; --dealer-green: #20605c; --dealer-green-dark: #154440; --dealer-green-light:#dff7c1; --radiant-gold: #fdd841; --charcoal: #333333; --gray: #e0e0e0; --light-linen: #fffce5; /* Supporting neutrals (match 2026-07 landing-page conventions) */ --deep-navy: #0e2a47; --text-grey: #4a5568; --pure-white: #ffffff; --wash: #f4f9ff; --accent-gold: #d69e2e; --trust-rgb: 37, 94, 160; --dealer-rgb: 32, 96, 92; --radius: 16px; --shadow-card: 0 8px 24px -10px rgba(14, 42, 71, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { /* Page accent: Products (Trust Blue) by default */ --p: var(--trust-blue); --p-dark: var(--trust-blue-dark); --p-light: var(--trust-blue-light); --p-rgb: var(--trust-rgb); --dark: var(--deep-navy); font-family: 'Source Sans Pro', sans-serif; font-size: 17px; line-height: 1.65; color: var(--text-grey); background: linear-gradient(180deg, var(--wash) 0%, #ffffff 55%); -webkit-font-smoothing: antialiased; } body.page-dealer { /* Dealerships (Dealer Green) */ --p: var(--dealer-green); --p-dark: var(--dealer-green-dark); --p-light: var(--dealer-green-light); --p-rgb: var(--dealer-rgb); --dark: var(--dealer-green-dark); } h1, h2, h3, h4, legend { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--deep-navy); letter-spacing: -0.02em; line-height: 1.2; } /* h1 lives only in the hero (white on the division gradient), so it is deliberately excluded from this darker-heading override. */ body.page-dealer h2, body.page-dealer h3, body.page-dealer h4, body.page-dealer legend { color: var(--dealer-green-dark); } em { font-style: italic; } sup { font-size: 0.55em; } img { max-width: 100%; height: auto; } a { color: var(--p); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray); } .header-inner { max-width: 1080px; margin: 0 auto; padding: 0.7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .header-logo img { display: block; width: 200px; height: auto; } .header-right { display: flex; align-items: center; gap: 1.1rem; } .header-tag { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-dark); background: var(--p-light); padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap; } .header-link { font-size: 0.92rem; font-weight: 600; color: var(--p-dark); text-decoration: none; border-bottom: 2px solid var(--p-light); padding-bottom: 1px; white-space: nowrap; } .header-link:hover { border-bottom-color: var(--p); } .header-phone { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; color: var(--p-dark); text-decoration: none; white-space: nowrap; } .header-phone:hover { color: var(--p); } /* ---------- Hero ---------- */ .hero { background: radial-gradient(900px 420px at 85% -10%, rgba(253, 216, 65, 0.14), transparent 60%), linear-gradient(160deg, var(--dark) 0%, var(--p-dark) 62%, var(--p) 100%); color: var(--pure-white); padding: 3.6rem 1.25rem 4.6rem; } .hero-inner { max-width: 860px; margin: 0 auto; text-align: center; } .hero-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--radiant-gold); margin-bottom: 1rem; } .hero h1 { color: var(--pure-white); font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 1rem; } .hero-sub { max-width: 680px; margin: 0 auto 1.6rem; font-size: 1.1rem; font-weight: 300; color: rgba(255, 255, 255, 0.92); } .hero-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .hero-chips li { font-size: 0.88rem; font-weight: 600; padding: 0.38rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); } /* ---------- Portal shell ---------- */ .portal { padding: 0 1.25rem 3.5rem; margin-top: -2.2rem; } .portal-inner { max-width: 860px; margin: 0 auto; } .tab:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(var(--p-rgb), 0.45); outline-offset: 2px; } .panel { background: var(--pure-white); border: 1px solid var(--gray); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2rem 2.2rem 2.4rem; } .panel-title { font-size: 1.55rem; margin-bottom: 0.5rem; } .panel-lead { font-size: 1.02rem; max-width: 640px; margin-bottom: 1.4rem; } /* ---------- Offer banner (services page) ---------- */ .offer-banner { background: radial-gradient(560px 220px at 90% -30%, rgba(253, 216, 65, 0.22), transparent 60%), linear-gradient(150deg, var(--dark) 0%, var(--p-dark) 90%); border-radius: 14px; padding: 1.3rem 1.5rem 1.4rem; text-align: center; } .offer-main { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; color: var(--pure-white); } .offer-rate { color: var(--radiant-gold); } .offer-sub { margin-top: 0.35rem; font-size: 0.98rem; color: rgba(255, 255, 255, 0.88); } .offer-disclaimer { font-size: 0.8rem; line-height: 1.55; color: #8a94a3; margin: 0.8rem 0.2rem 1.6rem; } /* ---------- Dealer program facts + pillars ---------- */ .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.7rem; margin: 0 0 1rem; } .fact { background: var(--wash); border: 1px solid var(--gray); border-top: 3px solid var(--p); border-radius: 10px; padding: 0.7rem 0.9rem 0.8rem; } .fact dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--p-dark); } .fact dd { margin-top: 0.15rem; font-weight: 700; font-size: 0.95rem; line-height: 1.4; color: var(--deep-navy); } body.page-dealer .fact dd { color: var(--dealer-green-dark); } .pillars { border: 1.5px solid var(--gray); border-radius: 12px; background: var(--pure-white); margin-bottom: 1.6rem; } .pillars summary { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--p-dark); padding: 0.75rem 1.1rem; cursor: pointer; list-style-position: inside; } .pillars summary:hover { background: var(--wash); border-radius: 12px; } .pillars[open] summary { border-bottom: 1px solid var(--gray); } .pillars ol { padding: 1rem 1.3rem 0.2rem 2.5rem; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; } .pillars ol strong { color: var(--p-dark); } .pillars p { font-size: 0.92rem; padding: 0.7rem 1.3rem 0; } .pillars p:last-child { padding-bottom: 1.1rem; } /* ---------- Form ---------- */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-section { border: none; padding: 1.6rem 0 0.4rem; border-top: 1px solid var(--gray); margin-top: 1.4rem; } .form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0.4rem; } .form-section > legend { font-size: 1.22rem; display: flex; align-items: center; gap: 0.65rem; padding: 1.4rem 0 0.2rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--p-dark); color: var(--pure-white); font-size: 0.95rem; flex: none; } .step-num.gold { background: var(--radiant-gold); color: var(--charcoal); } .section-note { font-size: 0.93rem; color: var(--text-grey); background: var(--wash); border-left: 3px solid var(--p); border-radius: 0 8px 8px 0; padding: 0.55rem 0.9rem; margin: 0.7rem 0 1rem; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 0.8rem; } .field { display: flex; flex-direction: column; } .field-wide { grid-column: 1 / -1; margin-top: 0.8rem; } .field label, .sub-legend { font-weight: 700; font-size: 0.92rem; color: var(--deep-navy); margin-bottom: 0.35rem; font-family: 'Source Sans Pro', sans-serif; letter-spacing: 0; } body.page-dealer .field label, body.page-dealer .sub-legend { color: var(--dealer-green-dark); } .req { color: #b23b3b; } .opt { font-weight: 400; color: #8a94a3; font-size: 0.85em; } input[type="text"], input[type="tel"], input[type="email"], select, textarea { font: inherit; color: var(--charcoal); background: var(--pure-white); border: 1.5px solid #c9d4e2; border-radius: 10px; padding: 0.6rem 0.8rem; width: 100%; transition: border-color 0.15s ease; } .panel input:hover, .panel select:hover, .panel textarea:hover { border-color: var(--p); } .field-hint { font-size: 0.82rem; color: #8a94a3; margin-top: 0.3rem; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b23b3b; } .sub-group { border: none; margin-top: 0.8rem; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.55rem; margin-top: 0.4rem; } .choice-stack { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.4rem; } .choice { display: flex; align-items: center; gap: 0.6rem; border: 1.5px solid #c9d4e2; border-radius: 10px; padding: 0.55rem 0.8rem; cursor: pointer; font-size: 0.95rem; color: var(--charcoal); transition: border-color 0.15s ease, background 0.15s ease; background: var(--pure-white); } .choice:hover { border-color: var(--p); background: var(--wash); } .choice input { accent-color: var(--p); width: 17px; height: 17px; flex: none; } .choice:has(input:checked) { border-color: var(--p); background: var(--p-light); } /* Consent section */ .consent-section { background: var(--light-linen); border: 1.5px solid var(--radiant-gold); border-radius: 12px; padding: 0.4rem 1.4rem 1.3rem; margin-top: 1.8rem; } .consent-section > legend { padding-left: 0.2rem; } .consent-check { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--pure-white); border: 1.5px solid var(--gray); border-radius: 10px; padding: 0.9rem 1rem; cursor: pointer; font-size: 0.98rem; color: var(--charcoal); margin-top: 0.8rem; } .consent-check input { accent-color: var(--p); width: 19px; height: 19px; margin-top: 0.2rem; flex: none; } /* Disclosure box (dealers page, required before the commitment step) */ .disclosure-box { background: var(--pure-white); border: 1.5px solid var(--gray); border-left: 4px solid var(--radiant-gold); border-radius: 10px; padding: 0.9rem 1.1rem 1rem; margin-top: 1.8rem; } .disclosure-box h3 { font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.45rem; } .disclosure-box p { font-size: 0.84rem; line-height: 1.55; color: var(--text-grey); } .disclosure-box p + p { margin-top: 0.5rem; } /* Errors + actions */ .form-error { margin-top: 1.2rem; background: #fdecec; border: 1px solid #e5b4b4; border-radius: 10px; color: #8f2727; font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1rem; } .form-actions { margin-top: 1.6rem; text-align: center; } .btn { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.02rem; border-radius: 999px; padding: 0.85rem 2.4rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .btn-primary { background: var(--p-dark); color: var(--pure-white); box-shadow: 0 10px 22px -8px rgba(var(--p-rgb), 0.55); } .btn-primary:hover { background: var(--p); transform: translateY(-1px); } .btn-primary[disabled] { opacity: 0.6; cursor: wait; transform: none; } .btn-ghost { background: var(--pure-white); color: var(--p-dark); border-color: var(--p-dark); } .btn-ghost:hover { background: var(--p-light); } .btn-small { font-size: 0.85rem; padding: 0.45rem 1.2rem; } .actions-note { font-size: 0.85rem; color: #8a94a3; margin-top: 0.65rem; } /* ---------- Success panel ---------- */ .success-panel { text-align: center; padding: 1rem 0.5rem; } .success-badge { width: 62px; height: 62px; margin: 0.4rem auto 1rem; border-radius: 50%; background: var(--p-light); color: var(--p-dark); display: flex; align-items: center; justify-content: center; } .success-panel h2 { font-size: 1.7rem; margin-bottom: 0.4rem; } .ref-code-box { margin: 1.4rem auto 0.8rem; max-width: 420px; background: var(--dark); border-radius: 14px; padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .ref-code-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--radiant-gold); } .ref-code { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.1rem; letter-spacing: 0.12em; color: var(--pure-white); } .ref-code-box .btn-ghost { border-color: rgba(255,255,255,0.5); color: var(--pure-white); background: transparent; } .ref-code-box .btn-ghost:hover { background: rgba(255,255,255,0.12); } .ref-code-note { max-width: 480px; margin: 0 auto; font-size: 0.92rem; } .next-steps { text-align: left; max-width: 560px; margin: 1.6rem auto; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; } .next-steps strong { color: var(--p-dark); } .success-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; } /* ---------- Trust band ---------- */ .trust { padding: 0 1.25rem 3rem; } .trust-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .trust-card { background: var(--pure-white); border: 1px solid var(--gray); border-top: 4px solid var(--p); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--shadow-card); } .trust-card h2 { font-size: 1.15rem; margin-bottom: 0.5rem; } .trust-card p { font-size: 0.95rem; } /* ---------- About strip ---------- */ .about { padding: 0 1.25rem 3rem; } .about-inner { max-width: 780px; margin: 0 auto; text-align: center; font-size: 1rem; color: var(--text-grey); border-top: 1px solid var(--gray); padding-top: 2rem; } .about-inner p + p { margin-top: 0.8rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--dark); color: rgba(255, 255, 255, 0.85); padding: 2.6rem 1.25rem 2.2rem; text-align: center; } .footer-logo { width: 190px; margin-bottom: 1rem; } .footer-contact { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.98rem; } .footer-contact a { color: var(--radiant-gold); font-weight: 700; text-decoration: none; } .footer-contact .dot { background: rgba(255,255,255,0.4); } .dot { width: 4px; height: 4px; border-radius: 50%; background: #b6c2d2; display: inline-block; flex: none; } .footer-note { margin-top: 0.9rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); max-width: 640px; margin-left: auto; margin-right: auto; } .footer-cross { margin-top: 0.9rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); } .footer-cross a { color: var(--radiant-gold); font-weight: 600; } .footer-legal { margin-top: 1.2rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .header-tag { display: none; } .hero { padding: 2.6rem 1.1rem 3.8rem; } .panel { padding: 1.4rem 1.1rem 1.8rem; } .field-grid { grid-template-columns: 1fr; } .trust-inner { grid-template-columns: 1fr; } .consent-section { padding: 0.3rem 1rem 1.1rem; } .success-actions .btn { width: 100%; } } @media (max-width: 480px) { .header-link { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }