/** * BHENITO — Premium Typography + Icon Polish (Marketing Site) * Purpose: unify font system, text rhythm, and icon alignment across public pages. * * Keep this file LAST in the (after other CSS and any inline styles), * so it can override page-specific drift. */ /* Font fallback safety: many pages already load fonts via , but this ensures consistency. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap'); :root { --brand-font-sans: 'Inter', 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --brand-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Typography rhythm */ --brand-text-base: 16px; --brand-leading: 1.7; --brand-tracking-tight: -0.02em; --brand-tracking-normal: 0.01em; /* Accessible focus ring (gold) */ --brand-focus: rgba(212, 175, 55, 0.45); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--brand-font-sans) !important; font-size: var(--brand-text-base); line-height: var(--brand-leading); font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } h1, h2, h3, h4, h5, h6, .hero-title, .display-1, .display-2, .display-3, .display-4 { font-family: var(--brand-font-serif) !important; letter-spacing: var(--brand-tracking-tight); } /* Responsive heading scale (premium + mobile-friendly) */ h1, .hero-title, .display-1, .display-2, .display-3, .display-4 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.15; } h2, .display-5 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; } h3, .display-6 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25; } /* Premium “quiet” default: avoid overly-bold body text. */ strong, b { font-weight: 600; } /* Improve reading comfort without fighting Bootstrap spacing. */ p { letter-spacing: 0; } /* Bootstrap lead copy: keep it premium (not too huge, not too bold) */ .lead { font-size: 1.125rem; line-height: 1.75; font-weight: 400; } /* Links: keep brand feel, but maintain affordance */ a { text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; } /* Focus: a big “world-class” tell */ :focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; } /* Icons: consistent alignment and spacing */ i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands { line-height: 1; vertical-align: -0.125em; } .btn i.fas:not(:only-child), .btn i.far:not(:only-child), .btn i.fab:not(:only-child), .btn i.fa-solid:not(:only-child), .btn i.fa-regular:not(:only-child), .btn i.fa-brands:not(:only-child) { margin-inline-end: 0.5rem; } /* Navbar: avoid “tiny” nav typography */ .navbar-nav .nav-link { font-size: 0.95rem !important; letter-spacing: var(--brand-tracking-normal); } @supports (text-wrap: balance) { h1, h2, .hero-title { text-wrap: balance; } }