/** * GDC Typography System * * Font loading, type scale, and heading hierarchy. * Manrope variable font with system fallbacks. * Conditional loading for Arabic (IBM Plex Sans Arabic) and Thai (Noto Sans Thai). * * @package GDC * @since 1.0.0 */ /* ========================================================== @FONT-FACE — Manrope Variable Font ========================================================== */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-variable.woff2') format('woff2-variations'), url('../fonts/manrope-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Static fallbacks for browsers without variable font support */ @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================== @FONT-FACE — Conditional Language Fonts Loaded via JS when matching lang detected on . Defined here for the CSS cascade; files only fetched if the unicode-range matches content on the page. ========================================================== */ @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('../fonts/ibm-plex-sans-arabic-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/noto-sans-thai-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } /* ========================================================== SYSTEM FALLBACK STACK WITH SIZE-ADJUST Minimizes CLS when Manrope swaps in. ========================================================== */ @font-face { font-family: 'Manrope Fallback'; src: local('-apple-system'), local('BlinkMacSystemFont'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } /* ========================================================== FONT FAMILY CUSTOM PROPERTIES ========================================================== */ :root { --gdc-font-sans-fallback: 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; --gdc-font-mono: 'Monaco', 'Consolas', 'Courier New', monospace; } /* ========================================================== TYPE SCALE — 9-tier, Major Third (1.250) ratio ========================================================== */ :root { --gdc-text-xs: 0.75rem; /* 12px */ --gdc-text-sm: 0.875rem; /* 14px */ --gdc-text-base: 1rem; /* 16px */ --gdc-text-lg: 1.125rem; /* 18px */ --gdc-text-xl: 1.25rem; /* 20px */ --gdc-text-2xl: 1.5rem; /* 24px */ --gdc-text-3xl: 1.75rem; /* 28px */ --gdc-text-4xl: 2.5rem; /* 40px */ --gdc-text-5xl: 4.5rem; /* 72px */ } /* ========================================================== LINE HEIGHT TOKENS ========================================================== */ :root { --gdc-leading-tight: 1.2; --gdc-leading-normal: 1.5; --gdc-leading-relaxed: 1.75; } /* ========================================================== LETTER SPACING TOKENS ========================================================== */ :root { --gdc-tracking-tight: -0.5px; --gdc-tracking-normal: 0; --gdc-tracking-wide: 1px; } /* ========================================================== BODY TEXT DEFAULTS ========================================================== */ body { font-family: var(--gdc-font-sans, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: var(--gdc-text-base); font-weight: 400; line-height: var(--gdc-leading-normal); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Before Manrope loads, use the CLS-optimized fallback */ body:not(.fonts-loaded) { font-family: var(--gdc-font-sans-fallback); } /* ========================================================== HEADING HIERARCHY — Responsive sizing ========================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--gdc-font-sans, 'Manrope', sans-serif); line-height: var(--gdc-leading-tight); text-wrap: balance; margin: 0; } /* Font weights: 700 for h1-h3, 600 for h4-h6 */ h1, h2, h3 { font-weight: var(--gdc-font-bold, 700); } h4, h5, h6 { font-weight: var(--gdc-font-semibold, 600); } /* --- Mobile-first sizes (base) --- */ h1 { font-size: var(--gdc-text-3xl); } /* 28px */ h2 { font-size: var(--gdc-text-2xl); } /* 24px */ h3 { font-size: var(--gdc-text-xl); } /* 20px */ h4 { font-size: var(--gdc-text-2xl); } /* 24px */ h5 { font-size: var(--gdc-text-xl); } /* 20px */ h6 { font-size: var(--gdc-text-lg); } /* 18px */ /* --- Tablet (768px) --- */ @media (min-width: 768px) { h1 { font-size: var(--gdc-text-4xl); } /* 40px */ h2 { font-size: var(--gdc-text-3xl); } /* 28px */ h3 { font-size: var(--gdc-text-2xl); } /* 24px */ } /* --- Desktop (1024px) --- */ @media (min-width: 1024px) { h1 { font-size: var(--gdc-text-5xl); } /* 72px */ h2 { font-size: var(--gdc-text-4xl); } /* 40px */ h3 { font-size: var(--gdc-text-3xl); } /* 28px */ } /* ========================================================== COMMON ELEMENT TYPOGRAPHY ========================================================== */ p, span { font-size: var(--gdc-text-base); line-height: var(--gdc-leading-normal); } small { font-size: var(--gdc-text-sm); } strong, b { font-weight: 600; } em, i { font-style: italic; } code, pre { font-family: var(--gdc-font-mono); font-size: var(--gdc-text-sm); } pre { line-height: var(--gdc-leading-relaxed); } /* ========================================================== RTL / LANGUAGE-SPECIFIC OVERRIDES ========================================================== */ html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { font-family: 'IBM Plex Sans Arabic', var(--gdc-font-sans-fallback); } html[lang="th"] body, html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6 { font-family: 'Noto Sans Thai', var(--gdc-font-sans-fallback); }