Customization Guide

Changing Colors

All colors are defined as CSS variables at the top of assets/css/style.css inside :root. Update the hex values there and every button, card, badge, and accent updates automatically:

:root {
  --primary-color: #FF6F3C;   /* main brand color */
  --accent-color: #2E8B7A;    /* secondary accent */
  --accent-yellow: #FFC93C;
  --secondary-color: #FFF6EC; /* cream background */
}

Dark mode colors live in the adjacent [data-theme='dark'] block in the same file.

Changing Fonts

Update the Google Fonts <link> in each page's <head>, then change the two font variables in style.css:

--font-heading: 'Baloo 2', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;

Replacing Images

Every image currently points to a placehold.co placeholder (e.g. https://placehold.co/600x400/FF6F3C/FFFFFF?text=Dog+Category) so the template always renders without broken links. Replace each src with your own licensed photography in assets/images/ and keep the descriptive alt text, updating it to match your new image.

Editing Navigation

The header navigation, offcanvas mobile menu, and footer links are repeated at the top/bottom of every page. Update the <nav class="navbar-nav nav-pet"> and #mobileMenu blocks, and mirror the change in the footer's Quick Links column.

Dark Mode Setup

Dark mode is already wired up: assets/js/main.js toggles data-theme="dark" on <html>, persists the choice in localStorage, and respects the visitor's OS-level preference on first visit. To adjust dark-mode-only tweaks (image brightness, shadows), edit assets/css/dark-mode.css.

RTL Setup

To serve a page in RTL (Arabic, Hebrew, etc.), set <html lang="ar" dir="rtl"> and add this line inside <head>, after the main stylesheet:

<link rel="stylesheet" href="../assets/css/rtl.css">

Most spacing in style.css already uses logical CSS properties (margin-inline, inset-inline-end), so rtl.css only needs to cover the remaining exceptions (icon mirroring, offcanvas side, etc.).

Contact Form Integration

Every <form> on contact.html is marked with data-validate-form for client-side validation and currently simulates submission in main.js. To connect a real backend:

Formspree: set action="https://formspree.io/f/your-id" and method="POST" on the <form> tag.
Netlify Forms: add data-netlify="true" and a hidden <input type="hidden" name="form-name" value="contact"> matching the form's name attribute.

Then replace the simulated setTimeout submit handler in main.js with a real fetch() call, or let the form submit natively for Netlify.

Installation Guide Credits