MiniMax MiniMax M3.1 Flash – Automotive
via Minimax · Generated
- AIMAC Debt 11.94
- Cost $0.03
- Total Violations 24
- HTML Size 121 KB
- Em Dashes 4
Screenshot
View Live Page
Accessibility Issues Found
1 Critical 23 Serious
-
color-contrast serious 22 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="lead-image-label">Editor's choice</span> -
label critical 1 instance
Form elements must have labels
Example HTML
<input id="tax-fees" name="fees" type="number" min="0" max="30000" step="50" value="2800" inputmode="decimal" disabled=""> -
target-size serious 1 instance
All touch targets must be 24px large, or leave sufficient space
Example HTML
<input id="down-payment" name="down" type="number" min="0" max="100000" step="100" value="6500" inputmode="decimal">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TorqueLine delivers independent car reviews, automotive news, practical repair guides, parts advice, service information, and financing tools for smarter ownership.">
<meta name="theme-color" content="#11181b">
<meta property="og:title" content="TorqueLine | Clarity for Every Mile">
<meta property="og:description" content="Independent reviews, practical ownership guidance, and smarter automotive decisions.">
<meta property="og:type" content="website">
<title>TorqueLine | Car Reviews, News, Parts & Financing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="https://placehold.co/64x64/11181b/d8ff43?text=TL&font=oswald">
<style>
:root {
--ink: #11181b;
--ink-soft: #1b2529;
--ink-light: #2a363a;
--paper: #f4f0e7;
--paper-deep: #e7e1d5;
--white: #ffffff;
--accent: #d8ff43;
--accent-dark: #b9df2c;
--orange: #ff5b36;
--blue: #dce7ea;
--muted: #626e72;
--line: #d2cec3;
--shadow: 0 22px 65px rgba(17, 24, 27, 0.14);
--radius: 4px;
--container: 1240px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Source Sans 3", Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
body.dialog-open {
overflow: hidden;
}
::selection {
background: var(--accent);
color: var(--ink);
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
color: inherit;
font: inherit;
}
button,
select {
cursor: pointer;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
margin-top: 0;
}
h1,
h2,
h3,
h4 {
font-family: "Oswald", Impact, sans-serif;
font-weight: 600;
line-height: 1.08;
text-transform: uppercase;
}
p:last-child {
margin-bottom: 0;
}
:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 3px;
}
.container {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
}
.section {
padding: 104px 0;
overflow: hidden;
}
.anchor-target {
position: relative;
top: -110px;
display: block;
visibility: hidden;
}
.skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 200;
padding: 10px 16px;
background: var(--accent);
color: var(--ink);
font-weight: 700;
transform: translateY(-150%);
transition: transform 0.2s ease;
}
.skip-link:focus {
transform: translateY(0);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--ink-light);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.17em;
line-height: 1.2;
text-transform: uppercase;
}
.eyebrow::before {
width: 28px;
height: 3px;
background: var(--orange);
content: "";
}
.eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.eyebrow--light::before {
background: var(--accent);
}
.section-title {
max-width: 840px;
margin-bottom: 0;
font-size: clamp(2.5rem, 5vw, 4.65rem);
letter-spacing: -0.035em;
}
.section-intro {
max-width: 620px;
margin-bottom: 0;
color: var(--muted);
font-size: 1.08rem;
}
.section-head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
gap: 64px;
align-items: end;
margin-bottom: 52px;
}
.btn {
position: relative;
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 2px;
background: var(--accent);
color: var(--ink);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.07em;
line-height: 1.1;
text-transform: uppercase;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn::after {
content: "→";
font-size: 1.15rem;
line-height: 0;
transition: transform 0.2s ease;
}
.btn:hover {
background: var(--accent-dark);
transform: translateY(-2px);
}
.btn:hover::after {
transform: translateX(4px);
}
.btn--dark {
background: var(--ink);
color: var(--white);
}
.btn--dark:hover {
background: var(--ink-light);
}
.btn--outline {
border-color: var(--ink);
background: transparent;
color: var(--ink);
}
.btn--outline:hover {
background: var(--ink);
color: var(--white);
}
.btn--light {
background: var(--white);
color: var(--ink);
}
.btn--light:hover {
background: var(--accent);
}
.btn--small {
min-height: 42px;
padding: 10px 16px;
font-size: 0.76rem;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid currentColor;
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.text-link span {
transition: transform 0.2s ease;
}
.text-link:hover span {
transform: translateX(4px);
}
.topbar {
min-height: 38px;
background: var(--ink);
color: rgba(255, 255, 255, 0.78);
font-size: 0.76rem;
letter-spacing: 0.025em;
}
.topbar-inner {
display: flex;
min-height: 38px;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.topbar p {
margin: 0;
}
.topbar strong {
color: var(--accent);
}
.topbar-links {
display: flex;
align-items: center;
gap: 24px;
}
.topbar-links a:hover {
color: var(--white);
}
.site-header {
position: sticky;
z-index: 100;
top: 0;
border-bottom: 1px solid rgba(17, 24, 27, 0.12);
background: rgba(244, 240, 231, 0.96);
backdrop-filter: blur(18px);
}
.nav-wrap {
position: relative;
display: flex;
min-height: 78px;
align-items: center;
gap: 30px;
}
.brand {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
}
.brand img {
width: 52px;
height: 52px;
border-radius: 2px;
object-fit: cover;
}
.brand-copy {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-name {
font-family: "Oswald", Impact, sans-serif;
font-size: 1.42rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.brand-tagline {
margin-top: 6px;
color: var(--muted);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.primary-nav {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
gap: clamp(17px, 2vw, 29px);
}
.primary-nav a {
position: relative;
padding: 29px 0 26px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.075em;
text-transform: uppercase;
}
.primary-nav a::after {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
height: 3px;
background: var(--orange);
content: "";
transform: scaleX(0);
transform-origin: right;
transition: transform 0.2s ease;
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
transform: scaleX(1);
transform-origin: left;
}
.header-cta {
flex: 0 0 auto;
}
.mobile-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 2px;
background: transparent;
}
.mobile-toggle span,
.mobile-toggle::before,
.mobile-toggle::after {
display: block;
width: 20px;
height: 2px;
background: var(--ink);
content: "";
transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-toggle span {
margin: 4px 0;
}
.site-header.nav-open .mobile-toggle span {
opacity: 0;
}
.site-header.nav-open .mobile-toggle::before {
transform: translateY(6px) rotate(45deg);
}
.site-header.nav-open .mobile-toggle::after {
transform: translateY(-6px) rotate(-45deg);
}
.hero {
position: relative;
padding: 92px 0 86px;
overflow: hidden;
background:
linear-gradient(rgba(17, 24, 27, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(17, 24, 27, 0.045) 1px, transparent 1px),
radial-gradient(circle at 78% 30%, rgba(216, 255, 67, 0.24), transparent 28%),
var(--paper);
background-size: 54px 54px, 54px 54px, auto, auto;
}
.hero::after {
position: absolute;
right: -190px;
bottom: -290px;
width: 620px;
height: 620px;
border: 2px solid rgba(17, 24, 27, 0.1);
border-radius: 50%;
content: "";
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
gap: clamp(50px, 7vw, 94px);
align-items: center;
}
.hero-title {
max-width: 700px;
margin-bottom: 28px;
font-size: clamp(3.8rem, 7.3vw, 6.8rem);
letter-spacing: -0.045em;
line-height: 0.91;
}
.hero-title em {
display: block;
color: var(--accent-dark);
font-style: normal;
}
.hero-lede {
max-width: 670px;
margin-bottom: 16px;
color: #384347;
font-size: clamp(1.07rem, 1.7vw, 1.28rem);
line-height: 1.55;
}
.hero-secondary {
max-width: 640px;
margin-bottom: 30px;
color: var(--muted);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 36px;
}
.hero-proof {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.proof-item {
display: flex;
align-items: flex-start;
gap: 9px;
color: #445054;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
}
.proof-item::before {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-top: 4px;
background: var(--orange);
content: "";
transform: rotate(45deg);
}
.hero-visual {
position: relative;
margin: 0;
}
.hero-photo {
position: relative;
min-height: 550px;
overflow: hidden;
border-radius: var(--radius);
background: var(--ink-light);
box-shadow: var(--shadow);
clip-path: polygon(0 0, 93% 0, 100% 7%, 100% 100%, 7% 100%, 0 93%);
}
.hero-photo img {
width: 100%;
height: 100%;
min-height: 550px;
object-fit: cover;
}
.hero-photo::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(17, 24, 27, 0.08) 20%, rgba(17, 24, 27, 0.06) 45%, rgba(17, 24, 27, 0.75) 100%);
content: "";
}
.hero-topline {
position: absolute;
z-index: 2;
top: 24px;
left: 24px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 11px;
border-radius: 2px;
background: var(--accent);
color: var(--ink);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-topline::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--orange);
content: "";
}
.hero-model {
position: absolute;
z-index: 2;
right: 25px;
bottom: 24px;
left: 25px;
color: var(--white);
}
.hero-model small {
display: block;
margin-bottom: 4px;
color: var(--accent);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.hero-model h2 {
margin-bottom: 9px;
font-size: clamp(2.4rem, 4.5vw, 4rem);
}
.hero-specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hero-specs span {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(17, 24, 27, 0.4);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
backdrop-filter: blur(7px);
}
.hero-verdict {
position: absolute;
z-index: 3;
right: -22px;
bottom: 74px;
width: 210px;
padding: 20px;
border-left: 5px solid var(--accent);
background: var(--white);
box-shadow: 0 15px 40px rgba(17, 24, 27, 0.2);
}
.hero-verdict span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-verdict strong {
display: block;
font-family: "Oswald", Impact, sans-serif;
font-size: 1.3rem;
line-height: 1.12;
text-transform: uppercase;
}
.hero-caption {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 16px 4px 0;
color: var(--muted);
font-size: 0.78rem;
}
.hero-caption span:last-child {
white-space: nowrap;
font-weight: 700;
}
.market-strip {
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.09);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
background: var(--ink);
color: var(--white);
}
.market-strip-inner {
display: grid;
grid-template-columns: auto repeat(4, 1fr);
align-items: center;
}
.market-label,
.market-item {
min-height: 54px;
padding: 14px 22px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.market-label {
background: var(--accent);
color: var(--ink);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.market-item {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.78rem;
font-weight: 600;
}
.market-item::before {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--orange);
content: "";
}
.latest-section {
background: var(--paper);
}
.editorial-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
gap: 28px;
align-items: start;
}
.lead-story {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.lead-image {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ink-light);
}
.lead-image img,
.compact-story img,
.review-image img,
.parts-feature-image img,
.service-visual img,
.partner-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.lead-image:hover img,
.compact-story:hover img,
.review-card:hover .review-image img,
.parts-feature:hover img,
.partner-card:hover img {
transform: scale(1.035);
}
.lead-image-label {
position: absolute;
bottom: 18px;
left: 18px;
padding: 8px 11px;
background: var(--orange);
color: var(--white);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lead-copy {
padding: clamp(25px, 4vw, 44px);
}
.story-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-bottom: 14px;
color: var(--muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.story-meta .category {
color: var(--orange);
}
.story-meta .dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
}
.lead-copy h3 {
max-width: 800px;
margin-bottom: 18px;
font-size: clamp(2rem, 3.7vw, 3.4rem);
letter-spacing: -0.025em;
}
.lead-copy p {
max-width: 760px;
color: #4d595d;
font-size: 1.02rem;
}
.lead-copy .text-link {
margin-top: 13px;
}
.latest-sidebar {
display: grid;
gap: 14px;
}
.compact-story {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
gap: 17px;
align-items: center;
padding: 13px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.76);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.compact-story:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.compact-story img {
width: 116px;
height: 104px;
border-radius: 2px;
object-fit: cover;
}
.compact-story .story-meta {
margin-bottom: 7px;
font-size: 0.66rem;
}
.compact-story h3 {
margin-bottom: 7px;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.compact-story p {
margin-bottom: 0;
color: var(--muted);
font-size: 0.84rem;
line-height: 1.4;
}
.watch-card {
padding: 25px;
border-radius: var(--radius);
background: var(--ink);
color: var(--white);
}
.watch-card h3 {
margin-bottom: 8px;
font-size: 1.5rem;
}
.watch-card > p {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.87rem;
}
.price-drop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 13px 0;
border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.price-drop strong {
display: block;
font-size: 0.9rem;
}
.price-drop span {
color: rgba(255, 255, 255, 0.62);
font-size: 0.78rem;
}
.price-drop b {
color: var(--accent);
font-family: "Oswald", Impact, sans-serif;
font-size: 1.05rem;
white-space: nowrap;
}
.reviews-section {
position: relative;
background:
radial-gradient(circle at 0 0, rgba(216, 255, 67, 0.08), transparent 27%),
var(--ink);
color: var(--white);
}
.reviews-section .section-intro {
color: rgba(255, 255, 255, 0.68);
}
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.review-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
}
.review-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ink-light);
}
.review-image::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(17, 24, 27, 0.35));
content: "";
}
.review-rating {
position: absolute;
z-index: 2;
top: 17px;
right: 17px;
display: flex;
min-width: 78px;
flex-direction: column;
align-items: center;
padding: 10px 12px;
background: var(--accent);
color: var(--ink);
line-height: 1;
}
.review-rating strong {
font-family: "Oswald", Impact, sans-serif;
font-size: 1.8rem;
}
.review-rating span {
margin-top: 5px;
color: var(--orange);
font-size: 0.64rem;
letter-spacing: 0.08em;
}
.review-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 27px;
}
.review-body h3 {
margin-bottom: 13px;
font-size: 1.8rem;
}
.review-body > p {
color: #4e5a5e;
font-size: 0.94rem;
}
.review-specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
margin: 8px 0 20px;
background: var(--line);
border: 1px solid var(--line);
}
.review-specs div {
padding: 11px 12px;
background: var(--paper);
}
.review-specs dt {
margin-bottom: 1px;
color: var(--muted);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.review-specs dd {
margin: 0;
font-size: 0.86rem;
font-weight: 700;
}
.review-details {
margin-top: auto;
border-top: 1px solid var(--line);
}
.review-details summary {
padding: 15px 0 2px;
color: var(--ink);
cursor: pointer;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.06em;
list-style: none;
text-transform: uppercase;
}
.review-details summary::-webkit-details-marker {
display: none;
}
.review-details summary::after {
float: right;
content: "+";
font-size: 1.2rem;
line-height: 0.8;
}
.review-details[open] summary::after {
content: "−";
}
.review-details p {
padding-top: 13px;
color: var(--muted);
font-size: 0.87rem;
}
.review-compare-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 32px;
padding: 24px 28px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.04);
}
.review-compare-bar p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
}
.finance-section {
position: relative;
background:
linear-gradient(90deg, rgba(17, 24, 27, 0.07) 1px, transparent 1px),
var(--accent);
background-size: 70px 70px;
}
.finance-section .section-intro {
color: #38451d;
}
.finance-shell {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
overflow: hidden;
border-radius: var(--radius);
background: var(--ink);
box-shadow: 0 28px 80px rgba(17, 24, 27, 0.22);
}
.calculator {
padding: clamp(28px, 5vw, 52px);
color: var(--white);
}
.calculator h3 {
margin-bottom: 9px;
font-size: 2rem;
}
.calculator-intro {
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.94rem;
}
.field-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 7px;
}
.field label {
color: rgba(255, 255, 255, 0.78);
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.field input,
.field select {
width: 100%;
min-height: 51px;
padding: 11px 13px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2px;
background: var(--ink-soft);
color: var(--white);
outline: none;
}
.field input:focus,
.field select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(216, 255, 67, 0.15);
}
.field select option {
background: var(--ink);
}
.money-field {
position: relative;
}
.money-field span {
position: absolute;
top: 50%;
left: 13px;
color: var(--accent);
font-weight: 700;
transform: translateY(-50%);
}
.money-field input {
padding-left: 30px;
}
.percent-field {
position: relative;
}
.percent-field input {
padding-right: 36px;
}
.percent-field span {
position: absolute;
top: 50%;
right: 13px;
color: var(--accent);
font-weight: 700;
transform: translateY(-50%);
}
.payment-result {
display: grid;
grid-template-columns: minmax(180px, 0.8fr) 1fr;
gap: 25px;
align-items: center;
margin: 30px 0 22px;
padding: 24px;
border-left: 4px solid var(--accent);
background: rgba(216, 255, 67, 0.08);
}
.payment-result span {
display: block;
margin-bottom: 2px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.payment-result output {
display: block;
color: var(--accent);
font-family: "Oswald", Impact, sans-serif;
font-size: clamp(2.7rem, 5vw, 4.1rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
}
.estimate-facts {
display: grid;
gap: 8px;
margin: 0;
}
.estimate-facts div {
display: flex;
justify-content: space-between;
gap: 15px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.83rem;
}
.estimate-facts dt {
color: rgba(255, 255, 255, 0.58);
}
.estimate-facts dd {
margin: 0;
font-weight: 700;
}
.estimate-note {
margin: 17px 0 0;
color: rgba(255, 255, 255, 0.47);
font-size: 0.73rem;
line-height: 1.5;
}
.finance-info {
padding: clamp(30px, 5vw, 52px);
background: var(--white);
}
.finance-info h3 {
margin-bottom: 16px;
font-size: 2rem;
}
.finance-info > p {
color: var(--muted);
font-size: 0.95rem;
}
.finance-facts {
margin: 25px 0;
border-top: 1px solid var(--line);
}
.finance-facts div {
display: grid;
grid-template-columns: 90px 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.finance-facts dt {
font-family: "Oswald", Impact, sans-serif;
font-size: 1.2rem;
text-transform: uppercase;
}
.finance-facts dd {
margin: 0;
color: var(--muted);
font-size: 0.87rem;
}
.finance-callout {
margin: 25px 0;
padding: 18px;
border: 1px solid var(--line);
background: var(--paper);
}
.finance-callout strong {
display: block;
margin-bottom: 4px;
font-family: "Oswald", Impact, sans-serif;
font-size: 1rem;
text-transform: uppercase;
}
.finance-callout p {
margin: 0;
color: var(--muted);
font-size: 0.83rem;
}
.finance-info details {
margin: 0 0 20px;
border-top: 1px solid var(--line);
}
.finance-info summary {
padding: 14px 0;
cursor: pointer;
font-size: 0.84rem;
font-weight: 800;
list-style: none;
}
.finance-info summary::-webkit-details-marker {
display: none;
}
.finance-info details p {
padding-bottom: 12px;
color: var(--muted);
font-size: 0.85rem;
}
.finance-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.guides-section {
background: var(--white);
}
.comparison-wrap {
overflow-x: auto;
margin-bottom: 46px;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 16px 50px rgba(17, 24, 27, 0.07);
}
.comparison-table {
width: 100%;
min-width: 780px;
border-collapse: collapse;
text-align: left;
}
.comparison-table caption {
padding: 16px 20px;
background: var(--ink);
color: var(--white);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-align: left;
text-transform: uppercase;
}
.comparison-table th,
.comparison-table td {
padding: 18px 20px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.comparison-table th:last-child,
.comparison-table td:last-child {
border-right: 0;
}
.comparison-table tbody tr:last-child td {
border-bottom: 0;
}
.comparison-table thead th {
background: var(--paper-deep);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.comparison-table tbody th {
font-family: "Oswald", Impact, sans-serif;
font-size: 1.2rem;
text-transform: uppercase;
}
.comparison-table td {
color: #4b575b;
font-size: 0.9rem;
}
.comparison-table td strong {
color: var(--ink);
}
.comparison-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 18px;
}
.comparison-actions p {
margin: 0;
color: var(--muted);
font-size: 0.86rem;
}
.guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.guide-card {
position: relative;
min-height: 290px;
padding: 30px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.guide-card:hover {
box-shadow: var(--shadow);
transform: translateY(-5px);
}
.guide-number {
position: absolute;
top: 12px;
right: 18px;
color: rgba(17, 24, 27, 0.08);
font-family: "Oswald", Impact, sans-serif;
font-size: 5rem;
line-height: 1;
}
.guide-card h3 {
position: relative;
max-width: 250px;
margin-bottom: 14px;
font-size: 1.65rem;
}
.guide-card p {
position: relative;
color: var(--muted);
font-size: 0.93rem;
}
.guide-card .text-link {
position: relative;
margin-top: 9px;
}
.parts-section {
background: var(--paper);
}
.parts-lead-grid {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.7fr);
gap: 26px;
align-items: stretch;
}
.parts-feature {
display: grid;
grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.parts-feature-image {
position: relative;
min-height: 410px;
overflow: hidden;
background: var(--ink-soft);
}
.parts-feature-image::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(17, 24, 27, 0.55));
content: "";
}
.parts-feature-image span {
position: absolute;
z-index: 2;
bottom: 18px;
left: 18px;
color: var(--white);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.parts-feature-copy {
padding: clamp(25px, 4vw, 42px);
}
.parts-feature-copy h3 {
margin-bottom: 17px;
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.parts-feature-copy p {
color: var(--muted);
}
.parts-feature-copy ul {
margin: 22px 0;
padding: 0;
list-style: none;
}
.parts-feature-copy li {
position: relative;
padding: 8px 0 8px 21px;
border-top: 1px solid var(--line);
font-size: 0.9rem;
}
.parts-feature-copy li::before {
position: absolute;
top: 16px;
left: 0;
width: 7px;
height: 7px;
background: var(--orange);
content: "";
transform: rotate(45deg);
}
.parts-menu {
padding: 30px;
border-radius: var(--radius);
background: var(--ink);
color: var(--white);
}
.parts-menu h3 {
margin-bottom: 9px;
font-size: 1.8rem;
}
.parts-menu > p {
color: rgba(255, 255, 255, 0.62);
font-size: 0.9rem;
}
.parts-menu ul {
margin: 23px 0 26px;
padding: 0;
list-style: none;
}
.parts-menu li {
border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.parts-menu li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.parts-menu a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
color: rgba(255, 255, 255, 0.82);
font-size: 0.88rem;
font-weight: 600;
}
.parts-menu a::after {
color: var(--accent);
content: "→";
}
.parts-menu a:hover {
color: var(--white);
}
.parts-menu .text-link {
color: var(--accent);
}
.product-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 25px;
margin: 64px 0 25px;
}
.product-heading h3 {
margin-bottom: 0;
font-size: 2.2rem;
}
.product-heading p {
max-width: 510px;
margin-bottom: 0;
color: var(--muted);
font-size: 0.9rem;
}
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.product-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.product-image {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ink-light);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-body {
padding: 20px;
}
.product-type {
display: block;
margin-bottom: 7px;
color: var(--orange);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.product-body h4 {
margin-bottom: 8px;
font-size: 1.25rem;
}
.product-body p {
min-height: 72px;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.5;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 15px;
border-top: 1px solid var(--line);
}
.product-price {
font-family: "Oswald", Impact, sans-serif;
font-size: 1.25rem;
}
.save-part {
padding: 7px 10px;
border: 1px solid var(--ink);
border-radius: 2px;
background: transparent;
color: var(--ink);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.save-part:hover,
.save-part[aria-pressed="true"] {
background: var(--ink);
color: var(--white);
}
.product-disclaimer {
margin-top: 17px;
color: var(--muted);
font-size: 0.76rem;
}
.service-section {
position: relative;
background: var(--blue);
}
.service-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
gap: clamp(50px, 7vw, 96px);
align-items: center;
}
.service-copy h2 {
max-width: 660px;
margin-bottom: 22px;
font-size: clamp(2.7rem, 5vw, 4.65rem);
letter-spacing: -0.035em;
}
.service-copy > p {
max-width: 640px;
color: #48575c;
font-size: 1.04rem;
}
.service-list {
margin: 28px 0;
padding: 0;
list-style: none;
}
.service-list li {
display: grid;
grid-template-columns: 27px 1fr;
gap: 11px;
padding: 11px 0;
border-top: 1px solid rgba(17, 24, 27, 0.14);
font-size: 0.91rem;
}
.service-list li::before {
color: var(--orange);
content: "✓";
font-weight: 800;
}
.service-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.service-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 25px;
padding: 15px;
border: 1px solid rgba(17, 24, 27, 0.16);
background: rgba(255, 255, 255, 0.45);
color: #48575c;
font-size: 0.82rem;
}
.service-note strong {
color: var(--ink);
}
.service-visual {
position: relative;
min-height: 620px;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
clip-path: polygon(0 0, 94% 0, 100% 6%, 100% 100%, 0 100%);
}
.service-visual img {
position: absolute;
inset: 0;
}
.service-visual::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(17, 24, 27, 0.65));
content: "";
}
.service-schedule-card {
position: absolute;
z-index: 2;
right: 24px;
bottom: 24px;
left: 24px;
display: grid;
grid-template-columns: 120px 1fr;
overflow: hidden;
border-radius: var(--radius);
background: var(--white);
box-shadow: 0 18px 45px rgba(17, 24, 27, 0.25);
}
.schedule-number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 22px 14px;
background: var(--accent);
text-align: center;
}
.schedule-number strong {
font-family: "Oswald", Impact, sans-serif;
font-size: 2.25rem;
line-height: 1;
}
.schedule-number span {
margin-top: 5px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.schedule-copy {
padding: 20px 22px;
}
.schedule-copy span {
display: block;
margin-bottom: 3px;
color: var(--orange);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.schedule-copy strong {
display: block;
font-family: "Oswald", Impact, sans-serif;
font-size: 1.25rem;
text-transform: uppercase;
}
.schedule-copy p {
margin: 4px 0 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.4;
}
.service-check-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 68px;
border: 1px solid rgba(17, 24, 27, 0.15);
background: rgba(17, 24, 27, 0.15);
}
.service-check {
padding: 28px;
background: var(--blue);
}
.service-check span {
display: block;
margin-bottom: 10px;
color: var(--orange);
font-family: "Oswald", Impact, sans-serif;
font-size: 1.8rem;
}
.service-check h3 {
margin-bottom: 8px;
font-size: 1.25rem;
}
.service-check p {
color: #4f5f64;
font-size: 0.84rem;
}
.testimonials-section {
background: var(--paper-deep);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.testimonial-card {
display: flex;
flex-direction: column;
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.testimonial-stars {
margin-bottom: 18px;
color: var(--orange);
letter-spacing: 0.08em;
}
.testimonial-card blockquote {
flex: 1;
margin: 0 0 26px;
font-family: "Oswald", Impact, sans-serif;
font-size: 1.45rem;
line-height: 1.35;
text-transform: uppercase;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.testimonial-author img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-author strong {
display: block;
font-size: 0.9rem;
}
.testimonial-author span {
color: var(--muted);
font-size: 0.76rem;
}
.partner-section {
position: relative;
overflow: hidden;
background: var(--ink);
color: var(--white);
}
.partner-section::before {
position: absolute;
top: -220px;
right: -140px;
width: 520px;
height: 520px;
border: 80px solid rgba(216, 255, 67, 0.07);
border-radius: 50%;
content: "";
}
.partner-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
gap: clamp(50px, 8vw, 105px);
align-items: center;
}
.partner-section .section-intro {
color: rgba(255, 255, 255, 0.68);
}
.partner-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.resource-stack {
display: grid;
gap: 14px;
}
.partner-card {
display: grid;
grid-template-columns: 58px 1fr;
gap: 19px;
align-items: start;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.045);
}
.partner-card .number {
color: var(--accent);
font-family: "Oswald", Impact, sans-serif;
font-size: 2.2rem;
line-height: 1;
}
.partner-card h3 {
margin-bottom: 7px;
font-size: 1.35rem;
}
.partner-card p {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 0.88rem;
}
.faq-section {
background: var(--white);
}
.faq-layout {
display: grid;
grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
gap: clamp(50px, 8vw, 110px);
align-items: start;
}
.faq-intro {
position: sticky;
top: 110px;
}
.faq-intro .section-title {
margin-bottom: 20px;
font-size: clamp(2.4rem, 4vw, 3.8rem);
}
.faq-intro p {
color: var(--muted);
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
position: relative;
padding: 24px 48px 24px 0;
cursor: pointer;
font-family: "Oswald", Impact, sans-serif;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.3;
list-style: none;
text-transform: uppercase;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::before,
.faq-item summary::after {
position: absolute;
top: 50%;
right: 7px;
width: 17px;
height: 2px;
background: var(--orange);
content: "";
transform: translateY(-50%);
}
.faq-item summary::after {
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
transform: translateY(-50%) rotate(0deg);
}
.faq-answer {
max-width: 720px;
padding: 0 48px 25px 0;
color: var(--muted);
}
.faq-answer p {
margin-bottom: 12px;
}
.contact-section {
position: relative;
overflow: hidden;
background: var(--accent);
}
.contact-section::after {
position: absolute;
right: -80px;
bottom: -190px;
width: 440px;
height: 440px;
border: 2px solid rgba(17, 24, 27, 0.12);
border-radius: 50%;
content: "";
}
.contact-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.85fr);
gap: clamp(50px, 8vw, 110px);
align-items: center;
}
.contact-section h2 {
max-width: 760px;
margin-bottom: 20px;
font-size: clamp(2.7rem, 5vw, 4.9rem);
letter-spacing: -0.035em;
}
.contact-section p {
max-width: 700px;
color: #38451d;
}
.contact-details {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 28px;
}
.contact-details a {
font-size: 0.85rem;
font-weight: 800;
}
.contact-details a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.newsletter-card {
padding: clamp(27px, 5vw, 42px);
border-radius: var(--radius);
background: var(--ink);
color: var(--white);
box-shadow: 0 24px 60px rgba(17, 24, 27, 0.25);
}
.newsletter-card h3 {
margin-bottom: 9px;
font-size: 1.8rem;
}
.newsletter-card > p {
margin-bottom: 22px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.9rem;
}
.newsletter-form label {
display: block;
margin-bottom: 7px;
color: rgba(255, 255, 255, 0.75);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.newsletter-input-row {
display: flex;
}
.newsletter-input-row input {
min-width: 0;
flex: 1;
min-height: 51px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-right: 0;
border-radius: 2px 0 0 2px;
background: var(--ink-soft);
color: var(--white);
outline: none;
}
.newsletter-input-row input:focus {
border-color: var(--accent);
}
.newsletter-input-row .btn {
flex: 0 0 auto;
min-height: 51px;
border-radius: 0 2px 2px 0;
}
.newsletter-card small {
display: block;
margin-top: 13px;
color: rgba(255, 255, 255, 0.46);
font-size: 0.72rem;
}
.form-status {
min-height: 22px;
margin: 12px 0 0;
color: var(--accent);
font-size: 0.82rem;
font-weight: 700;
}
.site-footer {
padding: 70px 0 26px;
background: var(--ink);
color: var(--white);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 0.75fr);
gap: 55px;
padding-bottom: 50px;
}
.footer-brand .brand {
margin-bottom: 20px;
}
.footer-brand p {
max-width: 360px;
color: rgba(255, 255, 255, 0.57);
font-size: 0.88rem;
}
.footer-contact {
margin-top: 22px;
color: rgba(255, 255, 255, 0.68);
font-size: 0.83rem;
}
.footer-contact a {
display: block;
margin-bottom: 5px;
}
.footer-contact a:hover {
color: var(--accent);
}
.footer-column h3 {
margin-bottom: 18px;
color: var(--accent);
font-size: 0.9rem;
letter-spacing: 0.08em;
}
.footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer-column li {
margin-bottom: 9px;
}
.footer-column a {
color: rgba(255, 255, 255, 0.65);
font-size: 0.84rem;
}
.footer-column a:hover {
color: var(--white);
}
.social-links {
display: flex;
gap: 9px;
margin-top: 23px;
}
.social-links a {
display: grid;
width: 39px;
height: 39px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
color: rgba(255, 255, 255, 0.72);
font-size: 0.71rem;
font-weight: 800;
text-transform: uppercase;
}
.social-links a:hover {
border-color: var(--accent);
background: var(--accent);
color: var(--ink);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding-top: 23px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.48);
font-size: 0.75rem;
}
.legal-links {
display: flex;
flex-wrap: wrap;
gap: 19px;
}
.legal-links a:hover {
color: var(--white);
}
dialog {
width: min(620px, calc(100% - 28px));
max-height: calc(100vh - 40px);
padding: 0;
overflow: auto;
border: 0;
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}
dialog::backdrop {
background: rgba(8, 13, 15, 0.78);
backdrop-filter: blur(5px);
}
.dialog-inner {
position: relative;
padding: clamp(27px, 6vw, 50px);
}
.dialog-close {
position: absolute;
top: 17px;
right: 17px;
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
font-size: 1.2rem;
line-height: 1;
}
.dialog-close:hover {
background: var(--ink);
color: var(--white);
}
.dialog-inner h2 {
margin-bottom: 13px;
padding-right: 35px;
font-size: clamp(2rem, 5vw, 3rem);
}
.dialog-inner > p {
margin-bottom: 25px;
color: var(--muted);
}
.dialog-form {
display: grid;
gap: 17px;
}
.dialog-form .field label {
color: var(--ink-light);
}
.dialog-form .field input,
.dialog-form .field select {
border-color: var(--line);
background: var(--white);
color: var(--ink);
}
.dialog-form .field select option {
background: var(--white);
}
.dialog-form .btn {
justify-self: start;
margin-top: 4px;
}
.form-disclaimer {
margin: 4px 0 0;
color: var(--muted);
font-size: 0.75rem;
}
.toast {
position: fixed;
z-index: 300;
right: 20px;
bottom: 20px;
max-width: min(390px, calc(100% - 40px));
padding: 14px 18px;
border-left: 4px solid var(--accent);
border-radius: 2px;
background: var(--ink);
color: var(--white);
box-shadow: var(--shadow);
font-size: 0.88rem;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1120px) {
.primary-nav {
gap: 17px;
}
.primary-nav a {
font-size: 0.72rem;
}
.header-cta {
display: none;
}
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(410px, 0.9fr);
gap: 45px;
}
.hero-verdict {
right: 12px;
}
.market-strip-inner {
grid-template-columns: auto repeat(3, 1fr);
}
.market-item:last-child {
display: none;
}
}
@media (max-width: 940px) {
.topbar-links a:not(:last-child) {
display: none;
}
.mobile-toggle {
display: flex;
margin-left: auto;
}
.primary-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
align-items: stretch;
padding: 8px 20px 20px;
border-top: 1px solid var(--line);
background: var(--paper);
box-shadow: 0 18px 35px rgba(17, 24, 27, 0.15);
}
.site-header.nav-open .primary-nav {
display: flex;
flex-direction: column;
}
.primary-nav a {
padding: 12px 0;
border-bottom: 1px solid var(--line);
font-size: 0.8rem;
}
.primary-nav a::after {
display: none;
}
.hero {
padding-top: 70px;
}
.hero-grid {
grid-template-columns: 1fr;
}
.hero-copy {
max-width: 760px;
}
.hero-visual {
width: min(100%, 760px);
margin-inline: auto;
}
.hero-photo,
.hero-photo img {
min-height: 520px;
}
.section-head {
grid-template-columns: 1fr;
gap: 22px;
}
.section-intro {
max-width: 760px;
}
.editorial-grid,
.finance-shell,
.parts-lead-grid,
.service-grid,
.partner-grid,
.faq-layout,
.contact-grid {
grid-template-columns: 1fr;
}
.review-grid,
.guide-grid,
.testimonial-grid {
grid-template-columns: 1fr;
}
.review-card {
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
}
.review-image {
height: 100%;
aspect-ratio: auto;
}
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
.parts-feature {
grid-template-columns: 0.8fr 1.2fr;
}
.service-visual {
min-height: 560px;
}
.service-check-grid {
grid-template-columns: repeat(2, 1fr);
}
.faq-intro {
position: static;
}
.footer-grid {
grid-template-columns: 1.3fr repeat(2, 0.7fr);
}
.footer-brand {
grid-row: span 2;
}
}
@media (max-width: 680px) {
.container {
width: calc(100% - 28px);
}
.section {
padding: 76px 0;
}
.topbar {
display: none;
}
.nav-wrap {
min-height: 70px;
}
.brand img {
width: 46px;
height: 46px;
}
.brand-name {
font-size: 1.2rem;
}
.brand-tagline {
font-size: 0.6rem;
}
.hero {
padding: 56px 0 64px;
}
.hero-title {
font-size: clamp(3.3rem, 17vw, 5.1rem);
}
.hero-actions,
.finance-actions,
.service-actions,
.partner-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn,
.finance-actions .btn,
.service-actions .btn,
.partner-actions .btn {
width: 100%;
}
.hero-proof {
grid-template-columns: 1fr;
}
.hero-photo,
.hero-photo img {
min-height: 440px;
}
.hero-verdict {
right: 12px;
bottom: 82px;
width: 185px;
padding: 15px;
}
.hero-model h2 {
font-size: 2.4rem;
}
.hero-caption {
display: block;
}
.hero-caption span:last-child {
display: block;
margin-top: 5px;
}
.market-strip-inner {
display: flex;
overflow-x: auto;
}
.market-label,
.market-item {
flex: 0 0 auto;
}
.market-item:last-child {
display: flex;
}
.lead-copy {
padding: 25px;
}
.compact-story {
grid-template-columns: 92px 1fr;
}
.compact-story img {
width: 92px;
height: 92px;
}
.review-card {
display: flex;
}
.review-image {
aspect-ratio: 4 / 3;
}
.review-compare-bar {
align-items: flex-start;
flex-direction: column;
}
.field-grid {
grid-template-columns: 1fr;
}
.payment-result {
grid-template-columns: 1fr;
}
.comparison-actions {
align-items: flex-start;
flex-direction: column;
}
.parts-feature {
grid-template-columns: 1fr;
}
.parts-feature-image {
min-height: 290px;
}
.product-heading {
align-items: flex-start;
flex-direction: column;
}
.product-grid {
grid-template-columns: 1fr;
}
.product-body p {
min-height: 0;
}
.service-grid {
gap: 40px;
}
.service-visual {
min-height: 500px;
}
.service-schedule-card {
grid-template-columns: 92px 1fr;
right: 14px;
bottom: 14px;
left: 14px;
}
.service-check-grid {
grid-template-columns: 1fr;
}
.partner-card {
grid-template-columns: 43px 1fr;
padding: 20px;
}
.newsletter-input-row {
flex-direction: column;
gap: 10px;
}
.newsletter-input-row input {
border-right: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 2px;
}
.newsletter-input-row .btn {
border-radius: 2px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 38px 24px;
}
.footer-brand {
grid-column: 1 / -1;
grid-row: auto;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<div class="topbar">
<div class="container topbar-inner">
<p><strong>Independent automotive intelligence</strong> for smarter decisions and better ownership.</p>
<div class="topbar-links">
<a href="/editorial-standards">Editorial standards</a>
<a href="/dealer-portal">Dealer portal</a>
<a href="#contact">Get the newsletter</a>
</div>
</div>
</div>
<header class="site-header" id="site-header">
<div class="container nav-wrap">
<a class="brand" href="#top" aria-label="TorqueLine home">
<img src="https://placehold.co/120x120/11181b/d8ff43?text=TL&font=oswald" width="120" height="120" alt="TorqueLine logo placeholder">
<span class="brand-copy">
<span class="brand-name">TorqueLine</span>
<span class="brand-tagline">Clarity for every mile</span>
</span>
</a>
<nav class="primary-nav" id="primary-nav" aria-label="Primary navigation">
<a href="#news">News</a>
<a href="#blog">Blog</a>
<a href="#reviews">Reviews</a>
<a href="#parts">Parts</a>
<a href="#service">Service</a>
<a href="#financing">Financing</a>
<a href="#dealer-resources">Dealer Resources</a>
</nav>
<a class="btn btn--small header-cta" href="#reviews">Find a car</a>
<button class="mobile-toggle" id="mobile-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation">
<span></span>
</button>
</div>
</header>
<main id="main">
<section class="hero" id="top" aria-labelledby="hero-title">
<div class="container hero-grid">
<div class="hero-copy">
<span class="eyebrow">Independent automotive intelligence</span>
<h1 class="hero-title" id="hero-title">Clarity for every <em>mile.</em></h1>
<p class="hero-lede">TorqueLine brings independent car reviews, straight-shooting market news, and practical ownership guidance together—so you can buy with confidence and keep every mile running strong.</p>
<p class="hero-secondary">From the first test drive to the final service interval, our editors translate specifications, incentives, and industry jargon into useful answers for real drivers.</p>
<div class="hero-actions">
<a class="btn" href="#blog">Explore the latest</a>
<a class="btn btn--outline" href="#financing">Calculate a payment</a>
</div>
<div class="hero-proof" aria-label="TorqueLine editorial principles">
<span class="proof-item">Independent road-tested reviews</span>
<span class="proof-item">Fitment-conscious parts advice</span>
<span class="proof-item">No pay-to-play rankings</span>
</div>
</div>
<figure class="hero-visual">
<div class="hero-photo">
<img src="https://picsum.photos/seed/torqueline-road-car/1200/1000" width="1200" height="1000" alt="Featured crossover on an open road" fetchpriority="high">
<span class="hero-topline">2025 editor's pick</span>
<div class="hero-model">
<small>Northstar Trail AWD</small>
<h2>The all-season value leader.</h2>
<div class="hero-specs">
<span>27 mpg combined</span>
<span>5,800 lb towing</span>
<span>5-year warranty</span>
</div>
</div>
</div>
<div class="hero-verdict">
<span>Our verdict</span>
<strong>Room for five. Ready for the weekend.</strong>
</div>
<figcaption class="hero-caption">
<span>Why the Trail earned our midsize SUV award</span>
<span>Read the full review →</span>
</figcaption>
</figure>
</div>
</section>
<div class="market-strip" aria-label="Topics TorqueLine is watching">
<div class="container market-strip-inner">
<div class="market-label">What we're watching</div>
<div class="market-item">Affordability & incentives</div>
<div class="market-item">EV battery reports</div>
<div class="market-item">Right-to-repair updates</div>
<div class="market-item">Dealer software</div>
</div>
</div>
<section class="section latest-section" id="blog">
<span class="anchor-target" id="news" aria-hidden="true"></span>
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow">Fresh from the garage</span>
<h2 class="section-title">News worth slowing down for.</h2>
</div>
<p class="section-intro">Independent reporting on the vehicles, people, and ideas reshaping the industry. We separate what is new from what is actually worth your attention—and explain how it affects your wallet and your drive.</p>
</div>
<div class="editorial-grid">
<article class="lead-story">
<a class="lead-image" href="#guides" aria-label="Read the Northstar Trail review">
<img src="https://picsum.photos/seed/torqueline-crossover-market/1200/760" width="1200" height="760" alt="Midsize crossover parked in a modern urban setting" loading="lazy">
<span class="lead-image-label">Editor's choice</span>
</a>
<div class="lead-copy">
<div class="story-meta">
<span class="category">First drive</span>
<span class="dot"></span>
<span>7 min read</span>
</div>
<h3><a href="#reviews">The 2025 Northstar Trail AWD is the value leader hiding in plain sight.</a></h3>
<p>With a practical interior, intuitive controls, and a powertrain that feels more polished than its price suggests, the Trail makes a persuasive case for buying one crossover instead of stretching into a larger luxury badge.</p>
<p>It is not the fastest model in our test group, nor the most efficient. What it does exceptionally well is balance ride quality, usable cargo space, and ownership costs—three things that matter after the showroom lights come up.</p>
<a class="text-link" href="#reviews">Read the full road test <span>→</span></a>
</div>
</article>
<aside class="latest-sidebar" aria-label="More automotive stories and price watch">
<article class="compact-story">
<img src="https://picsum.photos/seed/torqueline-lease-deal/300/300" width="300" height="300" alt="Car parked outside a dealership" loading="lazy">
<div>
<div class="story-meta">
<span class="category">Lease terms</span>
<span class="dot"></span>
<span>4 min</span>
</div>
<h3>Why 36-month leases are making a comeback</h3>
<p>Lower usage assumptions and stronger residual values are changing the math for drivers who like a new car every few years.</p>
</div>
</article>
<article class="compact-story">
<img src="https://picsum.photos/seed/torqueline-workshop-tools/300/300" width="300" height="300" alt="Tools arranged on a clean workshop bench" loading="lazy">
<div>
<div class="story-meta">
<span class="category">Repair guide</span>
<span class="dot"></span>
<span>6 min</span>
</div>
<h3>Five tools every DIY owner should keep nearby</h3>
<p>A scan tool, digital gauge, and the right hand tools can solve more roadside questions than most drivers expect.</p>
</div>
</article>
<article class="compact-story">
<img src="https://picsum.photos/seed/torqueline-car-software/300/300" width="300" height="300" alt="Digital dashboard display inside a modern vehicle" loading="lazy">
<div>
<div class="story-meta">
<span class="category">Technology</span>
<span class="dot"></span>
<span>5 min</span>
</div>
<h3>Software is making dashboards less distracting</h3>
<p>Physical climate controls and simpler menus are finally showing up in cars that used to bury essential functions behind menus.</p>
</div>
</article>
<div class="watch-card">
<h3>Price watch</h3>
<p>Recent incentives we are tracking across the 2025 model year.</p>
<div class="price-drop">
<div><strong>2025 Aera QX Hybrid</strong><span>Hybrid compact SUV</span></div>
<b>−$1,200</b>
</div>
<div class="price-drop">
<div><strong>2025 Vanta E Performance</strong><span>Electric fastback</span></span></div>
<b>−$2,500</b>
</div>
<div class="price-drop">
<div><strong>2025 Northstar Trail AWD</strong><span>Mid-size utility</span></div>
<b>−$850</b>
</div>
</div>
</aside>
</div>
</div>
</section>
<section class="section reviews-section" id="reviews" aria-labelledby="reviews-title">
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow eyebrow--light">Road-tested. Owner-approved.</span>
<h2 class="section-title" id="reviews-title">Reviews for the road you actually drive.</h2>
</div>
<p class="section-intro">Every evaluation combines controlled road testing, measured efficiency, feature usability, and the ownership details that disappear before a 30-second sales video. Scores reflect fit for purpose—not status.</p>
</div>
<div class="review-grid">
<article class="review-card">
<div class="review-image">
<img src="https://picsum.photos/seed/aera-qx-hybrid-review/900/700" width="900" height="700" alt="Hybrid compact SUV reviewed on an open highway" loading="lazy">
<div class="review-rating">
<strong>4.7</strong>
<span>★★★★★</span>
</div>
</div>
<div class="review-body">
<div class="story-meta"><span class="category">Hybrid compact SUV</span><span class="dot"></span><span>Best commuter</span></div>
<h3>2025 Aera QX Hybrid</h3>
<p>The QX turns stop-and-go traffic into its home turf, returning an observed 48 mpg around town and delivering enough electric range for most commutes on a single charge. Its ride is composed, the cabin is quiet, and the physical climate controls are refreshingly easy to understand.</p>
<p>It is not the most exciting crossover to drive, but it may be the easiest one to live with. A responsive hybrid system, generous rear-seat space, and a useful camera suite make it a strong first hybrid purchase.</p>
<dl class="review-specs">
<div><dt>Starting MSRP</dt><dd>$38,450</dd></div>
<div><dt>Observed efficiency</dt><dd>48 mpg</dd></div>
<div><dt>0–60 mph</dt><dd>7.4 sec</dd></div>
<div><dt>Cargo volume</dt><dd>38.7 cu ft</dd></div>
</dl>
<details class="review-details">
<summary>Read field notes</summary>
<p>Braking feel is firm at low speed but consistent on the highway. The QX also supports Level 2 charging at 11 kW, though charging speeds are modest compared with the latest fast-charging rivals. Confirm curb weight, trim pricing, and incentive eligibility with your dealer before ordering.</p>
</details>
</div>
</article>
<article class="review-card">
<div class="review-image">
<img src="https://picsum.photos/seed/vanta-e-performance-review/900/700" width="900" height="700" alt="Electric performance fastback being road tested" loading="lazy">
<div class="review-rating">
<strong>4.4</strong>
<span>★★★★☆</span>
</div>
</div>
<div class="review-body">
<div class="story-meta"><span class="category">Electric fastback</span><span class="dot"></span><span>Best performance</span></div>
<h3>2025 Vanta E Performance</h3>
<p>The Vanta E is quick enough to make every on-ramp interesting, yet its adaptive suspension keeps the body controlled when the speed rises. We averaged 287 miles per charge in mixed driving, making it practical for weekends beyond the city.</p>
<p>The rear seats are snug and the trunk is smaller than the visual proportions suggest. For drivers who value acceleration, charging access, and a low seating position more than maximum passenger space, the Vanta remains an easy recommendation.</p>
<dl class="review-specs">
<div><dt>Starting MSRP</dt><dd>$52,900</dd></div>
<div><dt>Est. range</dt><dd>310 mi</dd></div>
<div><dt>0–60 mph</dt><dd>3.9 sec</dd></div>
<div><dt>DC peak</dt><dd>210 kW</dd></div>
</dl>
<details class="review-details">
<summary>Read field notes</summary>
<p>Range is most competitive above 60°F and with the aerodynamic wheel package selected. The front trunk adds useful charging storage, but the powered hatch is slow. Buyers should also check local dealer inventory because early production allocation remains uneven across regions.</p>
</details>
</div>
</article>
<article class="review-card">
<div class="review-image">
<img src="https://picsum.photos/seed/northstar-trail-review/900/700" width="900" height="700" alt="Midsize all-wheel-drive SUV on a mountain road" loading="lazy">
<div class="review-rating">
<strong>4.6</strong>
<span>★★★★★</span>
</div>
</div>
<div class="review-body">
<div class="story-meta"><span class="category">Mid-size utility</span><span class="dot"></span><span>Best all-rounder</span></div>
<h3>2025 Northstar Trail AWD</h3>
<p>The Trail handles a rough back road with more composure than its price suggests, while its standard all-wheel-drive system gives drivers more confidence in rain or snow. The powertrain is neither sluggish nor overly eager, and the eight-speed transmission shifts smoothly.</p>
<p>Its squared-off shape is a welcome change from the crossover norm and creates genuinely usable cargo space. The infotainment system takes some practice, and fuel economy lands near our 27 mpg combined estimate rather than the more optimistic official figure.</p>
<dl class="review-specs">
<div><dt>Starting MSRP</dt><dd>$46,250</dd></div>
<div><dt>Observed efficiency</dt><dd>27 mpg</dd></div>
<div><dt>Towing capacity</dt><dd>5,800 lb</dd></div>
<div><dt>Ground clearance</dt><dd>8.8 in</dd></div>
</dl>
<details class="review-details">
<summary>Read field notes</summary>
<p>The standard suspension provides the best balance of comfort and control. We recommend the towing package only if you will regularly use the vehicle for that purpose, because it changes ride feel and wheel options. The Trail also includes a useful 230-volt outlet in the cargo area.</p>
</details>
</div>
</article>
</div>
<div class="review-compare-bar">
<p>Not sure which one fits? Compare pricing, range, ownership costs, and intended use in our side-by-side model guide.</p>
<a class="btn btn--light" href="#comparison-table">Compare models</a>
</div>
</div>
</section>
<section class="section finance-section" id="financing" aria-labelledby="finance-title">
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow">Finance with the full picture</span>
<h2 class="section-title" id="finance-title">Know the payment before you sign the paperwork.</h2>
</div>
<p class="section-intro">APR financing and lease terms can look simple until taxes, fees, capitalization, and residual values enter the conversation. Use our estimator for a directional monthly payment, then compare the real offer with these numbers.</p>
</div>
<div class="finance-shell">
<form class="calculator" id="payment-form">
<h3>Monthly payment estimator</h3>
<p class="calculator-intro">Adjust the purchase details to estimate principal and interest. Your actual rate and payment will depend on credit approval, lender fees, and the final contract.</p>
<div class="field-grid">
<div class="field">
<label for="vehicle-price">Vehicle price</label>
<div class="money-field">
<span>$</span>
<input id="vehicle-price" name="price" type="number" min="10000" max="150000" step="100" value="38900" inputmode="decimal">
</div>
</div>
<div class="field">
<label for="down-payment">Down payment</label>
<div class="money-field">
<span>$</span>
<input id="down-payment" name="down" type="number" min="0" max="100000" step="100" value="6500" inputmode="decimal">
</div>
</div>
<div class="field">
<label for="trade-in">Trade-in value</label>
<div class="money-field">
<span>$</span>
<input id="trade-in" name="trade" type="number" min="0" max="100000" step="100" value="0" inputmode="decimal">
</div>
</div>
<div class="field">
<label for="loan-term">Loan term</label>
<select id="loan-term" name="term">
<option value="36">36 months</option>
<option value="48">48 months</option>
<option value="60" selected>60 months</option>
<option value="72">72 months</option>
</select>
</div>
<div class="field">
<label for="apr-rate">Estimated APR</label>
<div class="percent-field">
<input id="apr-rate" name="apr" type="number" min="0" max="25" step="0.1" value="6.4" inputmode="decimal">
<span>%</span>
</div>
</div>
<div class="field">
<label for="down-payment">Estimated tax & fees</label>
<div class="money-field">
<span>$</span>
<input id="tax-fees" name="fees" type="number" min="0" max="30000" step="50" value="2800" inputmode="decimal" disabled>
</div>
</div>
</div>
<div class="payment-result" aria-live="polite">
<div>
<span>Estimated monthly payment</span>
<output id="monthly-payment" for="vehicle-price down-payment trade-in loan-term apr-rate">$712</output>
</div>
<dl class="estimate-facts">
<div><dt>Amount financed</dt><dd id="amount-financed">$35,200</dd></div>
<div><dt>Est. amount due at signing</dt><dd id="due-at-signing">$9,300</dd></div>
<div><dt>APR / term</dt><dd id="rate-term">6.4% / 60 months</dd></div>
</dl>
</div>
<button class="btn" type="submit">Calculate payment</button>
<p class="estimate-note" id="estimate-summary">Based on a $38,900 vehicle with $6,500 down and no trade-in. Estimate excludes taxes, registration, lender fees, and optional products.</p>
</form>
<aside class="finance-info">
<span class="eyebrow">The fine print, decoded</span>
<h3>APR financing, without the showroom fog.</h3>
<p>An APR is the annual cost of borrowing as a percentage. A car may be advertised at a low rate for a short term, but a longer loan can reduce the monthly payment while increasing the total amount paid.</p>
<p>Compare the amount financed, term length, APR, monthly payment, and total of payments. The lowest payment is not always the lowest overall cost.</p>
<dl class="finance-facts">
<div>
<dt>APR</dt>
<dd>The annualized interest rate, including certain lender fees. It helps make offers easier to compare.</dd>
</div>
<div>
<dt>Term</dt>
<dd>The number of months to repay the loan. Shorter terms generally mean higher monthly payments and less interest.</dd>
</div>
<div>
<dt>Cap cost</dt>
<dd>The total of payments on a lease, before fees and any purchase option. Check the mileage allowance carefully.</dd>
</div>
</dl>
<div class="finance-callout">
<strong>Before you sign, ask for the buyer's order.</strong>
<p>Request the final amount financed, APR, term, monthly payment, taxes, fees, prepayment penalty, and total of payments in writing.</p>
</div>
<details>
<summary>How should I compare a lease and a loan?</summary>
<p>Compare the total cost for the period you expect to keep the vehicle, not just the monthly number. A lease may create a lower payment and a scheduled return point, while a loan builds equity. Mileage overages, condition charges, acquisition fees, and purchase-option pricing can materially change the result.</p>
</details>
<details>
<summary>Can I use this estimate as an offer?</summary>
<p>No. This tool provides a planning estimate rather than a credit application or lender quote. Taxes, registration, title fees, dealer discounts, and protection products can change the amount financed and monthly payment.</p>
</details>
<div class="finance-actions">
<button class="btn btn--dark" type="button" data-open-dialog="financing-dialog">Request financing</button>
<a class="text-link" href="tel:+15125550148">Talk to an advisor <span>→</span></a>
</div>
</aside>
</div>
</div>
</section>
<section class="section guides-section" id="guides" aria-labelledby="guides-title">
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow">Buying guides</span>
<h2 class="section-title" id="guides-title">Build a shortlist without the spec-sheet spiral.</h2>
</div>
<p class="section-intro">The fastest path to the right vehicle starts with how you will actually use it. Compare the numbers that affect your budget, your commute, and the number of times you will pull into a service department.</p>
</div>
<div class="comparison-wrap" id="comparison-table">
<table class="comparison-table">
<caption>TorqueLine 2025 comparison snapshot</caption>
<thead>
<tr>
<th scope="col">Vehicle</th>
<th scope="col">Starting MSRP</th>
<th scope="col">Power</th>
<th scope="col">Efficiency / range</th>
<th scope="col">Best for</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Aera QX Hybrid</th>
<td><strong>$38,450</strong></td>
<td>190 hp hybrid</td>
<td>49 mpg combined</td>
<td>Commuters and small families</td>
</tr>
<tr>
<th scope="row">Vanta E Performance</th>
<td><strong>$52,900</strong></td>
<td>420 hp dual motor</td>
<td>Up to 310 miles</td>
<td>EV buyers who value performance</td>
</tr>
<tr>
<th scope="row">Northstar Trail AWD</th>
<td><strong>$46,250</strong></td>
<td>280 hp turbo four</td>
<td>27 mpg combined</td>
<td>All-weather utility and towing</td>
</tr>
</tbody>
</table>
</div>
<div class="comparison-actions">
<p>Prices are illustrative starting MSRPs and exclude destination, taxes, options, and incentives.</p>
<button class="btn btn--outline" id="download-comparison" type="button">Download comparison</button>
</div>
<div class="guide-grid">
<article class="guide-card">
<span class="guide-number" aria-hidden="true">01</span>
<h3>Lease vs. buy: the honest math</h3>
<p>Compare the cost of ownership over the exact time you plan to keep the car. This guide explains down payments, cap cost, mileage allowances, wear charges, and when buying out a lease makes sense.</p>
<a class="text-link" href="#faq">Read the guide <span>→</span></a>
</article>
<article class="guide-card">
<span class="guide-number" aria-hidden="true">02</span>
<h3>A practical used-car inspection</h3>
<p>Use a 120-point walkaround to assess paint, fluids, tires, brakes, cold starts, warning lights, and title history. Learn which signs are cosmetic and which deserve a mechanic's attention.</p>
<a class="text-link" href="#parts">See the checklist <span>→</span></a>
</article>
<article class="guide-card">
<span class="guide-number" aria-hidden="true">03</span>
<h3>First-time electric vehicle?</h3>
<p>Home charging, range planning, cold-weather efficiency, and battery care matter more than headline acceleration. Start with your daily route and the charging access available at home and work.</p>
<a class="text-link" href="#reviews">Compare electric models <span>→</span></a>
</article>
</div>
</div>
</section>
<section class="section parts-section" id="parts" aria-labelledby="parts-title">
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow">Parts & practical know-how</span>
<h2 class="section-title" id="parts-title">Parts intelligence, not parts pressure.</h2>
</div>
<p class="section-intro">We explain what a part does, how it should wear, and when a replacement is genuinely necessary. Our recommendations favor correct fitment, sensible service intervals, and repairs that make economic sense.</p>
</div>
<div class="parts-lead-grid">
<article class="parts-feature">
<div class="parts-feature-image">
<img src="https://picsum.photos/seed/torqueline-brake-repair/900/900" width="900" height="900" alt="Brake components being inspected during a service appointment" loading="lazy">
<span>Field guide 07 / Braking systems</span>
</div>
<div class="parts-feature-copy">
<span class="eyebrow">Repair guide</span>
<h3>Brake wear: what the dashboard isn't telling you.</h3>
<p>Squealing is not the only warning sign. A soft pedal, a pull toward one side, or increased stopping distance can point to a problem in the pads, calipers, rotors, or hydraulic system before a dashboard message appears.</p>
<p>Service life depends on the friction material, driving pattern, wheel weight, road debris, and how the vehicle is used. Inspect thickness and rotor condition at each tire rotation, and follow the service interval in the owner's manual.</p>
<ul>
<li>Measure pad thickness with the correct caliper tool</li>
<li>Check rotor thickness, scoring, and lip wear</li>
<li>Inspect hoses, fluid, calipers, and hardware</li>
</ul>
<a class="text-link" href="#parts-picks">Browse essential parts <span>→</span></a>
</div>
</article>
<aside class="parts-menu" aria-label="Parts categories">
<h3>Browse by system</h3>
<p>Start with the symptom, then work toward a confident diagnosis.</p>
<ul>
<li><a href="#service">Brakes & suspension</a></li>
<li><a href="#service">Fluids & filters</a></li>
<li><a href="#service">Battery & electrical</a></li>
<li><a href="#service">Tires & wheels</a></li>
<li><a href="#service">Belts & cooling</a></li>
<li><a href="#service">OEM & aftermarket</a></li>
</ul>
<a class="text-link" href="mailto:parts@torqueline.com">Ask a parts editor <span>→</span></a>
</aside>
</div>
<div class="product-heading" id="parts-picks">
<h3>Parts desk picks</h3>
<p>A starter set of common maintenance items. Always confirm vehicle model, engine, trim, and production date before ordering.</p>
</div>
<div class="product-grid">
<article class="product-card">
<div class="product-image">
<img src="https://placehold.co/640x420/273034/f4f0e7?text=CERAMIC+BRAKE+PADS&font=oswald" width="640" height="420" alt="Ceramic brake pad set product placeholder" loading="lazy">
</div>
<div class="product-body">
<span class="product-type">Braking / OE-style</span>
<h4>Ceramic brake pad set</h4>
<p>Low-dust ceramic compound with a hardware kit and shims for quiet daily use. Match by axle and vehicle fitment.</p>
<div class="product-footer">
<span class="product-price">$72.40</span>
<button class="save-part" type="button" data-part="brake-pads" aria-pressed="false">Add to checklist</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="https://placehold.co/640x420/273034/f4f0e7?text=5W-30+SYNTHETIC&font=oswald" width="640" height="420" alt="Full synthetic 5W-30 motor oil product placeholder" loading="lazy">
</div>
<div class="product-body">
<span class="product-type">Fluids / 6 quarts</span>
<h4>Full synthetic 5W-30</h4>
<p>A versatile synthetic oil for many modern gasoline engines. Verify viscosity, certification, and oil capacity in your manual.</p>
<div class="product-footer">
<span class="product-price">$36.95</span>
<button class="save-part" type="button" data-part="motor-oil" aria-pressed="false">Add to checklist</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="https://placehold.co/640x420/273034/f4f0e7?text=ENGINE+AIR+FILTER&font=oswald" width="640" height="420" alt="Engine air filter product placeholder" loading="lazy">
</div>
<div class="product-body">
<span class="product-type">Engine / Filtration</span>
<h4>Engine air filter</h4>
<p>A pleated replacement designed for normal dust exposure. Inspect intake ducts for debris during replacement.</p>
<div class="product-footer">
<span class="product-price">$22.50</span>
<button class="save-part" type="button" data-part="air-filter" aria-pressed="false">Add to checklist</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="https://placehold.co/640x420/273034/f4f0e7?text=ALL-SEASON+WIPERS&font=oswald" width="640" height="420" alt="All-season windshield wiper pair product placeholder" loading="lazy">
</div>
<div class="product-body">
<span class="product-type">Visibility / Pair</span>
<h4>All-season wiper pair</h4>
<p>Graphite-coated blades for year-round visibility. Confirm connector style and driver-side length before purchase.</p>
<div class="product-footer">
<span class="product-price">$44.00</span>
<button class="save-part" type="button" data-part="wipers" aria-pressed="false">Add to checklist</button>
</div>
</div>
</article>
</div>
<p class="product-disclaimer">Illustrative prices and products shown for layout demonstration. Availability, fitment, and pricing vary by vehicle and market.</p>
</div>
</section>
<section class="section service-section" id="service" aria-labelledby="service-title">
<div class="container">
<div class="service-grid">
<div class="service-copy">
<span class="eyebrow">Service center intelligence</span>
<h2 id="service-title">Your service interval, finally in plain English.</h2>
<p>Modern vehicles need scheduled maintenance, but a service interval is not a race to the nearest quick-lube shop. Oil changes, tire rotations, brake inspections, filters, fluids, and recalls should follow the manufacturer schedule and your actual use of the car.</p>
<p>TorqueLine service advisors translate factory recommendations into a clear plan for a franchised dealer, an independent repair shop, or your own driveway. We explain what is scheduled, what can be monitored, and what should never be skipped without a professional assessment.</p>
<ul class="service-list">
<li>Multi-point inspection with a written condition report</li>
<li>Oil, filter, fluid, and service-interval checks</li>
<li>Tire condition, rotation, and alignment review</li>
<li>Brake, battery, belt, hose, and recall inspection</li>
</ul>
<div class="service-actions">
<button class="btn btn--dark" type="button" data-open-dialog="service-dialog">Request service</button>
<a class="btn btn--outline" href="tel:+15125550148">Call the service desk</a>
</div>
<div class="service-note">
<strong>Service promise:</strong>
<span>You receive an estimate before work begins, OEM or approved aftermarket parts are identified clearly, and diagnostic time is explained before the shop continues.</span>
</div>
</div>
<div class="service-visual">
<img src="https://picsum.photos/seed/torqueline-service-center/1100/1200" width="1100" height="1200" alt="Technician inspecting a vehicle inside a clean service center" loading="lazy">
<div class="service-schedule-card">
<div class="schedule-number"><strong>12</strong><span>mo / 12k mi</span></div>
<div class="schedule-copy">
<span>Example schedule</span>
<strong>Start with the maintenance timeline</strong>
<p>Intervals vary by model, engine, trim, and service history. Verify yours by VIN and mileage.</p>
</div>
</div>
</div>
</div>
<div class="service-check-grid">
<article class="service-check">
<span>01</span>
<h3>Estimate first</h3>
<p>Review recommended service, parts, fluids, and labor before authorizing additional work.</p>
</article>
<article class="service-check">
<span>02</span>
<h3>Records included</h3>
<p>Keep a dated maintenance log with mileage, fluid specifications, and completed inspections.</p>
</article>
<article class="service-check">
<span>03</span>
<h3>Priority ranking</h3>
<p>Separate safety and maintenance needs from wear items and optional enhancements.</p>
</article>
<article class="service-check">
<span>04</span>
<h3>No guesswork</h3>
<p>Ask for photos, test results, and a plain-language explanation of any diagnostic finding.</p>
</article>
</div>
</div>
</section>
<section class="section testimonials-section" aria-labelledby="testimonials-title">
<div class="container">
<div class="section-head">
<div>
<span class="eyebrow">From the driver's seat</span>
<h2 class="section-title" id="testimonials-title">Good decisions travel well.</h2>
</div>
<p class="section-intro">Owners, first-time buyers, and service professionals share what helped them make a more confident call. We publish verified feedback without hiding the less convenient details.</p>
</div>
<div class="testimonial-grid">
<article class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“The payment estimator helped me negotiate a better rate. I walked in knowing exactly what the monthly payment should look like.”</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/120?u=maya-chen" width="120" height="120" alt="Maya Chen" loading="lazy">
<div><strong>Maya Chen</strong><span>2025 Aera QX owner</span></div>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“The service interval guide saved me from replacing parts that were still in spec. My final invoice was lower than the first estimate.”</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/120?u=julian-reed" width="120" height="120" alt="Julian Reed" loading="lazy">
<div><strong>Julian Reed</strong><span>Long-distance commuter</span></div>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“The comparison guide made the trade-off between range and price obvious. I chose the smaller battery and have no range anxiety.”</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/120?u=priya-nair" width="120" height="120" alt="Priya Nair" loading="lazy">
<div><strong>Priya Nair</strong><span>First-time EV buyer</span></div>
</div>
</article>
</div>
</div>
</section>
<section class="section partner-section" id="dealer-resources" aria-labelledby="partner-title">
<div class="container partner-grid">
<div>
<span class="eyebrow eyebrow--light">For dealers & partners</span>
<h2 class="section-title" id="partner-title">More listings. Better conversations.</h2>
<p class="section-intro">TorqueLine helps local dealerships turn technical information into useful customer guidance. From model comparison content to fitment-aware parts education, every resource is designed to support a more informed sale.</p>
<p class="section-intro">Dealer resources include editable vehicle articles, local market data modules, lead-management support, and co-op campaign opportunities. Editorial teams retain clear separation between paid placements and editorial coverage.</p>
<div class="partner-actions">
<a class="btn" href="mailto:partners@torqueline.com?subject=TorqueLine%20Dealer%20Resources">Explore dealer tools</a>
<a class="btn btn--outline" style="border-color: rgba(255,255,255,.5); color: #fff;" href="#contact">Get dealer updates</a>
</div>
</div>
<div class="resource-stack">
<article class="partner-card">
<span class="number">01</span>
<div>
<h3>Inventory storytelling</h3>
<p>Turn trim details, drivetrain specifications, and ownership costs into useful content that helps shoppers compare confidently.</p>
</div>
</article>
<article class="partner-card">
<span class="number">02</span>
<div>
<h3>Local market intelligence</h3>
<p>Track pricing trends, popular configurations, incentive language, and customer questions for your showroom and inventory area.</p>
</div>
</article>
<article class="partner-card">
<span class="number">03</span>
<div>
<h3>Service and parts education</h3>
<p>Give customers clear service-interval guides, product fitment information, and plain-language explanations before they reach the counter.</p>
</div>
</article>
</div>
</div>
</section>
<section class="section faq-section" id="faq" aria-labelledby="faq-title">
<div class="container faq-layout">
<div class="faq-intro">
<span class="eyebrow">Straight answers</span>
<h2 class="section-title" id="faq-title">Questions worth asking.</h2>
<p>Clear guidance for the moments when a sales desk is busy, a manual is dense, and a search result is not enough.</p>
</div>
<div class="faq-list">
<details class="faq-item">
<summary>How often should I service my car?</summary>
<div class="faq-answer">
<p>Follow the service schedule and maintenance intervals in the vehicle owner's manual, then adjust for age, mileage, storage conditions, and driving pattern. A lightly used commuter can still need attention to brakes, fluids, tires, and the battery.</p>
<p>Record completed work and mileage, and ask the service provider to reconcile the invoice with the factory schedule. If a light is on, a fluid is leaking, or a noise changes, do not wait for the next routine interval.</p>
</div>
</details>
<details class="faq-item">
<summary>Should I buy a used electric vehicle?</summary>
<div class="faq-answer">
<p>A used EV can be a strong value when you can verify battery condition, charging compatibility, software support, and the remaining manufacturer warranty. A vehicle used primarily for fast charging or high-mileage commuting may show more wear than the odometer suggests.</p>
<p>Request a battery health report, inspect the charging port and high-voltage cooling system, and confirm service records. Compare the purchase price with a new vehicle's incentive and financing offer before deciding.</p>
</div>
</details>
<details class="faq-item">
<summary>Is a lease better than financing?</summary>
<div class="faq-answer">
<p>Neither option is automatically better. A lease can reduce upfront costs and simplify the return decision, while a loan builds equity and allows more flexibility after the payoff period. The best answer depends on your annual mileage, credit profile, and how long you expect to keep the car.</p>
<p>Compare total cost over your expected ownership period, including the cap cost, down payment, acquisition fee, mileage allowance, residual value, wear charges, purchase option, and financing APR.</p>
</div>
</details>
<details class="faq-item">
<summary>Are OEM parts always better than aftermarket parts?</summary>
<div class="faq-answer">
<p>OEM parts are the safest choice when fit, calibration, warranty, or exact material specification matters. Quality aftermarket parts can provide strong value for routine items such as filters, brake pads, and wipers when they meet recognized industry standards.</p>
<p>Match parts by VIN where possible and avoid mixing components without understanding compatibility. A parts professional can identify the practical difference for your specific repair.</p>
</div>
</details>
<details class="faq-item">
<summary>Can TorqueLine recommend a repair shop?</summary>
<div class="faq-answer">
<p>TorqueLine is an independent editorial resource and does not accept payment for repair-shop recommendations. We publish service standards and explain how to evaluate a shop based on diagnostics, estimates, warranty, and communication.</p>
<p>For a service appointment, contact an authorized dealer or a reputable independent shop in your area. Tell us about your vehicle and concern so we can point you to the right information, not a preferred business.</p>
</div>
</details>
<details class="faq-item">
<summary>How does the monthly payment estimate work?</summary>
<div class="faq-answer">
<p>The estimator uses a standard amortization formula based on vehicle price, down payment, trade-in equity, APR, and loan term. It estimates principal and interest only and does not include taxes, registration, lender fees, or optional products.</p>
<p>The result is a planning tool, not a credit application or binding quote. A lender may approve a different rate based on credit history, vehicle eligibility, and market conditions.</p>
</div>
</details>
</div>
</div>
</section>
<section class="section contact-section" id="contact" aria-labelledby="contact-title">
<div class="container contact-grid">
<div>
<span class="eyebrow">The weekly torque</span>
<h2 id="contact-title">Get smarter before you turn the key.</h2>
<p>Our weekly briefing brings together the vehicles worth watching, meaningful price changes, practical repair guidance, and the ownership details that should shape your next decision. No clickbait and no endless alerts.</p>
<div class="contact-details">
<a href="mailto:hello@torqueline.com">hello@torqueline.com</a>
<a href="tel:+15125550148">+1 (512) 555-0148</a>
<a href="mailto:partners@torqueline.com">Dealer partnerships</a>
</div>
</div>
<div class="newsletter-card">
<h3>Get the week in cars.</h3>
<p>A sharp, five-minute briefing delivered every Friday morning.</p>
<form class="newsletter-form" id="newsletter-form">
<label for="newsletter-email">Email address</label>
<div class="newsletter-input-row">
<input id="newsletter-email" name="email" type="email" autocomplete="email" placeholder="driver@example.com" required>
<button class="btn" type="submit">Join free</button>
</div>
<small>By subscribing, you agree to our Terms and Privacy Policy. Unsubscribe at any time.</small>
<p class="form-status" id="newsletter-status" role="status"></p>
</form>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#top" aria-label="TorqueLine home">
<img src="https://placehold.co/120x120/d8ff43/11181b?text=TL&font=oswald" width="120" height="120" alt="TorqueLine logo placeholder">
<span class="brand-copy">
<span class="brand-name">TorqueLine</span>
<span class="brand-tagline">Clarity for every mile</span>
</span>
</a>
<p>Independent automotive journalism, ownership guidance, parts intelligence, and buyer resources for drivers who want the full picture.</p>
<div class="footer-contact">
<a href="tel:+15125550148">+1 (512) 555-0148</a>
<a href="mailto:hello@torqueline.com">hello@torqueline.com</a>
<address>1870 Meridian Avenue, Suite 210<br>Austin, TX 78701</address>
</div>
<div class="social-links" aria-label="Social media links">
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="TorqueLine on Instagram">Ig</a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer" aria-label="TorqueLine on YouTube">Yt</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="TorqueLine on LinkedIn">In</a>
</div>
</div>
<nav class="footer-column" aria-label="Explore">
<h3>Explore</h3>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#reviews">Car Reviews</a></li>
<li><a href="#parts">Parts</a></li>
<li><a href="#service">Service Center</a></li>
<li><a href="#financing">Financing</a></li>
</ul>
</nav>
<nav class="footer-column" aria-label="Company">
<h3>Company</h3>
<ul>
<li><a href="/about">About TorqueLine</a></li>
<li><a href="/editorial-standards">Editorial Standards</a></li>
<li><a href="#dealer-resources">Dealer Resources</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="mailto:hello@torqueline.com">Contact</a></li>
</ul>
</nav>
<nav class="footer-column" aria-label="Support">
<h3>Support</h3>
<ul>
<li><a href="#faq">FAQ</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/accessibility">Accessibility</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
</nav>
</div>
<div class="footer-bottom">
<p>© <span id="current-year">2025</span> TorqueLine Media. All rights reserved. Automotive names and models shown are used for demonstration.</p>
<div class="legal-links">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/cookies">Cookie Settings</a>
</div>
</div>
</div>
</footer>
<dialog id="financing-dialog" aria-labelledby="financing-dialog-title">
<div class="dialog-inner">
<button class="dialog-close" type="button" data-close-dialog aria-label="Close financing request">×</button>
<span class="eyebrow">Pre-qualification request</span>
<h2 id="financing-dialog-title">Let’s find a better-financed path.</h2>
<p>Share a few details and a TorqueLine lending partner will contact you with next steps. Submitting this form does not affect your credit score.</p>
<form class="dialog-form" id="financing-request-form">
<div class="field">
<label for="financing-name">Full name</label>
<input id="financing-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="financing-email">Email address</label>
<input id="financing-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field">
<label for="financing-phone">Phone number</label>
<input id="financing-phone" name="phone" type="tel" autocomplete="tel" placeholder="(512) 555-0148">
</div>
<div class="field">
<label for="vehicle-interest">Vehicle of interest</label>
<input id="vehicle-interest" name="vehicle" type="text" placeholder="2025 Aera QX Hybrid">
</div>
<button class="btn btn--dark" type="submit">Request financing</button>
<p class="form-disclaimer">Your information is handled according to the TorqueLine Privacy Policy and is not sold to third parties.</p>
</form>
</div>
</dialog>
<dialog id="service-dialog" aria-labelledby="service-dialog-title">
<div class="dialog-inner">
<button class="dialog-close" type="button" data-close-dialog aria-label="Close service request">×</button>
<span class="eyebrow">Service request</span>
<h2 id="service-dialog-title">Tell us what your car needs.</h2>
<p>Share the vehicle and service concern. The service desk will help identify the right interval, inspection, or diagnostic step before an appointment is booked.</p>
<form class="dialog-form" id="service-request-form">
<div class="field">
<label for="service-name">Full name</label>
<input id="service-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="service-email">Email address</label>
<input id="service-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field">
<label for="service-vehicle">Vehicle year, make, and model</label>
<input id="service-vehicle" name="vehicle" type="text" placeholder="2022 Northstar Trail AWD" required>
</div>
<div class="field">
<label for="service-concern">Service need</label>
<select id="service-concern" name="concern">
<option value="routine">Routine maintenance</option>
<option value="inspection">Multi-point inspection</option>
<option value="brakes">Brake or tire concern</option>
<option value="warning">Warning light or diagnosis</option>
<option value="other">Other</option>
</select>
</div>
<button class="btn btn--dark" type="submit">Request service</button>
<p class="form-disclaimer">For immediate safety concerns, stop driving the vehicle and contact a qualified repair facility.</p>
</form>
</div>
</dialog>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
(() => {
const header = document.getElementById("site-header");
const mobileToggle = document.getElementById("mobile-toggle");
const primaryNav = document.getElementById("primary-nav");
const year = document.getElementById("current-year");
year.textContent = new Date().getFullYear();
function closeMobileNav() {
header.classList.remove("nav-open");
mobileToggle.setAttribute("aria-expanded", "false");
mobileToggle.setAttribute("aria-label", "Open navigation");
}
mobileToggle.addEventListener("click", () => {
const isOpen = header.classList.toggle("nav-open");
mobileToggle.setAttribute("aria-expanded", String(isOpen));
mobileToggle.setAttribute("aria-label", isOpen ? "Close navigation" : "Open navigation");
});
primaryNav.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", closeMobileNav);
});
document.addEventListener("click", (event) => {
if (!header.contains(event.target)) {
closeMobileNav();
}
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeMobileNav();
}
});
const currency = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
const paymentForm = document.getElementById("payment-form");
const priceInput = document.getElementById("vehicle-price");
const downInput = document.getElementById("down-payment");
const tradeInput = document.getElementById("trade-in");
const termInput = document.getElementById("loan-term");
const aprInput = document.getElementById("apr-rate");
const monthlyOutput = document.getElementById("monthly-payment");
const amountFinanced = document.getElementById("amount-financed");
const dueAtSigning = document.getElementById("due-at-signing");
const rateTerm = document.getElementById("rate-term");
const estimateSummary = document.getElementById("estimate-summary");
function updatePaymentEstimate() {
const price = Math.max(0, parseFloat(priceInput.value) || 0);
const down = Math.max(0, parseFloat(downInput.value) || 0);
const trade = Math.max(0, parseFloat(tradeInput.value) || 0);
const term = Math.max(1, parseInt(termInput.value, 10) || 60);
const apr = Math.max(0, parseFloat(aprInput.value) || 0);
const appliedDown = Math.min(down, price);
const remainingAfterDown = Math.max(0, price - appliedDown);
const appliedTrade = Math.min(trade, remainingAfterDown);
const principal = Math.max(0, remainingAfterDown - appliedTrade);
const monthlyRate = apr / 100 / 12;
const payment = principal === 0
? 0
: monthlyRate === 0
? principal / term
: principal * (monthlyRate * Math.pow(1 + monthlyRate, term)) / (Math.pow(1 + monthlyRate, term) - 1);
monthlyOutput.textContent = currency.format(payment);
amountFinanced.textContent = currency.format(principal);
dueAtSigning.textContent = currency.format(appliedDown + 399);
rateTerm.textContent = `${apr.toFixed(1)}% / ${term} months`;
estimateSummary.textContent = `Based on a ${currency.format(price)} vehicle with ${currency.format(appliedDown)} down, ${currency.format(appliedTrade)} trade-in equity applied, ${apr.toFixed(1)}% APR, and a ${term}-month term. Estimate excludes taxes, registration, lender fees, and optional products.`;
}
[priceInput, downInput, tradeInput, termInput, aprInput].forEach((input) => {
input.addEventListener("input", updatePaymentEstimate);
input.addEventListener("change", updatePaymentEstimate);
});
paymentForm.addEventListener("submit", (event) => {
event.preventDefault();
updatePaymentEstimate();
monthlyOutput.focus?.();
showToast("Your updated payment estimate is ready.");
});
const downloadButton = document.getElementById("download-comparison");
downloadButton.addEventListener("click", () => {
const rows = [
["Vehicle", "Starting MSRP", "Power", "Efficiency / Range", "Best For"],
["2025 Aera QX Hybrid", "$38,450", "190 hp hybrid", "49 mpg combined", "Commuters and small families"],
["2025 Vanta E Performance", "$52,900", "420 hp dual motor", "Up to 310 miles", "EV buyers who value performance"],
["2025 Northstar Trail AWD", "$46,250", "280 hp turbo four", "27 mpg combined", "All-weather utility and towing"]
];
const csv = rows.map((row) => row.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "torqueline-2025-model-comparison.csv";
document.body.appendChild(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
showToast("The model comparison has been downloaded.");
});
const savedParts = new Set();
try {
const storedParts = JSON.parse(localStorage.getItem("torqueline-parts") || "[]");
if (Array.isArray(storedParts)) {
storedParts.forEach((part) => savedParts.add(part));
}
} catch (error) {
console.info("Part checklist storage is unavailable in this browser.");
}
document.querySelectorAll(".save-part").forEach((button) => {
const part = button.dataset.part;
const updateButton = () => {
const saved = savedParts.has(part);
button.setAttribute("aria-pressed", String(saved));
button.textContent = saved ? "Saved ✓" : "Add to checklist";
};
updateButton();
button.addEventListener("click", () => {
if (savedParts.has(part)) {
savedParts.delete(part);
} else {
savedParts.add(part);
}
try {
localStorage.setItem("torqueline-parts", JSON.stringify([...savedParts]));
} catch (error) {
console.info("Part checklist storage is unavailable in this browser.");
}
updateButton();
showToast(savedParts.has(part) ? "Part added to your checklist." : "Part removed from your checklist.");
});
});
const dialogs = document.querySelectorAll("dialog");
function openDialog(dialog) {
if (!dialog) return;
if (typeof dialog.showModal === "function") {
dialog.showModal();
} else {
dialog.setAttribute("open", "");
}
document.body.classList.add("dialog-open");
}
function closeDialog(dialog) {
if (!dialog) return;
if (typeof dialog.close === "function") {
dialog.close();
} else {
dialog.removeAttribute("open");
}
document.body.classList.remove("dialog-open");
}
document.querySelectorAll("[data-open-dialog]").forEach((button) => {
button.addEventListener("click", () => {
openDialog(document.getElementById(button.dataset.openDialog));
});
});
document.querySelectorAll("[data-close-dialog]").forEach((button) => {
button.addEventListener("click", () => {
closeDialog(button.closest("dialog"));
});
});
dialogs.forEach((dialog) => {
dialog.addEventListener("click", (event) => {
if (event.target === dialog) {
closeDialog(dialog);
}
});
dialog.addEventListener("close", () => {
document.body.classList.remove("dialog-open");
});
});
const financingRequest = document.getElementById("financing-request-form");
financingRequest.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.getElementById("financing-name").value.trim();
closeDialog(document.getElementById("financing-dialog"));
financingRequest.reset();
showToast(`Thanks${name ? `, ${name.split(" ")[0]}` : ""}. A lending specialist will be in touch shortly.`);
});
const serviceRequest = document.getElementById("service-request-form");
serviceRequest.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.getElementById("service-name").value.trim();
closeDialog(document.getElementById("service-dialog"));
serviceRequest.reset();
showToast(`Thanks${name ? `, ${name.split(" ")[0]}` : ""}. The service desk will contact you to confirm the next step.`);
});
const newsletterForm = document.getElementById("newsletter-form");
const newsletterStatus = document.getElementById("newsletter-status");
newsletterForm.addEventListener("submit", (event) => {
event.preventDefault();
newsletterStatus.textContent = "You're on the list. Watch your inbox for Friday's briefing.";
newsletterForm.reset();
});
let toastTimer;
function showToast(message) {
const toast = document.getElementById("toast");
toast.textContent = message;
toast.classList.add("is-visible");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(() => {
toast.classList.remove("is-visible");
}, 4200);
}
const observedSections = document.querySelectorAll("#news, #blog, #reviews, #parts, #service, #financing, #dealer-resources");
const navLinks = Array.from(primaryNav.querySelectorAll("a"));
if ("IntersectionObserver" in window) {
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
navLinks.forEach((link) => {
const active = link.getAttribute("href") === `#${entry.target.id}`;
if (active) {
link.setAttribute("aria-current", "page");
} else {
link.removeAttribute("aria-current");
}
});
});
}, { rootMargin: "-25% 0px -65% 0px", threshold: 0 });
observedSections.forEach((section) => sectionObserver.observe(section));
}
updatePaymentEstimate();
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:10:21.097Z",
"url": "https://benchmark.aimac.invalid/f74fa6cc9cd2afb6be6633a0a7576e9c6172638b8d80b3ab111b78ed454ec50a.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<p class=\"form-status\" id=\"newsletter-status\" role=\"status\"></p>",
"target": [
"#newsletter-status"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span class=\"anchor-target\" id=\"news\" aria-hidden=\"true\"></span>",
"target": [
"#news"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<p class=\"form-status\" id=\"newsletter-status\" role=\"status\"></p>",
"target": [
"#newsletter-status"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<p class=\"form-status\" id=\"newsletter-status\" role=\"status\"></p>",
"target": [
"#newsletter-status"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"newsletter-email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"driver@example.com\" required=\"\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<a class=\"btn btn--outline\" style=\"border-color: rgba(255,255,255,.5); color: #fff;\" href=\"#contact\">Get dealer updates</a>",
"target": [
".btn--outline.btn[href$=\"#contact\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn\" type=\"submit\">Calculate payment</button>",
"target": [
"#payment-form > button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"hero-title\" id=\"hero-title\">Clarity for every <em>mile.</em></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2>The all-season value leader.</h2>",
"target": [
".hero-model > h2"
]
},
{
"html": "<h2 class=\"section-title\">News worth slowing down for.</h2>",
"target": [
"#blog > .container > .section-head > div > .section-title"
]
},
{
"html": "<h3><a href=\"#reviews\">The 2025 Northstar Trail AWD is the value leader hiding in plain sight.</a></h3>",
"target": [
".lead-copy > h3"
]
},
{
"html": "<h3>Why 36-month leases are making a comeback</h3>",
"target": [
".compact-story:nth-child(1) > div > h3"
]
},
{
"html": "<h3>Five tools every DIY owner should keep nearby</h3>",
"target": [
".compact-story:nth-child(2) > div > h3"
]
},
{
"html": "<h3>Software is making dashboards less distracting</h3>",
"target": [
".compact-story:nth-child(3) > div > h3"
]
},
{
"html": "<h3>Price watch</h3>",
"target": [
".watch-card > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"reviews-title\">Reviews for the road you actually drive.</h2>",
"target": [
"#reviews-title"
]
},
{
"html": "<h3>2025 Aera QX Hybrid</h3>",
"target": [
".review-card:nth-child(1) > .review-body > h3"
]
},
{
"html": "<h3>2025 Vanta E Performance</h3>",
"target": [
".review-card:nth-child(2) > .review-body > h3"
]
},
{
"html": "<h3>2025 Northstar Trail AWD</h3>",
"target": [
".review-card:nth-child(3) > .review-body > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"finance-title\">Know the payment before you sign the paperwork.</h2>",
"target": [
"#finance-title"
]
},
{
"html": "<h3>Monthly payment estimator</h3>",
"target": [
"#payment-form > h3"
]
},
{
"html": "<h3>APR financing, without the showroom fog.</h3>",
"target": [
".finance-info > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"guides-title\">Build a shortlist without the spec-sheet spiral.</h2>",
"target": [
"#guides-title"
]
},
{
"html": "<h3>Lease vs. buy: the honest math</h3>",
"target": [
".guide-card:nth-child(1) > h3"
]
},
{
"html": "<h3>A practical used-car inspection</h3>",
"target": [
".guide-card:nth-child(2) > h3"
]
},
{
"html": "<h3>First-time electric vehicle?</h3>",
"target": [
".guide-card:nth-child(3) > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"parts-title\">Parts intelligence, not parts pressure.</h2>",
"target": [
"#parts-title"
]
},
{
"html": "<h3>Brake wear: what the dashboard isn't telling you.</h3>",
"target": [
".parts-feature-copy > h3"
]
},
{
"html": "<h3>Browse by system</h3>",
"target": [
".parts-menu > h3"
]
},
{
"html": "<h3>Parts desk picks</h3>",
"target": [
"#parts-picks > h3"
]
},
{
"html": "<h4>Ceramic brake pad set</h4>",
"target": [
".product-card:nth-child(1) > .product-body > h4"
]
},
{
"html": "<h4>Full synthetic 5W-30</h4>",
"target": [
".product-card:nth-child(2) > .product-body > h4"
]
},
{
"html": "<h4>Engine air filter</h4>",
"target": [
".product-card:nth-child(3) > .product-body > h4"
]
},
{
"html": "<h4>All-season wiper pair</h4>",
"target": [
".product-card:nth-child(4) > .product-body > h4"
]
},
{
"html": "<h2 id=\"service-title\">Your service interval, finally in plain English.</h2>",
"target": [
"#service-title"
]
},
{
"html": "<h3>Estimate first</h3>",
"target": [
".service-check:nth-child(1) > h3"
]
},
{
"html": "<h3>Records included</h3>",
"target": [
".service-check:nth-child(2) > h3"
]
},
{
"html": "<h3>Priority ranking</h3>",
"target": [
".service-check:nth-child(3) > h3"
]
},
{
"html": "<h3>No guesswork</h3>",
"target": [
".service-check:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"testimonials-title\">Good decisions travel well.</h2>",
"target": [
"#testimonials-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"partner-title\">More listings. Better conversations.</h2>",
"target": [
"#partner-title"
]
},
{
"html": "<h3>Inventory storytelling</h3>",
"target": [
".partner-card:nth-child(1) > div > h3"
]
},
{
"html": "<h3>Local market intelligence</h3>",
"target": [
".partner-card:nth-child(2) > div > h3"
]
},
{
"html": "<h3>Service and parts education</h3>",
"target": [
".partner-card:nth-child(3) > div > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"faq-title\">Questions worth asking.</h2>",
"target": [
"#faq-title"
]
},
{
"html": "<h2 id=\"contact-title\">Get smarter before you turn the key.</h2>",
"target": [
"#contact-title"
]
},
{
"html": "<h3>Get the week in cars.</h3>",
"target": [
".newsletter-card > h3"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
"nav[aria-label=\"Explore\"] > h3"
]
},
{
"html": "<h3>Company</h3>",
"target": [
"nav[aria-label=\"Company\"] > h3"
]
},
{
"html": "<h3>Support</h3>",
"target": [
"nav[aria-label=\"Support\"] > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cbcccd",
"bgColor": "#11181b",
"contrastRatio": 11.15,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.15"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<p><strong>Independent automotive intelligence</strong> for smarter decisions and better ownership.</p>",
"target": [
".topbar-inner > p"
]
}
]
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "structured-dlitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "When not empty, element has both <dt> and <dd> elements"
},
{
"id": "only-dlitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "dl element only has direct children that are allowed inside; <dt>, <dd>, or <div> elements"
}
],
"impact": null,
"html": "<dl class=\"review-specs\">",
"target": [
".review-card:nth-child(1) > .review-body > .review-specs"
]
}
]
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "dlitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Description list item has a <dl> parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<dt>Starting MSRP</dt>",
"target": [
".review-card:nth-child(1) > .review-body > .review-specs > div:nth-child(1) > dt"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": "moderate",
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"vehicle-price\">Vehicle price</label>",
"target": [
"label[for=\"vehicle-price\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"vehicle-price\" name=\"price\" type=\"number\" min=\"10000\" max=\"150000\" step=\"100\" value=\"38900\" inputmode=\"decimal\">",
"target": [
"#vehicle-price"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/120x120/11181b/d8ff43?text=TL&font=oswald\" width=\"120\" height=\"120\" alt=\"TorqueLine logo placeholder\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"] > img[alt=\"TorqueLine logo placeholder\"][width=\"120\"][height=\"120\"]"
]
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Vehicle price"
},
"relatedNodes": [
{
"html": "<label for=\"vehicle-price\">Vehicle price</label>",
"target": [
"label[for=\"vehicle-price\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"vehicle-price\" name=\"price\" type=\"number\" min=\"10000\" max=\"150000\" step=\"100\" value=\"38900\" inputmode=\"decimal\">",
"target": [
"#vehicle-price"
]
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"lead-copy\">",
"target": [
".lead-copy"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"text-link\" href=\"#reviews\">Read the full road test <span>\u2192</span></a>",
"target": [
".lead-copy > .text-link[href$=\"#reviews\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>\n <li>Measure pad thickness with the correct caliper tool</li>\n <li>Check rotor thickness, scoring, and lip wear</li>\n <li>Inspect hoses, fluid, calipers, and hardware</li>\n </ul>",
"target": [
".parts-feature-copy > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li>Measure pad thickness with the correct caliper tool</li>",
"target": [
".parts-feature-copy > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/120x120/11181b/d8ff43?text=TL&font=oswald\" width=\"120\" height=\"120\" alt=\"TorqueLine logo placeholder\">",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"] > img[alt=\"TorqueLine logo placeholder\"][width=\"120\"][height=\"120\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Loan term"
},
"relatedNodes": [
{
"html": "<label for=\"loan-term\">Loan term</label>",
"target": [
"label[for=\"loan-term\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"loan-term\" name=\"term\">\n <option value=\"36\">36 months</option>\n <option value=\"48\">48 months</option>\n <option value=\"60\" selected=\"\">60 months</option>\n <option value=\"72\">72 months</option>\n </select>",
"target": [
"#loan-term"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>Read field notes</summary>",
"target": [
".review-card:nth-child(1) > .review-body > .review-details > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 186.9,
"height": 48
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (186.9px by 48px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table class=\"comparison-table\">",
"target": [
"table"
]
}
]
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table class=\"comparison-table\">",
"target": [
"table"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-proof\" aria-label=\"TorqueLine editorial principles\">",
"target": [
".hero-proof"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"top\" aria-labelledby=\"hero-title\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Independent automotive intelligence</span>",
"target": [
".hero-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
},
{
"id": "form-field-multiple-labels",
"impact": "moderate",
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"down-payment\">Down payment</label>",
"target": [
".field:nth-child(2) > label[for=\"down-payment\"]"
]
},
{
"html": "<label for=\"down-payment\">Estimated tax & fees</label>",
"target": [
".field:nth-child(6) > label[for=\"down-payment\"]"
]
}
],
"impact": "moderate",
"message": "Multiple label elements is not widely supported in assistive technologies. Ensure the first label contains all necessary information."
}
],
"impact": "moderate",
"html": "<input id=\"down-payment\" name=\"down\" type=\"number\" min=\"0\" max=\"100000\" step=\"100\" value=\"6500\" inputmode=\"decimal\">",
"target": [
"#down-payment"
],
"failureSummary": "Fix all of the following:\n Multiple label elements is not widely supported in assistive technologies. Ensure the first label contains all necessary information."
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "bgOverlap"
},
"relatedNodes": [
{
"html": "<div class=\"footer-brand\">",
"target": [
".footer-brand"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"TorqueLine home\">",
"target": [
".footer-brand > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff5b36",
"contrastRatio": 3.08,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"lead-image-label\">Editor's choice</span>",
"target": [
".lead-image-label"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ffffff, background color: #ff5b36, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"lead-image-label\">Editor's choice</span>",
"target": [
".lead-image-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ffffff, background color: #ff5b36, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#ffffff",
"contrastRatio": 3.08,
"fontSize": "8.9pt (11.84px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"lead-story\">",
"target": [
".lead-story"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">First drive</span>",
"target": [
".lead-copy > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#fcfbf9",
"contrastRatio": 2.98,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"compact-story\">",
"target": [
".compact-story:nth-child(1)"
]
},
{
"html": "<section class=\"section latest-section\" id=\"blog\">",
"target": [
"#blog"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Lease terms</span>",
"target": [
".compact-story:nth-child(1) > div > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#fcfbf9",
"contrastRatio": 2.98,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"compact-story\">",
"target": [
".compact-story:nth-child(2)"
]
},
{
"html": "<section class=\"section latest-section\" id=\"blog\">",
"target": [
"#blog"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Repair guide</span>",
"target": [
".compact-story:nth-child(2) > div > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#fcfbf9",
"contrastRatio": 2.98,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"compact-story\">",
"target": [
".compact-story:nth-child(3)"
]
},
{
"html": "<section class=\"section latest-section\" id=\"blog\">",
"target": [
"#blog"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Technology</span>",
"target": [
".compact-story:nth-child(3) > div > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ff5b36, background color: #fcfbf9, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#f4f0e7",
"contrastRatio": 2.71,
"fontSize": "8.9pt (11.84px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Hybrid compact SUV</span>",
"target": [
".review-card:nth-child(1) > .review-body > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#f4f0e7",
"contrastRatio": 2.71,
"fontSize": "8.9pt (11.84px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Electric fastback</span>",
"target": [
".review-card:nth-child(2) > .review-body > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#f4f0e7",
"contrastRatio": 2.71,
"fontSize": "8.9pt (11.84px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category\">Mid-size utility</span>",
"target": [
".review-card:nth-child(3) > .review-body > .story-meta > .category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #ff5b36, background color: #f4f0e7, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2dfd7",
"bgColor": "#f4f0e7",
"contrastRatio": 1.17,
"fontSize": "60.0pt (80px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"guide-card\">",
"target": [
".guide-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"guide-number\" aria-hidden=\"true\">01</span>",
"target": [
".guide-card:nth-child(1) > .guide-number[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2dfd7",
"bgColor": "#f4f0e7",
"contrastRatio": 1.17,
"fontSize": "60.0pt (80px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"guide-card\">",
"target": [
".guide-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"guide-number\" aria-hidden=\"true\">02</span>",
"target": [
".guide-card:nth-child(2) > .guide-number[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2dfd7",
"bgColor": "#f4f0e7",
"contrastRatio": 1.17,
"fontSize": "60.0pt (80px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"guide-card\">",
"target": [
".guide-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"guide-number\" aria-hidden=\"true\">03</span>",
"target": [
".guide-card:nth-child(3) > .guide-number[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.17 (foreground color: #e2dfd7, background color: #f4f0e7, font size: 60.0pt (80px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#ffffff",
"contrastRatio": 3.08,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card\">",
"target": [
".product-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"product-type\">Braking / OE-style</span>",
"target": [
".product-card:nth-child(1) > .product-body > .product-type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#ffffff",
"contrastRatio": 3.08,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card\">",
"target": [
".product-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"product-type\">Fluids / 6 quarts</span>",
"target": [
".product-card:nth-child(2) > .product-body > .product-type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#ffffff",
"contrastRatio": 3.08,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card\">",
"target": [
".product-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"product-type\">Engine / Filtration</span>",
"target": [
".product-card:nth-child(3) > .product-body > .product-type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#ffffff",
"contrastRatio": 3.08,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card\">",
"target": [
".product-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"product-type\">Visibility / Pair</span>",
"target": [
".product-card:nth-child(4) > .product-body > .product-type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.08 (foreground color: #ff5b36, background color: #ffffff, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#dce7ea",
"contrastRatio": 2.44,
"fontSize": "21.6pt (28.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"service-check\">\n <span>01</span>\n <h3>Estimate first</h3>\n <p>Review recommended service, parts, fluids, and labor before authorizing additional work.</p>\n </article>",
"target": [
".service-check:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>01</span>",
"target": [
".service-check:nth-child(1) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#dce7ea",
"contrastRatio": 2.44,
"fontSize": "21.6pt (28.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"service-check\">\n <span>02</span>\n <h3>Records included</h3>\n <p>Keep a dated maintenance log with mileage, fluid specifications, and completed inspections.</p>\n </article>",
"target": [
".service-check:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>02</span>",
"target": [
".service-check:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#dce7ea",
"contrastRatio": 2.44,
"fontSize": "21.6pt (28.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"service-check\">\n <span>03</span>\n <h3>Priority ranking</h3>\n <p>Separate safety and maintenance needs from wear items and optional enhancements.</p>\n </article>",
"target": [
".service-check:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>03</span>",
"target": [
".service-check:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5b36",
"bgColor": "#dce7ea",
"contrastRatio": 2.44,
"fontSize": "21.6pt (28.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"service-check\">\n <span>04</span>\n <h3>No guesswork</h3>\n <p>Ask for photos, test results, and a plain-language explanation of any diagnostic finding.</p>\n </article>",
"target": [
".service-check:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>04</span>",
"target": [
".service-check:nth-child(4) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.44 (foreground color: #ff5b36, background color: #dce7ea, font size: 21.6pt (28.8px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#626e72",
"bgColor": "#e7e1d5",
"contrastRatio": 4.03,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section testimonials-section\" aria-labelledby=\"testimonials-title\">",
"target": [
".testimonials-section"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #626e72, background color: #e7e1d5, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-intro\">Owners, first-time buyers, and service professionals share what helped them make a more confident call. We publish verified feedback without hiding the less convenient details.</p>",
"target": [
".testimonials-section > .container > .section-head > .section-intro"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #626e72, background color: #e7e1d5, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#626e72",
"bgColor": "#11181b",
"contrastRatio": 3.41,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.41 (foreground color: #626e72, background color: #11181b, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tagline\">Clarity for every mile</span>",
"target": [
".footer-brand > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"] > .brand-copy > .brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.41 (foreground color: #626e72, background color: #11181b, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#626e72",
"bgColor": "#ebe7df",
"contrastRatio": 4.26,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\" id=\"site-header\">",
"target": [
"#site-header"
]
},
{
"html": "<div class=\"finance-shell\">",
"target": [
".finance-shell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #626e72, background color: #ebe7df, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tagline\">Clarity for every mile</span>",
"target": [
".nav-wrap > .brand[href$=\"#top\"][aria-label=\"TorqueLine home\"] > .brand-copy > .brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #626e72, background color: #ebe7df, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input id=\"tax-fees\" name=\"fees\" type=\"number\" min=\"0\" max=\"30000\" step=\"50\" value=\"2800\" inputmode=\"decimal\" disabled=\"\">",
"target": [
"#tax-fees"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "target-size",
"impact": "serious",
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 311,
"height": 14.8
},
"relatedNodes": [
{
"html": "<a href=\"#news\">News</a>",
"target": [
"#primary-nav > a[href$=\"#news\"]"
]
},
{
"html": "<a href=\"#blog\">Blog</a>",
"target": [
"#primary-nav > a[href$=\"#blog\"]"
]
},
{
"html": "<a href=\"#reviews\">Reviews</a>",
"target": [
"#primary-nav > a[href$=\"#reviews\"]"
]
},
{
"html": "<a href=\"#parts\">Parts</a>",
"target": [
"#primary-nav > a[href$=\"#parts\"]"
]
},
{
"html": "<a href=\"#service\">Service</a>",
"target": [
"#primary-nav > a[href$=\"#service\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 311px by 14.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 16,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#reviews\">Reviews</a>",
"target": [
"#primary-nav > a[href$=\"#reviews\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input id=\"down-payment\" name=\"down\" type=\"number\" min=\"0\" max=\"100000\" step=\"100\" value=\"6500\" inputmode=\"decimal\">",
"target": [
"#down-payment"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 311px by 14.8px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 13371
},
{
"y": 576,
"height": 13371
},
{
"y": 1152,
"height": 13371
},
{
"y": 1728,
"height": 13371
},
{
"y": 2304,
"height": 13371
},
{
"y": 2880,
"height": 13371
},
{
"y": 3456,
"height": 13371
},
{
"y": 4032,
"height": 13371
},
{
"y": 4608,
"height": 13371
},
{
"y": 5184,
"height": 13371
},
{
"y": 5760,
"height": 13371
},
{
"y": 6336,
"height": 13371
},
{
"y": 6912,
"height": 13371
},
{
"y": 7488,
"height": 13371
},
{
"y": 8064,
"height": 13371
},
{
"y": 8640,
"height": 13371
},
{
"y": 9216,
"height": 13371
},
{
"y": 9792,
"height": 13371
},
{
"y": 10368,
"height": 13371
},
{
"y": 10944,
"height": 13371
},
{
"y": 11520,
"height": 13371
},
{
"y": 12096,
"height": 13371
},
{
"y": 12651,
"height": 13371
}
],
"scans": 24,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Automotive" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Automotive"
- Description: Automotive news, car reviews, repair tips, and dealership resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Automotive" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Parts", "Blog", "Financing".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Automotive" category. Consider themes similar to: "Featured Vehicles", "Financing Options", "Service Center".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "APR financing", "service interval", "lease terms".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Request Financing", "Calculate Payment", "Compare Models".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Automotive" sector. Ideas similar but not limited to: "payment estimator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "featured inventory", "customer reviews", "price drops".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.