/* ===================================================================== SNU typography system Single source of truth for font families, sizes and weights. Loaded LAST (after style.css and responsive.css), so these rules win. Families Noto Serif Display website name, hero, page titles (H1), section headings Noto Serif H2–H5, news / event / card / sidebar / footer headings DM Serif Text quotes and testimonials Lato body text and all interface elements Sizes are fluid: the first value applies at 375 px wide, the last at 1440 px and above, scaling linearly in between (clamp()). Lato has no 500 weight: elements specified at 500 use 400, the closest available weight. ===================================================================== */ :root { --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-serif: "Noto Serif", Georgia, "Times New Roman", serif; --font-display: "Noto Serif Display", "Noto Serif", Georgia, serif; --font-quote: "DM Serif Text", "Noto Serif", Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --fs-hero: clamp(3rem, 2.648rem + 1.502vw, 4rem); /* 48–64 hero heading */ --fs-h1: clamp(2.5rem, 2.324rem + 0.751vw, 3rem); /* 40–48 page title */ --fs-section: clamp(2rem, 1.824rem + 0.751vw, 2.5rem); /* 32–40 section heading */ --fs-h2: clamp(2rem, 1.912rem + 0.376vw, 2.25rem); /* 32–36 */ --fs-h3: clamp(1.625rem, 1.581rem + 0.188vw, 1.75rem); /* 26–28 */ --fs-h4: clamp(1.375rem, 1.331rem + 0.188vw, 1.5rem); /* 22–24 */ --fs-h5: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18–20 */ --fs-h6: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16–18 */ --fs-brand: clamp(1.5rem, 1.324rem + 0.751vw, 2rem); /* 24–32 website name */ --fs-news-title: clamp(1.5rem, 1.324rem + 0.751vw, 2rem); /* 24–32 news / blog title */ --fs-event: clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem); /* 22–26 event title */ --fs-quote: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem); /* 22–28 quotes */ --fs-card: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20–24 card / news card heading */ --fs-hero-sub: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20–24 hero subtitle */ --fs-intro: clamp(1.25rem, 1.206rem + 0.188vw, 1.375rem); /* 20–22 introductory paragraph */ --fs-sidebar-h: clamp(1.25rem, 1.206rem + 0.188vw, 1.375rem);/* 20–22 sidebar heading */ --fs-section-sub: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18–20 section subtitle */ --fs-footer-h: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18–20 footer heading */ --fs-body: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16–18 body text */ --fs-ui-15-16: clamp(0.9375rem, 0.9155rem + 0.094vw, 1rem); /* 15–16 buttons, excerpts, card text, labels */ --fs-ui-14-16: clamp(0.875rem, 0.831rem + 0.188vw, 1rem); /* 14–16 event meta, table body */ --fs-ui-14-15: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem); /* 14–15 footer navigation */ --fs-ui-13-14: clamp(0.8125rem, 0.79rem + 0.094vw, 0.875rem); /* 13–14 top bar, dates, breadcrumbs, captions */ --fs-small: clamp(0.75rem, 0.706rem + 0.188vw, 0.875rem); /* 12–14 small text */ } /* ---------- base ---------- */ body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; } h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 700; } h1 { font-family: var(--font-display); font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 700; } code, kbd, pre, samp { font-family: var(--font-mono); } small, .small, .small-note, .source-note, .stat-note, .stats-source { font-size: var(--fs-small); font-weight: 400; } /* ---------- header ---------- */ .brand-name { font-family: var(--font-display); font-size: var(--fs-brand); font-weight: 700; line-height: 1.1; } .brand-sub { font-family: var(--font-sans); font-size: var(--fs-ui-13-14); font-weight: 400; letter-spacing: .02em; text-transform: none; } .topbar, .topbar a, .topbar a.topbar-apply { font-family: var(--font-sans); font-size: var(--fs-ui-13-14); font-weight: 400; } .nav-link { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; } .mega li a, .dropdown li a { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 400; } /* spec 500 */ .mega-title { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 400; } /* sub-dropdown level */ .m-link { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; } /* spec 500 */ .m-sub a { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 400; } .mega-feature-body { font-size: var(--fs-ui-15-16); } .mega-feature-body strong { font-family: var(--font-serif); font-size: var(--fs-card); font-weight: 700; } .search-label { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; } .brand-mini { font-family: var(--font-display); font-weight: 700; } /* ---------- hero ---------- */ .hero-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; } .hero-text { font-family: var(--font-sans); font-size: var(--fs-hero-sub); font-weight: 400; } /* ---------- page and section headings ---------- */ .page-title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; } .page-lead, .section-lead { font-family: var(--font-sans); font-size: var(--fs-section-sub); font-weight: 400; } .section-title, .cta-title { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 700; } .block-title, .prose h2, .leader-name-lg { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700; } .prose h3, .sub-title, .contact-form h2 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; } .prose h4 { font-size: var(--fs-h4); } .prose h5 { font-size: var(--fs-h5); } .lead-text { font-family: var(--font-sans); font-size: var(--fs-intro); font-weight: 400; } .msg-greeting { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 700; } .prose, .article-body { font-size: var(--fs-body); } /* ---------- news ---------- */ .article-title, .news-feature-title { font-family: var(--font-serif); font-size: var(--fs-news-title); font-weight: 700; } .news-card-title { font-family: var(--font-serif); font-size: var(--fs-card); font-weight: 700; } .news-card-excerpt, .news-feature p { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 400; } .meta, .meta time, .related-list time, .annc-strip time, .result-meta { font-family: var(--font-sans); font-size: var(--fs-ui-13-14); font-weight: 400; } /* ---------- events ---------- */ .event-card-title { font-family: var(--font-serif); font-size: var(--fs-event); font-weight: 700; } .event-meta, .project-period { font-family: var(--font-sans); font-size: var(--fs-ui-14-16); font-weight: 400; } .date-badge .d { font-family: var(--font-serif); font-weight: 700; } .date-badge .m, .date-badge .y, .event-status { font-size: var(--fs-small); } /* ---------- cards ---------- */ .faculty-card-title, .info-card h3, .goal-card h3, .vm-card h3, .vm-card h2, .research-item h3, .life-body strong, .campus-body strong, .leader-name, .program-card strong, .program-row h3, .centre-card strong, .area-card h3, .dept-item h3, .dept-block h2, .req-card h2, .contact-card h2, .project-card h2, .notice-item h3, .country-group h3, .num-list h3, .link-cards strong, .portal-tile strong, .grad-banner strong, .dean-name, .annc-title, .sitemap-group h2 { font-family: var(--font-serif); font-size: var(--fs-card); font-weight: 700; } .faculty-card-text, .info-card p, .goal-card p, .vm-card p, .research-item p, .life-body, .campus-body, .leader-card p, .program-card, .program-row p, .centre-card .muted, .dept-item p, .notice-item p, .num-list p, .link-cards a, .portal-tile, .grad-banner > span:nth-child(2), .contact-card p, .project-card p, .country-group ul, .member-grid li { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 400; } .member-grid li { font-weight: 700; } .quick-tile strong { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; } .quick-tile small { font-size: var(--fs-ui-13-14); } /* ---------- display numbers (statistics, facts, timeline) ---------- */ .stat-value, .about-badge strong, .fact strong, .goal-num, .nf-code { font-family: var(--font-display); font-weight: 700; } .tl-year, .year-grid span, .avatar::before { font-family: var(--font-serif); font-weight: 700; } /* ---------- buttons, links, breadcrumbs ---------- */ .btn, .btn-sm { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 700; } .link-arrow { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 700; } .breadcrumb ol { font-family: var(--font-sans); font-size: var(--fs-ui-13-14); font-weight: 400; } .pagination button { font-size: var(--fs-ui-15-16); } /* ---------- sidebar ---------- */ .side-nav-title, .side-card-title { font-family: var(--font-serif); font-size: var(--fs-sidebar-h); font-weight: 700; } .side-nav a, .related-list a { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 400; } .side-nav a[aria-current] { font-weight: 700; } /* ---------- footer ---------- */ .footer-title { font-family: var(--font-serif); font-size: var(--fs-footer-h); font-weight: 700; letter-spacing: 0; text-transform: none; } .site-footer, .site-footer ul a, .footer-contact, .footer-brand p { font-family: var(--font-sans); font-size: var(--fs-ui-14-15); font-weight: 400; } .footer-bottom-inner, .footer-bottom p { font-size: var(--fs-ui-13-14); font-weight: 400; } /* ---------- forms ---------- */ .field label { font-family: var(--font-sans); font-size: var(--fs-ui-15-16); font-weight: 400; } /* spec 500 */ .field input, .field select, .field textarea, .filter-bar input, .filter-bar select, .search-field input, .mobile-search input { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; } ::placeholder { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 400; } .acc-btn { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 700; } /* ---------- tables ---------- */ .data-table, .prose table { font-family: var(--font-sans); font-size: var(--fs-ui-14-16); font-weight: 400; } .data-table th, .prose th { font-size: var(--fs-ui-15-16); font-weight: 700; } /* ---------- captions ---------- */ .gallery-item figcaption, .lightbox figcaption, .article-figure figcaption, .prose figcaption { font-family: var(--font-sans); font-size: var(--fs-ui-13-14); font-weight: 400; } /* ---------- quotes ---------- */ .rector-strip blockquote p, .prose blockquote, .prose blockquote p { font-family: var(--font-quote); font-size: var(--fs-quote); font-weight: 400; line-height: 1.4; } /* ---------- small labels (kept bold for legibility at small size) ---------- */ .badge, .tag-pending, .lang-tag, .leader-role, .eyebrow, .kv-lg dt { font-size: var(--fs-small); } .lang-switch button { font-size: 0.75rem; } /* ---------- phone exceptions ---------- Below 480 px the minimum sizes of the specification do not fit a 320–479 px screen without breaking single words, so three elements step down. */ @media (max-width: 479.98px) { .brand-name { font-size: 1.25rem; } /* spec minimum 24px */ .hero-title { font-size: 2.5rem; } /* spec minimum 48px */ .page-title { font-size: 2.125rem; } /* spec minimum 40px */ } /* long words (e.g. 'Entrepreneurship', long Somali words) wrap instead of overflowing narrow cards */ h1, h2, h3, h4, h5, h6, .brand-name, .news-card-title, .event-card-title, .faculty-card-title, .centre-card strong, .program-card strong, .link-cards strong, .leader-name { overflow-wrap: break-word; hyphens: auto; } .centre-card > span:last-child, .faculty-card-body { min-width: 0; }