/* ============================================================================
typography.css — TYPE SYSTEM
----------------------------------------------------------------------------
WHAT LIVES HERE
- Font family tokens (the only place a font name is written)
- The type scale: size / line-height / weight / letter-spacing per role
- Base element typography (h1-h6, p, strong, blockquote, cite)
HOW IT CONNECTS
assets/js/tailwind.config.js consumes these variables so utilities like
`font-display-lg` and `text-body-md` resolve to the tokens declared here.
Change a font ONCE below and it changes everywhere.
FONT LOADING
The tags for Google Fonts live in index.html . If you swap a
family, update both the and the --font-* token below.
========================================================================== */
:root {
/* ------------------------------------------------------------------
1. FONT FAMILIES
------------------------------------------------------------------ */
--font-serif: 'Playfair Display', serif; /* hero H1 */
--font-sans: 'Inter', sans-serif; /* body default, navbar */
--font-display: 'Noto Serif', serif; /* section headlines (display) */
--font-headline: 'Noto Serif', serif; /* sub-headlines */
--font-body: 'Plus Jakarta Sans', sans-serif; /* paragraphs & long copy */
--font-label: 'Plus Jakarta Sans', sans-serif; /* uppercase micro labels */
--font-icons: 'Material Symbols Outlined'; /* icon ligature font */
/* ------------------------------------------------------------------
2. TYPE SCALE — display-lg (biggest section headline)
Used by: Ecosystem, About, Roadmap, Newsletter, Team, Testimonial H2s
------------------------------------------------------------------ */
--font-size-display-lg: 64px;
--line-height-display-lg: 1.1;
--letter-spacing-display-lg: -0.02em;
--font-weight-display-lg: 400;
/* display-lg-mobile — the same role at small viewports, also reused as a
"large paragraph" size in Education & Culture and the Footer tagline. */
--font-size-display-lg-mobile: 40px;
--line-height-display-lg-mobile: 1.2;
--font-weight-display-lg-mobile: 400;
/* headline-md — card titles, philosophy items, FAQ questions */
--font-size-headline-md: 32px;
--line-height-headline-md: 1.3;
--font-weight-headline-md: 400;
/* body-lg — lead paragraphs */
--font-size-body-lg: 18px;
--line-height-body-lg: 1.6;
--font-weight-body-lg: 400;
/* body-md — default paragraph */
--font-size-body-md: 16px;
--line-height-body-md: 1.6;
--font-weight-body-md: 400;
/* label-caps — uppercase tracked micro-labels and buttons */
--font-size-label-caps: 12px;
--line-height-label-caps: 1;
--letter-spacing-label-caps: 0.1em;
--font-weight-label-caps: 700;
/* ------------------------------------------------------------------
3. HERO TYPE (plain CSS, not Tailwind — see main.css .hero h1)
------------------------------------------------------------------ */
--font-size-hero-h1: 5rem; /* desktop */
--font-size-hero-h1-mobile: 3.2rem; /* <= 1100px */
--line-height-hero-h1: 1.1;
--font-weight-hero-h1: 400;
--font-size-hero-p: 1rem;
--line-height-hero-p: 1.6;
--font-weight-hero-p: 300;
/* ------------------------------------------------------------------
4. NAVBAR TYPE
------------------------------------------------------------------ */
--font-size-nav-brand: 1.5rem;
--font-weight-nav-brand: 600;
--letter-spacing-nav-brand: 2px;
--font-size-nav-link: 0.88rem;
--font-weight-nav-link: 500;
--font-size-nav-actions: 0.85rem;
--font-size-btn-donate: 1rem;
--font-weight-btn-donate: 500;
--letter-spacing-btn-donate: 1px;
/* ------------------------------------------------------------------
5. MISC TYPE
------------------------------------------------------------------ */
--font-size-ticker-item: 0.9rem; /* marquee text item */
--font-size-whatsapp-bubble: 0.95rem; /* floating WhatsApp tooltip */
--font-size-whatsapp-bubble-mobile: 0.85rem;
--font-size-popup-close: 1.2rem; /* lightbox "x" */
}
/* ----------------------------------------------------------------------------
BASE ELEMENT TYPOGRAPHY
The font-family/colour is applied in reset.css; here we only describe
the roles so headings inherit sensible defaults before Tailwind utilities
override them per component.
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: inherit;
font-size: inherit;
}
/* Icon font helper — every `material-symbols-outlined` span in the markup. */
.material-symbols-outlined {
font-family: var(--font-icons);
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* Filled variant of the icon font — used by the testimonial star rating.
(Replaces the former inline `style="font-variation-settings:'FILL' 1"`.) */
.icon-filled {
font-variation-settings: 'FILL' 1;
}