14 lines
1.5 KiB
Markdown
14 lines
1.5 KiB
Markdown
|
---
|
||
|
|
name: EHSAN branding (ehsan.sa)
|
||
|
|
description: Font, currency symbol, and hero conventions for matching the official ehsan.sa look.
|
||
|
|
---
|
||
|
|
|
||
|
|
# Matching ehsan.sa
|
||
|
|
|
||
|
|
- **Font:** the POC uses `IBM Plex Sans Arabic` (Google Fonts) as the closest official-looking match. ehsan.sa's exact webfont could NOT be auto-detected — the live site blocks server-side access (Firecrawl returns ERR_TUNNEL_CONNECTION_FAILED, curl with a browser UA returns nothing, and the Wayback Machine has no snapshot). If the font ever needs to be exact, ask the user to read it from browser DevTools (Computed > font-family).
|
||
|
|
- **Currency = new Saudi Riyal symbol**, not the legacy `﷼` glyph and not the word "ريال". It is rendered by the `<Riyal />` component (`src/components/Riyal.tsx`) which masks a processed PNG (`src/assets/riyal.png`) with `mask-image` + `background-color: currentColor`, so it inherits the surrounding text color and font size. The symbol is decorative (`aria-hidden`) since the adjacent number conveys the value.
|
||
|
|
|
||
|
|
**Why:** the user explicitly flagged the wrong font, the wrong currency symbol, and a non-official hero. The riyal mask approach was chosen because font/Unicode support for the new symbol is unreliable; masking the user-provided glyph guarantees it matches their reference and recolors anywhere.
|
||
|
|
|
||
|
|
**How to apply:** put the amount number first, then `<Riyal />` (e.g. `{amount.toLocaleString()} <Riyal />`). The home hero should be a full-bleed green (`bg-primary`) banner with a badge, title/subtitle, and CTAs — not a gray search box.
|