:root{ /* TUCKER'S MOBILE MECHANIC THEME — derived from the logo (chrome + safety orange + blue ribbon). Structure, spacing and type are O.N.B's unchanged; only these values differ. Variable NAMES are kept from O.N.B on purpose (--red still means "the accent color") so the rest of this stylesheet needs no edits. --red is orange here. Do not rename without touching every rule below. */ /* Colors are sampled from the logo PNG, not eyeballed: orange #FA5A00, blue #005CC2, chrome #CFCFCF. ---- Hierarchy (this is the rule; the tokens below only serve it) ---- WHITE the page ground. Nothing competes with it. BLACK the automotive foundation: headings, dark bands, and the frame around every photo. Structure is black, not blue. ORANGE CTA and attention — buttons, the phone number, the one highlighted word in a heading, and the checklist discs. The discs are the only place orange is decorative rather than clickable; that is a deliberate exception, not licence to spread it further. Orange photo frames were tried and pulled. BLUE small secondary details: icons, links, nav, pills, avatars, the focus ring, the topbar strip, and the .callband dividers. Never a heading. The two full-bleed exceptions (topbar, callband) are both thin seams BETWEEN sections rather than sections themselves — that's the line. A blue band that holds real content would put the site back where it started. Blue used to be the primary — every h1-h4 took it, and .cta/.reviews2 were blue bands, which made the site read blue-first and left orange with no room to mean "act". Those moved to black. ~56 blue references remain and every one is deliberately small; before adding a blue rule, check it against the BLUE line above. */ --blue:#005CC2; /* PRIMARY brand blue (logo ribbon) — 6.34:1 on white */ --blue-deep:#00479A; /* hover / pressed */ --red:#FA5A00; /* ACCENT — safety orange: bars, badges, CTA */ --red-deep:#C24503; /* accent hover — 5.06:1 on white, safe as text too */ --ink:#111418; /* body text — 17.6:1 on white */ --muted:#4C535D; /* secondary text — 8.6:1 on white */ /* Body copy runs near-black by request. Three things moved together: --ink darkened, --muted darkened, and the #3f5464 slate that eight paragraph rules hardcoded was pointed at --ink instead. That slate was the real culprit — it was doing most of the body copy on the site, and no token change would have touched it. Grays that sit on the dark header, footer and review cards are deliberately left alone: darkening those reduces contrast rather than increasing it. */ --line:#E4E8EE; /* hairline only (not a background) */ --tint:#F5F7FA; /* barely-there cool wash */ --gold:#f5b638; /* review stars — unchanged from O.N.B */ --white:#fff; /* The logo blue already clears 4.5:1 on white, so unlike O.N.B there is no need for a separate darkened text blue. Kept as a token so rules that mean "blue text" stay distinguishable from rules that mean "brand blue". */ --blue-text:#005CC2; --header-blue:#005CC2; /* Dark chrome. Near-black rather than navy: the logo is drawn for a black ground. Lifted slightly off #000 so it reads as a material, not a hole. On #12151A — white 18.3:1, chrome 11.7:1, orange 5.7:1. All pass AA. */ --navy:#12151A; --navy-2:#0A0B0D; --chrome:#CFCFCF; /* logo's silver */ --on-dark:#EDF0F4; /* primary text on dark chrome */ --on-dark-muted:#B9C1CC; /* secondary text on dark chrome */ /* Text color for filled-accent surfaces (buttons, call bands). White on #FA5A00 is only 3.22:1 and FAILS AA; black on the same orange is 6.12:1 and passes. Any rule that fills with --red must take its text here. */ --on-accent:#0A0B0D; /* ---- Type ---- Brief: modern, professional, trustworthy, premium without looking expensive. Explicitly NOT a dealership, a parts store, or a racing site. Display is Barlow Condensed, body is Barlow — one superfamily, two widths. The automotive note comes from WIDTH, not from a novelty face: condensed grotesques are the lettering of shop signage, door decals and service manuals, so the character reads as industrial without any of the checkered-flag/piston-font costume. Because both faces share a skeleton, the pairing reads as one deliberate voice rather than two fonts that happen to sit together. Barlow Condensed DOES have a real 900, but only 600/700/800 are fetched. Rules below still ask for 900 in ~27 places and resolve to the 800 face, which is the weight they were tuned against under Manrope. Adding a 900 file would silently re-weight all of them — do it only as a deliberate pass, not as a "fix". Caveat replaces Kaushan Script on the owner signature. Kaushan is a decorative brush face and read casual, which undercut the brief; Caveat reads as an actual pen signature and supports the local, personal note that block is there to strike. Every font-family in this file resolves through these three tokens; swapping a typeface means editing one line here. */ --font-display:'Barlow Condensed',system-ui,sans-serif; --font-body:'Barlow',system-ui,sans-serif; /* One script face, and it earns its place: Caveat is a pen, and it stays on Tucker's signature, where a person is literally signing. Four display scripts were auditioned for the section eyebrows and all four were pulled — Permanent Marker, Yellowtail, Racing Sans One and Lobster Two. The failure was the same every time and it was not the choice of face: every one of them is a WIDE letterform, and this site is set in a condensed grotesque throughout. A wide script above a condensed headline reads as two designs stacked, no matter how good the script is. The eyebrow now uses the display family's own italic cut instead, and gets its sign-painter character from slant and a hard cast shadow. */ --font-script:'Caveat',cursive; --shadow:0 20px 45px -28px rgba(10,11,13,.30); --shadow-sm:0 10px 24px -18px rgba(10,11,13,.30); --sp:clamp(72px,9vw,124px); /* ---- Header bar height, in ONE place ---- The bar is exactly the logo plus .mainbar .wrap's vertical padding: the nav links come out ~52px tall and the CTA ~65px, both shorter than the logo, so the logo is what sets the height. Measured: 128 + 24*2 = 176px desktop, 78 + 12*2 = 102px on the mobile bar (see the html.js-nav override in the <=900px block). --head-h's one remaining consumer is the mobile nav panel's max-height, which is sized as "the viewport minus the bar I open underneath". It no longer feeds html's scroll-padding-top — that mattered when the header was sticky and covered anchor targets, and the bar now scrolls away. Change the logo height or the bar padding through these tokens, not through the rules, or the panel and the bar drift apart. */ --logo-h:128px; --head-pad:24px; --head-h:calc(var(--logo-h) + var(--head-pad) * 2); } *{box-sizing:border-box;margin:0;padding:0} /* 14px flat, not calc(var(--head-h) + 14px). The offset used to clear the header because the header was position:sticky and sat over the top of the scrollport; now that it scrolls away with the document there is nothing at the top of the viewport to clear, and keeping the old value would park every anchor target 176px BELOW the fold with dead space above it. The remaining 14px is breathing room so a heading is not flush to the edge. Still scroll-padding-top on the scrollport rather than per-section scroll-margin-top: every anchor on the site wants the same treatment. */ html{scroll-behavior:smooth;scroll-padding-top:14px} /* 17.5, not 17: Barlow's x-height is shorter than Inter's, so it reads a size smaller at the same px. This is the value Barlow was calibrated at before the Manrope/Inter detour. */ body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.65;font-size:17.5px;-webkit-font-smoothing:antialiased} /* Tracking is neutral, not negative. The -.02em here was tuned for Manrope, a wide geometric that needs pulling in at display sizes; Barlow Condensed is already narrow, and the same tightening closes its counters and makes large headlines read as a wall. */ h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:0;color:var(--ink)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Build wraps responsive images in ; display:contents makes the wrapper layout-neutral so the inner keeps every existing rule (object-fit, absolute .svc-bg, aspect-ratio boxes) exactly as before. */ picture{display:contents} .wrap{max-width:1160px;margin:0 auto;padding:0 26px} :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px} /* The ring is drawn OUTSIDE the element (offset:2px), so what it has to contrast with is the surface AROUND the control, not the control. On the blue topbar --blue on --blue is 1:1 — the ring is literally invisible — and on the near-black chrome it is 2.89:1, under the 3:1 that WCAG 1.4.11 asks of a focus indicator. White clears everything these bands contain: 18.3:1 on --navy, 6.34:1 on --blue, 3.22:1 on an orange fill. Only the colour changes; width, offset and radius stay inherited from above. Both .reviews2 modifiers are excluded rather than the base class being listed loosely: --empty grounds on --tint and --page on --white, both light, and a white ring on either is invisible. Only the plain navy band qualifies. Same trap for anyone extending this list — check the modifier, not just the block. */ .topbar :focus-visible,.stickyhead :focus-visible,.callband :focus-visible, .hero :focus-visible,.page-hero :focus-visible,.cta :focus-visible, .area :focus-visible,.estimate-card :focus-visible, .reviews2:not(.reviews2--empty):not(.reviews2--page) :focus-visible, .svc-back :focus-visible,footer :focus-visible{outline-color:#fff} /* Skip link (markup owns the