/* ===========================================================================
Albuquerque Auto Repair — auto service / repair template
Skin: BMW corporate (see DESIGN.md, .design-source/bmw.md) — the measured
corporate car brand, deliberately not BMW M's motorsport variant. Light
cream-tinted white canvas, one corporate blue that only ever means "next
action", and deep navy bands framing the vehicle photography.
Type: Archivo across the whole hierarchy, contrast carried by WIDTH and
weight (variable wdth axis) — BMW Type Next is a single-family system.
=========================================================================== */
/* Metric-matched fallbacks: web fonts load async (non-blocking), so text first
paints in a size-adjusted local font that closely matches the web font's box
— the swap-in then reflows almost nothing (kills font-swap CLS). */
@font-face {
font-family: "Archivo Fallback";
src: local("Arial");
size-adjust: 97%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
font-family: "Archivo Text Fallback";
src: local("Arial");
size-adjust: 100%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}
/* BMW's palette on the fleet's token names. Navy identifies, corporate blue
instructs — the split the base system asks for, and BMW's own. */
:root {
--bg: #ffffff; /* canvas */
--surface: #f7f7f7; /* surface-soft — tint bands, cards */
--surface-2: #ebebeb; /* surface-strong — chips, inset */
--border: #e6e6e6; /* hairline */
--ink: #262626; /* 15.13:1 on --bg */
--muted: #6b6b6b; /* 5.33:1 on --bg, 4.97:1 on --surface */
--brand: #1a2129; /* deep navy identifies: step numbers, marks, bands */
--brand-ink: #0653b6; /* primary-active — links, 7.19:1 on --bg */
--brand-soft: #e8f0fb; /* blue tint — tags and pills */
--cta: #1c69d4; /* BMW corporate blue — white label 5.22:1 (WCAG AA) */
--cta-press: #0653b6; /* white label 7.19:1 */
--on-cta: #ffffff;
--band: #1a2129;
--on-band: #ffffff; /* 16.24:1 on --band */
--hl-on-dark: #7fb2f0; /* 7.37:1 on --band */
--star-on-dark: #f5b301;
--dark: #1a2129; /* surface-dark — hero scrim, footer, topbar */
--dark-2: #262e38; /* surface-dark-elevated — proof band */
--live: #1a7f4b; /* white check 5.02:1 */
--star-ink: #8a6100; /* 5.54:1 on --bg (>=3:1) */
--font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
--font-body: "Archivo", "Archivo Text Fallback", system-ui, sans-serif;
--space-section: clamp(3.5rem, 8vw, 7rem);
--radius: 8px;
--radius-lg: 12px;
--radius-btn: 4px;
--radius-pill: 9999px;
--shadow: 0 1px 2px rgb(38 38 38 / 0.05), 0 12px 30px rgb(38 38 38 / 0.10);
--shadow-sm: 0 1px 2px rgb(38 38 38 / 0.06), 0 6px 16px rgb(38 38 38 / 0.07);
--shadow-lg: 0 2px 4px rgb(38 38 38 / 0.08), 0 18px 40px rgb(38 38 38 / 0.14);
--shadow-cta: 0 6px 16px rgb(28 105 212 / 0.30);
--shadow-up: 0 -6px 20px rgb(26 33 41 / 0.22);
--z-callbar: 40;
--z-nav: 50;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, .brand__name {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0; }
.skip:focus { left: 0; }
/* Small status / accent dot */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); vertical-align: middle; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
padding: 0.75rem 1.4rem; border-radius: var(--radius-btn); border: 1px solid transparent;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn--cta { background: var(--cta); color: var(--on-cta); box-shadow: var(--shadow-cta); }
.btn--cta:hover { background: var(--cta-press); transform: translateY(-2px); }
.btn--cta:active { transform: translateY(0); }
.btn--ghost { background: oklch(1 0 0 / 0.08); color: #fff; border-color: oklch(1 0 0 / 0.28); }
.btn--ghost:hover { background: oklch(1 0 0 / 0.16); }
.btn--lg { font-size: 1.1rem; padding: 0.95rem 1.8rem; }
.btn--block { width: 100%; }
/* ---------------------------------------------------------------------------
Focus indicator — TWO-TONE, and that is a WCAG requirement, not a style.
SC 1.4.11 (Non-text Contrast, AA) wants 3:1 between the focus indicator and
the colours next to it. A single accent ring cannot deliver that across this
system, because the same ring has to land on a white card and on a saturated
dark band. Measured across the fleet, a --cta-only ring failed on 9 of 13
templates: the light accents (amber, yellow, lime, safety orange) vanish on
white at 1.21-2.87:1, and the dark accents vanish on their own urgency band —
water-damage's --band IS its --cta, so the ring measured 1.00:1 and was
literally invisible.
So the ring is two colours at once: --cta bracketed by --on-cta. The outline
paints over the box-shadow, which leaves --on-cta showing as a band on each
side of the accent. Those two already carry a guaranteed >=4.5:1 against each
other (they are the button label pair, measured per template), so whichever
ground the ring lands on, one of the two clears 3:1 while the pair stays
legible as a ring. Nothing here is per-component: it is one treatment applied
to every focusable thing.
The element list is spelled out rather than wrapped in :where() on purpose.
:where() contributes no specificity, so the old (0,1,0) rule tied with plain
component classes and lost on source order — .urgency__btn and .btn--cta both
set box-shadow later in this file and would have silently dropped the second
tone off the two controls that matter most.
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--cta); outline-offset: 2px;
box-shadow: 0 0 0 6px var(--on-cta);
border-radius: var(--radius-btn);
}
/* Top bar */
.topbar { background: var(--dark); color: oklch(1 0 0 / 0.85); font-size: 0.86rem; }
/* padding-BLOCK, not the `padding: X 0` shorthand: this element is also a
.wrap, and the shorthand resets .wrap's padding-inline to 0, leaving its
content flush against the viewport edge on narrow screens and 40px out of
alignment with every other section on wide ones. */
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.topbar__status { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar__phone { color: #fff; text-decoration: none; font-weight: 700; font-family: var(--font-display); }
/* Nav */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: oklch(1 0 0 / 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; gap: 1.25rem; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-size: 1.2rem; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20120%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%231C69D4%22%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%2845%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%2890%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%28135%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%28180%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%28225%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%28270%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Crect%20x%3D%2252.5%22%20y%3D%2211%22%20width%3D%2215%22%20height%3D%2216%22%20rx%3D%222.5%22%20transform%3D%22rotate%28315%2060%2060%29%22%3E%3C%2Frect%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2233%22%20fill%3D%22none%22%20stroke%3D%22%231C69D4%22%20stroke-width%3D%2216%22%3E%3C%2Fcircle%3E%0A%20%20%3Cg%20transform%3D%22rotate%2845%2060%2060%29%22%20fill%3D%22%231A2129%22%20stroke%3D%22%231A2129%22%20stroke-width%3D%229%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%3Crect%20x%3D%2253.5%22%20y%3D%2214%22%20width%3D%2213%22%20height%3D%2288%22%20rx%3D%226.5%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2216%22%20r%3D%2215%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22104%22%20r%3D%2213%22%3E%3C%2Fcircle%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20transform%3D%22rotate%2845%2060%2060%29%22%3E%0A%20%20%20%20%3Cg%20fill%3D%22%237FB2F0%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2216%22%20r%3D%2215%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2253.5%22%20y%3D%2214%22%20width%3D%2213%22%20height%3D%2288%22%20rx%3D%226.5%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22104%22%20r%3D%2213%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Crect%20x%3D%2253%22%20y%3D%22-8%22%20width%3D%2214%22%20height%3D%2221%22%20rx%3D%222%22%20fill%3D%22%231A2129%22%3E%3C%2Frect%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22104%22%20r%3D%225.5%22%20fill%3D%22%231A2129%22%3E%3C%2Fcircle%3E%0A%20%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.nav__links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.96rem; white-space: nowrap; transition: color 0.15s; }
/* Between the mobile collapse and full width, scale the links down so the
row stays on one line instead of wrapping. */
@media (max-width: 1180px) {
.nav__links { gap: 0.95rem; }
.nav__links a { font-size: 0.9rem; }
.nav__inner { gap: 1rem; }
}
.nav__links a:hover { color: var(--brand-ink); }
.nav__cta { margin-left: 1.25rem; }
.nav__toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: 0.35rem; padding: 0.4rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
.nav__inner { flex-wrap: wrap; height: auto; min-height: 66px; }
.nav__links { display: none; order: 99; flex-basis: 100%; width: 100%; flex-direction: column; gap: 0; margin-left: 0; margin-top: 0.4rem; border-top: 1px solid var(--border); }
.nav.nav--open .nav__links { display: flex; }
.nav__links a { min-height: 44px; display: flex; align-items: center; padding: 0.7rem 0.25rem; font-size: 1rem; }
.nav__cta { margin-left: auto; }
.nav__toggle { display: inline-flex; }
}
/* Hero — dark, image-led */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, color-mix(in srgb, var(--dark) 88%, transparent) 0%, color-mix(in srgb, var(--dark) 78%, transparent) 38%, color-mix(in srgb, var(--dark) 40%, transparent) 68%, color-mix(in srgb, var(--dark) 12%, transparent) 100%); }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hl-on-dark); font-weight: 700; font-size: 0.95rem; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; }
.hero h1 .hl { color: var(--hl-on-dark); }
.hero__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: oklch(1 0 0 / 0.82); max-width: 48ch; }
.hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; font-size: 0.95rem; color: oklch(1 0 0 / 0.8); }
.hero__points li { position: relative; padding-left: 1.3rem; }
.hero__points li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
/* Quote card (light card over dark hero) */
.quote { background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.4rem, 3vw, 2rem); }
.quote__title { font-size: 1.5rem; }
.quote__sub { color: var(--muted); margin-top: 0.4rem; font-size: 0.98rem; }
.quote .form { margin-top: 1.2rem; }
/* Forms */
.form { display: grid; gap: 0.9rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: grid; gap: 0.35rem; }
.field__label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--ink); padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); width: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; box-shadow: 0 0 0 6px var(--on-cta); }
textarea { resize: vertical; }
.form__fine { font-size: 0.82rem; color: var(--muted); text-align: center; }
.form__fine a { color: var(--brand-ink); font-weight: 700; }
.form__msg { font-size: 0.95rem; font-weight: 600; text-align: center; }
.form__msg[data-state="ok"] { color: var(--brand-ink); }
.form__msg[data-state="err"] { color: var(--cta-press); }
/* Hidden honeypot.
*
* contact.html emits , and the lead endpoint
* SILENTLY drops any submission where "company" is filled — it returns ok, so
* the visitor sees the success message and the lead is gone. Without this rule
* the field renders as an empty box above "Full name", which is exactly where
* somebody types their name. Four templates shipped without it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Proof band */
.proof { background: var(--dark-2); color: oklch(1 0 0 / 0.92); }
/* padding-BLOCK, not the `padding: X 0` shorthand: this element is also a
.wrap, and the shorthand resets .wrap's padding-inline to 0, leaving its
content flush against the viewport edge on narrow screens and 40px out of
alignment with every other section on wide ones. */
.proof__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.4rem; justify-content: space-between; }
.proof__lead { font-size: 1.05rem; }
.proof__lead strong { color: #fff; }
.proof__badges { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; list-style: none; }
.proof__badges li { font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.16); }
/* Sections */
.section { padding-block: var(--space-section); }
/* A section whose only content is the page heading and its intro.
*
* .lede carries a bottom margin to separate it from the content that follows it
* INSIDE the section. On the contact page nothing does, so that margin has no
* job, and the section's full bottom padding then stacks on top of the next
* section's own top padding. Measured on a live site at 1352px: 367px of
* section holding 102px of content — 72% void, with 156px of dead space below
* the last line. That also inverts the spacing rule the design system works to,
* which wants more room above a heading than below it. */
.section--head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section--head .lede { margin-bottom: 0; }
.section--tint { background: var(--surface); }
.section--dark { background: var(--dark); color: oklch(1 0 0 / 0.86); }
.section--dark h2 { color: #fff; }
.lede { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lede--left { margin-bottom: 0; }
.lede h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.lede p { margin-top: 0.8rem; color: var(--muted); font-size: 1.1rem; }
/* The
Plan your auto repair visit in Albuquerque
TEC PRO Auto Care is located at 3421 Bryn Mawr Dr NE, Albuquerque, NM 87107. Share your vehicle’s year, make, model and the reason for your visit when requesting an appointment. Confirm availability for the exact job before bringing the vehicle in.
Start with the concern you need resolved
For a warning light or running problem, see check-engine diagnostics. For maintenance due by time or mileage, review scheduled maintenance. New brake noise or changes in pedal feel belong in a brake-service request, while warm air from the vents can be discussed as car AC repair. You do not need to diagnose the car yourself to ask for help.