/* ========================================================= Container width override — single posts only WordPress auto-adds "single-post" to on single blog posts, so we scope purely with CSS instead of editing/ buffering PHP output. Immune to page caching. ========================================================= */ body.single-post #main.main-boxed{ margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; } div#content{padding-top:0 !important;} .post-hero-layout .post-hero-meta{margin-top:28px;} .owl-item { background: linear-gradient(135deg,#fdf1ea 0%,#fef7ef 60%,#ffffff 100%); padding: 10px; border: 1px solid #ccc; } .post-carousel h4 { font-size: 1em !important; font-weight: bold; max-height: 60px; min-height: 60px; overflow: hidden; } .owl-item p.author-name { font-size: 12px; margin-bottom: 5px; } .post-carousel .post-item .post-excerpt { font-size: 14px; line-height: 20px; font-weight:600; } /* ========================================================= Custom Single Post Layout Hero banner + 3-column grid (TOC / content / sidebar) Enqueue this AFTER the theme's main stylesheet. ========================================================= */ :root{ --post-accent-1: #ff2b57; --post-accent-2: #ff7a30; --post-border: #eceef1; --post-text-muted: #6b7280; --post-radius: 14px; } /* ---------- Hero banner ---------- */ .post-hero-layout .post-hero-banner{ position: relative; padding: 60px 24px 70px; overflow: hidden; background: linear-gradient(135deg,#fdf1ea 0%,#fef7ef 60%,#ffffff 100%); border-radius: 0 0 var(--post-radius) var(--post-radius); } .post-hero-layout .post-hero-inner{ position: relative; max-width: 1100px; margin: 0 auto; } main.post-main-content p.isSelectedEnd a { font-weight: 600; color: #000; } /* ---------- 3-column grid ---------- */ .post-hero-layout .post-layout-grid{ display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 32px; max-width: 1280px; margin: 40px auto 0; padding: 0 24px 60px; align-items: start; } /* ----- Left: Table of Contents ----- */ .post-toc-sidebar{ position: sticky; top: 100px; } .post-toc-box{ border: 1px solid var(--post-border); border-radius: var(--post-radius); overflow: hidden; background: #fff; } .toc-box-title{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 18px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--post-accent-1), var(--post-accent-2)); } .toc-list{ list-style: none; margin: 0; padding: 10px 0; max-height: 60vh; overflow-y: auto; } .toc-list li{ margin: 0; } .toc-list .toc-link{ display: block; width: 100%; padding: 9px 18px; font-size: 13.5px; font-family: inherit; color: #4a4d55; text-decoration: none; text-align: left; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; transition: all .15s ease; } .toc-list .toc-link:hover{ color: var(--post-accent-1); background: #fff6f4; } .toc-list .toc-link.is-active{ color: var(--post-accent-1); font-weight: 700; background: #fff1ee; border-left-color: var(--post-accent-1); } .toc-list .toc-sub .toc-link{ padding-left: 32px; font-size: 13px; color: var(--post-text-muted); } /* ----- Center: content ----- */ .post-main-content{ min-width: 0; /* prevents grid blowout with wide content e.g. tables/images */ } .post-featured-image{ margin-bottom: 28px; border-radius: var(--post-radius); overflow: hidden; border: 1px solid var(--post-border); background: #fafafa; } .post-featured-image .featured-img{ display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; } .post-main-content .entry-content{ font-size: 16px; line-height: 1.75; } .post-main-content .entry-content h2, .post-main-content .entry-content h3{ scroll-margin-top: 100px; /* keeps anchored headings visible below sticky header */ } /* ----- Right: search + recent posts ----- */ .post-extra-sidebar{ position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; } .sidebar-box{ border: 1px solid var(--post-border); border-radius: var(--post-radius); padding: 18px; background: #fff; } .sidebar-box-title{ margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #17181c; } .search-box .search-form{ display: flex; } .search-box input[type="search"]{ width: 100%; padding: 10px 14px; border: 1px solid var(--post-border); border-radius: 999px; font-size: 13.5px; background: #f7f7f9; } .recent-posts-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .recent-post-item{ display: flex; gap: 12px; align-items: flex-start; } .recent-post-thumb{ flex: 0 0 60px; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: #f2f2f4; } .recent-post-thumb img{ width: 100%; height: 100%; object-fit: cover; } .recent-post-title{ display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #17181c; text-decoration: none; margin-bottom: 4px; } .recent-post-title:hover{ color: var(--post-accent-1); } .recent-post-date{ font-size: 12px; color: var(--post-text-muted); } /* ---------- Responsive ---------- */ @media (max-width: 1200px){ .post-hero-layout .post-layout-grid{ grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 24px; } } @media (max-width: 991px){ .post-hero-layout .post-layout-grid{ grid-template-columns: 1fr; } .post-toc-sidebar, .post-extra-sidebar{ position: static; } .post-toc-sidebar{ order: 2; } .post-main-content{ order: 1; } .post-extra-sidebar{ order: 3; flex-direction: row; flex-wrap: wrap; } .post-extra-sidebar .sidebar-box{ flex: 1 1 260px; } } @media (max-width: 575px){ .post-hero-layout .post-hero-banner{ padding: 30px 16px 30px; } .post-hero-layout .post-hero-badge{margin-bottom:15px;} .post-hero-layout .post-hero-meta{margin-top: 18px;gap: 8px;} .post-hero-layout .hero-meta-item{padding: 5px 10px; font-size: 12px;} section.page-top {padding: 5px;} .page-top ul.breadcrumb>li {padding: 0;} ul.breadcrumb li:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 125px; } .post-hero-layout .post-layout-grid{ padding: 0 16px 40px; } }