Make RoadGrip
your own.

01. Quick start

Open index.html in a modern browser. Keep the complete assets folder beside it. No build tool or installation is required.

For a localhost preview, run python3 -m http.server 8000 in the extracted folder and open http://localhost:8000. HTTPS or localhost usually enables clipboard copying; a manual-copy fallback is also included.

02. Files & dependencies

• index.html — the landing page, service copy, FAQs, and policy dialogs.
• README.html — this customization guide.
• LICENSES.txt — dependency notices.
• assets/css/style.css — responsive layouts, palette, and typography.
• assets/js/main.js — inquiry settings, filters, preselection, and navigation.
• assets/images/tire-wheel.webp, tire-shop.webp, and mark.svg — local imagery and logo mark.
• assets/vendor/ — Bootstrap 5.3.8 CSS, JavaScript bundle, and MIT license.

All page assets are local. Arial/Helvetica system fonts require no font download. Icons are original SVG symbols embedded in the HTML. Keep the local Bootstrap bundle before main.js.

03. Business copy & contacts

Edit the text logo, page title, description, hero, shop story, service practices, hours, address, and footer in index.html. The page speaks in the shop owner’s voice; all starter-content replacement guidance lives here.

Before public use, replace the fictional address 2640 Treadway Avenue, Fresno, CA 93722, reserved phone (559) 555-0172 / tel:+15595550172, and reserved email hello@roadgriptire.example. The .example address cannot receive mail.

Update the top information bar, phone actions, inquiry sidebar, Visit section, footer, policy contacts, and JavaScript recipient together. Starter hours are Monday–Friday 8 AM–6 PM, Saturday 8 AM–2 PM, and Sunday closed. Confirm all shop practices, arrival guidance, prices, and service scope against your actual operation.

04. Tire choices & fitment starter

The three tire cards are categories to discuss, not live stock, SKU listings, brand affiliations, or an ordering system. Their starter starting prices are $99, $139, and $179 per tire. Replace them with your own accurate pricing and scope. Keep the note explaining additional installation, disposal, fees, and tax consistent with your practices.

Filter buttons use data-tire-filter values all, everyday, and suv. Cards use matching data-use values. The filter only shows or hides categories; it does not look up fitment or availability.

Each card’s inquiry link uses data-service="Tire selection & pricing" and a data-tire value that exactly matches an option in the Tire interest select. Clicking it selects that interest and the Tire pricing inquiry type while preserving other inquiry entries.

The fitment starter under the hero accepts optional vehicle and tire-size text. Ask about tires copies nonempty values into the main form, selects Tire selection & pricing, and scrolls to the inquiry. It does not calculate or validate fitment, retrieve stock, submit a request, or prepare an email automatically. Unknown size can remain blank.

05. Wheel services & starting prices

Six service rows cover installation, rotation, balancing, puncture assessment, alignment checks, and TPMS diagnostics. The prices and service practices are starter copy; replace them before launch. Keep the customer-facing qualifiers about scope, repairability, and approval accurate.

To add a service, copy an article.service-row, edit its heading, description, and price, and update the inquiry link’s data-service. Add the exact same value to the Service needed select. A service link selects its service and Appointment request while retaining vehicle and contact details.

Do not advertise guaranteed repairability, completion times, manufacturer coverage, certifications, or vehicle capability without support. Review the FAQs and Terms when changing service scope.

06. Palette, typography & spacing

Edit the CSS variables at the top of assets/css/style.css: --forest: #163b29, --deep: #102d20, --lime: #d7e641, --paper: #f5f3e9, --white: #fffef8, --ink: #173b2b, and --muted: #58675a.

Body text is 18px desktop and 17px mobile. Hero supporting text is 20px desktop, 19px smaller desktop, and 18px tablet/mobile. Tire descriptions are 16–17px; service descriptions, FAQs, contacts, and policy text are at least 16px. Form labels are 15px and inputs at least 16px. Pricing/help notes are 12–13px; footer links are 14px.

Headings scale separately from body text. Desktop sections generally use 38–60px headings; phones use 36–39px. The hero uses an expressive uppercase scale and tighter letter spacing. Keep its longest line inside the available width when editing it.

The desktop page combines three tire cards, two-column service lists and FAQs, a photo/story section, and a form/sidebar. Services become a single list on tablets, and the inquiry sidebar moves below the form to avoid an empty tall column. Test 320px, 390px, tablet, and desktop layouts after changes.

07. Photography, logo & SVG symbols

Replace the two WebP photos with your own shop or product imagery, retaining optimized file sizes. Update alt text and explicit dimensions. CSS uses object-fit: cover; change object-position to adjust crops without stretching.

The supplied photographs are starter imagery, not verified employees, customer vehicles, manufacturer products, or completed-service evidence. Replace them with your own authorized photography before representing them as your business.

The name is editable HTML text. mark.svg is the favicon and logo symbol. Inline symbols live in the first SVG block in index.html; keep IDs unique and update matching use href references when renaming them.

08. Pinned header & mobile access

The phone/address/hours bar and navigation are inside one sticky header. Both remain visible on desktop and mobile. The script measures the closed navigation row and information bar, excluding the expanded menu, and stores their total as --header-height for anchor offsets and mobile-menu height.

On small screens the menu scrolls between the header and bottom action bar. Navigation closes the menu and moves focus to the destination without a section outline; keyboard focus stays visible on controls. Escape closes the menu and returns focus to its toggle.

The mobile Call / Request an appointment bar includes bottom safe-area padding and page-bottom clearance. Dialogs layer above it. Update every call link and preserve the clearance when changing its height.

09. Inquiry settings & actual behavior

At the top of assets/js/main.js, set ROADGRIP_SETTINGS.recipient to your working business email and confirm timezone: 'America/Los_Angeles'. Update visible email links and policies to match.

Name, valid email, and service are required. Phone, vehicle, tire size, tire interest, preferred date/time, and message are optional. Past dates are rejected using the configured business timezone. Business hours, live appointment availability, fitment, stock, and tire-size validity are not checked.

Prepare email draft displays a reviewable draft on the page. No email opens automatically and nothing is sent or stored by a backend. Open email app uses mailto:; the visitor must send the message manually. Requesting a visit does not confirm an appointment, authorize service, reserve stock, or process a payment.

Copy draft tries the clipboard API. If it fails, the draft is selected and manual-copy instructions appear. An email handler is needed for mailto; very long messages can exceed email-app URL limits, so copying is available.

Editing the inquiry or choosing a new service invalidates the old draft. Reset clears the main form, fitment starter, draft, and feedback. All form data remains in browser memory until a visitor chooses to email or copy it.

10. Reviews & shop-practice copy

Marcus Lane, Nina Patel, and Eric Coleman and their quotes are invented starter content for the template concept, not verified customer feedback. Replace them with authorized customer testimonials or remove the section before public use. No star rating, aggregate review metadata, certification, or experience statistic is supplied.

Check the owner story, estimates-before-work language, process, drop-off arrangements, parking information, warranty FAQ, and vehicle scope against your actual operation. Use only supported claims about your staff, equipment, services, affiliations, and manufacturer terms.

11. FAQs, policies & footer

Ten numbered FAQs form two columns on desktop and one on phones. Bootstrap collapse opens one answer at a time. To add one, use a unique answer ID and matching data-bs-target and aria-controls. Keep data-bs-parent="#faqGroup" for the one-open behavior.

Privacy and Terms of Use are scrollable Bootstrap dialogs with close controls, keyboard trapping, Escape, and focus return. Review their starter text against your actual hosting, correspondence, retention, cookies, and service practices. Revise the policies if you add analytics, data storage, booking, payment, or other services.

Footer policy buttons align with the navigation links; the copyright has no year. Keep meaningful keyboard focus visible and respect reduced-motion preferences when editing interactions.

12. Metadata, asset versions & launch

Update the HTML title, description, theme color, favicon, business details, and any later social metadata. Custom CSS and JavaScript initially use ?v=1.0. Bump affected versions after changing assets and distribute the matching HTML with them.

• Replace all starter contacts, prices, hours, reviews, photographs, and business practices.
• Set a working recipient and correct business timezone.
• Check fitment transfer, filters, preselection, FAQs, mobile menu, call actions, and policies.
• Prepare, review, copy, edit, and reset a draft; try your own email app.
• Check keyboard navigation, 320px phones, tablets, and desktop.
• Retain Bootstrap’s dependency license notices.

13. Troubleshooting & licenses

Missing photos or styles: keep the complete assets folder and case-sensitive relative paths. Menu, FAQ, or dialogs unavailable: check that the local Bootstrap bundle loads before main.js.

Copy unavailable: use HTTPS/localhost or follow manual-copy instructions. Email app not opening: set an email handler or copy the draft into your email client.

Wrong tire preselection: match data-tire and data-service text exactly to select options. Anchor hidden: review header measurement after changing header structure. Older appearance: check matching asset versions and actual cache behavior.

Bootstrap 5.3.8 is MIT licensed. Keep assets/vendor/BOOTSTRAP-LICENSE.txt and LICENSES.txt with distributed source. System fonts require no additional font files.