/* ========================================================= ADI YOGPEETH — TYPOGRAPHY SYSTEM File: assets/css/typography.css Version: 1.0 ========================================================= */ /* ========================================================= 01. FONT FACE ========================================================= */ /* Fonts are loaded externally in the HTML . We will use: Display: Cormorant Garamond Body/UI: Manrope Local font files can be added later if we decide to self-host the fonts for performance/privacy. */ /* ========================================================= 02. BODY TYPOGRAPHY ========================================================= */ body { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--tracking-normal); color: var(--color-body); } /* ========================================================= 03. HEADINGS — GLOBAL FOUNDATION ========================================================= */ h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-family: var(--font-display); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } /* ========================================================= 04. H1 ========================================================= */ h1 { font-size: var(--text-h1); line-height: 0.98; font-weight: var(--font-weight-medium); } /* ========================================================= 05. H2 ========================================================= */ h2 { font-size: var(--text-h2); line-height: 1.02; font-weight: var(--font-weight-medium); } /* ========================================================= 06. H3 ========================================================= */ h3 { font-size: var(--text-h3); line-height: 1.12; font-weight: var(--font-weight-medium); } /* ========================================================= 07. H4 ========================================================= */ h4 { font-size: var(--text-h4); line-height: 1.2; font-weight: var(--font-weight-medium); } /* ========================================================= 08. H5 ========================================================= */ h5 { font-size: var(--text-h5); line-height: 1.3; font-weight: var(--font-weight-semibold); } /* ========================================================= 09. H6 ========================================================= */ h6 { font-size: var(--text-h6); line-height: 1.35; font-family: var(--font-display); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); } /* ========================================================= 10. DISPLAY TYPOGRAPHY ========================================================= */ .display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: var(--font-weight-medium); line-height: 0.92; letter-spacing: var(--tracking-tighter); color: var(--color-heading); text-wrap: balance; } .display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: var(--font-weight-medium); line-height: 0.94; letter-spacing: var(--tracking-tighter); color: var(--color-heading); text-wrap: balance; } .display-md { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: var(--font-weight-medium); line-height: 0.98; letter-spacing: var(--tracking-tight); color: var(--color-heading); text-wrap: balance; } .display-sm { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--color-heading); text-wrap: balance; } /* ========================================================= 11. BODY TEXT ========================================================= */ .text-xl { font-size: var(--text-body-xl); line-height: var(--line-height-relaxed); } .text-lg { font-size: var(--text-body-lg); line-height: var(--line-height-relaxed); } .text-base { font-size: var(--text-body); line-height: var(--line-height-relaxed); } .text-sm { font-size: var(--text-body-sm); line-height: var(--line-height-normal); } .text-xs { font-size: var(--text-body-xs); line-height: var(--line-height-normal); } /* ========================================================= 12. LEAD / INTRODUCTORY TEXT ========================================================= */ .text-lead { max-width: 720px; font-size: clamp( 1.125rem, 1.5vw, 1.3125rem ); line-height: 1.7; color: var(--color-text-secondary); } /* ========================================================= 13. EYEBROW / SECTION LABEL ========================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-forest); } /* Small decorative line before eyebrow */ .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background-color: currentColor; flex-shrink: 0; } /* ========================================================= 14. EYEBROW WITHOUT DECORATION ========================================================= */ .eyebrow--plain::before { display: none; } /* ========================================================= 15. EYEBROW VARIATIONS ========================================================= */ .eyebrow--terracotta { color: var(--color-terracotta); } .eyebrow--sage { color: var(--color-sage-dark); } .eyebrow--gold { color: var(--color-gold); } /* ========================================================= 16. DARK SECTION TYPOGRAPHY ========================================================= */ .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5 { color: var(--color-dark-heading); } .section--dark .eyebrow { color: var(--color-gold-light); } .section--dark .text-lead, .section--dark .text-xl, .section--dark .text-lg { color: var(--color-dark-body); } /* ========================================================= 17. HERO TYPOGRAPHY ========================================================= */ .hero-title { max-width: 950px; font-family: var(--font-display); font-size: clamp( 3.25rem, 7vw, 6.5rem ); font-weight: var(--font-weight-medium); line-height: 0.92; letter-spacing: -0.035em; color: var(--color-white); text-wrap: balance; } .hero-subtitle { max-width: 650px; margin-top: var(--space-6); font-family: var(--font-body); font-size: clamp( 1.0625rem, 1.5vw, 1.3125rem ); font-weight: var(--font-weight-regular); line-height: 1.65; color: rgba(255, 255, 255, 0.86); } /* ========================================================= 18. SECTION HEADING SYSTEM ========================================================= */ .section-heading { max-width: 780px; } .section-heading__title { margin: 0; } .section-heading__text { max-width: 680px; margin-top: var(--space-6); font-size: var(--text-body-lg); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); } /* ========================================================= 19. CENTERED SECTION HEADING ========================================================= */ .section-heading--center { margin-inline: auto; text-align: center; } .section-heading--center .section-heading__text { margin-inline: auto; } /* ========================================================= 20. QUOTE ========================================================= */ .quote { font-family: var(--font-display); font-size: clamp( 1.75rem, 3vw, 2.75rem ); font-weight: var(--font-weight-medium); line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--color-forest); } .quote--large { font-size: clamp( 2.25rem, 4vw, 3.75rem ); line-height: 1.05; } .quote--dark { color: var(--color-ivory); } /* ========================================================= 21. META / INFORMATION TEXT ========================================================= */ .meta { font-family: var(--font-body); font-size: var(--text-body-xs); font-weight: var(--font-weight-medium); line-height: 1.4; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); } .meta--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* ========================================================= 22. LABEL ========================================================= */ .label { display: block; margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--color-charcoal); } /* ========================================================= 23. FORM HELPER TEXT ========================================================= */ .helper-text { margin-top: var(--space-2); font-size: var(--text-body-xs); line-height: 1.5; color: var(--color-text-muted); } /* ========================================================= 24. LINK TEXT ========================================================= */ .text-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-forest); text-decoration: none; } .text-link::after { content: "→"; display: inline-block; transition: transform var(--duration-normal) var(--ease-smooth); } .text-link:hover::after { transform: translateX(4px); } /* ========================================================= 25. TEXT COLOR UTILITIES ========================================================= */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-light { color: var(--color-text-light); } .text-forest { color: var(--color-forest); } .text-terracotta { color: var(--color-terracotta); } .text-gold { color: var(--color-gold); } .text-white { color: var(--color-white); } /* ========================================================= 26. FONT FAMILY UTILITIES ========================================================= */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } /* ========================================================= 27. FONT WEIGHT UTILITIES ========================================================= */ .font-light { font-weight: var(--font-weight-light); } .font-regular { font-weight: var(--font-weight-regular); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* ========================================================= 28. TEXT TRANSFORMATION ========================================================= */ .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* ========================================================= 29. LETTER SPACING UTILITIES ========================================================= */ .tracking-tight { letter-spacing: var(--tracking-tight); } .tracking-normal { letter-spacing: var(--tracking-normal); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } /* ========================================================= 30. TEXT WRAPPING ========================================================= */ .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } /* ========================================================= 31. RESPONSIVE TYPOGRAPHY ========================================================= */ @media (max-width: 767px) { h1 { font-size: var(--text-h1-mobile); line-height: 1; } h2 { font-size: var(--text-h2-mobile); line-height: 1.04; } h3 { font-size: var(--text-h3-mobile); line-height: 1.12; } h4 { font-size: var(--text-h4-mobile); line-height: 1.2; } h5 { font-size: var(--text-h5-mobile); line-height: 1.3; } h6 { font-size: var(--text-h6-mobile); line-height: 1.35; } body { font-size: var(--text-body-mobile); } .hero-title { font-size: clamp( 2.75rem, 11vw, 4rem ); line-height: 0.96; } .hero-subtitle { font-size: 1.0625rem; line-height: 1.65; } .section-heading__text { margin-top: var(--space-5); font-size: var(--text-body); } .eyebrow { margin-bottom: var(--space-4); font-size: 0.75rem; letter-spacing: 0.11em; } .quote { font-size: clamp( 1.625rem, 7vw, 2.25rem ); } .quote--large { font-size: clamp( 2rem, 9vw, 3rem ); } } /* ========================================================= 32. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hero-title { font-size: var(--text-h1-mobile); } .eyebrow { gap: 8px; } .eyebrow::before { width: 20px; } } /* ========================================================= 33. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .text-link::after { transition: none; } } /* ========================================================= END OF TYPOGRAPHY ========================================================= */