:root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-muted: #5a5a5a; /* Subaru VIP Educator Program brand colors (from official logo files) */ --color-primary: #1d4f91; /* Subaru blue */ --color-primary-dark: #163c6e; --color-accent: #652e8e; /* VIP Educator purple */ --color-border: #e2e2e2; --color-surface: #f7f7f8; --radius: 10px; } * { box-sizing: border-box; } /* funnelMode "simple" (see config.js) — the whole "lead intake form with a toggle" mechanism. Set on by an inline script in index.html's , before #inventory ever paints, so there's no flash of the grid before this applies (same reason config.js loads in now, not at the bottom of like every other script here). Flip funnelMode back to "full" to undo — nothing referenced here is deleted, just hidden. */ .simple-mode #inventory, .simple-mode .simple-mode-hide { display: none !important; } /* The bare [hidden] attribute only hides via the browser's default UA- stylesheet rule — any author rule that sets `display` on the same element (e.g. a class like .btn or .trade__options with its own `display`) always wins over that default regardless of specificity, silently breaking `hidden`. This makes `hidden` actually authoritative everywhere it's used, instead of needing to remember to avoid `display`-setting classes on any element that's ever conditionally hidden. */ [hidden] { display: none !important; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.5; } .site-header { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); } .site-header img { height: 44px; display: block; } .site-header a { line-height: 0; text-decoration: none; } .hero { position: relative; background: linear-gradient(135deg, rgba(29, 79, 145, 0.92), rgba(101, 46, 142, 0.92)), url("/img/educator-classroom-hero.jpg") center/cover no-repeat; color: white; padding: 4.5rem 1.5rem; text-align: center; } .hero__inner { max-width: 640px; margin: 0 auto; } .hero__star { width: 56px; height: auto; margin: 0 auto 1rem; display: block; filter: brightness(0) invert(1); opacity: 0.9; } .hero h1 { font-size: 2.25rem; margin: 0 0 0.5rem; } .hero .hero__subhead { font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; opacity: 0.95; } .hero p { font-size: 1.05rem; opacity: 0.92; margin: 0 0 1.75rem; } .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; } .btn--primary { background: white; color: var(--color-primary-dark); } .btn--primary:hover { opacity: 0.9; } .section .btn--primary { background: var(--color-primary); color: white; width: 100%; } .btn--secondary { background: var(--color-primary); color: white; width: auto; padding: 0.5rem 1rem; font-size: 0.9rem; } .section { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem; } .section h2 { font-size: 1.6rem; margin-bottom: 1.5rem; } .section--offer { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .section--offer img { width: 100%; border-radius: var(--radius); display: block; } .section--offer h2 { color: var(--color-accent); } .offer-eligibility-link { display: inline-block; margin-left: 1rem; } @media (max-width: 720px) { .section--offer { grid-template-columns: 1fr; } /* Side-by-side margin-left reads as cramped once the button is full-width below this breakpoint (same width:auto-vs-100% tension .btn--primary already has in .section) — stack them instead. */ .offer-eligibility-link { display: block; margin-left: 0; margin-top: 0.75rem; } } .vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .inventory-browse-btn { display: table; /* shrink-to-fit + margin: auto centering, without flex/grid on .section */ margin: 3rem auto 0; padding: 0.75rem 2rem; } .vehicle-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); } .vehicle-card img { width: 100%; height: 160px; object-fit: cover; display: block; } .vehicle-card__image-wrap { position: relative; } .vehicle-card__body { padding: 1rem; } .vehicle-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } .vehicle-card__price { font-weight: 700; color: var(--color-primary-dark); margin: 0 0 0.25rem; } .vehicle-card__meta { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 0.75rem; } .favorite-toggle { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.92); color: var(--color-accent); font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .favorite-toggle:hover { background: white; } .favorite-toggle[aria-pressed="true"] { color: #b8860b; } .section--form { background: var(--color-surface); border-radius: var(--radius); /* The form itself is capped at 420px (#lead-form below) so it stays readable, but that left it flush against the section's left edge with a wide dead gap on the right at desktop widths. Centering the heading + form as a column here balances that instead of only centering the form and leaving the heading to trail off on its own to the left. */ display: flex; flex-direction: column; align-items: center; } .section--form h2 { text-align: center; } #lead-form { display: grid; gap: 1rem; max-width: 420px; } #lead-form label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--color-muted); } #lead-form input { padding: 0.6rem 0.75rem; border: 1px solid #c7c7cf; border-radius: 6px; font-size: 1rem; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: border-color 0.15s ease, box-shadow 0.15s ease; } #lead-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29, 79, 145, 0.2); } #lead-restore { max-width: 420px; margin-top: 1rem; text-align: center; } #lead-restore-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; padding: 1rem; background: white; border: 1px solid var(--color-border); border-radius: 8px; text-align: left; } #lead-restore-form label { display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--color-muted); } #lead-restore-form input { padding: 0.55rem 0.7rem; border: 1px solid #c7c7cf; border-radius: 6px; font-size: 0.95rem; } #lead-restore-message { margin: 0; font-size: 0.85rem; color: var(--color-muted); } .lead-thankyou__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; } .lead-thankyou__link { background: none; border: none; padding: 0; color: var(--color-primary); font-size: 0.9rem; font-weight: 600; text-decoration: underline; cursor: pointer; font-family: inherit; } .lead-thankyou__link:hover { color: var(--color-primary-dark); } #lead-form .trade-note { margin: -0.25rem 0 0; padding: 0.6rem 0.75rem; background: #ece3f4; color: var(--color-accent); border-radius: 6px; font-size: 0.85rem; } /* Off-screen, not display:none — some spam bots specifically skip fields hidden that way, since it's the more obvious honeypot tell. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .footer { text-align: center; padding: 2rem 1.5rem; color: var(--color-muted); font-size: 0.85rem; } /* width: auto is required here, not cosmetic — without it the browser falls back to the raw HTML width="646" attribute instead of scaling from the aspect ratio, blowing out to 646px wide on any viewport narrower than that (this was the actual cause of the horizontal overflow on mobile). */ .footer img { height: 40px; width: auto; margin-bottom: 1rem; } .footer .disclaimer { max-width: 720px; margin: 0.5rem auto 0; font-size: 0.75rem; color: var(--color-muted); } .error { color: #c0392b; } /* ---- Inventory browse page (inventory.html) ---- */ .section h1 { font-size: 1.6rem; margin: 0 0 1.5rem; } .filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .filter-bar input, .filter-bar select { padding: 0.6rem 0.75rem; border: 1px solid #c7c7cf; border-radius: 6px; font-size: 0.95rem; background: #ffffff; font-family: inherit; } .filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29, 79, 145, 0.2); } #filter-search { flex: 1 1 240px; } #filter-model, #filter-sort { flex: 1 1 160px; } #filter-price-min, #filter-price-max { flex: 1 1 110px; width: 0; } /* width:0 lets flex-basis govern instead of the number input's intrinsic min-width */ .filter-count { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 1rem; } /* ---- Eligibility page (eligibility.html) ---- */ .eligibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; align-items: start; } .eligibility-col { padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); } .eligibility-col h2 { font-size: 1.05rem; margin: 0 0 0.75rem; color: var(--color-primary-dark); } .eligibility-col h2:not(:first-child) { margin-top: 1.5rem; } .eligibility-col ul { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; } .eligibility-col li { margin-bottom: 0.4rem; } /* Same red as .error — this is the one column that's explicitly a warning ("you don't qualify"), not just informational like the other two. */ .eligibility-col--not-eligible { background: #fbeceb; border-color: #f1c9c5; } .eligibility-col--not-eligible h2 { color: #c0392b; } .eligibility-download { font-size: 0.9rem; } .eligibility-download a { color: var(--color-primary); font-weight: 600; } .eligibility-cta { display: table; margin-top: 0.5rem; } /* ---- Vehicle detail page (vehicle.html) ---- */ .vdp__back { display: inline-block; margin-bottom: 1.5rem; color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .vdp__back:hover { text-decoration: underline; } .vdp { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } .vdp__image-wrap { position: relative; } .vdp__image { width: 100%; border-radius: var(--radius); display: block; } .vdp__image-wrap .favorite-toggle { top: 0.75rem; right: 0.75rem; } .vdp__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #ece3f4; color: var(--color-accent); padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.85rem; margin-bottom: 1rem; } .vdp__badge img { width: 16px; height: 16px; } .vdp h1 { font-size: 1.75rem; margin: 0 0 0.5rem; } .vdp__price { font-size: 1.4rem; font-weight: 700; color: var(--color-primary-dark); margin: 0 0 0.35rem; } .vdp__meta { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 1rem; } .vdp__description { margin: 0 0 1.5rem; } .vdp__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* width: auto overrides the earlier ".section .btn--primary { width: 100% }" rule (same specificity, but that one's declared first) in favor of the flex-basis below — kept explicit so a second action button can be dropped back in later without silently re-inheriting the old stretch behavior. */ .vdp__actions .btn--primary { background: var(--color-primary); color: white; width: auto; flex: 1 1 260px; text-align: center; } .vdp__external { width: 100%; color: var(--color-muted); font-size: 0.85rem; text-decoration: none; } .vdp__external:hover { text-decoration: underline; } @media (max-width: 720px) { .vdp { grid-template-columns: 1fr; } /* auto-fit was leaving these at an uneven 2-up zigzag on phones (e.g. 4 calculator fields as 2+2, or an odd field left dangling alone) instead of a clean stacked list — force single column below the same breakpoint everything else on this page already stacks at. */ .calc__grid, .trade-fields { grid-template-columns: 1fr; } } .vdp__calculator { /* No max-width: everything else on this page (the .vdp grid above, the inventory grid, the lead form section) uses the full .section width — capping this one narrower than that made it look cramped into a small box with a wide stripe of empty space next to it. */ margin-top: 2.5rem; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .vdp__calculator h2 { font-size: 1.15rem; margin: 0 0 1rem; } .calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } /* min-width: 0 on both the track item and the grid itself is required, not optional: /