/* * Typography System — AusInd Bridge Foundation * * Font pairing: * Headings → Plus Jakarta Sans (authoritative, geometric, professional) * Body/UI → Inter (clean, highly readable, neutral) * * The @import below is the single global font load for the entire site. * This file is included on every page, so no per-page font links are needed. * * Fluid type scale using CSS clamp() so every size smoothly * transitions between the mobile minimum and desktop maximum. * * Breakpoint anchors: * 320px (xs mobile) → minimum value * 1280px (desktop) → maximum value * * !important is required throughout because Tailwind CDN injects * its utility classes dynamically into after this file loads. */ /* ════════════════════════════════════════════════════════════════ GLOBAL FONT IMPORT — single source for the whole site Cormorant Garamond → headings (refined high-contrast serif, minimal & classy) DM Sans → body / UI text (clean geometric, professional) ════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,300;1,14..32,400&display=swap'); /* ════════════════════════════════════════════════════════════════ FONT VARIABLES ════════════════════════════════════════════════════════════════ */ :root { --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* ════════════════════════════════════════════════════════════════ GLOBAL APPLICATION — body text (Inter) NOTE: Using targeted selectors instead of body * to avoid breaking Font Awesome icon fonts. ════════════════════════════════════════════════════════════════ */ html, body { font-family: var(--font-body) !important; } /* Apply Inter to all common text-bearing elements */ p, a, span, li, td, th, caption, label, input, button, select, textarea, blockquote, figcaption, cite, small, nav, header, footer, main, section, article, aside, div:not([class*="fa"]):not([class*="svg"]) { font-family: var(--font-body) !important; } /* Headings use Plus Jakarta Sans */ h1, h2, h3, h4, h5, h6, .font-heading, [class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"] { font-family: var(--font-heading) !important; } /* Preserve Font Awesome icon rendering — never override icon fonts */ .fas, .far, .fab, .fal, .fad, .fa, .fa-solid, .fa-regular, .fa-brands, .fa-light, [class^="fa-"], [class*=" fa-"] { font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important; } /* ════════════════════════════════════════════════════════════════ ROOT — base font settings ════════════════════════════════════════════════════════════════ */ html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ════════════════════════════════════════════════════════════════ H1 — Hero / Page Titles Used once per page; the largest, most impactful text. Scale: 32px (mobile) → 64px (large desktop) ════════════════════════════════════════════════════════════════ */ main h1, section h1, .hero h1 { font-family: var(--font-heading) !important; font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; } /* ════════════════════════════════════════════════════════════════ H2 — Section / Area Headings Primary landmark titles within the page body. Scale: 28px (mobile) → 48px (large desktop) ════════════════════════════════════════════════════════════════ */ main h2, section h2 { font-family: var(--font-heading) !important; font-size: clamp(1.75rem, 3.5vw + 0.25rem, 3rem) !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* ════════════════════════════════════════════════════════════════ H3 — Card / Subsection Headings ════════════════════════════════════════════════════════════════ */ main h3, section h3 { font-family: var(--font-heading) !important; font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem) !important; line-height: 1.28 !important; font-weight: 600 !important; letter-spacing: -0.015em !important; } /* ════════════════════════════════════════════════════════════════ H4 — Detail / List Headings ════════════════════════════════════════════════════════════════ */ main h4, section h4 { font-family: var(--font-heading) !important; font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem) !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* ════════════════════════════════════════════════════════════════ H5 — Minor Labels / Eyebrow Text Scale: 14px (mobile) → 16px (desktop) ════════════════════════════════════════════════════════════════ */ main h5, section h5 { font-size: clamp(0.875rem, 0.75vw + 0.5rem, 1rem) !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } /* ════════════════════════════════════════════════════════════════ H6 — Smallest Structural Labels Scale: 13px (mobile) → 15px (desktop) ════════════════════════════════════════════════════════════════ */ main h6, section h6 { font-size: clamp(0.8125rem, 0.5vw + 0.5rem, 0.9375rem) !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* ════════════════════════════════════════════════════════════════ BODY / PARAGRAPH TEXT Ensures readable body copy across all screen sizes. Scale: 15px (mobile) → 16px (desktop) ════════════════════════════════════════════════════════════════ */ main p, section p { font-size: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem) !important; line-height: 1.7 !important; } /* ════════════════════════════════════════════════════════════════ TAILWIND UTILITY FLOOR VALUES Prevents Tailwind's text-sm / text-xs from becoming illegibly small on mobile when used for body content. ════════════════════════════════════════════════════════════════ */ /* text-sm used for body-level content: floor at 14px */ main .text-sm, section .text-sm { font-size: max(0.875rem, 14px) !important; line-height: 1.6 !important; } /* text-xs used for labels/captions: floor at 13px */ main .text-xs, section .text-xs { font-size: max(0.8125rem, 13px) !important; line-height: 1.5 !important; } /* ════════════════════════════════════════════════════════════════ CARD HEADING HELPERS These classes appear on h3 elements inside cards throughout the site (text-xl, text-2xl, text-lg). Override to H3 standard. ════════════════════════════════════════════════════════════════ */ main h3.text-xl, main h3.text-2xl, main h3.text-lg, section h3.text-xl, section h3.text-2xl, section h3.text-lg { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem) !important; } /* ════════════════════════════════════════════════════════════════ SECTION BADGE / EYEBROW LABELS Small all-caps labels above section headings (e.g. "ABOUT US") ════════════════════════════════════════════════════════════════ */ main .text-xs.font-semibold.uppercase, section .text-xs.font-semibold.uppercase, main .text-sm.font-semibold.uppercase, section .text-sm.font-semibold.uppercase { font-size: 0.75rem !important; letter-spacing: 0.12em !important; line-height: 1.5 !important; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE OVERRIDES Fine-tune the clamp scale at specific breakpoints. ════════════════════════════════════════════════════════════════ */ /* ── Mobile < 480px ─────────────────────────────────────────── */ @media (max-width: 479px) { main h1, section h1, .hero h1 { font-size: 2rem !important; /* 32px hard floor */ letter-spacing: -0.015em !important; } main h2, section h2 { font-size: 1.625rem !important; /* 26px hard floor */ } main h3, section h3, main h3.text-xl, main h3.text-2xl, main h3.text-lg, section h3.text-xl, section h3.text-2xl, section h3.text-lg { font-size: 1.125rem !important; /* 18px hard floor */ } main h4, section h4 { font-size: 0.9375rem !important; /* 15px */ } } /* ── Tablet 640px – 1023px ─────────────────────────────────── */ @media (min-width: 640px) and (max-width: 1023px) { main h1, section h1 { font-size: clamp(2.25rem, 5vw, 3rem) !important; } main h2, section h2 { font-size: clamp(1.875rem, 4vw, 2.5rem) !important; } main h3, section h3, main h3.text-xl, main h3.text-2xl, section h3.text-xl, section h3.text-2xl { font-size: 1.375rem !important; /* 22px */ } } /* ── Large desktop ≥ 1536px ────────────────────────────────── */ @media (min-width: 1536px) { main h1, section h1 { font-size: 4.5rem !important; /* 72px */ } main h2, section h2 { font-size: 3.25rem !important; /* 52px */ } main h3, section h3 { font-size: 1.625rem !important; /* 26px */ } main h4, section h4 { font-size: 1.125rem !important; /* 18px */ } }