/* ========================================================================== typography.css — Best Treks Nepal Typography System Version: 1.0 | August 2026 Fonts loaded via preconnect + display=swap in HTML . Only required weights are imported to minimize render-blocking. ========================================================================== */ /* -------------------------------------------------------------------------- Base Typography -------------------------------------------------------------------------- */ body { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text); } /* -------------------------------------------------------------------------- Headings -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-primary); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); } h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); } h5 { font-size: var(--text-h5); font-weight: var(--weight-medium); } h6 { font-size: var(--text-h6); font-weight: var(--weight-medium); } /* -------------------------------------------------------------------------- Paragraphs -------------------------------------------------------------------------- */ p { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text); max-width: 70ch; /* Optimal reading line length */ } /* Paragraph that doesn't need max-width constraint (inside flex/grid) */ p.no-max { max-width: none; } /* Lead / intro paragraph */ .text-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-light); font-weight: var(--weight-regular); max-width: 65ch; } /* -------------------------------------------------------------------------- Body Text Variants -------------------------------------------------------------------------- */ .text-lg { font-size: var(--text-lg); } .text-md { font-size: var(--text-md); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } /* -------------------------------------------------------------------------- Font Weights -------------------------------------------------------------------------- */ .font-regular { font-weight: var(--weight-regular); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } /* -------------------------------------------------------------------------- Text Colors -------------------------------------------------------------------------- */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-accent { color: var(--color-accent); } .text-white { color: var(--color-white); } .text-muted { color: var(--color-text-muted); } .text-light { color: var(--color-text-light); } /* -------------------------------------------------------------------------- Text Alignment -------------------------------------------------------------------------- */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* -------------------------------------------------------------------------- Links -------------------------------------------------------------------------- */ a { color: var(--color-primary); transition: color var(--transition-fast); } a:hover { color: var(--color-accent); } /* Inline text link */ .link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--weight-medium); transition: color var(--transition-fast); } .link:hover { color: var(--color-accent-dark); } /* -------------------------------------------------------------------------- Section Headings (reusable component) -------------------------------------------------------------------------- */ .section-heading { margin-bottom: var(--space-6); } .section-heading__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-1); } .section-heading__title { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--color-primary); line-height: var(--leading-tight); margin-bottom: var(--space-2); } .section-heading__subtitle { font-size: var(--text-lg); color: var(--color-text-light); line-height: var(--leading-relaxed); max-width: 60ch; } /* Center-aligned section heading variant */ .section-heading--center { text-align: center; } .section-heading--center .section-heading__subtitle { margin-left: auto; margin-right: auto; } /* White variant (for dark backgrounds) */ .section-heading--white .section-heading__title, .section-heading--white .section-heading__subtitle { color: var(--color-white); } .section-heading--white .section-heading__eyebrow { color: var(--color-accent-light); } /* -------------------------------------------------------------------------- Lists -------------------------------------------------------------------------- */ .list-check { display: flex; flex-direction: column; gap: var(--space-1); } .list-check li { display: flex; align-items: flex-start; gap: var(--space-1); font-size: var(--text-md); color: var(--color-text); line-height: var(--leading-normal); } .list-check li::before { content: '✓'; flex-shrink: 0; margin-top: 2px; color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); } /* -------------------------------------------------------------------------- Blockquote -------------------------------------------------------------------------- */ blockquote { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-light); font-style: italic; font-size: var(--text-lg); line-height: var(--leading-relaxed); } /* -------------------------------------------------------------------------- Code -------------------------------------------------------------------------- */ code { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; background: var(--color-background-alt); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--color-primary-dark); }