/* ============================================================ TYPOGRAPHY — Andrew O'Bryan Wills & Estates Google Fonts import — place in HTML ; this comment is for Webflow @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap'); ============================================================ */ /* ------------------------------------------------------------ Body ------------------------------------------------------------ */ body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-relaxed); color: var(--color-text); background-color: var(--color-bg); } /* ------------------------------------------------------------ Headings — base styles ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-navy-dark); margin-bottom: 0.5em; } /* Heading scale — desktop */ 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); } /* Heading scale — mobile */ @media (max-width: 640px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base);} } /* ------------------------------------------------------------ Paragraph ------------------------------------------------------------ */ p { margin-bottom: 1em; line-height: var(--leading-relaxed); } p:last-child { margin-bottom: 0; } /* Constrain prose paragraphs */ .prose p, .prose-width p { max-width: var(--max-width-prose); } /* ------------------------------------------------------------ Links ------------------------------------------------------------ */ a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); text-decoration: underline; } /* ------------------------------------------------------------ Bold / strong ------------------------------------------------------------ */ strong, b { font-weight: var(--font-weight-semi); } /* ------------------------------------------------------------ Italic / emphasis ------------------------------------------------------------ */ em, i { font-style: italic; } /* ------------------------------------------------------------ Blockquote ------------------------------------------------------------ */ blockquote { font-family: var(--font-serif); font-style: italic; font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--color-navy-light); border-left: 3px solid var(--color-gold); padding-left: var(--space-6); margin: var(--space-8) 0; } blockquote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: var(--text-sm); color: var(--color-gray-500); margin-top: var(--space-3); } /* ------------------------------------------------------------ Code / pre ------------------------------------------------------------ */ code { font-family: var(--font-mono); font-size: 0.875em; background-color: var(--color-gray-100); color: var(--color-navy-dark); padding: 0.125em 0.375em; border-radius: var(--border-radius); } pre { font-family: var(--font-mono); font-size: var(--text-sm); background-color: var(--color-gray-100); color: var(--color-gray-900); padding: var(--space-6); border-radius: var(--border-radius-md); overflow-x: auto; margin: var(--space-6) 0; } pre code { background: none; padding: 0; font-size: inherit; } /* ------------------------------------------------------------ Lead paragraph ------------------------------------------------------------ */ .lead { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--font-weight-normal); line-height: var(--leading-relaxed); color: var(--color-gray-700); } @media (max-width: 640px) { .lead { font-size: var(--text-lg); } } /* ------------------------------------------------------------ Eyebrow label ------------------------------------------------------------ */ .eyebrow { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-semi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-3); } @media (min-width: 640px) { .eyebrow { font-size: var(--text-sm); } } /* ------------------------------------------------------------ Prose — article / long-form body content ------------------------------------------------------------ */ .prose { max-width: var(--max-width-prose); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-gray-700); } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--color-navy-dark); margin-top: 1.75em; margin-bottom: 0.6em; line-height: var(--leading-snug); } .prose h2 { font-size: var(--text-2xl); } .prose h3 { font-size: var(--text-xl); } .prose h4 { font-size: var(--text-lg); } .prose p { margin-bottom: 1.25em; } .prose ul, .prose ol { margin: var(--space-4) 0 var(--space-6) var(--space-6); } .prose li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); } .prose ul li { list-style-type: disc; } .prose ol li { list-style-type: decimal; } .prose blockquote { font-size: var(--text-lg); margin: var(--space-8) 0; } .prose a { color: var(--color-navy-light); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--color-navy); } .prose hr { margin: var(--space-10) 0; border-top-color: var(--color-gray-200); } .prose strong { color: var(--color-gray-900); } .prose img { border-radius: var(--border-radius-md); margin: var(--space-8) 0; } .prose figure { margin: var(--space-8) 0; } .prose figcaption { font-size: var(--text-sm); color: var(--color-gray-500); text-align: center; margin-top: var(--space-2); } /* ------------------------------------------------------------ Typography utility classes ------------------------------------------------------------ */ .text-serif { font-family: var(--font-serif) !important; } .text-sans { font-family: var(--font-sans) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-inverse { color: var(--color-text-inverse) !important; } .text-navy { color: var(--color-navy) !important; } .text-gold { color: var(--color-gold) !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-base { font-size: var(--text-base) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .text-2xl { font-size: var(--text-2xl) !important; } .text-3xl { font-size: var(--text-3xl) !important; } .text-4xl { font-size: var(--text-4xl) !important; } .text-5xl { font-size: var(--text-5xl) !important; } .font-normal { font-weight: var(--font-weight-normal) !important; } .font-medium { font-weight: var(--font-weight-medium) !important; } .font-semi { font-weight: var(--font-weight-semi) !important; } .font-bold { font-weight: var(--font-weight-bold) !important; } .uppercase { text-transform: uppercase !important; } .tracking-wide { letter-spacing: 0.05em !important; } .tracking-wider{ letter-spacing: 0.1em !important; } .leading-tight { line-height: var(--leading-tight) !important; } .leading-snug { line-height: var(--leading-snug) !important; } .leading-normal { line-height: var(--leading-normal) !important; } .leading-relaxed { line-height: var(--leading-relaxed) !important; } /* Line clamp utilities */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }