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

--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

Create [page].html in the project root
Create src/assets/css/[page].css and [page]-responsive.css
Create src/assets/js/[page].js
Register in vite.config.js → build.rollupOptions.input
Use this import order in 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:

.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

@           → 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

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

4.9 KiB Raw Blame History