/* ========================================================================== On The Go — shared base styles Reset, layout primitives, and components shared by every section. Section-specific look is layered on top via theme files (tire.css / detailing.css / hub.css) which set CSS custom properties on . ========================================================================== */ :root { --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --container: 1160px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; margin: 0 0 var(--space-2); } p { margin: 0 0 var(--space-2); } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- Header / nav ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--header-border); } .site-header .container { display: flex; align-items: center; justify-content: flex-start; min-height: 76px; gap: var(--space-2); } .brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; white-space: nowrap; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--header-text); letter-spacing: 0.01em; } .brand .brand-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; } .brand-logo { display: block; height: 38px; width: auto; } @media (max-width: 640px) { .brand-logo { height: 30px; } } .nav-links { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; } .nav-links a { color: var(--header-text); font-size: 0.92rem; font-weight: 500; opacity: 0.85; transition: opacity 0.15s ease; white-space: nowrap; } .nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; } .nav-links a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 4px; } .nav-cta { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .nav-toggle { display: none; background: none; border: 1px solid var(--header-border); border-radius: var(--radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--header-text); } .nav-toggle svg { width: 22px; height: 22px; } .site-header .container { flex-wrap: nowrap; } @media (max-width: 1150px) { .nav-links { position: absolute; top: 76px; left: 0; right: 0; background: var(--header-bg); flex-direction: column; align-items: flex-start; padding: var(--space-3); border-bottom: 1px solid var(--header-border); gap: var(--space-2); display: none; z-index: 40; } .nav-links.is-open { display: flex; } .nav-links a { white-space: normal; } .nav-toggle { display: inline-flex; flex-shrink: 0; } .nav-cta .btn-text { display: none; } } /* Header on phones. ------------------------------------------------------------------------ The shop pages carry four things here — the Tires/Detailing switch, Buy Tires, the cart and Book — where the rest of the site carries two. That row is wider than a phone, and because it is right-aligned the overflow escaped off the LEFT edge: the Tires pill sat half off-screen, which is what read as the header being "uncentered". Three changes, together: let the row wrap so it can never overflow, drop the header cart icon (these pages already carry a floating "View Cart & Checkout" button, so it was the one redundant item), and tighten the remaining three enough to sit on a single line. Header height on a 375px phone goes from 172px to 122px. */ @media (max-width: 560px) { .site-header .container { flex-wrap: wrap; row-gap: 0.6rem; min-height: auto; padding-top: 0.75rem; padding-bottom: 0.75rem; /* Nothing in the header may be the reason the page scrolls sideways. */ overflow-x: clip; } .nav-cta { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; row-gap: 0.5rem; } /* Redundant on these pages — the floating cart button is always on screen. */ .nav-cta .cart-link { display: none; } .nav-cta .btn { padding: 0.6rem 0.9rem; font-size: 0.85rem; } .section-switch a { padding: 0.45rem 0.8rem; font-size: 0.82rem; } } @media (max-width: 420px) { .brand { font-size: 1rem; } .brand .brand-sub { display: none; } } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { opacity: 0.92; } .btn-outline { background: transparent; color: var(--header-text); border-color: var(--header-border); } .btn-outline:hover { border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; } .btn-outline-content { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-outline-content:hover { background: var(--accent); color: var(--accent-contrast); } .btn-lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; } .btn-block { width: 100%; } /* ---- Sections ------------------------------------------------------------ */ section { padding: var(--space-6) 0; } .section-head { max-width: 640px; margin: 0 0 var(--space-4); } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); } /* ---- Grid ------------------------------------------------------------ */ .grid { display: grid; gap: var(--space-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---- Cards ------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); } /* ---- Card icon (small line-icon badge above a card heading) -------------- */ .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: rgba(255, 158, 0, 0.12); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: var(--space-2); } .card-icon svg { width: 24px; height: 24px; } /* ---- Image placeholder (swap for real photography) ---------------------- */ .img-placeholder { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: var(--radius-md); background: var(--placeholder-bg); border: 1px dashed var(--placeholder-border); color: var(--placeholder-text); font-size: 0.85rem; text-align: center; padding: var(--space-2); } /* ---- Real hero photo (replaces .img-placeholder once real photography exists) ---- */ .hero-photo { border-radius: var(--radius-md); overflow: hidden; } .hero-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; } /* On mobile the hero stacks to one column, so this box becomes nearly square against a wide/landscape photo — object-fit:cover center-crops the sides hard enough to cut off text/logos baked into the image (e.g. a truck's signage). Switch to contain there so the whole photo stays visible. */ @media (max-width: 640px) { /* Relies on the img's width/height HTML attributes for its intrinsic aspect ratio (standard browser behaviour) — no explicit aspect-ratio needed here. */ .hero-photo img { min-height: 0; height: auto; object-fit: contain; } } /* ---- Forms ------------------------------------------------------------ */ .field { margin-bottom: var(--space-3); } .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; } .field input, .field select, .field textarea { width: 100%; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 0.95rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field select option { background: var(--input-bg); color: var(--text); } .field textarea { min-height: 120px; resize: vertical; } .field-hint { margin: 0.4rem 0 0; font-size: 0.8rem; opacity: 0.65; } /* The file input inherits the box above, but its own button does not, so it is given the shape of the other controls rather than the browser's default. */ .field input[type="file"] { padding: 0.55rem 0.6rem; cursor: pointer; } .field input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.45rem 0.9rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .field input[type="file"]::file-selector-button:hover { border-color: var(--accent); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } } /* ---- Page hero (inner pages) --------------------------------------------- */ .page-hero .section-head { margin-left: auto; margin-right: auto; } /* ---- City pills ------------------------------------------------------------ */ .city-pill { display: inline-block; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 999px; padding: 0.5rem 1rem; margin: 0.25rem; font-size: 0.88rem; font-weight: 500; } /* ---- Interactive area picker ------------------------------------------------------------ */ .area-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-3); align-items: start; } @media (max-width: 860px) { .area-layout { grid-template-columns: 1fr; } } .area-picker-group h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; margin: var(--space-2) 0 0.5rem; } .area-picker-group:first-child h4 { margin-top: 0; } .area-picker { display: flex; flex-direction: column; gap: 0.3rem; } .area-picker button { text-align: left; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); background: var(--surface); font-size: 0.88rem; font-weight: 500; font-family: inherit; cursor: pointer; color: var(--text); } .area-picker button.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .area-detail[hidden] { display: none; } .area-detail h3 { margin-bottom: 0.5rem; } .area-detail p { opacity: 0.85; } .area-detail-link { display: inline-block; margin-top: var(--space-2); font-weight: 600; color: var(--accent); text-decoration: none; } .area-detail-link:hover { text-decoration: underline; } .area-map-wrap { margin-bottom: var(--space-3); } /* ---- Booking router ------------------------------------------------------------ */ .booking-search-card label { font-weight: 700; font-size: 1rem; margin-bottom: var(--space-2); display: block; } .booking-search-wrap { position: relative; margin-bottom: var(--space-3); } .booking-search-input { width: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 1rem; } .booking-search-input:focus { outline: none; border-color: var(--accent); } .booking-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--input-bg); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0,0,0,0.12); max-height: 320px; overflow-y: auto; z-index: 30; } .booking-results[hidden] { display: none; } .booking-result-item { padding: 0.75rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.92rem; } .booking-result-item:hover, .booking-result-item.is-active { background: var(--surface); } .booking-result-region { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; white-space: nowrap; } .booking-search-hint { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin: var(--space-1) 0 0.6rem; } .booking-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } @media (max-width: 860px) { .booking-groups { grid-template-columns: 1fr; } } .booking-group h4 { font-size: 0.85rem; margin-bottom: 0.6rem; } .booking-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .booking-chip { padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--bg); font-size: 0.85rem; font-weight: 500; font-family: inherit; cursor: pointer; color: var(--text); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .booking-chip:hover { border-color: var(--accent); } .booking-chip.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .booking-panel { margin-top: var(--space-4); } .booking-panel[hidden] { display: none; } .booking-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .booking-panel-head h2 { font-size: 1.4rem; margin: 0; } .booking-embed-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--surface-border); background: var(--bg); } .booking-embed { width: 100%; height: 760px; border: 0; display: block; } @media (max-width: 600px) { .booking-embed { height: 900px; } /* Cancel the container's + card's horizontal padding so the calendar itself runs edge-to-edge; heading/button above keep a light inset. */ .booking-panel { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); padding-left: var(--space-2); padding-right: var(--space-2); border-left: 0; border-right: 0; border-radius: 0; } .booking-embed-wrap { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); border-left: 0; border-right: 0; border-radius: 0; } } .booking-fallback { margin: var(--space-2) 0 0; font-size: 0.85rem; opacity: 0.65; } .booking-help { margin-top: var(--space-4); opacity: 0.75; font-size: 0.95rem; } /* ---- Map embed ------------------------------------------------------------ */ .map-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--surface-border); } .map-embed iframe { width: 100%; height: 380px; display: block; border: 0; } /* ---- Pricing table ------------------------------------------------------------ */ .pricing-table-wrap { overflow-x: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-md); } .pricing-table { width: 100%; border-collapse: collapse; min-width: 560px; } .pricing-table th, .pricing-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--surface-border); } .pricing-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); opacity: 0.6; background: var(--surface); } .pricing-table tr:last-child td { border-bottom: none; } .pricing-table td.price-cell { font-family: var(--font-heading); font-weight: 700; color: var(--accent); white-space: nowrap; } .pricing-table td.muted { opacity: 0.7; font-size: 0.9rem; } .pricing-note { font-size: 0.85rem; opacity: 0.65; margin-top: var(--space-2); } /* The full price list: every vehicle against every package. The picker above it answers "what does mine cost"; this answers "how do they compare", and it is the only place the prices exist as text a search engine can read. */ .pricing-table caption { caption-side: top; padding: 0.75rem 1.25rem; text-align: left; font-size: 0.8rem; opacity: 0.6; border-bottom: 1px solid var(--surface-border); } .price-package { margin: var(--space-3) 0; } .price-package h4 { margin: 0 0 0.35rem; } .price-package-meta { margin: 0 0 var(--space-1); font-size: 0.9rem; opacity: 0.75; } /* The figure is what people came for, so it keeps full contrast while the duration and tagline around it stay dimmed. */ .price-package-meta strong { font-family: var(--font-heading); color: var(--accent); opacity: 1; } /* ---- Gallery ------------------------------------------------------------ */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } @media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-caption { font-size: 0.85rem; opacity: 0.65; margin-top: 0.5rem; text-align: center; } /* ---- Before/after drag slider ------------------------------------------- */ .ba-slider { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; background: var(--placeholder-bg); } .ba-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ba-slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .ba-slider .ba-after { z-index: 1; } .ba-slider .ba-before { z-index: 2; clip-path: inset(0 50% 0 0); } .ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); z-index: 3; box-shadow: 0 0 8px rgba(0,0,0,0.45); pointer-events: none; } .ba-slider .ba-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; color: #2F2E2E; } .ba-slider .ba-handle-grip svg { width: 18px; height: 18px; } .ba-slider .ba-label { position: absolute; top: 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; z-index: 3; pointer-events: none; } .ba-label-before { left: 10px; } .ba-label-after { right: 10px; } /* ---- Contact layout ------------------------------------------------------------ */ .contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); align-items: start; } /* A grid item defaults to min-width:auto, which means it refuses to shrink below the widest thing inside it — so one stubborn row widens the column, the column widens the page, and the page ends up wider than the screen with a band of dead space down the right that the header does not cover. */ .contact-layout > * { min-width: 0; } .contact-layout[hidden] { display: none; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } } .info-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-3); } .info-card h3 { font-size: 1.1rem; } .info-card .info-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: var(--space-2); font-size: 0.92rem; } .info-card .info-row strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin-bottom: 0.15rem; } /* ---- Form status ------------------------------------------------------------ */ .form-status { margin-top: var(--space-2); padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); font-size: 0.9rem; } .form-status[hidden] { display: none; } .form-status.is-error { background: rgba(220, 53, 69, 0.08); border-color: rgba(220, 53, 69, 0.35); color: #B3261E; } /* ---- Service & pricing cards ------------------------------------------------------------------- Was a stack of full-width rows split by hairlines: on a wide screen the price drifted an inch from the name and stopped reading as one thing, two of the five carried a small photo and three did not, and nothing said which service most people actually want. Cards give every service the same frame; the featured treatment answers the third. No photographs in the header. Only two existed, so they made the set look unfinished rather than illustrated. A category chip is consistent, and carries information the photo did not. */ .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: start; } @media (max-width: 880px) { .service-grid { grid-template-columns: 1fr; } } .service-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: var(--space-3); overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--surface-border); transition: background .18s ease; } .service-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.45); } .service-card:hover::before { background: var(--accent); } /* The one most people book leads the grid and says so. */ .service-card.is-featured { grid-column: 1 / -1; border-color: var(--accent); } .service-card.is-featured::before { background: var(--accent); } @media (min-width: 881px) { .service-card.is-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); align-items: start; } .service-card.is-featured .service-card-foot { grid-column: 1 / -1; } .service-card.is-featured .service-card-foot .btn { width: auto; min-width: 220px; } } .service-card-chip { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .6rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); margin-bottom: .75rem; } .service-card-chip.is-quiet { background: var(--surface-border); color: var(--text); opacity: .85; } .service-card h3 { margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.2; } .service-card p { margin: 0 0 var(--space-2); opacity: .82; font-size: .96rem; } /* Price sits with the name rather than pinned to the far edge. */ .service-price { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 var(--space-2); flex-wrap: wrap; } .service-price .amount { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent); } .service-price .qualifier { font-size: .85rem; font-weight: 600; opacity: .65; } .service-card ul.checklist { margin: 0 0 var(--space-3); } .service-card ul.checklist li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; font-size: .93rem; opacity: .9; } .service-card ul.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* Buttons sit at the bottom of the card, not directly under the last bullet, so a row of cards with different-length lists still lines its actions up. Separate from .service-card-foot: that one stacks full-width buttons, these sit side by side. */ .service-card-actions { margin-top: auto; padding-top: var(--space-1); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .service-card-foot { margin-top: auto; padding-top: var(--space-1); } .service-card-foot .btn { width: 100%; text-align: center; } .service-note { font-size: .82rem; opacity: .6; margin: .6rem 0 0; } /* ---- Service detail blocks ------------------------------------------------------------ */ .service-detail { padding: var(--space-4) 0; border-bottom: 1px solid var(--surface-border); } .service-detail:last-child { border-bottom: none; } .service-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .service-detail-head h3 { margin: 0; font-size: 1.4rem; } .service-detail ul.checklist { margin-top: var(--space-2); } .service-detail ul.checklist li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; font-size: 0.95rem; } .service-detail ul.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .placeholder-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); opacity: 0.7; margin-left: 0.5rem; vertical-align: middle; } /* ---- Proof counters (Google / Facebook animated badges) ------------------------------------------------------------ */ .proof-counters { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: center; padding: var(--space-2) 0; } .proof-counter { display: inline-flex; align-items: center; gap: 14px; } .proof-counter .pc-count { font-size: 2.6rem; font-weight: 800; line-height: 1; font-family: var(--font-heading); } .proof-counter.pc-google .pc-count { background: linear-gradient(90deg, #FFD700, #FFC300, #FFDF00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .proof-counter.pc-facebook .pc-count { color: #1877F2; } .proof-counter .pc-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .proof-counter .pc-label { font-size: 0.85rem; color: var(--text); opacity: 0.65; } .proof-counter .pc-stars { font-size: 0.85rem; color: #FFD700; letter-spacing: 2px; } .proof-counter .pc-recommended { font-size: 0.85rem; color: #1877F2; font-weight: 700; } .proof-counter .pc-verified { font-size: 0.72rem; color: var(--text); opacity: 0.5; } .proof-counter .pc-verified .pc-mark-google { color: #4285F4; font-weight: 700; } .proof-counter .pc-verified .pc-mark-facebook { color: #1877F2; font-weight: 700; } /* ---- Reviews ------------------------------------------------------------ */ .trust-bar { background: var(--accent); color: var(--accent-contrast); text-align: center; font-size: 0.82rem; font-weight: 600; padding: 0.55rem 1rem; letter-spacing: 0.01em; } .trust-bar a { text-decoration: underline; color: inherit; } .trust-bar .sep { opacity: 0.6; margin: 0 0.6rem; } /* The phone numbers live up here because the only other place they appeared was the footer, which meant scrolling the whole page to find a number — for a business people phone, that is the wrong way round. */ .trust-bar .trust-phone { text-decoration: none; font-weight: 700; white-space: nowrap; } .trust-bar .trust-phone:hover { text-decoration: underline; } /* On a phone something has to give — all four items wrap to three rows and the bar turns into a slab. The reviews and the Facebook line are what stay: a thousand five-star reviews is the reason a stranger keeps reading, and the phone is where most strangers arrive. The numbers go, because they are also in the footer, on every contact page, and behind the Book button. The pipes go too — a separator stranded at the end of a wrapped line reads as a mistake. */ @media (max-width: 780px) { .trust-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1rem 0.75rem; font-size: 0.75rem; padding: 0.45rem 0.75rem; line-height: 1.5; } .trust-bar .sep { display: none; } .trust-bar .trust-phone { display: none; } } @media (max-width: 420px) { .trust-bar { font-size: 0.7rem; gap: 0.1rem 0.6rem; } } .reviews-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; } .reviews-filter-btn { font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--surface); color: var(--text); opacity: 0.75; } .reviews-filter-btn.is-active { opacity: 1; background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } @media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } } .review-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 0.5rem; } .review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .review-name { font-weight: 600; font-size: 0.95rem; } .review-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--surface-border); color: var(--accent); white-space: nowrap; } .review-stars { color: #F5B400; letter-spacing: 2px; font-size: 0.95rem; } .review-text { font-size: 0.9rem; opacity: 0.85; margin: 0; } .review-text.is-rating-only { opacity: 0.55; font-style: italic; } .review-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .review-text.is-clamped.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .review-toggle { align-self: flex-start; margin-top: -0.3rem; padding: 0; border: 0; background: none; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent); cursor: pointer; } .review-toggle:hover { text-decoration: underline; } .review-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .review-summary .big-rating { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--accent); line-height: 1; } .review-summary .big-rating-meta { font-size: 0.85rem; opacity: 0.7; } /* ---- Section switch ------------------------------------------------------------ */ .section-switch { display: flex; align-items: center; background: var(--header-chip-bg, var(--surface)); border: 1px solid var(--header-border); border-radius: 999px; padding: 3px; gap: 2px; flex-shrink: 0; } .section-switch a { display: flex; align-items: center; justify-content: center; padding: 0.42rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--header-chip-text, var(--header-text)); opacity: 0.75; white-space: nowrap; cursor: pointer; } .section-switch a:hover { opacity: 1; } .section-switch a.is-active { background: var(--accent); color: var(--accent-contrast); opacity: 1; } /* ---- FAQ accordion ------------------------------------------------------------ */ .faq-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 780px; } .faq-item { border: 1px solid var(--surface-border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; } .faq-item summary { cursor: pointer; padding: 1.1rem 1.35rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); flex-shrink: 0; transition: transform 0.15s ease; line-height: 1; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 1.35rem 1.2rem; opacity: 0.85; font-size: 0.95rem; } /* ---- Footer ------------------------------------------------------------ */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--space-5) 0 var(--space-3); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); color: var(--footer-heading); } .footer-grid a, .footer-grid p { color: var(--footer-text); opacity: 0.8; font-size: 0.92rem; } .footer-grid li { margin-bottom: 0.5rem; } .footer-bottom { border-top: 1px solid var(--footer-border); padding-top: var(--space-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: 0.82rem; opacity: 0.65; } .footer-social a:hover { text-decoration: underline; } /* ---- Contest popup (lead-magnet prize draw) ------------------------------ */ .contest-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: var(--space-3); z-index: 1000; opacity: 0; animation: contestFadeIn 0.25s ease forwards; } @keyframes contestFadeIn { to { opacity: 1; } } .contest-modal { position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: var(--space-4); box-shadow: 0 20px 60px rgba(0,0,0,0.35); transform: translateY(8px); animation: contestRise 0.25s ease forwards; overflow: hidden; } @keyframes contestRise { to { transform: translateY(0); } } .contest-banner { display: block; width: calc(100% + var(--space-4) * 2); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); aspect-ratio: 880 / 500; /* matches the source photo's real crop — a fixed height here was cropping it more aggressively than intended */ height: auto; object-fit: cover; } .contest-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff; opacity: 0.85; font-size: 1.3rem; line-height: 1; cursor: pointer; z-index: 1; } .contest-close:hover { opacity: 1; background: rgba(0,0,0,0.65); } .contest-modal .eyebrow { display: block; margin-bottom: 0.3rem; } .contest-modal h2 { font-size: 1.5rem; margin-bottom: 0.4rem; } .contest-modal .contest-prize { opacity: 0.8; font-size: 0.92rem; margin-bottom: var(--space-3); } .contest-modal .field { margin-bottom: var(--space-2); } .contest-consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.78rem; opacity: 0.8; line-height: 1.4; margin: var(--space-2) 0; } .contest-consent input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; width: 16px; height: 16px; } .contest-eligibility { font-size: 0.72rem; opacity: 0.55; margin-top: var(--space-2); text-align: center; } .contest-eligibility a { text-decoration: underline; } .contest-modal .form-status { margin-top: var(--space-2); } /* ---- Utility ------------------------------------------------------------ */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* ---- Service card imagery ---------------------------------------------------------------- */ /* On-rim and off-rim are the one thing customers genuinely mix up, and the difference is entirely visual: a tire already on its wheel, or a bare tire that still needs mounting. A picture settles in a glance what the checklist underneath takes a paragraph to say. A fixed-height band rather than an auto-sized image, so all three cards line their headings up whatever sits inside. */ .service-card-media { display: flex; align-items: center; justify-content: center; height: 150px; margin: -0.25rem 0 0.95rem; border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.01)); } .service-card-media img { max-height: 138px; width: auto; object-fit: contain; }