# Orian Construction and Roofing - Codebase and Site Architecture

Orian Construction and Roofing is a local, licensed, and insured roofing and general construction contractor based on Ventura Blvd in Sherman Oaks, CA. This codebase consists of a static website serving Los Angeles County.

---

## 1. Core Technologies
*   **Front-end:** HTML5, CSS3 (Vanilla CSS in `orian-styles.css`), Vanilla JavaScript.
*   **Fonts:** Poppins (Google Fonts) for clean, modern headings and typography.
*   **Routing:** Static clean-URL structures managed via web host rewrites (mapping `/slug/` to `slug.html` and `/blog/slug/` to `blog-slug.html`).

---

## 2. Directory Structure
*   `index.html` - Main Homepage.
*   `about-us.html` - Company history, credentials, licensing.
*   `services.html` - Index page for all services.
*   `contact.html` - Contact details and inquiry form.
*   `service-areas.html` - Directory hub of local city landing pages.
*   `projects.html` - Recent clay tile, flat roof, and shingle projects.
*   `financing.html` - Pricing, payment terms, insurance claims support.
*   `services-general-construction.html` - Rafter carpentry, wood rot repair under Class B license.
*   `sitemap.xml` - Comprehensive clean-URL sitemap.
*   `robots.txt` - Search engine crawl rules.
*   `orian-styles.css` - Central stylesheet containing design tokens, resets, utility classes, and layouts.
*   `images/` - Folder containing all logo and job photo assets.

---

## 3. Main Services & Landing Pages
*   **Leak Detection & Tracing:** `/services-leak-detection/`
*   **Roof Inspection:** `/services-roof-inspection/`
*   **Roof Repair:** `/roof-repair-los-angeles/`
*   **Roof Replacement:** `/roof-replacement-los-angeles/`
*   **Tile Roof Repair:** `/tile-roof-repair-los-angeles/`
*   **Flat Roofing & Coatings:** `/flat-roof-installation-la/`
*   **Metal Roofing:** `/metal-roofing-los-angeles/`
*   **Skylights:** `/skylight-installation-repair-los-angeles/`
*   **Fascia & Soffit:** `/fascia-soffit-repair-los-angeles/`

---

## 4. Blog Posts (/blog/)
The codebase contains 41 individual blog articles detailing roofing problems, winter preparation, permit costs, and material comparisons. Key pages include:
*   `/blog/cool-roofs-title-24-los-angeles/` (Title 24 cool roofs)
*   `/blog/attic-moisture-condensation-causes-fixes/` (Condensation issues)
*   `/blog/common-roof-leak-sources/` (Locating leaks)
*   `/blog/what-happens-during-tear-off-reroof/` (Tear-off process)
*   `/blog/tile-roofs-la-what-to-know/` (Clay tile maintenance)

---

## 5. Local Service Areas (/roofing-contractor-[city]-ca/)
The site contains 35 dedicated city contractor landing pages targeting San Fernando Valley, the Westside, and greater Los Angeles. Examples:
*   `/roofing-contractor-sherman-oaks-ca/` (Headquarters)
*   `/roofing-contractor-encino-ca/`
*   `/roofing-contractor-studio-city-ca/`
*   `/roofing-contractor-woodland-hills-ca/`
*   `/roofing-contractor-pasadena-ca/`
*   `/roofing-contractor-beverly-hills-ca/`
*   `/roofing-contractor-santa-monica-ca/`

---

## 6. Key Design Tokens and Styling (orian-styles.css)
*   **Colors:**
    *   Dark background accents: `#101013`
    *   Primary Red/Pink CTAs: `#ff6b6b` (with variants like `#f2b1b4` or `#ff4d4d`)
    *   Muted text colors: `#868c96`, `#6d727c`
*   **Layouts:** Flexbox nav, grid columns (`rr`, `foot-grid`, `cta-grid`, `pcards`).
*   **Buttons:** `.btn`, `.btn-red`, `.btn-out`, `.btn-out-dark`.