/* public/stylesheets/automotive.css * * The /automotive hub. * * Deliberately NOT the violet used across jobcount.org and the /c/ campaign * pages. The whole problem this page exists to solve is that the domain reads * as fiber-contractor software; a page that looks like the SaaS is a page that * keeps telling a visitor — and a crawler — the wrong thing about the * business. So: near-black, warm amber, and the shop's own photographs doing * the talking. The palette is taken from the photos themselves (red lifts, * cool hex lighting, warm sodium glow on an engine bay). * * External rather than inlined because this page is long and a returning * visitor — or someone moving between the hub and a service anchor — should * pay for it once. The /c/ pages inline their CSS for the opposite reason: * they are single-shot ad landings where one blocking request matters more. * * Prefixed `au-` throughout so nothing here can reach the Bootstrap pages. */ .au *, .au *::before, .au *::after { box-sizing: border-box; } .au { --bg: #08080a; --bg2: #0e0e11; --card: #141418; --card2: #1b1b21; --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .16); --ink: #f4f4f5; --ink2: #b4b4bd; --muted: #7c7c88; --a: #f59e0b; /* amber — the signature */ --a2: #fbbf24; --hot: #f97316; /* orange, for the gradient's far end */ --danger: #ef4444; --ok: #34d399; --grad: linear-gradient(135deg, var(--a2), var(--hot)); --radius: 16px; --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .8); --maxw: 1140px; margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.6; } .au a { color: var(--a2); text-decoration: none; } .au a:hover { color: var(--a); } /* `height: auto` is NOT optional here. The images carry width/height attributes so the browser can reserve their space before they load (no layout shift), but those attributes are presentational hints: with the width capped at 100% and the height left at its attribute value, the box keeps the literal pixel height from the markup and any `aspect-ratio` beneath it is ignored — both dimensions are already definite. That rendered the hero at 494x960 instead of 4:3, and squashed the static map. */ .au img { max-width: 100%; height: auto; display: block; } .au h1, .au h2, .au h3, .au h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 800; } .au p { margin: 0; } .au-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .au-narrow { max-width: 760px; } /* Anchor targets sit under the sticky bar without this. */ .au [id] { scroll-margin-top: 84px; } /* ── sticky bar ──────────────────────────────────────────────────────────── */ .au-bar { position: sticky; top: 0; z-index: 50; background: rgba(8, 8, 10, .78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); } .au-bar-in { max-width: var(--maxw); margin: 0 auto; padding: 11px 22px; display: flex; align-items: center; gap: 16px; } .au-brand { display: flex; align-items: center; gap: 11px; min-width: 0; } .au-brand-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; background: var(--grad); display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #1a1205; letter-spacing: -.04em; } .au-brand-txt { min-width: 0; } .au-brand-name { font-weight: 800; font-size: 14.5px; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .au-brand-sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* On a phone the strap wraps to four lines and turns a 56 px bar into 120 px of header above the headline. The shop's name and city are already the first two things in the page body, so the strap simply steps aside. */ @media (max-width: 560px) { .au-bar-in { gap: 10px; padding: 9px 14px; } .au-brand-sub { display: none; } .au-brand-name { font-size: 14px; } .au-bar-cta { gap: 7px; flex: none; } .au-bar-cta .au-btn-sm { padding: 8px 12px; font-size: 12.5px; } /* The phone number crowds the shop's own name off the bar at this width, and the fixed dock at the bottom of the screen already puts Call under the visitor's thumb — so the duplicate goes rather than the identity. */ .au-bar-cta .au-bar-tel { display: none; } } .au-nav { display: flex; gap: 22px; margin-left: auto; } .au-nav a { color: var(--ink2); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .au-nav a:hover { color: var(--ink); } @media (max-width: 900px) { .au-nav { display: none; } } .au-bar-cta { margin-left: auto; display: flex; gap: 9px; align-items: center; } @media (min-width: 901px) { .au-bar-cta { margin-left: 22px; } } /* ── buttons ─────────────────────────────────────────────────────────────── */ .au-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 800; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .14s ease, filter .14s ease; } .au-btn:active { transform: translateY(1px); } /* The `.au ` prefix on the colour rules is load-bearing, not tidiness. Almost every button on this page is an , and `.au a { color: var(--a2) }` scores 0-1-1 — which beats a bare `.au-btn-primary` at 0-1-0. Without the extra class the primary CTA rendered amber text on an amber gradient and the ghost buttons lost their white. The