@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:fallback;src:url('https://www.tripletwist.com/makeuphairblog/wp-content/themes/twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');} @font-face{font-family:"Fira Code";font-style:normal;font-weight:300 700;font-display:fallback;src:url('https://www.tripletwist.com/makeuphairblog/wp-content/themes/twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2') format('woff2');} /* ── Triple Twist blog integration overrides ───────────────────────── */ /* 1. Padding below the fixed nav */ body { padding-top: 0 !important; } /* let #page handle it */ #page { padding-top: 4em !important; } /* WP admin bar: push fixed nav down when logged in */ .admin-bar .site-header { top: 32px !important; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px !important; } .admin-bar #page { padding-top: calc(4em + 14px) !important; } } /* 2. Hide the theme's own header and footer — replaced by TT versions */ #masthead, header.wp-block-template-part[class*="header"], .wp-block-template-part.header { display: none !important; } #colophon, .site-footer, footer#colophon, footer.wp-block-template-part, footer.wp-block-template-part[class*="footer"], .wp-block-template-part.footer { display: none !important; } /* 3. Fix main-site generic section { max-width:600px } from squishing WP layout */ #page section, .site-content section, .site-content-contain section, .entry-content section { max-width: none !important; width: auto !important; text-align: left; margin: revert; padding: revert; clear: none; } /* 4a. Page / single-post H1: mirror the main static site's page-title h1 (self-hosted Jost 300, uppercase, letter-spaced, centered, brown) so the blog reads in-family with /about/, /pricing/, etc. The blog "Blog" title is actually

living inside
, NOT inside .site-content — so selectors must catch it regardless of parent. Beats WP's .has-text-align-left + theme size utilities via !important. */ h1.wp-block-heading, h1.wp-block-post-title, .wp-block-post-content h1, main h1, .site-content h1 { font-family: "Jost", system-ui, sans-serif !important; font-size: 1.9em !important; font-weight: 300 !important; text-transform: uppercase !important; letter-spacing: .16em !important; text-align: center !important; color: #56483f !important; line-height: 1 !important; padding: 2px 0 0 !important; /* Auto L/R margins center the H1 within the content area instead of letting WP's layout-constrained rule + has-global-padding shift it around with viewport. Bottom gap matches the static-site section h1 spacing (~33px). */ margin: 0.5em auto 33px !important; max-width: var(--wp--style--global--content-size, 645px) !important; width: 100% !important; } /* 4a-ii. Twentytwentyfive's
ships with an inline style="margin-top:var(--wp--preset--spacing--60)" that pushes the page H1 ~15px lower than the equivalent static-site H1. Zero it out so the blog H1's top spacing matches /about/, /contact/, etc. */ main.wp-block-group { margin-top: 0 !important; } /* 4a-iii. The first post wrapper in the query loop carries inline style="padding-top:var(--wp--preset--spacing--60)" (clamp 30-70px), which makes the gap below the Blog H1 dynamic. Zero it so the H1's own 25px margin-bottom controls the gap and matches the static site's H1→content spacing. */ .wp-block-post-template > li:first-child > .wp-block-group { padding-top: 0 !important; } /* 4b. Post-listing titles (H2 inside the query loop): smaller than the page H1, slightly larger than the main-site h2 (1.2em) to signal that they are post entries. Beats WP's .has-x-large-font-size utility. */ .entry-title, .page-title, h2.wp-block-post-title, .wp-block-post-title.has-x-large-font-size, h2.wp-block-post-title.has-x-large-font-size { font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-size: 1.25em !important; font-weight: 600 !important; text-align: left !important; color: #423730 !important; line-height: 1.3 !important; padding: 0 !important; width: auto !important; } /* 4a. Attachment pages: demote the filename title to a small gray label. These pages exist for SEO/linking but the filename is not a meaningful heading — render it as a modest caption beneath the image. */ .attachment .wp-block-post-title { font-size: 0.8rem !important; font-weight: 400 !important; color: #999 !important; line-height: 1.5 !important; margin-top: 0.5em !important; margin-bottom: 0.25em !important; } /* 5. Content area font */ .site-content, .site-content p, .site-content li, .site-content h2, .site-content h3, .site-content h4 { font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* 6. Links */ .site-content a { color: #8c1614; } .site-content a:hover { color: #5a0f0d; } /* 7. Footer: prevent main-site section rule squishing footer */ #tt-footer section { max-width: none; width: auto; } /* 7b. Breathing room so blog pagination/last content doesn't ride up against the footer. Blog-only: #tt-footer exists solely on the blog, so marketing pages (which render