/* ============================================================================= * Navbar i18n Typography — Arabic & English * ----------------------------------------------------------------------------- * This file separates navbar font-family, font-size, font-weight, and * letter-spacing into per-language sections so you can tune each language * independently without touching the main layout in custom.css / style.css. * * HOW TO USE: * - Adjust the CSS variables in :root below to change fonts/sizes globally. * - Or edit the individual rules in sections [A] and [B] for finer control. * - This file is loaded AFTER custom.css so it wins the cascade. * * ACTIVATION: * - English is the default (body without .ar class). * - Arabic activates when has the .ar class (set by the i18n script). * ===========================================================================*/ /* ---------- Design Tokens (easy to change) ---------- */ :root { /* ── English navbar fonts ── */ --nav-font-en: 'almarai', 'Mulish', 'Open Sans', sans-serif; --nav-font-en-heading: 'Prata', 'Georgia', serif; /* Desktop (≥ 1100px) */ --nav-fs-en: .75rem; /* ~12px — refined luxury uppercase */ --nav-fw-en: 500; --nav-ls-en: .08em; /* letter-spacing */ /* Mobile drawer (< 1100px) */ --nav-fs-en-mobile: 14px; --nav-fw-en-mobile: 400; --nav-ls-en-mobile: .04em; /* ── Arabic navbar fonts ── */ --nav-font-ar: 'IBM Plex Sans Arabic', 'Mulish', system-ui, sans-serif; --nav-font-ar-heading: 'Amiri', 'IBM Plex Sans Arabic', serif; /* Desktop (≥ 1100px) */ --nav-fs-ar: 1.1rem; /* Arabic glyphs need more room */ --nav-fw-ar: 600; --nav-ls-ar: 0.02em; /* Mobile drawer (< 1100px) */ --nav-fs-ar-mobile: 1.25rem; /* Larger for Arabic readability */ --nav-fw-ar-mobile: 500; --nav-ls-ar-mobile: 0; /* ── Language toggle pill ── */ --nav-lang-fs-en: .7rem; --nav-lang-fw-en: 800; --nav-lang-fs-ar: .95rem; --nav-lang-fw-ar: 700; /* ── Submenu (dropdown) ── */ --nav-sub-fs-en: .85rem; --nav-sub-fw-en: 500; --nav-sub-fs-ar: 1rem; --nav-sub-fw-ar: 500; } /* ============================================================================= * [A] ENGLISH — body:not(.ar) * Active when the page language is English (default state). * ===========================================================================*/ /* --- A.1 Mobile / Tablet drawer (< 1100px) --- */ body:not(.ar) nav#navbar ul li a, body:not(.ar) nav#navbar ul li span { font-family: var(--nav-font-en); font-size: var(--nav-fs-en-mobile); font-weight: var(--nav-fw-en-mobile); letter-spacing: var(--nav-ls-en-mobile); } /* --- A.2 Desktop horizontal bar (≥ 1100px) --- */ @media (min-width: 1100px) { body:not(.ar) nav#navbar>ul:not(.lang):not(.secondary)>li>a, body:not(.ar) nav#navbar>ul:not(.lang):not(.secondary)>li>span { font-family: var(--nav-font-en); font-size: var(--nav-fs-en); font-weight: var(--nav-fw-en); letter-spacing: var(--nav-ls-en); text-transform: uppercase; } /* Language toggle pill */ body:not(.ar) nav#navbar ul.lang li a { font-family: var(--nav-font-en); font-size: var(--nav-lang-fs-en); font-weight: var(--nav-lang-fw-en); } /* Submenu (dropdown) links */ body:not(.ar) nav#navbar>ul li.has-submenu ul.submenu li a { font-family: var(--nav-font-en); font-size: var(--nav-sub-fs-en); font-weight: var(--nav-sub-fw-en); text-transform: capitalize; } /* Tight screens (1100–1280px) */ @media (max-width: 1280px) { body:not(.ar) nav#navbar>ul:not(.lang):not(.secondary)>li>a, body:not(.ar) nav#navbar>ul:not(.lang):not(.secondary)>li>span { letter-spacing: .06em; } } } /* ============================================================================= * [B] ARABIC — body.ar * Active when the i18n script sets body.ar + dir="rtl". * ===========================================================================*/ /* --- B.1 Mobile / Tablet drawer (< 1100px) --- */ body.ar nav#navbar ul li a, body.ar nav#navbar ul li span { font-family: var(--nav-font-ar); font-size: var(--nav-fs-ar-mobile); font-weight: var(--nav-fw-ar-mobile); letter-spacing: var(--nav-ls-ar-mobile); } /* Arabic headings in the drawer (if any) */ body.ar nav#navbar ul li a h1, body.ar nav#navbar ul li a h2, body.ar nav#navbar ul li a h3, body.ar nav#navbar ul li a h4 { font-family: var(--nav-font-ar-heading); } /* --- B.2 Desktop horizontal bar (≥ 1100px) --- */ @media (min-width: 1100px) { body.ar nav#navbar>ul:not(.lang):not(.secondary)>li>a, body.ar nav#navbar>ul:not(.lang):not(.secondary)>li>span { font-family: var(--nav-font-ar); font-size: var(--nav-fs-ar); font-weight: var(--nav-fw-ar); letter-spacing: var(--nav-ls-ar); text-transform: none; /* Arabic doesn't use uppercase */ } /* Language toggle pill */ body.ar nav#navbar ul.lang li a { font-family: var(--nav-font-ar); font-size: var(--nav-lang-fs-ar); font-weight: var(--nav-lang-fw-ar); } /* Submenu (dropdown) links */ body.ar nav#navbar>ul li.has-submenu ul.submenu li a { font-family: var(--nav-font-ar); font-size: var(--nav-sub-fs-ar); font-weight: var(--nav-sub-fw-ar); text-transform: none; } }