/* =============================================================
fonts.css — Finch Theme Typography
=============================================================
Single source of truth for ALL typography on this theme.
Edit sizes, weights and families here; nothing in style.css
should declare a font-size, line-height, font-weight,
font-family, font-style, font-variant, letter-spacing,
text-transform or text-decoration.
This file is loaded on both the front-end (via
wp_enqueue_style) and inside the ACF WYSIWYG (TinyMCE)
editor via add_editor_style(), so the editor preview always
matches the live site.
Structure
---------
1. Size tokens — CSS custom properties for every size level
2. Utility classes — .font-{level} overrides for the TinyMCE
"Styles" dropdown and template use
3. Base typography — html, h1–h6
4. Component typography — buttons, nav, footer, forms, etc.
5. Responsive typography — breakpoint overrides
============================================================= */
/* -------------------------------------------------------------
1. SIZE TOKENS
Edit these values to update typography site-wide.
All heading and utility class rules reference these vars, so
a single change here cascades to everything.
------------------------------------------------------------- */
:root {
/* Body / paragraph */
--font-size-p: 16px;
--line-height-p: 28px;
/* Headings — mobile-first base */
--font-size-h1: 40px; --line-height-h1: 50px;
--font-size-h2: 30px; --line-height-h2: 36px;
--font-size-h3: 24px; --line-height-h3: 29px;
--font-size-h4: 20px; --line-height-h4: 24px;
--font-size-h5: 18px; --line-height-h5: 22px;
--font-size-h6: 16px; --line-height-h6: 19px;
}
@media (min-width: 768px) {
:root {
--font-size-p: 18px;
--line-height-p: 32px;
--font-size-h1: 45px; --line-height-h1: 55px;
--font-size-h2: 35px; --line-height-h2: 42px;
--font-size-h3: 26px; --line-height-h3: 30px;
--font-size-h4: 24px; --line-height-h4: 29px;
--font-size-h5: 20px; --line-height-h5: 24px;
--font-size-h6: 18px; --line-height-h6: 22px;
}
}
@media (min-width: 1200px) {
:root {
--font-size-h1: 50px; --line-height-h1: 60px;
--font-size-h2: 40px; --line-height-h2: 48px;
--font-size-h3: 28px; --line-height-h3: 34px;
}
}
/* -------------------------------------------------------------
2. UTILITY SIZE CLASSES
Applied by the TinyMCE "Styles" dropdown or directly in
templates. Each class overrides the visual size of any block
element while keeping its semantic HTML tag intact.
Example: — H1 for SEO, body text size
— paragraph that looks like H1
— H2 for SEO, visually small
------------------------------------------------------------- */
.font-p {
font-size: var(--font-size-p) !important;
line-height: var(--line-height-p) !important;
font-weight: 400 !important;
}
.font-h1 {
font-size: var(--font-size-h1) !important;
line-height: var(--line-height-h1) !important;
font-weight: 700 !important;
}
.font-h2 {
font-size: var(--font-size-h2) !important;
line-height: var(--line-height-h2) !important;
font-weight: 700 !important;
}
.font-h3 {
font-size: var(--font-size-h3) !important;
line-height: var(--line-height-h3) !important;
font-weight: 600 !important;
}
.font-h4 {
font-size: var(--font-size-h4) !important;
line-height: var(--line-height-h4) !important;
font-weight: 600 !important;
}
.font-h5 {
font-size: var(--font-size-h5) !important;
line-height: var(--line-height-h5) !important;
font-weight: 600 !important;
}
.font-h6 {
font-size: var(--font-size-h6) !important;
line-height: var(--line-height-h6) !important;
font-weight: 600 !important;
}
/* -------------------------------------------------------------
3. BASE TYPOGRAPHY
------------------------------------------------------------- */
html {
font-size: var(--font-size-p);
line-height: var(--line-height-p);
font-family: var(--myriad);
font-weight: 400;
letter-spacing: 0.09px;
}
h1 {
font-size: var(--font-size-h1);
line-height: var(--line-height-h1);
font-family: var(--myriad);
font-weight: 700;
}
h2 {
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
font-family: var(--myriad);
font-weight: 700;
}
h3 {
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
font-family: var(--myriad);
font-weight: 600;
}
h4 {
font-size: var(--font-size-h4);
line-height: var(--line-height-h4);
font-family: var(--myriad);
font-weight: 600;
}
h5 {
font-size: var(--font-size-h5);
line-height: var(--line-height-h5);
font-family: var(--myriad);
font-weight: 600;
}
h6 {
font-size: var(--font-size-h6);
line-height: var(--line-height-h6);
font-family: var(--myriad);
font-weight: 600;
}
/* -------------------------------------------------------------
4. COMPONENT TYPOGRAPHY
------------------------------------------------------------- */
/* Buttons */
.mwa-gf-form_wrapper .gform_footer .gform_button,
.mwa-bttn {
font-size: 18px;
line-height: 20px;
font-family: var(--myriad);
font-weight: 700;
text-transform: capitalize;
}
/* Text utilities */
.smalltxt {
font-size: 14px;
line-height: normal;
letter-spacing: 0.07px;
}
.Lead2 {
font-size: 20px;
line-height: 32px;
letter-spacing: 0.1px;
}
/* Gravity Forms description */
.mwa-gf-form_wrapper .gform_description {
font-size: 20px;
font-weight: 400;
line-height: 32px;
letter-spacing: 0.1px;
}
/* Navigation — mobile overlay (overridden at 992px below) */
.mwa-menu-main>li a {
font-family: var(--myriad);
font-weight: 400;
font-size: 20px !important;
line-height: 24px;
text-transform: capitalize;
}
/* Mobile header CTA button */
.mob-header .header-bttns .mwa-bttn {
font-size: 16px;
}
/* Footer contact links */
.site-footer .footer-contact>* {
font-weight: 600;
}
/* Footer nav links */
.site-footer .menu a {
font-family: var(--myriad);
font-size: 16px;
font-weight: 400;
}
/* Editor content links */
.editor-content a {
font-weight: 600;
}
/* Social share heading */
.social-title {
font-weight: 700;
}
/* Custom select dropdown arrow (Font Awesome pseudo-element) */
.ginput_container_select::before,
.select-container::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
line-height: 1;
}
/* Loan search select */
.layout-search-loan .input-field select {
font-weight: 600;
font-size: 18px;
line-height: 20px;
}
/* Testimonials body text */
.layout-testimonials .editor-content *:not(h1, h2, h3, h4, h5, h6) {
font-size: 20px;
font-style: italic;
font-weight: 600;
}
/* Accordion heading */
.mwa-accordion .tab-heading {
font-weight: 700;
}
/* Featured news post title */
.featured-news .featured-content h1 {
font-size: 40px;
line-height: normal;
}
/* Post category filter links */
.post-cats .cat-list .active a {
font-weight: 700;
}
.post-cats .cat-list a {
font-size: 22px;
font-weight: 400;
line-height: 43px;
}
/* Post prev/next navigation */
.mwa-post-nav a {
font-size: 18px;
font-weight: 700;
line-height: 20px;
text-transform: capitalize;
}
/* Blockquote */
blockquote {
font-size: 30px;
line-height: normal;
font-weight: 700;
}
/* Skip-to-content link (accessibility) */
.skip-link:focus {
font-size: 14px;
line-height: 15px;
}
/* -------------------------------------------------------------
5. RESPONSIVE TYPOGRAPHY
------------------------------------------------------------- */
/* -- max-width: 1023px --------------------------------------- */
@media only screen and (max-width: 1023px) {
.post-cats .cat-list a {
line-height: 22px;
}
}
/* -- min-width: 640px ---------------------------------------- */
@media only screen and (min-width: 640px) {
.mwa-post-nav a {
font-size: 20px;
}
}
/* -- min-width: 768px ---------------------------------------- */
@media only screen and (min-width: 768px) {
.mwa-gf-form_wrapper .gform_footer .gform_button,
.mwa-bttn {
font-size: 18px;
}
.top-banner .editor-content {
font-size: 20px;
line-height: 32px;
}
}
/* -- min-width: 992px ---------------------------------------- */
@media only screen and (min-width: 992px) {
/* Desktop nav is smaller than the mobile overlay */
.mwa-menu-main>li a {
font-weight: 600;
font-size: 16px !important;
line-height: 20px;
}
/* Search button icon */
.main-header-r .header-bttns .search-bttn {
font-size: 15px;
}
/* Submenu chevron (Font Awesome icon via pseudo-element) */
.mwa-menu-main>li.menu-item-has-children>a:after {
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: 0.75em;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* Featured news post title */
.featured-news .featured-content h1 {
font-size: 50px;
}
}
/* -- min-width: 1500px --------------------------------------- */
@media only screen and (min-width: 1500px) {
/* Large search button icon */
.main-header-r .header-bttns .search-bttn {
font-size: 18px;
}
}