/* ================================================================ fonts.css — Typography system for GoldRateToday Playfair Display (headings) + Inter (body) Include this file in EVERY page , before other CSS ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── CSS Font Variables ────────────────────────────────────── */ :root { --font-heading: 'Playfair Display', 'Georgia', serif; --font-body: 'Inter', 'Calibri', 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ── Base body font ────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Headings → Playfair Display ───────────────────────────── */ h1, h2, h3, h4, h5, h6, .section-heading, .city-hero-heading, .city-hero-name, .article-title, .post-title, .page-title, .blog-card-title, .news-card-title, .news-title, .city-section-heading, .content-section h2, .content-section h3, .faq-question h3, .logo-text, .footer-logo-text { font-family: var(--font-heading); } /* ── Body text classes → Inter ─────────────────────────────── */ p, li, td, th, label, input, textarea, select, button, .footer-col ul li a, .footer-desc, .nav-link, .dropdown-item, .pg-btn, .news-meta, .article-meta, .price-change, .price-timestamp, .location-badge, .tab, .gold-table td, .gold-table th, .rate-value, .chart-header-label, .city-hero-breadcrumb, .section-sub { font-family: var(--font-body); } /* ── Big price numbers — Inter (numbers render better in sans) */ .price-main, .rate-24k, .rate-22k, .rate-18k, .rate-number, .hero-rate-value { font-family: var(--font-body); font-feature-settings: "tnum"; /* tabular numbers */ font-variant-numeric: tabular-nums; } /* ── Playfair italic accent for gold-colored span text ────── */ .section-heading span, .logo-text span, .footer-logo-text span { font-style: italic; } /* ── Letter spacing refinements for Inter at small sizes ───── */ .chart-header-label, .news-cat, .gold-table thead th, .footer-col h4, .price-change { letter-spacing: 0.07em; } /* ── Playfair at large display sizes ───────────────────────── */ h1, .article-title, .post-title, .city-hero-name { letter-spacing: -0.02em; line-height: 1.2; } h2, .section-heading, .city-section-heading { letter-spacing: -0.01em; line-height: 1.3; } h3, .faq-question h3, .news-title, .news-card-title, .blog-card-title { letter-spacing: 0; line-height: 1.35; } /* ── Admin panel font override ─────────────────────────────── */ /* Only applies inside admin pages */ .admin-panel body, .admin-main, .admin-card-title, .admin-nav-link, .admin-table td, .admin-table th, .form-control, .btn { font-family: var(--font-body); } /* ── Responsive font scale ─────────────────────────────────── */ @media (max-width: 900px) { h1, .article-title, .post-title { font-size: clamp(22px, 5vw, 36px); } h2, .section-heading { font-size: clamp(18px, 4vw, 26px); } .city-hero-name { font-size: clamp(28px, 6vw, 48px); } }