.elementor-672 .elementor-element.elementor-element-5ca32b61{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for text-editor, class: .elementor-element-2eeeff76 */<style> /* ============================================================ GTA AUTO GLASS SUPPLY COMPLETE HOME PAGE CSS SMART AJAX SEARCH V5 ============================================================ */ * { box-sizing: border-box; } .gta-new { --navy: #032c43; --blue: #174a69; --orange: #ff7107; --paper: #f4f7f8; --ink: #18242c; width: 100%; color: var(--ink); font-family: "Trebuchet MS", Arial, sans-serif; line-height: 1.5; } .gta-new * { box-sizing: border-box; } .gta-new a { color: inherit; text-decoration: none; } .gta-shell { width: min(1210px, calc(100% - 40px)); margin-inline: auto; } /* ============================================================ HERO ============================================================ */ .gta-hero { position: relative; min-height: 675px; overflow: hidden; background: #061720; color: #fff; } .gta-hero-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .gta-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, #020c13f7 0%, #082438e8 50%, #285e7cba 100% ); } .gta-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.55fr .75fr; align-items: center; gap: 80px; min-height: 675px; padding: 64px 0; } /* ============================================================ HERO TEXT ============================================================ */ .gta-kicker, .gta-tag { margin: 0 0 12px; color: var(--orange); font-size: 13px; font-weight: 900; letter-spacing: .1em; } .gta-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(48px, 5vw, 70px); font-weight: 900; line-height: 1.08; letter-spacing: -.045em; } .gta-hero h1 em { display: block; color: var(--orange); font-style: normal; } .gta-hero-lead { max-width: 720px; margin: 0; color: #e0e6ea; font-size: 19px; line-height: 1.65; } .gta-hero-lead strong { color: var(--orange); } /* ============================================================ BUTTONS ============================================================ */ .gta-actions { display: flex; gap: 18px; margin-top: 28px; } .gta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 49px; padding: 0 24px; border-radius: 7px; font-size: 15px; font-weight: 900; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .gta-white { background: #fff; color: var(--orange) !important; } .gta-orange { background: var(--orange); color: #fff !important; } .gta-dark { background: var(--navy); color: #fff !important; } /* ============================================================ FINDER ============================================================ */ .gta-finder { position: relative; z-index: 30; min-height: 405px; padding: 40px 36px; background: #dae3e8e8; border: 3px solid var(--orange); border-radius: 28px; color: var(--ink); backdrop-filter: blur(4px); transition: min-height .2s ease; } .gta-finder h2 { margin: 0 0 10px; color: var(--orange); font-size: 29px; } .gta-finder > p { margin: 0; color: #52616b; line-height: 1.6; } .gta-finder small { display: block; margin-top: 22px; color: #65747d; } .gta-finder > a { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--orange); font-size: 14px; font-weight: 900; } /* ============================================================ SEARCH FORM ============================================================ */ .gta-search { display: flex; flex-direction: column; gap: 12px; margin: 25px 0; } .gta-live-search-wrap { position: relative; width: 100%; } .gta-search input[type="text"] { width: 100%; height: 51px; padding: 0 15px; background: #fff; border: 1px solid #b9c5cb; border-radius: 7px; outline: none; color: #18242c; font: inherit; transition: border-color .2s ease, box-shadow .2s ease; } .gta-search input[type="text"]:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 113, 7, .12); } .gta-search button { height: 51px; flex: 0 0 51px; border: 0; border-radius: 7px; background: var(--orange); color: #fff; cursor: pointer; font: inherit; font-weight: 900; transition: transform .25s ease, box-shadow .25s ease; } /* ============================================================ LIVE RESULTS IMPORTANT: IN NORMAL DOCUMENT FLOW. IT PUSHES THE SEARCH BUTTON DOWN INSTEAD OF COVERING IT. ============================================================ */ .gta-live-results { display: none; position: relative; width: 100%; max-height: 310px; margin-top: 8px; overflow-x: hidden; overflow-y: auto; background: #fff; border: 1px solid #d4dde2; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 29, 48, .14); } .gta-live-results.active { display: block; } /* ============================================================ RESULT ITEM ============================================================ */ .gta-search-result { display: flex !important; align-items: center; gap: 11px; width: 100%; min-height: 62px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #edf1f3; outline: none; transition: background .16s ease, padding-left .16s ease; } .gta-search-result:last-child { border-bottom: 0; } .gta-search-result:hover, .gta-search-result.is-keyboard-active { padding-left: 16px; background: #f5f7f8; } .gta-make-result { background: #fff8f2; } .gta-make-result:hover, .gta-make-result.is-keyboard-active { background: #fff0e4; } .gta-model-result { background: #fff; } /* ============================================================ SEARCH RESULT IMAGES ============================================================ */ .gta-search-result img { display: block; width: 48px !important; height: 48px !important; min-width: 48px; flex: 0 0 48px; object-fit: contain; padding: 4px; background: #f4f6f7; border-radius: 8px; } .gta-search-result img.gta-category-image { object-fit: contain; padding: 5px; background: #fff; } /* ============================================================ CATEGORY FALLBACKS MAKE WITHOUT IMAGE = FIRST LETTER MODEL WITHOUT IMAGE = MODEL BADGE ============================================================ */ .gta-search-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; flex: 0 0 48px; border-radius: 8px; font-weight: 900; text-align: center; } .gta-search-icon--make { background: var(--navy); color: #fff; font-size: 20px; } .gta-search-icon--model { background: #edf2f5; border: 1px solid #d7e0e5; color: var(--navy); font-size: 9px; letter-spacing: .04em; } /* ============================================================ RESULT TEXT ============================================================ */ .gta-search-info { display: flex; flex: 1; flex-direction: column; min-width: 0; text-align: left; } .gta-search-info strong { display: block; overflow: hidden; color: var(--navy); font-size: 14px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .gta-search-info span { display: block; overflow: hidden; margin-top: 3px; color: #77848c; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .gta-search-arrow { flex: 0 0 auto; padding-left: 5px; color: var(--orange); font-size: 19px; font-weight: 900; } /* ============================================================ LOADING / EMPTY ============================================================ */ .gta-search-loading, .gta-no-results { padding: 18px 15px; color: #66757e; font-size: 13px; font-weight: 800; text-align: center; } .gta-search-loading::after { content: "..."; display: inline-block; width: 18px; overflow: hidden; vertical-align: bottom; animation: gtaSearchDots 1.2s infinite steps(4); } @keyframes gtaSearchDots { from { width: 0; } to { width: 18px; } } .gta-live-results::-webkit-scrollbar { width: 7px; } .gta-live-results::-webkit-scrollbar-track { background: #f1f4f5; } .gta-live-results::-webkit-scrollbar-thumb { background: #adb9bf; border-radius: 20px; } /* ============================================================ STATS ============================================================ */ .gta-stats { background: var(--navy); text-align: center; } .gta-stats h2 { margin: 0; padding: 18px 0; color: var(--orange); font-size: 28px; } .gta-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; color: var(--navy); } .gta-stat-grid > div { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 135px; border-right: 1px solid #d9e0e4; } .gta-stat-grid > div:last-child { border-right: 0; } .gta-stat-grid strong { display: inline-block; font-size: 45px; line-height: 1; transition: transform .25s ease, color .25s ease; } .gta-stat-grid span { margin-top: 10px; color: #6a767e; font-size: 13px; font-weight: 900; } /* ============================================================ GENERAL SECTION ============================================================ */ .gta-section { padding: 95px 0; } .gta-center { text-align: center; } .gta-section h2, .gta-why h2 { margin: 0; color: var(--navy); font-size: 45px; line-height: 1.1; } .gta-intro { max-width: 760px; margin: 17px auto 43px; color: #68757d; line-height: 1.75; } /* ============================================================ SERVICES ============================================================ */ .gta-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gta-service { overflow: hidden; background: #fff; border: 1px solid #dce3e6; border-radius: 9px; box-shadow: 0 8px 28px rgba(7, 36, 59, .06); } .gta-service img { display: block; width: 100%; height: 205px; padding: 10px; background: var(--paper); object-fit: contain; transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease; } .gta-service:last-child img { padding: 0; object-fit: cover; } .gta-service > div { padding: 22px; } .gta-service h3 { margin: 0 0 10px; color: var(--navy); font-size: 20px; } .gta-service p { min-height: 70px; margin: 0 0 15px; color: #68747c; font-size: 14px; line-height: 1.65; } .gta-service a { color: var(--orange); font-size: 13px; font-weight: 900; } /* ============================================================ ABOUT ============================================================ */ .gta-about { padding: 95px 0; background: var(--paper); } .gta-about-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; } .gta-about-img { display: block; width: 100%; height: 550px; object-fit: cover; border-radius: 8px; } .gta-about h2 { margin: 12px 0 22px; color: var(--navy); font-size: 45px; line-height: 1.08; } .gta-about-copy > p:not(.gta-tag) { margin: 0; color: #626f78; line-height: 1.8; } .gta-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; margin: 25px 0 30px; } .gta-checks span { font-size: 13px; font-weight: 800; } .gta-checks span::before { content: "✓"; margin-right: 8px; color: var(--orange); font-size: 17px; font-weight: 900; } /* ============================================================ WHY US ============================================================ */ .gta-why { padding: 90px 0; background: linear-gradient(120deg, var(--navy), var(--blue)); color: #fff; text-align: center; } .gta-why h2 { color: #fff; } .gta-why-intro { max-width: 700px; margin: 17px auto 42px; color: #c6d2d9; } .gta-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gta-why-card { padding: 29px 20px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; } .gta-why-icon { color: var(--orange); font-size: 32px; } .gta-why-card h3 { margin: 12px 0; color: var(--orange); font-size: 16px; } .gta-why-card p { margin: 0; color: #ced8de; font-size: 13px; line-height: 1.65; } /* ============================================================ CONTACT ============================================================ */ .gta-contact { padding: 60px 0; background: #fff; } .gta-contact .gta-shell { display: flex; align-items: center; justify-content: space-between; gap: 35px; } .gta-contact h2 { margin: 7px 0 0; color: var(--navy); font-size: 43px; } /* ============================================================ HOVERS ============================================================ */ @media (hover:hover) { .gta-btn:hover, .gta-search button:hover { transform: translateY(-3px) scale(.98); box-shadow: 0 10px 24px rgba(0,23,37,.18); } .gta-service, .gta-why-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; } .gta-service:hover { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(6,45,66,.11); } .gta-service:hover img { transform: scale(1.055); filter: saturate(1.08); } .gta-why-card:hover { transform: translateY(-8px); border-color: rgba(255,113,7,.5); box-shadow: 0 20px 36px rgba(0,23,37,.15); } .gta-stat-grid > div:hover strong { transform: scale(.92); color: var(--orange); } } /* ============================================================ ANIMATIONS ============================================================ */ .gta-hero-grid > div:first-child { animation: gtaFadeUp .85s .08s both cubic-bezier(.2,.8,.2,1); } .gta-finder { animation: gtaFadeUp .85s .22s both cubic-bezier(.2,.8,.2,1); } .gta-hero-bg { animation: gtaHeroZoom 14s ease-out both; } .gta-reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .gta-reveal.gta-visible { opacity: 1; transform: none; } .gta-service:nth-child(2), .gta-why-card:nth-child(2) { transition-delay: .08s; } .gta-service:nth-child(3), .gta-why-card:nth-child(3) { transition-delay: .16s; } .gta-service:nth-child(4), .gta-why-card:nth-child(4) { transition-delay: .24s; } @keyframes gtaFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes gtaHeroZoom { from { transform: scale(1.045); } to { transform: scale(1); } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 980px) { .gta-hero-grid { grid-template-columns: 1fr; gap: 45px; padding: 80px 0; } .gta-finder { width: 100%; max-width: 520px; } .gta-services, .gta-why-grid { grid-template-columns: 1fr 1fr; } .gta-about-grid { grid-template-columns: 1fr; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 650px) { .gta-shell { width: calc(100% - 28px); } .gta-hero { min-height: auto; } .gta-hero-grid { min-height: auto; gap: 40px; padding: 60px 0; } .gta-hero h1 { font-size: 43px; } .gta-hero-lead { font-size: 16px; } .gta-actions { flex-direction: column; } .gta-btn { width: 100%; } .gta-finder { min-height: auto; padding: 30px 23px; border-radius: 20px; } .gta-live-results { max-height: 275px; } .gta-stats h2 { font-size: 23px; } .gta-stat-grid { grid-template-columns: 1fr; } .gta-stat-grid > div { height: 92px; border-right: 0; border-bottom: 1px solid #d9e0e4; } .gta-stat-grid > div:last-child { border-bottom: 0; } .gta-stat-grid strong { font-size: 35px; } .gta-section { padding: 70px 0; } .gta-section h2, .gta-why h2 { font-size: 37px; } .gta-services, .gta-why-grid { grid-template-columns: 1fr; } .gta-service img { height: 230px; } .gta-about { padding: 70px 0; } .gta-about-img { height: 350px; } .gta-about h2 { font-size: 38px; } .gta-checks { grid-template-columns: 1fr; } .gta-contact .gta-shell { align-items: flex-start; flex-direction: column; } .gta-contact h2 { font-size: 36px; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { .gta-new * { animation: none !important; transition: none !important; } .gta-reveal { opacity: 1; transform: none; } } </style> <style id="gta-dual-search-css"> .gta-search-methods{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:22px 0 16px; padding:5px; background:rgba(255,255,255,.55); border:1px solid rgba(3,44,67,.12); border-radius:11px; } .gta-search-method{ min-height:44px; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:#032c43; cursor:pointer; font:inherit; font-size:13px; font-weight:900; line-height:1.2; transition:background .2s ease,color .2s ease,box-shadow .2s ease; } .gta-search-method.is-active{ background:#ff7107; color:#fff; box-shadow:0 7px 16px rgba(255,113,7,.24); } .gta-search-panel{display:none;} .gta-search-panel.is-active{display:block;} .gta-search-panel .gta-search{margin:0 0 22px;} #gta-panel-vehicle{ margin-bottom:22px; } #gta-panel-vehicle select, #gta-panel-vehicle input[type="text"]{ width:100% !important; min-height:49px; margin:0 0 10px !important; padding:0 13px !important; background:#fff; border:1px solid #b9c5cb !important; border-radius:7px !important; color:#18242c; font:inherit; } #gta-panel-vehicle input[type="submit"], #gta-panel-vehicle button{ width:100%; min-height:49px; padding:0 14px; border:0; border-radius:7px; background:#ff7107; color:#fff; cursor:pointer; font:inherit; font-weight:900; } .gta-ymm-note{ margin:0 0 12px; color:#65747d; font-size:12px; font-weight:700; } @media(max-width:480px){ .gta-search-methods{grid-template-columns:1fr;} } </style> <style id="gta-fixed-finder">
/* ============================================================
   GTA FINDER - READABLE DESKTOP/MOBILE SIZE
   Only visual sizing. Search/AJAX logic is unchanged.
============================================================ */

.gta-new .gta-finder{
    height:455px !important;
    min-height:455px !important;
    width:100% !important;
    max-width:440px !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;

    padding:30px 30px !important;

    background:rgba(235,241,245,.96) !important;
    border:2px solid #ff7107 !important;
    border-radius:24px !important;

    box-shadow:0 20px 48px rgba(0,24,40,.22) !important;
}

.gta-new .gta-finder h2{
    flex:none !important;
    margin:0 0 8px !important;
    font-size:31px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
}

/* Search mode switch */
.gta-new .gta-finder .gta-search-methods{
    display:flex !important;
    flex:none !important;

    min-height:50px !important;
    margin:14px 0 16px !important;
    padding:4px !important;
    gap:6px !important;

    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(3,44,67,.13) !important;
    border-radius:11px !important;
}

.gta-new .gta-finder .gta-search-methods > br{
    display:none !important;
}

.gta-new .gta-finder .gta-search-method{
    flex:1 1 0 !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;

    padding:0 10px !important;

    border:0 !important;
    border-radius:8px !important;

    background:transparent !important;
    color:#032c43 !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.15 !important;

    cursor:pointer !important;
}

.gta-new .gta-finder .gta-search-method.is-active{
    background:#ff7107 !important;
    color:#fff !important;
    box-shadow:0 7px 16px rgba(255,113,7,.24) !important;
}

/* Equal usable area for both search modes */
.gta-new .gta-finder .gta-search-panel{
    height:205px !important;
    min-height:205px !important;
    flex:none !important;
}

.gta-new .gta-finder .gta-search-panel[hidden]{
    display:none !important;
}

.gta-new .gta-finder .gta-search-panel.is-active{
    display:block !important;
}

/* Glass code search */
.gta-new .gta-finder .gta-search-panel .gta-search{
    margin:0 !important;
    gap:11px !important;
}

.gta-new .gta-finder .gta-search-panel .gta-search > p{
    margin:0 !important;
}

.gta-new .gta-finder .gta-search-panel .gta-search > p > br{
    display:none !important;
}

.gta-new .gta-finder #gta-live-search{
    height:50px !important;
    min-height:50px !important;

    padding:0 15px !important;

    border:1px solid #b7c5cd !important;
    border-radius:9px !important;

    background:#fff !important;
    color:#18242c !important;

    font-size:15px !important;
    font-weight:700 !important;
}

.gta-new .gta-finder #gta-search-form button[type="submit"]{
    width:100% !important;
    height:50px !important;
    min-height:50px !important;

    border:0 !important;
    border-radius:9px !important;

    background:#ff7107 !important;
    color:#fff !important;

    font-size:15px !important;
    font-weight:900 !important;
}

/* AJAX results */
.gta-new .gta-finder .gta-live-search-wrap{
    position:relative !important;
}

.gta-new .gta-finder .gta-live-results{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    z-index:1000 !important;

    width:100% !important;
    max-height:220px !important;
    margin-top:6px !important;
}

.gta-new .gta-finder .gta-live-results:not(.active){
    display:none !important;
}

.gta-new .gta-finder .gta-live-results.active{
    display:block !important;
}

/* YMM */
.gta-new .gta-finder .gta-ymm-note{
    display:none !important;
}

.gta-new .gta-finder #gta-panel-vehicle{
    margin:0 !important;
}

.gta-new .gta-finder #gta-panel-vehicle .ymm-box,
.gta-new .gta-finder #gta-panel-vehicle .block-content{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
}

.gta-new .gta-finder #gta-panel-vehicle select{
    display:block !important;

    width:100% !important;
    height:44px !important;
    min-height:44px !important;

    margin:0 0 7px !important;
    padding:0 13px !important;

    background:#fff !important;
    border:1px solid #b7c5cd !important;
    border-radius:8px !important;

    color:#263740 !important;

    font-size:14px !important;
    font-weight:700 !important;
}

.gta-new .gta-finder #gta-panel-vehicle select:focus{
    border-color:#ff7107 !important;
    box-shadow:0 0 0 3px rgba(255,113,7,.12) !important;
    outline:none !important;
}

.gta-new .gta-finder #gta-panel-vehicle select:disabled{
    opacity:.65 !important;
}

.gta-new .gta-finder #gta-panel-vehicle button,
.gta-new .gta-finder #gta-panel-vehicle input[type="submit"]{
    width:100% !important;
    height:45px !important;
    min-height:45px !important;

    margin:0 !important;
    padding:0 14px !important;

    border:0 !important;
    border-radius:8px !important;

    background:#ff7107 !important;
    color:#fff !important;

    font-size:14px !important;
    font-weight:900 !important;
}

/* Help text */
.gta-new .gta-finder > small{
    margin-top:auto !important;

    color:#65747d !important;
    font-size:12.5px !important;
    font-weight:600 !important;
}

.gta-new .gta-finder > a{
    margin-top:4px !important;

    color:#ff7107 !important;
    font-size:13px !important;
    font-weight:900 !important;
}

/* Give the finder a little more desktop room */
@media (min-width:981px){
    .gta-new .gta-hero-grid{
        grid-template-columns:1.4fr .9fr !important;
        gap:65px !important;
    }

    .gta-new .gta-hero-grid > .gta-finder{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:end !important;
        align-self:center !important;
    }
}

/* Mobile */
@media (max-width:650px){
    .gta-new .gta-finder{
        max-width:100% !important;
        height:auto !important;
        min-height:430px !important;

        padding:26px 20px !important;
        border-radius:20px !important;
    }

    .gta-new .gta-finder h2{
        font-size:27px !important;
    }

    .gta-new .gta-finder .gta-search-methods{
        min-height:48px !important;
    }

    .gta-new .gta-finder .gta-search-method{
        height:40px !important;
        min-height:40px !important;
        padding:0 7px !important;
        font-size:12.5px !important;
    }

    .gta-new .gta-finder .gta-search-panel{
        height:205px !important;
        min-height:205px !important;
    }

    .gta-new .gta-finder #gta-panel-vehicle select{
        height:44px !important;
        min-height:44px !important;
        font-size:14px !important;
    }
}
</style> <style id="gta-finder-position-only">.gta-hero-grid>p:empty,.gta-hero-grid>br{display:none!important}@media(min-width:981px){.gta-hero-grid>div:first-child{grid-column:1;grid-row:1}.gta-hero-grid>.gta-finder{grid-column:2;grid-row:1;align-self:center;width:100%}}</style>
<div class="gta-new">

<!-- ===================================================== HERO ====================================================== -->

<section class="gta-hero"><img class="gta-hero-bg" src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/exec-2f2d2125-f744-4bfd-845b-7b16d392e053.png" alt="GTA Auto Glass warehouse" />
<div class="gta-shell gta-hero-grid">
<div>
<p class="gta-kicker">PROFESSIONAL AUTO GLASS SUPPLY</p>

<h1>MOST RELIABLE
<em>AUTO GLASS</em>
SUPPLIER IN THE GTA</h1>
<p class="gta-hero-lead">Providing high-quality
<strong>windshields, rear glass, door glass</strong>
and vehicle fitment support.</p>

<div class="gta-actions"><a class="gta-btn gta-white" href="/index.php/shop/">
Browse Inventory
</a><a class="gta-btn gta-orange" href="/index.php/about-us/">
Get More Information...
</a></div>
</div>
<!-- ================================================= FINDER ================================================== -->

<aside class="gta-finder">
<h2>Find Your Auto Glass</h2>
Search the current inventory by vehicle details
or glass code.
<div class="gta-search-methods" role="tablist" aria-label="Choose a search method"><button class="gta-search-method is-active" role="tab" type="button" aria-selected="true" aria-controls="gta-panel-glass" data-gta-search-tab="glass">Glass Code</button><button class="gta-search-method" role="tab" type="button" aria-selected="false" aria-controls="gta-panel-vehicle" data-gta-search-tab="vehicle">Year / Make / Model</button></div>
<div id="gta-panel-glass" class="gta-search-panel is-active" role="tabpanel"><form id="gta-search-form" class="gta-search" action="/" method="get">
<div class="gta-live-search-wrap">

<input id="gta-live-search" spellcheck="false" autocomplete="off" name="s" type="text" placeholder="Enter glass code" aria-label="Search by glass code" aria-autocomplete="list" aria-expanded="false" aria-controls="gta-live-results" />
<div id="gta-live-results" class="gta-live-results" role="listbox" aria-label="Glass code search suggestions"></div>
</div>
<input name="post_type" type="hidden" value="product" />
<button type="submit">⌕ Search Glass Code</button>

</form></div>
<div id="gta-panel-vehicle" class="gta-search-panel" role="tabpanel" hidden="">
<p class="gta-ymm-note">Select your vehicle year, make and model.</p>
[ymm_.elementor-672 .elementor-element.elementor-element-2eeeff76]

</div>
<small>Need help confirming fitment?</small>

<a href="/index.php/contact-us/">
Contact our team →
</a>

</aside></div>
</section><!-- ===================================================== STATS ====================================================== -->

<section class="gta-stats">
<div class="gta-shell">
<h2>MORE THAN</h2>
<div class="gta-stat-grid">
<div><strong>14+</strong>
POPULAR BRANDS</div>
<div><strong>100+</strong>
GLASS APPLICATIONS</div>
<div><strong>GTA</strong>
LOCAL SERVICE</div>
</div>
</div>
</section><!-- ===================================================== SERVICES ====================================================== -->

<section id="services" class="gta-section gta-center">
<div class="gta-shell">
<p class="gta-tag">WHAT WE SUPPLY</p>

<h2>OUR SERVICES</h2>
<p class="gta-intro">Our service is designed for installers and automotive
professionals who need clear information, dependable
availability and a fast next step.</p>

<div class="gta-services"><article class="gta-service"><img src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/front-windshield.png" alt="Front windshield" />
<div>
<h3>Front Windshields</h3>
Find front glass by vehicle, year and NAGS code.

<a href="/index.php/shop/">Click here →</a>

</div>
</article><article class="gta-service"><img src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/rear-windshield.png" alt="Rear windshield" />
<div>
<h3>Rear Auto Glass</h3>
Browse available back glass for popular makes and models.

<a href="/index.php/shop/">Click here →</a>

</div>
</article><article class="gta-service"><img src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/side-door-auto-glass.png" alt="Side door auto glass" />
<div>
<h3>Door &amp; Side Glass</h3>
Source side windows and door glass with clear fitment details.

<a href="/index.php/shop/">Click here →</a>

</div>
</article><article class="gta-service"><img src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/exec-293666d1-6e62-4c9f-b006-386e10848baf.png" alt="Auto glass technician" />
<div>
<h3>Fitment Support</h3>
Get help confirming the correct glass before pickup.

<a href="/index.php/contact-us/">Click here →</a>

</div>
</article></div>
</div>
</section><!-- ===================================================== ABOUT ====================================================== -->

<section id="about" class="gta-about">
<div class="gta-shell gta-about-grid">

<img class="gta-about-img" src="https://gtaautoglasssupply.com/wp-content/uploads/2026/09/exec-293666d1-6e62-4c9f-b006-386e10848baf.png" alt="Technician inspecting automotive glass" />
<div class="gta-about-copy">
<p class="gta-tag">GTA AUTO GLASS SUPPLY</p>

<h2>Your trusted auto glass supply partner</h2>
We help shops and installers identify the right
glass through vehicle information, year ranges
and NAGS codes. Our goal is simple: make product
discovery clear and keep your work moving.
<div class="gta-checks">Clear product information
Vehicle fitment support
Trade-focused inventory
Convenient GTA service</div>
<a class="gta-btn gta-orange" href="/index.php/shop/">
Explore Inventory
</a>

</div>
</div>
</section><!-- ===================================================== WHY US ====================================================== -->

<section class="gta-why">
<div class="gta-shell">
<h2>WHY PEOPLE WANT TO WORK WITH US</h2>
<p class="gta-why-intro">Professional service built around speed, accuracy
and straightforward communication.</p>

<div class="gta-why-grid">
<div class="gta-why-card">
<div class="gta-why-icon">✓</div>
<h3>RELIABLE</h3>
Useful inventory information for confident product selection.

</div>
<div class="gta-why-card">
<div class="gta-why-icon">◷</div>
<h3>FAST IN TASKS</h3>
A clear path from product lookup to availability and pickup.

</div>
<div class="gta-why-card">
<div class="gta-why-icon">★</div>
<h3>TRADE FOCUSED</h3>
Built for the practical needs of installers and repair shops.

</div>
<div class="gta-why-card">
<div class="gta-why-icon">◆</div>
<h3>GTA BASED</h3>
Serving automotive professionals across the Greater Toronto Area.

</div>
</div>
</div>
</section><!-- ===================================================== CONTACT ====================================================== -->

<section id="contact" class="gta-contact">
<div class="gta-shell">
<div>
<p class="gta-tag">BE IN TOUCH</p>

<h2>Need help finding the right glass?</h2>
</div>
<a class="gta-btn gta-orange" href="/index.php/contact-us/">
CONTACT OUR TEAM →
</a>

</div>
</section></div>
<script id="gta-dual-search-script"> (function(){     function gtaDualSearchBoot(){         var tabs=document.querySelectorAll("[data-gta-search-tab]");         var panels={             glass:document.getElementById("gta-panel-glass"),             vehicle:document.getElementById("gta-panel-vehicle")         };         if(!tabs.length||!panels.glass||!panels.vehicle){return;}         tabs.forEach(function(tab){             tab.addEventListener("click",function(){                 var target=tab.getAttribute("data-gta-search-tab");                 tabs.forEach(function(item){                     var active=item===tab;                     item.classList.toggle("is-active",active);                     item.setAttribute("aria-selected",active?"true":"false");                 });                 Object.keys(panels).forEach(function(key){                     var active=key===target;                     panels[key].classList.toggle("is-active",active);                     panels[key].hidden=!active;                 });                 var results=document.getElementById("gta-live-results");                 var input=document.getElementById("gta-live-search");                 if(target!=="glass"&&results&&input){                     results.classList.remove("active");                     input.setAttribute("aria-expanded","false");                 }             });         });     }     if(document.readyState==="loading"){         document.addEventListener("DOMContentLoaded",gtaDualSearchBoot);     }else{         gtaDualSearchBoot();     } })(); </script>

<script id="gta-glass-ajax-fixed">(function(){function boot(){var form=document.getElementById("gta-search-form"),input=document.getElementById("gta-live-search"),box=document.getElementById("gta-live-results");if(!form||!input||!box)return;var timer,controller,seq=0,active=-1;function norm(v){return String(v||"").toUpperCase().replace(/[0\s-]/g,"");}function close(){box.classList.remove("active");input.setAttribute("aria-expanded","false");}function show(message){box.replaceChildren();var n=document.createElement("div");n.className="gta-no-results";n.textContent=message;box.appendChild(n);box.classList.add("active");input.setAttribute("aria-expanded","true");}function run(){clearTimeout(timer);if(controller)controller.abort();var id=++seq,q=input.value.trim(),needle=norm(q);active=-1;box.replaceChildren();if(needle.length<2){close();return;}show("Searching glass codes...");controller=new AbortController();fetch("/wp-admin/admin-ajax.php?action=gta_live_search"+String.fromCharCode(38)+"q="+encodeURIComponent(q),{credentials:"same-origin",signal:controller.signal}).then(function(r){if(!r.ok)throw Error();return r.json();}).then(function(r){if(id!==seq)return;if(!r.success||!Array.isArray(r.data))throw Error();var items=r.data.filter(function(item){if(/^SKU:\s*YMM-/i.test(String(item.meta||"")))return false;return item.type==="category"?false:norm(String(item.meta||"").replace(/^(SKU|NAGS|Glass Code):\s*/i,"")).includes(needle);});if(!items.length){show("No matching glass code found");return;}box.replaceChildren();items.forEach(function(item){var a=document.createElement("a");a.className="gta-search-result";a.href=item.url;a.setAttribute("role","option");if(item.image){var img=document.createElement("img");img.src=item.image;img.alt="";a.appendChild(img);}var info=document.createElement("div");info.className="gta-search-info";var title=document.createElement("strong");title.textContent=item.label;var meta=document.createElement("span");meta.textContent=item.meta;info.append(title,meta);a.appendChild(info);box.appendChild(a);});box.classList.add("active");input.setAttribute("aria-expanded","true");}).catch(function(e){if([e.name!=="AbortError",id===seq].every(Boolean))show("Search unavailable. Please try again.");});}input.addEventListener("input",function(){++seq;if(controller)controller.abort();clearTimeout(timer);box.replaceChildren();close();timer=setTimeout(run,220);});form.addEventListener("submit",function(e){e.preventDefault();run();});input.addEventListener("keydown",function(e){var rows=box.querySelectorAll("a");if(e.key==="Escape"){close();return;}if([(e.key==="ArrowDown"||e.key==="ArrowUp"),rows.length].every(Boolean)){e.preventDefault();active=(active+(e.key==="ArrowDown"?1:-1)+rows.length)%rows.length;rows.forEach(function(row,i){row.classList.toggle("is-keyboard-active",i===active);});rows[active].scrollIntoView({block:"nearest"});}if([e.key==="Enter",active>=0,rows[active]].every(Boolean)){e.preventDefault();rows[active].click();}});document.addEventListener("click",function(e){if(!form.contains(e.target))close();});}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",boot);else boot();})();</script>/* End custom CSS */