# Inova Frontend

Persian (RTL) frontend for the Inova WordPress theme. Pages are built as standalone HTML/CSS/JS in Vite, then ported to WordPress. No JS framework.

## Stack

- **Build:** Vite 8.x (multi-page, ES modules)
- **Formatter:** Prettier 3.x — singleQuote, semi, 2-space indent, LF
- **Font:** Yekan Bakh FaNum Pro (Persian, 8 weights)
- **Language:** Persian, RTL-first (`lang="fa" dir="rtl"`)

## Folder Structure

```
src/
  core/
    fonts/yekanbakhpro/woff/ & woff2/   ← webfont files (8 weights each)
    stylesheet/core.css                  ← PRIMARY source of truth for all styling
    javascript/core.js                   ← shared JS utilities
  assets/
    icons/                               ← SVG icons
    images/
    css/[page].css                       ← page layout styles
    css/[page]-responsive.css            ← page breakpoint overrides
    js/[page].js                         ← page-specific JS
  components/                            ← reusable HTML components
  templates/                             ← page templates
```

## Core CSS — Source of Truth

`src/core/stylesheet/core.css` defines everything global. **Always load it first**, before any page CSS.

### Color Tokens

```css
--color-primary:     #0274b3   /* primary blue */
--color-title:       #1a1a2e   /* headings */
--color-text:        #505068   /* paragraph text */
--color-body-text:   #6a6a6a   /* secondary body text */
--bg-gray:           #f9f9f9   /* light gray backgrounds */
--color-pastel-main: #c5d7ec   /* pastel blue accent */

/* Blue scale */
--blue-50 … --blue-800          /* lightest → darkest */
--blue-500: #1796dc             /* default link color */
--blue-600: #0274b3             /* = --color-primary */
```

### Typography Scale

| Tag | Desktop | Mobile (≤767px) | Color |
|-----|---------|-----------------|-------|
| h1  | 36px    | 24px            | `--color-title` |
| h2  | 24px    | 22px            | `--color-title` |
| h3  | 22px    | 18px            | `--color-title` |
| h4  | 20px    | 16px            | `--color-title` |
| h5  | 15px    | 14px            | `--color-title` |
| p   | 15px / line-height 1.75 | — | `--color-text` |
| a   | color `--blue-500`, no underline | — | — |

Font family and `direction: rtl` are applied globally — never redeclare them in page CSS.

### Utility Classes (defined in core)

- `.no-scrollbar` — hides scrollbar cross-browser

### What Core Already Handles (do not repeat in page CSS)

- `@font-face` declarations
- `box-sizing: border-box` universal reset
- `margin: 0; padding: 0` reset
- `direction: rtl` on all elements
- `scroll-behavior: smooth`
- `button` reset (no border/outline/background)
- `::selection` brand color
- Number input spinner removal
- Custom scrollbar styling

## Adding a New Page

1. Create `[page].html` in the project root
2. Create `src/assets/css/[page].css` and `[page]-responsive.css`
3. Create `src/assets/js/[page].js`
4. Register in `vite.config.js → build.rollupOptions.input`
5. Use this import order in HTML:

```html
<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
<link rel="stylesheet" href="./src/assets/css/[page].css" />
<link rel="stylesheet" href="./src/assets/css/[page]-responsive.css" />
<script type="module" src="./src/assets/js/[page].js" defer></script>
```

## CSS Conventions

**Naming:** BEM-like, kebab-case — `.block-name`, `.block-element`, `.block--modifier`

**Container pattern:** every section wraps content in `.container`:
```css
.container {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}
```

**Breakpoints** (use raw px values in `@media` — no CSS variable support in media queries):

| Alias | Value  |
|-------|--------|
| xxl   | 1400px |
| xl    | 1200px |
| lg    | 992px  |
| md    | 768px  |
| sm    | 576px  |

Pre-stub all 5 breakpoints in the responsive file, even if empty.

**Section comments** use `═══` ASCII dividers.

**Tokens to use — and their correct names:**

| Correct | Wrong (do not use) |
|---------|--------------------|
| `var(--color-title)` | `var(--clr-title)` |
| `var(--color-text)` | `var(--clr-text)` |
| `16px` (raw value) | `var(--sp-16)` — not defined |
| inherited font | `var(--font-primary)` — not defined |

## Vite Path Aliases

```js
@           → src/
@core       → src/core/
@components → src/components/
```

## HTML Conventions

- `<html lang="fa" dir="rtl">`
- `<div id="root">` wraps `<main>` in page HTML
- Decorative elements get `aria-hidden="true"`
- Section comments inside HTML use `═══` ASCII dividers

## Known Issues

1. `contactus.css` uses undefined variables (`--sp-16`, `--font-primary`, `--clr-title`, `--clr-text`) — use the correct core token names above.
2. `@font-face` URLs for weights 800/900/950 in `core.css` have incorrect filenames with spaces — those font weights currently fail to load.
3. `contactus.html` is registered as key `"footer"` in `vite.config.js` — should be `"contactus"`.