/* ========================================================== FINTECHOISIS | GPIR Typography System Version : 1.0 ========================================================== */ /* ========================================================== GOOGLE FONT Loaded via preconnect + stylesheet tags in each page's (non-blocking), not via a CSS rule in here. ========================================================== */ /* ========================================================== BASE ========================================================== */ html{ font-size:16px; scroll-behavior:smooth; } body{ font-family:'Inter',sans-serif; font-size:1rem; line-height:1.75; font-weight:400; color:var(--text-body); background:var(--bg-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ========================================================== HEADINGS ========================================================== */ h1, h2, h3, h4, h5, h6{ margin:0; color:var(--text-heading); line-height:1.2; font-family:'Playfair Display',serif; font-weight:700; } h1{ font-size:4.25rem; } h2{ font-size:3rem; } h3{ font-size:2rem; } h4{ font-size:1.5rem; } h5{ font-size:1.25rem; } h6{ font-size:1rem; } /* ========================================================== BODY TEXT ========================================================== */ p{ margin:0 0 1.25rem; font-size:1.125rem; color:var(--text-body); line-height:1.85; } /* ========================================================== LINKS ========================================================== */ a{ color:inherit; text-decoration:none; transition:var(--transition-normal); } a:hover{ color:var(--color-primary); } /* ========================================================== SMALL TEXT ========================================================== */ small{ font-size:.85rem; color:var(--text-muted); } /* ========================================================== LISTS ========================================================== */ ul{ margin:0; padding:0; list-style:none; } li{ line-height:1.8; } /* ========================================================== SECTION LABEL ========================================================== */ .section-label{ display:inline-block; margin-bottom:16px; font-size:.82rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--color-primary); } /* ========================================================== SECTION TITLE ========================================================== */ .section-title{ max-width:800px; margin-bottom:24px; } /* ========================================================== SECTION DESCRIPTION ========================================================== */ .section-description{ max-width:760px; color:var(--text-muted); } /* ========================================================== HERO TITLE ========================================================== */ .hero-title{ font-size:5rem; line-height:1.08; margin-bottom:30px; } .hero-title span{ color:var(--color-primary); } /* ========================================================== CARD TITLES ========================================================== */ .card-title{ font-size:1.5rem; margin-bottom:14px; } /* ========================================================== METADATA ========================================================== */ .meta{ font-size:.9rem; color:var(--text-muted); letter-spacing:1px; } /* ========================================================== BLOCKQUOTE ========================================================== */ blockquote{ margin:40px 0; padding-left:30px; border-left:4px solid var(--color-primary); font-size:1.25rem; font-style:italic; color:var(--text-heading); } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:992px){ h1{ font-size:3.25rem; } h2{ font-size:2.4rem; } .hero-title{ font-size:3.75rem; } } @media(max-width:768px){ h1{ font-size:2.6rem; } h2{ font-size:2rem; } h3{ font-size:1.6rem; } p{ font-size:1rem; } .hero-title{ font-size:3rem; } } /*===================================================== EDITORIAL CONTENT ======================================================*/