* { box-sizing: border-box; } :root { color-scheme: light; --background: #f7f8fa; --surface: #fff; --surface-secondary: #eef4f8; --text: #1f2933; --text-muted: #52606d; --border: #d9e2ec; --link: #0b5cab; --link-hover: #084a8a; --accent: #0b5cab; --accent-hover: #084a8a; --accent-text: #fff; --notice-background: #f2f7fc; --notice-border: #a9c7e8; --success: #087443; --error: #b42318; --focus: #f0a202; } /* A valid manual value on always wins; the system query below only applies when no manual data-theme attribute is present. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --background: #101722; --surface: #172235; --surface-secondary: #1e2c40; --text: #e5edf6; --text-muted: #b7c4d5; --border: #3b4d68; --link: #86c4ff; --link-hover: #b7dcff; --accent: #2b81d1; --accent-hover: #4c9ce7; --accent-text: #fff; --notice-background: #142b42; --notice-border: #3679ae; --success: #72e1a9; --error: #ffb4ab; --focus: #ffd166; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --background: #101722; --surface: #172235; --surface-secondary: #1e2c40; --text: #e5edf6; --text-muted: #b7c4d5; --border: #3b4d68; --link: #86c4ff; --link-hover: #b7dcff; --accent: #2b81d1; --accent-hover: #4c9ce7; --accent-text: #fff; --notice-background: #142b42; --notice-border: #3679ae; --success: #72e1a9; --error: #ffb4ab; --focus: #ffd166; } } body { margin: 0; background: var(--background); color: var(--text); font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: var(--link); } a:hover { color: var(--link-hover); } a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2; background: var(--surface); color: var(--link); padding: .5rem .75rem; border: 1px solid var(--link); border-radius: .25rem; } .skip-link:focus { top: 1rem; } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); } .site-chrome { max-width: 1050px; margin: 0 auto; padding: 1rem; } .site-header .site-chrome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-brand { color: var(--text); font-size: 1.2rem; font-weight: 700; text-decoration: none; } .site-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; } .site-nav, .footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; margin: 0; padding: 0; } .site-nav a, .footer-nav a { text-decoration: none; font-weight: 600; } .theme-toggle { align-items: center; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: .3rem; color: var(--text); display: inline-flex; flex: 0 0 34px; font-size: 1rem; height: 34px; justify-content: center; padding: 0; width: 34px; } .theme-toggle:hover { background: var(--surface-secondary); color: var(--link-hover); } .theme-toggle[hidden] { display: none; } .sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .site-main { max-width: 1050px; margin: 0 auto; padding: 2rem 1rem 3rem; } .page-header h1, .hero h1 { margin: 0 0 .2rem; } .eyebrow { color: var(--text-muted); margin-top: 0; } .notice, form, .listing-card, .vehicle-card, .method-step, .category-summary { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: 1.25rem; margin: 1.25rem 0; } .notice { background: var(--notice-background); border-color: var(--notice-border); } .notice h2 { margin: 0 0 .35rem; font-size: 1.1rem; } form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: end; } label { display: grid; gap: .35rem; font-weight: 600; } select, button { font: inherit; padding: .55rem; } select { background: var(--surface); border: 1px solid var(--border); color: var(--text); } button, .button-link { display: inline-block; background: var(--accent); color: var(--accent-text); border: 0; border-radius: .3rem; cursor: pointer; font-weight: 700; padding: .6rem .85rem; text-decoration: none; } button:hover, .button-link:hover { background: var(--accent-hover); color: var(--accent-text); } .listing-card { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 1.25rem; } .listing-card img { width: 100%; max-height: 180px; object-fit: contain; } .listing-card h2 { font-size: 1.1rem; margin-top: 0; } .price { font-size: 1.2rem; font-weight: 700; } .fitment { color: var(--success); font-weight: 700; } .disclosure { color: var(--text-muted); font-size: .9rem; } .error { color: var(--error); } .hero { padding: 1rem 0 1.5rem; max-width: 720px; } .hero p { font-size: 1.1rem; } .section-heading { margin-top: 2.25rem; } .year-group { margin: 1.5rem 0; } .vehicle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 1rem; } .vehicle-card { margin: 0; } .vehicle-card h3 { margin-top: 0; } .vehicle-card ul { margin-bottom: 0; padding-left: 1.2rem; } .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .method-step { margin: 0; } .method-step h3 { margin-top: 0; } .content-page { max-width: 760px; } .site-footer { background: var(--surface); border-top: 1px solid var(--border); } .site-footer .site-chrome { padding-top: 1.5rem; padding-bottom: 1.5rem; } .site-footer .disclosure { margin: .75rem 0 0; } @media (max-width: 560px) { .site-header .site-chrome { align-items: flex-start; flex-direction: column; } .site-actions { justify-content: space-between; width: 100%; } .listing-card { grid-template-columns: 1fr; } .listing-card img { max-width: 220px; } }