/* ========================================================================== Blog details page Scoped to so nothing else is affected. Fixes: oversized titles + missing spacing in the WYSIWYG article content (the global reset strips margins/list styles from every element). ========================================================================== */ .blog-details-page { --blog-text: #333; --blog-muted: #6b6b6b; --blog-line: #e4e4e4; --blog-soft-bg: #f7f7f7; } /* --------------------------------------------------------------- 1. Banner / breadcrumb ------------------------------------------------------------------*/ .blog-details-page .header-page .box-content { max-width: 900px; margin-left: auto; margin-right: auto; } .blog-details-page .header-page .title { font-size: clamp(22px, 3vw, 36px); line-height: 1.3; letter-spacing: 1px; word-break: break-word; } .blog-details-page .header-page .breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; font-size: 12px; line-height: 1.6; } .blog-details-page .header-page .breadcrumbs .theme-color { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* --------------------------------------------------------------- 2. Article column ------------------------------------------------------------------*/ .blog-details-page .box-move .box-img > .img-item { margin-bottom: 30px; } .blog-details-page .box-move .box-img .img-item img { width: 100%; height: auto; border-radius: 6px; } /* Post title above the article */ .blog-details-page .box-img .pinned-element > .title { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.35; letter-spacing: 0.5px; margin-bottom: 12px; word-break: break-word; } .blog-details-page .box-img .pinned-element > small { display: inline-block; font-size: 13px; color: var(--blog-muted); letter-spacing: 0.5px; } .blog-details-page .box-img .pinned-element > small i { margin-right: 6px; } /* --------------------------------------------------------------- 3. Table of contents (first block of the editor content) ------------------------------------------------------------------*/ .blog-details-page .blog-toc { background-color: var(--blog-soft-bg); border-left: 3px solid var(--theme-color, #d38a00); border-radius: 4px; padding: 20px 22px; margin-top: 0; } /* The editor block ships its own "Contents" title — the sidebar already has one. */ .blog-details-page .blog-toc .toc-title, .blog-details-page .blog-toc h1, .blog-details-page .blog-toc h2, .blog-details-page .blog-toc h3, .blog-details-page .blog-toc h4, .blog-details-page .blog-toc h5, .blog-details-page .blog-toc h6 { display: none; } /* No auto numbering: the headings themselves are often already numbered ("1. Stain Resistance"), which would read as "1. 1. Stain Resistance". */ .blog-details-page .blog-toc ul, .blog-details-page .blog-toc ol { list-style: none; padding-left: 0; margin: 0; } .blog-details-page .blog-toc li { position: relative; padding: 0 0 12px 16px; margin-bottom: 12px; line-height: 1.6; border-bottom: 1px dashed var(--blog-line); } .blog-details-page .blog-toc li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .blog-details-page .blog-toc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--theme-color, #d38a00); } .blog-details-page .blog-toc li ul, .blog-details-page .blog-toc li ol { margin-top: 12px; padding-left: 4px; } .blog-details-page .blog-toc a { display: block; color: var(--blog-text); font-size: 14px; word-break: break-word; transition: color 0.3s ease; } .blog-details-page .blog-toc a:hover { color: var(--theme-color, #d38a00); } /* --------------------------------------------------------------- 4. Article body (editor HTML) — the main spacing fix ------------------------------------------------------------------*/ .blog-details-page .blog-content { margin-top: 25px; font-size: 16px; line-height: 1.85; color: var(--blog-text); word-break: break-word; } .blog-details-page .blog-content > *:first-child { margin-top: 0; } .blog-details-page .blog-content > *:last-child { margin-bottom: 0; } .blog-details-page .blog-content h1, .blog-details-page .blog-content h2, .blog-details-page .blog-content h3, .blog-details-page .blog-content h4, .blog-details-page .blog-content h5, .blog-details-page .blog-content h6 { margin-top: 40px; margin-bottom: 14px; line-height: 1.35; letter-spacing: 0.5px; } .blog-details-page .blog-content h1 { font-size: 28px; } .blog-details-page .blog-content h2 { font-size: 25px; } .blog-details-page .blog-content h3 { font-size: 21px; } .blog-details-page .blog-content h4 { font-size: 19px; } .blog-details-page .blog-content h5 { font-size: 17px; } .blog-details-page .blog-content h6 { font-size: 16px; } .blog-details-page .blog-content p { margin-bottom: 18px; } .blog-details-page .blog-content p:empty { display: none; } /* global.css resets `list-style: none` on every element (the `*` selector), so it lands on the

too and native markers never render — hence the markers below are drawn with ::before instead. */ .blog-details-page .blog-content ul, .blog-details-page .blog-content ol { list-style: none; margin: 0 0 22px; padding-left: 4px; } .blog-details-page .blog-content ol { counter-reset: blog-list; } .blog-details-page .blog-content li { position: relative; padding-left: 26px; margin-bottom: 10px; line-height: 1.8; } .blog-details-page .blog-content ul > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--theme-color, #d38a00); } .blog-details-page .blog-content ol > li { counter-increment: blog-list; } .blog-details-page .blog-content ol > li::before { content: counter(blog-list) "."; position: absolute; left: 0; top: 0; width: 18px; text-align: right; color: var(--theme-color, #d38a00); font-weight: 600; } .blog-details-page .blog-content li > ul, .blog-details-page .blog-content li > ol { margin-top: 10px; margin-bottom: 0; } .blog-details-page .blog-content a { color: var(--theme-color, #d38a00); text-decoration: underline; text-underline-offset: 3px; } .blog-details-page .blog-content a:hover { opacity: 0.8; } .blog-details-page .blog-content strong, .blog-details-page .blog-content b { font-weight: 600; color: #111; } .blog-details-page .blog-content img, .blog-details-page .blog-content iframe, .blog-details-page .blog-content video { display: block; max-width: 100%; height: auto; margin: 26px 0; border-radius: 6px; } .blog-details-page .blog-content figure { margin: 26px 0; } .blog-details-page .blog-content figure img { margin: 0; } .blog-details-page .blog-content figcaption { margin-top: 10px; font-size: 13px; color: var(--blog-muted); text-align: center; } .blog-details-page .blog-content blockquote { margin: 28px 0; padding: 18px 24px; background-color: var(--blog-soft-bg); border-left: 3px solid var(--theme-color, #d38a00); font-style: italic; } .blog-details-page .blog-content blockquote p:last-child { margin-bottom: 0; } .blog-details-page .blog-content hr { margin: 32px 0; border: 0; border-top: 1px solid var(--blog-line); } /* Tables — keep wide tables inside the column instead of breaking layout */ .blog-details-page .blog-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 26px 0; font-size: 15px; } .blog-details-page .blog-content table th, .blog-details-page .blog-content table td { border: 1px solid var(--blog-line); padding: 12px 14px; text-align: left; vertical-align: top; } .blog-details-page .blog-content table th { background-color: var(--blog-soft-bg); font-weight: 600; } /* --------------------------------------------------------------- 5. FAQ block ------------------------------------------------------------------*/ .blog-details-page .blog-faq { margin-top: 50px; padding-top: 35px; border-top: 1px solid var(--blog-line); } /* Tag-agnostic: the heading level here changes for SEO, so the design is pinned to the position/class, never to

. / .blog-details-page .blog-faq > .faq-title, .blog-details-page .blog-faq > h1, .blog-details-page .blog-faq > h2, .blog-details-page .blog-faq > h3, .blog-details-page .blog-faq > h4, .blog-details-page .blog-faq > h5, .blog-details-page .blog-faq > h6 { font-family: var(--heading-font); color: var(--heading-color); font-weight: var(--font-weight-heading); font-size: 24px; line-height: 1.35; letter-spacing: 1px; margin-bottom: 10px; } .blog-details-page .blog-faq .faq-item { margin-top: 22px; padding-bottom: 22px; border-bottom: 1px dashed var(--blog-line); } .blog-details-page .blog-faq .faq-item:last-child { border-bottom: 0; padding-bottom: 0; } .blog-details-page .blog-faq .faq-item .faq-question, .blog-details-page .blog-faq .faq-item > h1, .blog-details-page .blog-faq .faq-item > h2, .blog-details-page .blog-faq .faq-item > h3, .blog-details-page .blog-faq .faq-item > h4, .blog-details-page .blog-faq .faq-item > h5, .blog-details-page .blog-faq .faq-item > h6, .blog-details-page .blog-faq .faq-item > p:first-child { font-family: var(--heading-font); color: var(--heading-color); font-weight: var(--font-weight-heading); font-size: 18px; line-height: 1.45; letter-spacing: 0.5px; margin-bottom: 10px; } .blog-details-page .blog-faq .faq-item .faq-answer { font-size: 15px; line-height: 1.8; color: var(--blog-text); } .blog-details-page .blog-faq .faq-item .faq-answer p { margin-bottom: 12px; } .blog-details-page .blog-faq .faq-item .faq-answer p:last-child { margin-bottom: 0; } .blog-details-page .blog-faq .faq-item .faq-answer ul, .blog-details-page .blog-faq .faq-item .faq-answer ol { padding-left: 22px; margin-bottom: 12px; } .blog-details-page .blog-faq .faq-item .faq-answer ul { list-style: disc; } .blog-details-page .blog-faq .faq-item .faq-answer ol { list-style: decimal; } .blog-details-page .blog-faq .faq-item .faq-answer li { margin-bottom: 8px; } / --------------------------------------------------------------- 6. Previous / next navigation ------------------------------------------------------------------/ .blog-details-page .blog-nav { gap: 20px; margin-top: 45px; padding-top: 25px; border-top: 1px solid var(--blog-line); } .blog-details-page .blog-nav a { max-width: 48%; font-size: 15px; line-height: 1.6; color: var(--blog-text); } .blog-details-page .blog-nav a:last-child { text-align: right; margin-left: auto; } .blog-details-page .blog-nav a:hover { color: var(--theme-color, #d38a00); } / --------------------------------------------------------------- 7. Sidebar — recent posts ------------------------------------------------------------------/ / Widget titles ("Table of Content" / "Recent Posts") are
now, so the heading font/colour/weight they used to inherit from

is re-applied. / .blog-details-page .recent-posts > .widget-title, .blog-details-page .recent-posts > h1, .blog-details-page .recent-posts > h2, .blog-details-page .recent-posts > h3, .blog-details-page .recent-posts > h4, .blog-details-page .recent-posts > h5, .blog-details-page .recent-posts > h6, .blog-details-page .recent-posts > p { font-family: var(--heading-font); color: var(--heading-color); font-weight: var(--font-weight-heading); font-size: 20px; line-height: 1.4; letter-spacing: 1px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--theme-color, #d38a00); } .blog-details-page .recent-posts .blog-deatils-img { margin-top: 0; margin-bottom: 18px; padding: 15px; align-items: center; transition: border-color 0.3s ease; } .blog-details-page .recent-posts .blog-deatils-img:hover { border-color: var(--theme-color, #d38a00); } .blog-details-page .recent-posts .recent-post-section small { display: block; font-size: 12px; color: var(--blog-muted); margin-bottom: 6px; } .blog-details-page .recent-posts .recent-post-section small i { margin-right: 5px; } .blog-details-page .recent-posts .recent-post-section .recent-post-title, .blog-details-page .recent-posts .recent-post-section h1, .blog-details-page .recent-posts .recent-post-section h2, .blog-details-page .recent-posts .recent-post-section h3, .blog-details-page .recent-posts .recent-post-section h4, .blog-details-page .recent-posts .recent-post-section h5, .blog-details-page .recent-posts .recent-post-section h6, .blog-details-page .recent-posts .recent-post-section p { font-family: var(--heading-font); color: var(--heading-color); font-weight: var(--font-weight-heading); font-size: 15px; line-height: 1.5; letter-spacing: 0.3px; margin: 0; padding-bottom: 0; border-bottom: 0; } .blog-details-page .recent-posts .recent-post-section .recent-post-title a, .blog-details-page .recent-posts .recent-post-section h6 a { color: inherit; transition: color 0.3s ease; } .blog-details-page .recent-posts .recent-post-section .recent-post-title a:hover, .blog-details-page .recent-posts .recent-post-section h6 a:hover { color: var(--theme-color, #d38a00); } / --------------------------------------------------------------- 8. Responsive ------------------------------------------------------------------*/ @media only screen and (max-width: 991px) { .blog-details-page .blog-content { font-size: 15px; } .blog-details-page .blog-content h1 { font-size: 24px; } .blog-details-page .blog-content h2 { font-size: 22px; } .blog-details-page .blog-content h3 { font-size: 19px; } .blog-details-page .blog-content h4 { font-size: 17px; } .blog-details-page .blog-content h5, .blog-details-page .blog-content h6 { font-size: 16px; } .blog-details-page .blog-content h1, .blog-details-page .blog-content h2, .blog-details-page .blog-content h3, .blog-details-page .blog-content h4, .blog-details-page .blog-content h5, .blog-details-page .blog-content h6 { margin-top: 30px; } .blog-details-page .d-grid .recent-post { margin-left: 0; margin-top: 40px; } } @media only screen and (max-width: 767px) { .blog-details-page .header-page .breadcrumbs .theme-color { max-width: 200px; } .blog-details-page .box-move .container.p-0 { padding-left: 15px; padding-right: 15px; } .blog-details-page .blog-toc { padding: 20px; } .blog-details-page .blog-faq > .faq-title, .blog-details-page .blog-faq > h1, .blog-details-page .blog-faq > h2, .blog-details-page .blog-faq > h3, .blog-details-page .blog-faq > h4, .blog-details-page .blog-faq > h5, .blog-details-page .blog-faq > h6 { font-size: 21px; } .blog-details-page .blog-nav { flex-direction: column; } .blog-details-page .blog-nav a, .blog-details-page .blog-nav a:last-child { max-width: 100%; text-align: left; margin-left: 0; } }