/* ═══════════════════════════════════════════════════════════ HD AUTOCARE — LANDING PAGE STYLES Shared by all 11 city and service pages. Mirrors the design system in index.html: editorial serif display, near-monochrome palette, hairlines instead of bordered cards, generous vertical rhythm. ═══════════════════════════════════════════════════════════ */ :root{ color-scheme: light dark; /* Theme tokens — LIGHT is the default, DARK overrides via :root[data-theme="dark"] below. The blocking init script in each page's sets that attribute before first paint (saved choice, else OS preference) — same mechanism as index.html, so the homepage and these 11 landing pages stay one brand and one code path. */ --bg:#ffffff; --bg-rgb:255,255,255; --bg-card:#fafafa; --surface:#f5f4f4; --surface2:#efeded; /* Brand identity is black/red only — no gray anywhere, at Ahmed's explicit direction. --muted and --dim are aliased to the exact same value as --text: every non-red word is the same solid black (light) or white (dark). Mirrors the same fix in index.html. */ --text:#0f0f0f; --muted:#0f0f0f; --dim:#0f0f0f; --border:#e6e2e2; --border-light:#d9d4d4; --border-hover:#c2bcbc; /* Brand red — the exact hue from the HD AutoCare logo, identical in both themes. --accent is for fills/borders. --accent-text is a contrast-safe variant for small red text, tuned per background. */ --accent:#e81e25; --accent-dark:#b8181d; --accent-bright:#ff3a41; --accent-text:#c4141a; /* ~6.3:1 on white */ --green-text:#157347; --gold:#8a620a; /* Subtle interactive wash for hover states on outlined/ghost elements — dark tint on light backgrounds, light tint on dark. */ --wash-hover:rgba(0,0,0,.035); /* Hero background gradient — flat on light (no visible gradient), near-black fading to --bg on dark. */ --hero-grad-top: var(--bg); --hero-highlight: rgba(0,0,0,.025); --display:'Instrument Serif', Georgia, 'Times New Roman', serif; --body:'Inter', system-ui, -apple-system, sans-serif; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --radius-sm:3px; --radius:4px; --dur:280ms; --ease-out:cubic-bezier(0.16,1,0.3,1); } /* ═══ DARK MODE — resolved via data-theme, not a media query (see the comment above). Same brand red, same spacing/type scale; only surface/text tokens invert. Mirrors the dark-mode block in index.html. ═══ */ :root[data-theme="dark"] { --bg:#000000; --bg-rgb:0,0,0; --bg-card:#0a0a0a; --surface:#121212; --surface2:#1a1a1a; --text:#f4f5f7; --muted:#f4f5f7; --dim:#f4f5f7; --border:#1f1f1f; --border-light:#2a2a2a; --border-hover:#3d3d3d; --accent-text:#ff5a60; /* ~6.9:1 on true black */ --green-text:#56d98d; --gold:#e8c46a; --wash-hover:rgba(255,255,255,.05); --hero-grad-top: #0c0e12; --hero-highlight: rgba(255,255,255,.045); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.65; cursor:default; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'kern' 1,'liga' 1; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.06} /* ═══ ACCESSIBILITY FOUNDATIONS ═══ */ :focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:4px} :focus:not(:focus-visible){outline:none} .skip-link{ position:absolute;left:16px;top:-100px;z-index:3000; background:var(--accent);color:#fff;padding:12px 24px; border-radius:0 0 var(--radius) var(--radius);font-weight:600;font-size:var(--fs-sm); transition:top var(--dur) var(--ease-out); } .skip-link:focus{top:0} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } html{scroll-behavior:auto} } /* ═══ ICONS ═══ */ .ico{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;pointer-events:none} .ico-sm{width:16px;height:16px} .ico-fill{fill:currentColor;stroke:none} /* ═══ LAYOUT ═══ */ .wrap{max-width:1240px;margin:0 auto;padding:0 var(--sp-6)} /* ═══ NAV ═══ */ .nav{ position:sticky;top:0;z-index:100; background:rgba(var(--bg-rgb),.82); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2); border-bottom:1px solid var(--border); padding:14px 0; } .nav-inner{max-width:1240px;margin:0 auto;padding:0 var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)} .logo{font-family:var(--display);font-size:26px;letter-spacing:-.02em} .logo span{color:var(--accent-text)} /* Real logo mark instead of a text wordmark — a small rounded badge works in both themes without needing a light/dark-specific treatment, since the source image's own black background just reads as the badge tile. */ .logo img{height:34px;width:34px;object-fit:cover;border-radius:6px;display:block} /* Outlined, not filled — the filled red button is reserved for the page's single primary action in the hero and closing CTA. */ .nav-cta{ display:inline-flex;align-items:center;justify-content:center;min-height:44px; border:1px solid var(--border-hover);color:var(--text); padding:10px 20px;border-radius:100px; font-weight:600;font-size:var(--fs-sm); transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out); } .nav-cta:hover{border-color:var(--muted);background:var(--wash-hover)} .nav-actions{display:flex;align-items:center;gap:var(--sp-2)} .nav-tel{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;color:var(--text); transition:background var(--dur) var(--ease-out); } .nav-tel:hover{background:var(--wash-hover)} .nav-tel .ico{width:19px;height:19px} /* ═══ BREADCRUMB ═══ */ .breadcrumb{ max-width:1240px;margin:0 auto;padding:var(--sp-5) var(--sp-6) 0; font-size:var(--fs-xs);color:var(--dim);letter-spacing:.02em; } .breadcrumb a{color:var(--dim);transition:color var(--dur) var(--ease-out)} .breadcrumb a:hover{color:var(--text)} .breadcrumb span{margin:0 var(--sp-2)} .breadcrumb .current{color:var(--muted)} /* ═══ HERO — left-aligned editorial, not centred ═══ */ .hero{ padding:var(--sp-9) 0 var(--sp-8); background: radial-gradient(120% 80% at 78% 18%, var(--hero-highlight) 0%, transparent 58%), linear-gradient(180deg,var(--hero-grad-top) 0%,var(--bg) 100%); text-align:left; border-bottom:1px solid var(--border); } .hero .wrap{max-width:1240px} .hero h1{ font-family:var(--display);font-weight:400; font-size:clamp(2.5rem,6.2vw,4.75rem); line-height:1.0;letter-spacing:-.026em; margin-bottom:var(--sp-5);max-width:22ch; } .hero h1 span{color:var(--muted);font-style:italic} .hero p{ font-size:var(--fs-md); color:var(--muted); max-width:58ch; margin:0 0 var(--sp-6); line-height:1.7; } .hero-ctas{display:flex;gap:var(--sp-3);justify-content:flex-start;flex-wrap:wrap} /* ═══ BUTTONS — squared, sentence case ═══ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); min-height:54px;padding:15px 30px;border-radius:var(--radius); font-weight:600;font-size:var(--fs-base);letter-spacing:-.005em; transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); } .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-bright);transform:translateY(-1px)} .btn-primary:active{transform:translateY(0) scale(.99)} .btn-ghost{border:1px solid var(--border-hover);color:var(--text);font-weight:500} .btn-ghost:hover{border-color:var(--muted);background:var(--wash-hover)} .btn-ghost:active{transform:scale(.99)} /* ═══ TRUST ROW — hairline dividers, no repeated checkmarks ═══ */ .trust-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start; gap:var(--sp-2) 0;margin-top:var(--sp-7); padding-top:var(--sp-5);border-top:1px solid var(--border); font-size:var(--fs-sm);color:var(--muted); } .trust-row span{display:inline-flex;align-items:center;gap:7px;padding:0 var(--sp-5) 0 0;position:relative;font-weight:500} .trust-row span+span{padding-left:var(--sp-5)} .trust-row span+span:before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45; } .trust-row span .ico{width:15px;height:15px;color:var(--dim)} /* ═══ SECTIONS ═══ */ section{padding:var(--sp-9) 0} .section-label{ display:inline-flex;align-items:center;gap:10px; font-family:var(--body);letter-spacing:.22em;font-size:var(--fs-xs);font-weight:700; color:var(--accent-text);margin-bottom:var(--sp-4);text-transform:uppercase; } .section-label::before{content:'';display:inline-block;width:18px;height:2px;background:var(--accent);} h2{ font-family:var(--display);font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.05;margin-bottom:var(--sp-5);letter-spacing:-.024em;max-width:26ch; } h2 em, h2 span{font-style:italic;color:var(--muted)} h3{font-family:var(--display);font-size:1.6rem;margin-bottom:var(--sp-3);letter-spacing:-.02em} .lead{font-size:var(--fs-md);color:var(--muted);max-width:62ch;margin-bottom:var(--sp-8);line-height:1.7} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--sp-8);border-top:1px solid var(--border-light)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--sp-8);border-top:1px solid var(--border-light)} /* ═══ CARDS → hairline columns ═══ */ .card{ background:none;border:none;border-bottom:1px solid var(--border); border-radius:0;padding:var(--sp-7) 0; } .card h3{color:var(--text)} .card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.7} .card .price{ font-family:var(--display);font-size:2rem; color:var(--text);margin-top:var(--sp-4);letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .card ul{list-style:none;margin-top:var(--sp-4)} .card li{ color:var(--muted);font-size:var(--fs-sm);padding:7px 0 7px 18px; position:relative; } .card li:before{ content:"";position:absolute;left:2px;top:16px; width:4px;height:4px;border-radius:50%;background:var(--dim); } /* ═══ LOCAL INFO BLOCK — hairline, not a card ═══ */ .local-block{ background:none;border:none;border-top:1px solid var(--border); border-radius:0;padding:var(--sp-7) 0 0;margin-top:var(--sp-7); } .local-block h3{margin-bottom:var(--sp-4)} .local-block p{color:var(--muted);margin-bottom:var(--sp-3);max-width:70ch;line-height:1.75} .local-block strong{color:var(--text);font-weight:600} /* ═══ CTA BAR — flat, no gradient ═══ */ .cta-bar{ background:var(--surface); border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:var(--sp-9) 0;text-align:left; } .cta-bar h2{color:var(--text);margin-bottom:var(--sp-4)} .cta-bar p{color:var(--muted);margin-bottom:var(--sp-6);font-size:var(--fs-md);max-width:52ch} .cta-bar .btn{background:var(--accent);color:#fff;font-weight:600} .cta-bar .btn:hover{background:var(--accent-bright)} /* ═══ NEARBY-AREA CROSS-LINKS ═══ Internal linking between city pages. Each landing page used to be a dead end with no outbound links except back to the homepage. */ .nearby{border-top:1px solid var(--border-light);padding-top:var(--sp-7);margin-top:0} .nearby h3{margin-bottom:var(--sp-2)} .nearby p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--sp-5)} .nearby-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)} .nearby-links a{ display:inline-flex;align-items:center;min-height:44px; padding:8px 0;border-radius:0; background:none;border:none;border-bottom:1px solid transparent; font-family:var(--display);font-size:1.3rem;font-weight:400;letter-spacing:-.015em; color:var(--muted); transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out); } .nearby-links a:hover{border-bottom-color:var(--accent);color:var(--text);transform:none} /* ═══ FOOTER ═══ */ /* Sub-page footers have no .wrap child, so the padding lives on the element itself and the inner content is constrained with a max-width. */ footer{ background:var(--bg); padding:var(--sp-8) var(--sp-6) var(--sp-6); border-top:2px solid var(--accent);text-align:left; } footer>*{max-width:1240px;margin-left:auto;margin-right:auto} footer .wrap{max-width:1240px;margin:0 auto;padding:0} footer .logo{margin-bottom:var(--sp-4)} footer p{color:var(--dim);font-size:var(--fs-sm);margin-bottom:var(--sp-2)} footer a{color:var(--muted);transition:color var(--dur) var(--ease-out)} footer a:hover{color:var(--text)} .footer-links{display:flex;gap:var(--sp-2) var(--sp-5);justify-content:flex-start;flex-wrap:wrap;margin:var(--sp-5) 0;font-size:var(--fs-sm)} .footer-links a{display:inline-flex;align-items:center;min-height:44px} /* ═══ THEME TOGGLE — defaults to the device's setting; a manual choice here is saved and wins from then on (see the init script in and the wiring script at the end of ). Mirrors index.html. ═══ */ .theme-toggle{ display:inline-flex;align-items:center;gap:9px; background:none;border:none;padding:6px;margin:14px -6px -6px; border-radius:var(--radius);cursor:pointer; color:var(--dim);transition:color var(--dur) var(--ease-out); } .theme-toggle:hover{color:var(--text)} .theme-toggle:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px} .theme-toggle .ico{width:14px;height:14px;flex-shrink:0} .theme-toggle-track{ position:relative;width:34px;height:18px;flex-shrink:0; border-radius:100px;background:var(--surface2); border:1px solid var(--border-hover); transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); } .theme-toggle-knob{ position:absolute;top:1px;left:1px;width:14px;height:14px; border-radius:50%;background:var(--accent); transition:transform var(--dur) var(--ease-out); } [data-theme="dark"] .theme-toggle-knob{transform:translateX(16px)} /* Footer contact line — was one plain-text run "phone · email · @handle" joined by middot glyphs. Same fix as the hero coverage-area list in index.html: separate segments with a drawn dot instead of the glyph. */ .footer-contact{display:flex;flex-wrap:wrap;align-items:center} .footer-contact>*{position:relative;padding:2px var(--sp-3) 2px 0} .footer-contact>*:not(:first-child){padding-left:var(--sp-3)} .footer-contact>*:not(:first-child)::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5} /* ═══ FAQ ═══ */ .faq-item{ background:none;border:none;border-bottom:1px solid var(--border); border-radius:0;padding:var(--sp-6) 0;margin-bottom:0; } .faq-item h4{font-family:var(--display);font-size:1.35rem;font-weight:400;letter-spacing:-.018em;margin-bottom:var(--sp-3);color:var(--text)} .faq-item p{color:var(--muted);font-size:var(--fs-base);line-height:1.8;max-width:72ch} /* ═══ RESPONSIVE ═══ */ @media(max-width:1024px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;gap:0 var(--sp-7)} section{padding:var(--sp-8) 0} .hero{padding:var(--sp-8) 0 var(--sp-7)} } @media(max-width:768px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:0} .hero{padding:var(--sp-7) 0 var(--sp-6)} .hero-ctas{flex-direction:column;align-items:stretch} .hero-ctas .btn{width:100%} section{padding:var(--sp-7) 0} .wrap,.nav-inner,.breadcrumb,footer .wrap{padding-left:var(--sp-5);padding-right:var(--sp-5)} .card{padding:var(--sp-6) 0} .cta-bar{padding:var(--sp-8) 0} .nearby-links a{font-size:1.15rem} }