/* ========================================================================== Parudux Academy — Persian Typography System -------------------------------------------------------------------------- Version : 1.0 (2026-09-05) Replaces: iransansx-site-font.css WHY THIS FILE EXISTS The old stylesheet forced 'IRANSans' onto every element with !important, but no font file was ever installed — assets/font/IRANSansX/ contains only a placeholder .txt. Every browser therefore fell back to Tahoma. Tahoma is a 1999 UI font with a single usable weight for Persian. That is the entire reason the site reads as stiff and administrative. It was never a design choice; it was a missing file. HOW TO FINISH THE JOB Drop web font files into assets/fonts// and set --prdx-font-family below. See docs/TYPOGRAPHY.md for the two supported options. Until then this file still improves things: the fallback stack, the scale, the line-heights and the RTL rules all work with system fonts. PERSIAN-SPECIFIC RULES ENCODED HERE 1. NEVER apply letter-spacing to Persian text. Persian is a connected script; letter-spacing tears the joins apart and is a common bug. 2. Persian needs more line-height than Latin — roughly 1.75-1.9 for body copy, because of tall ascenders and deep descenders. 3. Technical values (IDs, IPs, URLs, error codes) must be isolated LTR or they visually scramble when mixed into an RTL sentence. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT FACES Each family is declared against BOTH plausible directories, because the project historically used assets/font/ (singular) and assets/fonts/ (plural). Missing files degrade silently to the next entry in the stack. -------------------------------------------------------------------------- */ /* -- Option A: Vazirmatn (free, SIL OFL, safe for commercial use) ---------- */ @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/assets/fonts/Vazirmatn/Vazirmatn-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* -- Option B: IRANSansX (commercial licence — you supply the files) ------- */ @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-Regular.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-Medium.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-DemiBold.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-DemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-Bold.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-ExtraBold.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'IRANSansX'; src: url('/assets/fonts/IRANSansX/IRANSansX-Black.woff2') format('woff2'), url('/assets/font/IRANSansX/IRANSansX-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* -- Families ----------------------------------------------------------- The stack is ordered: your licensed font, then the free alternative, then the best Persian-capable system fonts, then generic. 'Segoe UI' is listed before Tahoma because on Windows 10/11 it renders Persian noticeably better and has real weight variation. */ --prdx-font-family: 'IRANSansX', 'Vazirmatn', 'Segoe UI', 'Noto Sans Arabic', 'Dubai', Tahoma, Arial, sans-serif; /* Technical / LTR values: IDs, hashes, versions, IPs, error codes. */ --prdx-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --prdx-font-display: var(--prdx-font-family); --prdx-font-heading: var(--prdx-font-family); --prdx-font-body: var(--prdx-font-family); --prdx-font-ui: var(--prdx-font-family); /* -- Type scale --------------------------------------------------------- Fluid via clamp(): min, preferred (viewport-relative), max. Ratio ~1.25 (major third) — confident but not shouty. */ --prdx-text-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11-12 */ --prdx-text-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); /* 12-13 */ --prdx-text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13-14 */ --prdx-text-base: clamp(0.9375rem, 0.90rem + 0.20vw, 1rem); /* 15-16 */ --prdx-text-md: clamp(1rem, 0.96rem + 0.24vw, 1.125rem); /* 16-18 */ --prdx-text-lg: clamp(1.125rem, 1.06rem + 0.34vw, 1.375rem); /* 18-22 */ --prdx-text-xl: clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem); /* 22-28 */ --prdx-text-2xl: clamp(1.625rem, 1.42rem + 1.00vw, 2.25rem); /* 26-36 */ --prdx-text-3xl: clamp(2rem, 1.66rem + 1.65vw, 3rem); /* 32-48 */ --prdx-text-4xl: clamp(2.375rem, 1.85rem + 2.55vw, 3.75rem); /* 38-60 */ /* -- Weights ------------------------------------------------------------ Named by ROLE, not by number, so a font swap does not require hunting through the stylesheet. */ --prdx-weight-normal: 400; --prdx-weight-medium: 500; /* buttons, nav, labels */ --prdx-weight-semibold: 600; /* card titles, table headers */ --prdx-weight-bold: 700; /* section headings */ --prdx-weight-black: 800; /* hero / display only */ /* -- Line heights ------------------------------------------------------- Persian needs more room than Latin. Body copy at 1.85 is comfortable; large display text can tighten because the glyphs are already big. */ --prdx-leading-tight: 1.3; --prdx-leading-snug: 1.5; --prdx-leading-normal: 1.7; --prdx-leading-relaxed: 1.85; /* -- Measure ------------------------------------------------------------ Optimal reading width. Persian averages fewer characters per line than English at the same width, so ~62ch reads better than the usual 75ch. */ --prdx-measure: 62ch; } /* -------------------------------------------------------------------------- 3. BASE APPLICATION !important is used deliberately and reluctantly: the site ships as a pre-built, minified React bundle whose source is unavailable, so its inline and utility classes cannot be edited at source. Overriding from outside is the only lever available. See docs/AUDIT_REPORT.md BLOCKER-02. -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body, #root, #root *, button, input, select, textarea, optgroup, a, div, span, p, small, strong, b, em, i, label, table, th, td, li, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, header, nav, main, section, article, aside, footer, form, dialog, .font-sans, .font-serif, .font-mono { font-family: var(--prdx-font-family) !important; } body { font-size: var(--prdx-text-base); font-weight: var(--prdx-weight-normal); line-height: var(--prdx-leading-relaxed); letter-spacing: 0; /* never space a connected script */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; font-variant-ligatures: common-ligatures contextual; } /* -------------------------------------------------------------------------- 4. HEADINGS -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { letter-spacing: 0 !important; /* guard against utility classes */ text-wrap: balance; /* avoids a lonely last word */ margin-block: 0 0.5em; } h1 { font-size: var(--prdx-text-3xl); font-weight: var(--prdx-weight-black); line-height: var(--prdx-leading-tight); } h2 { font-size: var(--prdx-text-2xl); font-weight: var(--prdx-weight-bold); line-height: var(--prdx-leading-tight); } h3 { font-size: var(--prdx-text-xl); font-weight: var(--prdx-weight-bold); line-height: var(--prdx-leading-snug); } h4 { font-size: var(--prdx-text-lg); font-weight: var(--prdx-weight-semibold); line-height: var(--prdx-leading-snug); } h5 { font-size: var(--prdx-text-md); font-weight: var(--prdx-weight-semibold); line-height: var(--prdx-leading-normal); } h6 { font-size: var(--prdx-text-base);font-weight: var(--prdx-weight-semibold); line-height: var(--prdx-leading-normal); } /* -------------------------------------------------------------------------- 5. BODY COPY -------------------------------------------------------------------------- */ p { line-height: var(--prdx-leading-relaxed); margin-block: 0 1em; } /* Long-form prose gets a reading measure; UI chrome must not. */ article p, .prose p, .course-description p, [class*='description'] p { max-width: var(--prdx-measure); } small, .text-sm { font-size: var(--prdx-text-sm); } .text-xs { font-size: var(--prdx-text-xs); } strong, b { font-weight: var(--prdx-weight-bold); } /* -------------------------------------------------------------------------- 6. INTERACTIVE ELEMENTS -------------------------------------------------------------------------- */ button, [role='button'], .btn, input[type='submit'], input[type='button'] { font-weight: var(--prdx-weight-medium) !important; font-size: var(--prdx-text-sm); line-height: var(--prdx-leading-snug); letter-spacing: 0 !important; } nav a, nav button, .menu a, .nav-link { font-weight: var(--prdx-weight-medium) !important; letter-spacing: 0 !important; } label, .form-label { font-weight: var(--prdx-weight-medium); font-size: var(--prdx-text-sm); line-height: var(--prdx-leading-snug); } input, textarea, select { font-weight: var(--prdx-weight-normal) !important; font-size: var(--prdx-text-base); line-height: var(--prdx-leading-normal) !important; } /* iOS zooms the page when a focused input is under 16px. Prevent that. */ @media (max-width: 640px) { input, textarea, select { font-size: 16px !important; } } ::placeholder { font-weight: var(--prdx-weight-normal); opacity: 0.55; } /* -------------------------------------------------------------------------- 7. NUMERALS Prices, counters, timers and progress values must line up in columns and must not jitter as digits change. Tabular figures fix both. Latin digits are used for numbers because the site's prices, versions and IDs are already Latin — mixing numeral systems looks accidental. -------------------------------------------------------------------------- */ .prdx-num, .price, [class*='price'], .count, [class*='count'], .timer, [class*='timer'], .progress-value, time, td:has(> .prdx-num) { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* -------------------------------------------------------------------------- 8. RTL / LTR ISOLATION The requirement was explicit: the product is Persian-first, but technical values stay LTR. Without isolation, "ERR-7F92C5" or an IP address renders with its parts reordered when embedded in Persian text. Usage: ERR-7F92C5 -------------------------------------------------------------------------- */ .prdx-ltr, .ltr, code, kbd, samp, pre, [dir='ltr'] { direction: ltr; unicode-bidi: isolate; /* keeps surrounding Persian intact */ font-family: var(--prdx-font-mono) !important; font-size: 0.9em; /* mono runs large next to Persian */ letter-spacing: 0.01em; /* safe: this is Latin, not Persian */ } /* Inline technical values inside a Persian sentence. */ .prdx-technical { direction: ltr; unicode-bidi: isolate; font-family: var(--prdx-font-mono) !important; font-size: 0.92em; white-space: nowrap; } /* Error codes deserve to be noticed and copied accurately. */ .prdx-error-code { direction: ltr; unicode-bidi: isolate; font-family: var(--prdx-font-mono) !important; font-weight: var(--prdx-weight-semibold); letter-spacing: 0.04em; user-select: all; /* one click selects the whole code */ } pre { direction: ltr; text-align: left; line-height: var(--prdx-leading-normal); overflow-x: auto; } /* Email addresses and URLs read left-to-right even in Persian paragraphs. */ a[href^='mailto:'], a[href^='http'], .prdx-email, .prdx-url { unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 9. TABLES -------------------------------------------------------------------------- */ th { font-weight: var(--prdx-weight-semibold); font-size: var(--prdx-text-sm); letter-spacing: 0 !important; } td { font-size: var(--prdx-text-sm); line-height: var(--prdx-leading-normal); } /* -------------------------------------------------------------------------- 10. ACCESSIBILITY -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Respect the reader, not the layout: never let a heading become unreadable. */ @media (max-width: 480px) { h1 { font-size: var(--prdx-text-2xl); } h2 { font-size: var(--prdx-text-xl); } } /* -------------------------------------------------------------------------- 11. PRINT -------------------------------------------------------------------------- */ @media print { body { font-size: 11pt; line-height: 1.6; color: #000; background: #fff; } h1, h2, h3 { page-break-after: avoid; } p { orphans: 3; widows: 3; } }