/* ======================================== VTX Insights Single Post Purpose: Typography and layout refinements for standard WordPress Insights articles. Applies to: body.single-post Includes: - Article typography - Heading hierarchy - Content spacing - Share Box refinements - Posts Navigation refinements - Related Insights refinements Dependencies: - vtx-tokens.css - vtx-components.css - Blocksy Global Styles ======================================== */ /* ======================================== Article Heading Hierarchy ======================================== */ body.single-post .entry-content h2 { margin-top:48px !important; margin-bottom:20px !important; font-size:26px; line-height:1.3; font-weight:700; letter-spacing:-0.015em; } body.single-post .entry-content h3 { margin-top:40px !important; margin-bottom:16px !important; font-size:21px; line-height:1.4; font-weight:600; letter-spacing:-0.01em; } body.single-post .entry-content h4 { margin-top:32px !important; margin-bottom:12px !important; font-size:18px; line-height:1.4; font-weight:600; letter-spacing:0; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post .entry-content h2 { margin-top:40px !important; margin-bottom:18px !important; font-size:24px; } body.single-post .entry-content h3 { margin-top:32px !important; margin-bottom:14px !important; font-size:20px; } body.single-post .entry-content h4 { margin-top:28px !important; margin-bottom:12px !important; font-size:18px; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post .entry-content h2 { margin-top:36px !important; margin-bottom:16px !important; font-size:23px; line-height:1.35; } body.single-post .entry-content h3 { margin-top:28px !important; margin-bottom:12px !important; font-size:19px; line-height:1.4; } body.single-post .entry-content h4 { margin-top:24px !important; margin-bottom:10px !important; font-size:17px; line-height:1.45; } } /* ======================================== Article Lists ======================================== */ body.single-post .entry-content ul, body.single-post .entry-content ol { margin-top:12px !important; margin-bottom:16px !important; padding-left:2em !important; font-size:16px !important; line-height:1.6 !important; } body.single-post .entry-content li { margin:0 !important; } body.single-post .entry-content li + li { margin-top:6px !important; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post .entry-content ul, body.single-post .entry-content ol { margin-top:12px !important; margin-bottom:16px !important; padding-left:1.75em !important; } body.single-post .entry-content li + li { margin-top:5px !important; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post .entry-content ul, body.single-post .entry-content ol { margin-top:10px !important; margin-bottom:14px !important; padding-left:1.5em !important; } body.single-post .entry-content li + li { margin-top:4px !important; } } /* ======================================== Paragraph → List Spacing ======================================== */ body.single-post .entry-content p:has(+ ul), body.single-post .entry-content p:has(+ ol) { margin-bottom:0 !important; } body.single-post .entry-content p + ul, body.single-post .entry-content p + ol { margin-top:12px !important; } @media(max-width:999px){ body.single-post .entry-content p + ul, body.single-post .entry-content p + ol { margin-top:10px !important; } } @media(max-width:767px){ body.single-post .entry-content p + ul, body.single-post .entry-content p + ol { margin-top:8px !important; } } /* ======================================== Article Quote ======================================== */ body.single-post .entry-content blockquote { margin-top:32px !important; margin-bottom:32px !important; padding: 8px 0 8px 28px !important; border-left: 4px solid var(--vtx-line-strong); font-size:16px; line-height:1.7; font-weight:400; } body.single-post .entry-content blockquote p { margin:0 !important; font-size:inherit; line-height:inherit; } /* Tablet */ @media(max-width:999px){ body.single-post .entry-content blockquote { margin-top:28px !important; margin-bottom:28px !important; padding-left:24px !important; } } /* Mobile */ @media(max-width:767px){ body.single-post .entry-content blockquote { margin-top:24px !important; margin-bottom:24px !important; padding: 6px 0 6px 20px !important; border-left-width:3px; } } /* ======================================== Share Box Icons ======================================== */ body.single-post .ct-share-box > div[data-icons-type="simple"] { display:flex !important; justify-content:flex-start !important; align-items:center !important; flex-wrap:wrap !important; gap:20px !important; width:auto !important; } /* ---------------------------------------- Share Icon Link ---------------------------------------- */ body.single-post .ct-share-box > div[data-icons-type="simple"] > a { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; margin:0 !important; } /* ---------------------------------------- Icon Container ---------------------------------------- */ body.single-post .ct-share-box .ct-icon-container { display:flex; align-items:center; justify-content:center; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post .ct-share-box > div[data-icons-type="simple"] { gap:18px !important; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post .ct-share-box > div[data-icons-type="simple"] { gap:14px !important; } body.single-post .ct-share-box > div[data-icons-type="simple"] > a { width:34px !important; height:34px !important; } } /* ======================================== Posts Navigation Typography ======================================== */ /* ---------------------------------------- Previous / Next Label ---------------------------------------- */ body.single-post .post-navigation .item-label { font-size:14px !important; line-height:1.5 !important; font-weight:600 !important; letter-spacing:0.04em !important; text-transform:uppercase; color:var(--vtx-muted) !important; } /* ---------------------------------------- Post Title ---------------------------------------- */ body.single-post .post-navigation .item-title { margin-top:8px !important; font-size:16px !important; line-height:1.5 !important; font-weight:600 !important; letter-spacing:-0.01em !important; } /* ---------------------------------------- Hover ---------------------------------------- */ body.single-post .post-navigation a:hover .item-label { color:var(--vtx-primary-navy) !important; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post .post-navigation .item-label { font-size:13px !important; } body.single-post .post-navigation .item-title { margin-top:6px !important; font-size:16px !important; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post .post-navigation .item-label { font-size:12px !important; letter-spacing:0.03em !important; } body.single-post .post-navigation .item-title { margin-top:6px !important; font-size:15px !important; line-height:1.5 !important; } } /* ======================================== Related Insights Spacing ======================================== */ body.single-post .ct-related-posts > .ct-module-title { margin-bottom:32px !important; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post .ct-related-posts > .ct-module-title { margin-bottom:28px !important; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post .ct-related-posts > .ct-module-title { margin-bottom:24px !important; } } /* ======================================== Single Post Content Spacing ======================================== */ body.single-post #main > .ct-container-full { padding-top:64px !important; padding-bottom:64px !important; } /* ======================================== Tablet ======================================== */ @media(max-width:999px){ body.single-post #main > .ct-container-full { padding-top:48px !important; padding-bottom:48px !important; } } /* ======================================== Mobile ======================================== */ @media(max-width:767px){ body.single-post #main > .ct-container-full { padding-top:40px !important; padding-bottom:40px !important; } } /* ========================================================= Article CTA ========================================================= */ .single-post .vtx-article-cta { margin-top:40px; padding:56px 40px; background:var(--vtx-color-muted-section); } /* CTA Title */ body.single-post .entry-content .vtx-article-cta .vtx-article-cta__title { margin: 0 !important; } /* CTA Description */ .single-post .vtx-article-cta__text { margin-top:20px; margin-bottom:0; max-width: var(--vtx-content-width); } /* CTA Button Spacing */ .single-post .vtx-article-cta .vtx-section-cta { margin-top:32px; } /* ========================================================= Tablet ========================================================= */ @media(max-width:999px){ .single-post .vtx-article-cta { margin-top:36px; padding:48px 32px; } } /* ========================================================= Mobile ========================================================= */ @media(max-width:767px){ .single-post .vtx-article-cta { margin-top:32px; padding:40px 20px; } .single-post .vtx-article-cta__text { margin-top:16px; } .single-post .vtx-article-cta .vtx-section-cta { margin-top:28px; } .single-post .vtx-article-cta .vtx-btn-primary-light { width:100%; } }