Make Precision
your own.

01. Quick start

Open index.html in a modern browser. No build process is required. Keep the complete assets folder beside the HTML file. All styles, scripts, photographs, and the logo mark are local.

For a localhost preview with clipboard support, run python3 -m http.server 8000 from the extracted template folder, then open http://localhost:8000.

02. Files & dependencies

The package contains:

• index.html — landing page
• README.html — this guide
• LICENSES.txt — dependency notices
• assets/css/style.css — layout, colors, typography
• assets/js/main.js — interactions and inquiry settings
• assets/images/coupe.webp and panel-detail.webp — photographs
• assets/images/mark.svg — P mark and favicon
• assets/vendor/ — Bootstrap 5.3.8 CSS, bundle, and MIT license

The page uses system Arial/Helvetica fonts, with no font downloads or external libraries.

03. Business copy & contact details

Edit the logo text, headline, story, service descriptions, insurance guidance, process, FAQs, footer, and metadata in index.html. The visitor page uses the owner's voice without builder tips or demo labels.

The starter address is 328 Finish Lane, Costa Mesa, CA 92626. The fictional phone is (949) 555-0138; its call links use tel:+19495550138. The reserved email is hello@precisionbodyworks.example and cannot receive customer messages.

Before public use, replace all contact details, hours, prices, and operating practices with your own accurate information. Update the top bar, inquiry sidebar, Visit section, footer, metadata, and JavaScript recipient together. Hours are Monday–Friday 8 AM–6 PM, Saturday 9 AM–1 PM, and Sunday closed.

04. Repair services & prices

Service rows use data-category="body" or data-category="finish". Filter buttons use matching data-filter values; all displays every service. Category buttons keep accessible selected states.

To add a service, copy an article.service-row, update the description, category, pricing text, and data-service value, then add the exact same name to the Service select.

Four starting prices and two assessment-based price labels are included as starter content. Confirm accurate prices and scope before use. A service link scrolls to the inquiry and preselects that service while preserving other form entries.

05. Insurance content & estimate flow

The insurance panel discusses starting a claim conversation, understanding an estimate, and confirming coverage with the insurer. It does not claim an insurer partnership, approved repairer status, claim filing, guaranteed coverage, or a deductible waiver.

The inquiry offers a general insurance/payment preference only: claim started, considering a claim, paying directly, or prefer to discuss. It collects no policy number, claim number, VIN, payment details, or uploaded documents. Clicking the insurance inquiry link preselects the inquiry type; the visitor still chooses a service.

Review the starter shop process and insurance wording against your actual operation before launch. Assessment, estimates, repair approval, and appointments are arranged directly with the business.

06. Dark palette, text & spacing

Edit the CSS variables: --bg: #0b1016, --panel: #141c26, --text: #f0f3f8, --muted: #b5c0ce, and --blue: #98d0f6. Preserve readable contrast when changing the dark surfaces or blue buttons.

Body paragraphs use 18px desktop and 17px phones. Hero supporting text uses 20px desktop, 19px smaller desktop, and 18px tablet/mobile. Service descriptions, FAQs, contact information, and policies use 16px. Form labels use 15px; inputs and selects use 16px. Secondary notes are 12–13px. Headings scale independently, with section headings generally 38–60px desktop and 36–40px mobile.

The split hero stacks on phones, the services use two columns on desktop, and the insurance steps and numbered FAQs stack on mobile. The estimate form uses a full-width layout on tablets so it does not leave a tall empty side column. Check 320px, 390px, tablet, and desktop widths after edits.

07. Photography & logo

Replace the two local WebP images and update their alt text. The hero and shop images use object-fit: cover; adjust object-position in the CSS to change focal points. Keep explicit image proportions and avoid stretching.

The supplied photographs are starter imagery, not verified employees, customer vehicles, completed repairs, or before/after evidence. Use your own workshop photography where available. The business name is editable text; the local SVG P mark can also be replaced.

08. Pinned header & mobile actions

The information bar and navigation sit inside one sticky wrapper. The phone, address, and opening hours remain visible while scrolling. On mobile, details wrap into compact rows and the expanded menu scrolls on short screens.

The JavaScript measures the two pinned rows, excluding the open menu, and updates --header-height for anchor offsets and menu height. Measurements refresh on resize and observed row changes. Anchor links close the mobile menu and move accessible focus without outlining entire sections.

The mobile Call / Request an estimate bar is fixed at the bottom, with safe-area padding and page-bottom clearance. Replace the phone number in every call destination before launch. The estimate action reaches the inquiry form. Dialogs layer above the bar and header.

09. Inquiry settings & actual behavior

At the top of assets/js/main.js, edit PRECISION_SETTINGS.recipient and confirm timezone: 'America/Los_Angeles'. Update the visible email in the Visit section to match. The reserved starter address cannot receive mail.

Name, valid email, and service are required. Phone, vehicle, insurance preference, date, time, and message are optional. Past dates are rejected using the configured business timezone. Opening hours and live availability are not checked.

Valid completion prepares a visible email draft for review. It does not open an email app automatically, send a message, store form entries, file a claim, confirm a booking, authorize repairs, or process payment. Open email app uses mailto:; the visitor sends the message manually.

Copy draft tries the clipboard API, then selects the text and shows manual-copy instructions if access fails. Clipboard access commonly requires HTTPS or localhost. Editing a field hides and invalidates the previous draft. Reset clears all entries, the draft, and status text.

10. Review copy & shop practices

Maya Stone, Andrew Cole, and Elena Patel and their testimonial quotes are starter copy for the template concept, not verified customer feedback. Replace them with authorized customer reviews or remove the section before public use. No review rating or aggregate review metadata is included.

Confirm the About, Why choose us, estimate, drop-off, and collection practices match your operation. Do not add certifications, insurer affiliations, warranty terms, experience statistics, or guaranteed results without verified information.

11. FAQs, policy dialogs & footer

The ten numbered FAQs use two columns on desktop and one on mobile. All answers start closed; Bootstrap collapse opens one answer at a time. When adding questions, give each answer a unique ID and update its button's data-bs-target and aria-controls. Keep data-bs-parent="#faqGroup" for single-answer behavior.

Privacy and Terms of Use open scrollable Bootstrap dialogs with close buttons, Escape support, focus trapping, and focus return. Review their text against your actual hosting, data, and service practices before use. If you add analytics, a backend, or external services, revise the policies accordingly.

Footer controls align with the other links, and the copyright notice omits a year. Keyboard focus remains visible on controls, with reduced-motion support for scrolling and transitions.

12. Metadata & asset versions

Update the page title, description, theme color, favicon, and business wording in index.html. No invented credentials or customer-rating structured data is included.

Custom CSS and JavaScript references use ?v=1.0. After edits, bump affected tokens, for example ?v=1.1, and distribute matching HTML and assets together. Cached HTML or hosting caches may still need refresh.

13. Before your public launch

• Replace starter contacts, address, hours, prices, imagery, and review copy.
• Set a working email recipient and correct business timezone.
• Confirm insurance and repair practices reflect your operation.
• Review Privacy and Terms of Use for your actual behavior.
• Check call links, mobile actions, service filters, FAQs, and dialogs.
• Prepare, review, copy, and reset a draft; test your own email app.
• Check desktop, tablet, 390px, 320px, and keyboard navigation.
• Keep dependency license notices with the distributed files.

14. Troubleshooting & licenses

Photos or styles missing: check the complete asset folder and case-sensitive relative paths. FAQ or dialogs not opening: confirm the local Bootstrap bundle loads before main.js.

Copy unavailable: use HTTPS or localhost, or the manual-copy fallback. Email app not opening: set an email handler or copy the draft. Long messages can exceed an email app's URL limit; copying remains available.

Anchor hidden by the header: review row measurement after changing the header structure. Old styling: confirm matching asset versions and inspect actual caching before diagnosing the issue.

Bootstrap 5.3.8 is supplied under the MIT license in assets/vendor/BOOTSTRAP-LICENSE.txt. Read LICENSES.txt. System fonts require no bundled font files.