/* * Typography * Botti Realty Inc */ /* ── Google Fonts ────────────────────────── */ /* Preconnect links are added in each HTML page's */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap'); /* ── Base ────────────────────────────────── */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: 1.6; color: var(--color-charcoal); font-weight: 400; } /* ── Headings ────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; color: var(--color-navy); line-height: 1.2; font-weight: 700; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } @media (max-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } } @media (max-width: 480px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } } /* ── Body Text ───────────────────────────── */ p { font-size: var(--text-base); line-height: 1.7; color: var(--color-charcoal); margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } /* ── Links ───────────────────────────────── */ a { color: var(--color-navy); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--color-gold); } /* ── Utility Text Classes ────────────────── */ .eyebrow { font-family: 'Inter', sans-serif; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-gold); display: block; margin-bottom: var(--space-3); } .signature { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--color-gold); font-size: var(--text-2xl); line-height: 1.3; display: block; margin-top: var(--space-4); } .lead { font-size: var(--text-lg); line-height: 1.75; color: var(--color-grey-mid); font-weight: 300; } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semi { font-weight: 600; } .font-bold { font-weight: 700; } .text-navy { color: var(--color-navy); } .text-gold { color: var(--color-gold); } .text-white { color: var(--color-white); } .text-grey { color: var(--color-grey-mid); } .text-charcoal { color: var(--color-charcoal); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.1em; } /* ── Section Titles ──────────────────────── */ .section-title { font-family: 'Playfair Display', Georgia, serif; font-size: var(--text-4xl); color: var(--color-navy); font-weight: 700; margin-bottom: var(--space-4); line-height: 1.2; } .section-title--white { color: var(--color-white); } .section-subtitle { font-size: var(--text-lg); color: var(--color-grey-mid); line-height: 1.7; max-width: 640px; } .section-subtitle--white { color: rgba(255, 255, 255, 0.8); } .section-header { margin-bottom: var(--space-12); } .section-header--centered { text-align: center; } .section-header--centered .section-subtitle { margin: 0 auto; } /* ── Dividers ────────────────────────────── */ .gold-rule { width: 60px; height: 3px; background: var(--color-gold); display: block; margin: var(--space-4) 0; } .gold-rule--centered { margin: var(--space-4) auto; }