/* ============================================================================= Font Definitions - Separate cacheable CSS for all fonts ============================================================================= */ /* Font Awesome Pro 6.6.0 - Variables and @font-face */ /*! * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) * Copyright 2024 Fonticons, Inc. */ :host, :root { --fa-style-family-classic: 'Font Awesome 6 Pro'; --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; } @font-face { font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/fa-regular-400.woff2) format('woff2'); } /* Figtree Variable Font */ @font-face { font-family: Figtree; font-display: swap; font-style: normal; font-weight: 300 900; src: url('/static/fonts/Figtree-Variable.woff2') format('woff2-variations'); /* Basic Latin + Latin-1 + Latin Extended + Vietnamese (incl. combining) */ unicode-range: U+0000-00FF, /* Basic Latin + Latin-1 Supplement */ U+0100-024F, /* Latin Extended-A/B */ U+1E00-1EFF, /* Latin Extended Additional (Vietnamese precomposed) */ U+0300-036F, /* Combining Diacritical Marks (safety for VI) */ U+20AB; /* ₫ Vietnamese Dong sign */ } /* Root font stack for Latin scripts */ :root { --ox-sans: 'Figtree', system-ui, ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Liberation Sans', Arial, sans-serif; } /* ============================================================================= Multilingual font families Use correct lang attributes in your markup: or on elements. For Arabic/Farsi, set dir="rtl" at the container or document level. ============================================================================= */ /* English, Spanish, Portuguese, Tagalog (Latin) */ :lang(en), :lang(es), :lang(pt), :lang(tl) { font-family: var(--ox-sans); } /* Vietnamese (Latin + extended diacritics) */ :lang(vi) { font-family: 'Figtree', system-ui, ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; } /* Russian (Cyrillic) */ :lang(ru) { font-family: system-ui, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; } /* Traditional Chinese (Taiwan, Hong Kong) */ :lang(zh-TW), :lang(zh-HK) { font-family: system-ui, 'PingFang TC', /* macOS / iOS */ 'Noto Sans CJK TC', /* common Noto install */ 'Microsoft JhengHei UI', /* Windows */ 'Microsoft JhengHei', 'Heiti TC', sans-serif; } /* Simplified Chinese (Mainland) */ :lang(zh-CN) { font-family: system-ui, 'PingFang SC', /* macOS / iOS */ 'Noto Sans CJK SC', /* common Noto install */ 'Microsoft YaHei UI', /* Windows */ 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; } /* Korean */ :lang(ko) { font-family: system-ui, 'Apple SD Gothic Neo', /* macOS / iOS */ 'Noto Sans CJK KR', /* common Noto install */ 'Malgun Gothic', /* Windows */ 'Nanum Gothic', sans-serif; } /* Arabic (rtl) */ :lang(ar) { font-family: system-ui, 'SF Arabic', /* Apple platforms (newer) */ 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', /* older Apple */ 'Dubai', /* common Gulf OEM */ 'Segoe UI', Tahoma, sans-serif; } /* Farsi / Persian (rtl) */ :lang(fa) { font-family: system-ui, 'SF Arabic', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', 'Dubai', 'Segoe UI', Tahoma, sans-serif; } /* Cambodian (Khmer) */ :lang(km) { font-family: system-ui, 'Noto Sans Khmer', 'Khmer Sangam MN', /* macOS / iOS */ 'Khmer UI', /* Windows (legacy) */ sans-serif; } /* Hmong Most Hmong on the web uses Latin (RPA), so the Latin stack is appropriate. If you specifically use Pahawh Hmong script, you'll need a dedicated font like "Noto Sans Pahawh Hmong" (not typically system-installed). */ :lang(hmn) { font-family: var(--ox-sans); } /* Apply base typography settings to the whole document */ html { text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variation-settings: 'wght' 550; scroll-behavior: smooth; font-family: var(--ox-sans); } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } body { font-weight: unset; background-color: var(--ox-color-base); color: var(--ox-color-base-content); font-size: var(--ox-text-base); line-height: var(--ox-text-base--line-height); } @view-transition { navigation: auto; } /* Utility class for flipping elements in RTL */ :root:dir(rtl) .ox-rtl-flip, [dir='rtl'] .ox-rtl-flip { transform: scaleX(-1); transform-origin: center; } /* ============================================================================= Font Awesome Icon Classes ============================================================================= */ .fa-regular, .far { font-weight: 400; } .fa-regular, .fa { font-family: 'Font Awesome 6 Pro'; font-weight: 400; }