/* Blog page styles (clean, scoped, conflict-safe) - List page uses: - Single post uses: (has its own inline styles currently) */ :root{ --bg:#f7fafc; --card:#ffffff; --text:#0f172a; --muted:#64748b; --border:rgba(2,6,23,0.08); --shadow:0 10px 30px rgba(2,6,23,0.06); --primary:#2563eb; --radius:12px; } body.blog-page{ padding-top: 92px; /* header_modern.php offset */ margin:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .blog-page *{ box-sizing:border-box; } /* Container */ .blog-page .blog-container{ max-width:1200px; margin:0 auto; padding:24px 20px 48px; } /* Header area */ .blog-page .blog-header{ margin-bottom:18px; } .blog-page .hero-inner{ display:flex; gap:18px; align-items:flex-end; justify-content:space-between; } .blog-page .page-title{ font-size:32px; margin:0 0 6px; } .blog-page .page-desc{ margin:0; color:var(--muted); max-width:64ch; } .blog-page .hero-left{ flex:1 1 auto; min-width:0; } .blog-page .hero-right{ flex:0 0 auto; } /* Search */ .blog-page .blog-search{ display:flex; gap:10px; align-items:center; } .blog-page .blog-search__input{ width:340px; max-width:100%; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:#fff; } .blog-page .blog-search__btn{ height:40px; padding:0 14px; border-radius:10px; border:1px solid rgba(37,99,235,0.15); background:var(--primary); color:#fff; font-weight:700; cursor:pointer; } /* Layout: main + sidebar */ .blog-page .blog-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap:24px; align-items:start; } .blog-page .blog-main, .blog-page .blog-sidebar{ float:none !important; clear:none !important; width:auto !important; min-width:0; } /* Posts grid */ .blog-page .posts-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:24px; } /* Card */ .blog-page .post-card{ background:var(--card); border:1px solid rgba(2,6,23,0.06); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; } .blog-page .thumb-wrap, .blog-page .post-card__image{ height:180px; background:#f1f5f9; overflow:hidden; } .blog-page .post-thumb, .blog-page .post-card__image-img{ width:100%; height:100%; object-fit:cover; display:block; } .blog-page .thumb-placeholder, .blog-page .post-card__image--placeholder{ height:180px; display:flex; align-items:center; justify-content:center; color:var(--muted); background:#f1f5f9; } .blog-page .post-body, .blog-page .post-card__body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; } .blog-page .post-title, .blog-page .post-card__title{ font-size:19px; margin:0; line-height:1.25; } .blog-page .post-title a{ color:inherit; text-decoration:none; } .blog-page .post-meta, .blog-page .post-card__meta{ font-size:13px; color:var(--muted); } .blog-page .post-excerpt, .blog-page .post-card__excerpt{ margin:0; color:#475569; font-size:15px; line-height:1.6; flex:1 1 auto; } .blog-page .post-footer, .blog-page .post-card__actions{ margin-top:12px; } .blog-page .btn, .blog-page .btn-primary{ display:inline-block; padding:9px 14px; border-radius:10px; text-decoration:none; font-weight:700; } .blog-page .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,0.10); } /* Sidebar cards */ .blog-page .card{ background:var(--card); border:1px solid rgba(2,6,23,0.06); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .blog-page .card-header{ padding:14px 16px; border-bottom:1px solid rgba(2,6,23,0.06); } .blog-page .card-header h3, .blog-page .card-header h4{ margin:0; font-size:16px; } .blog-page .card-body{ padding:12px 16px; } .blog-page .recent-post{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid rgba(2,6,23,0.05); align-items:center; } .blog-page .recent-post:last-child{ border-bottom:none; } .blog-page .recent-post img, .blog-page .recent-thumb-placeholder{ width:64px; height:48px; border-radius:8px; object-fit:cover; background:#f1f5f9; flex:0 0 64px; } .blog-page .rp-body a{ color:var(--text); text-decoration:none; font-size:14px; font-weight:600; } .blog-page .rp-meta{ font-size:12px; color:var(--muted); margin-top:6px; } /* Utility */ .blog-page .muted{ color:var(--muted); } .blog-page .page-link{ color:var(--primary); text-decoration:none; font-weight:700; } /* Responsive */ @media (max-width: 991px){ .blog-page .blog-layout{ grid-template-columns: 1fr; } .blog-page .hero-inner{ flex-direction:column; align-items:flex-start; } .blog-page .blog-search{ width:100%; } .blog-page .blog-search__input{ flex:1 1 auto; width:100%; } } /* ---------------- Single post (body.blog-post) ---------------- */ /* Modern readable article styles */ :root{ --page-bg: #f7fafc; --muted: #64748b; --text: #0f172a; --card: #ffffff; --accent: #2563eb; } body.blog-post{ padding-top: 100px; background: var(--page-bg); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Wider reading area + tighter sidebar placement */ .article-hero{max-width:1320px;margin:18px auto;padding:0 20px} .layout{display:flex;gap:22px;align-items:flex-start} .layout main{flex:1 1 auto;min-width:0} .layout .sidebar{width:300px;flex:0 0 300px} .layout .layout-main{flex:1 1 auto;min-width:0} .layout .layout-main .article-container{max-width:none;margin:12px 0 48px} .layout .sidebar{position:sticky;top:110px} .sidebar-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 12px 40px rgba(2,6,23,0.06); } .sidebar-title{margin:0 0 12px;font-size:16px} .sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .sidebar-link{ display:block; text-decoration:none; color:var(--text); padding:10px; border-radius:10px; border:1px solid transparent; } .sidebar-link:hover{ border-color:var(--border); background:rgba(2,6,23,0.02); } .sidebar-item-title{display:block;font-weight:600;font-size:14px;line-height:1.35} .sidebar-item-meta{display:block;color:var(--muted);font-size:12px;margin-top:4px} .sidebar-footer{margin-top:12px} .sidebar-more{color:var(--accent);text-decoration:none;font-weight:600;font-size:13px} .sidebar-more:hover{text-decoration:underline} @media (max-width: 980px){ .layout{flex-direction:column} .layout .sidebar{width:100%;flex:1 1 auto;position:static;top:auto} .layout .layout-main .article-container{margin:12px 0 18px} } .article-container{ max-width:820px; margin:12px auto 48px; padding:32px; background:var(--card); border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.06); overflow:hidden; } .article-meta{color:var(--muted);font-size:14px;margin-bottom:18px} /* featured image */ .article-featured{ width:100%; height:auto; object-fit:cover; border-radius:10px; margin-bottom:20px; display:block; max-height:540px; } /* article content typography */ .article-content{ line-height:1.85; color:var(--text); font-size:17px; } .article-content p{margin:0 0 1.15em} .article-content h2{font-size:22px;margin:1.2em 0 .6em} .article-content img{max-width:100%;height:auto;display:block;margin:18px auto;border-radius:8px} .article-content blockquote{border-left:4px solid #e6eef6;padding:12px 16px;background:#fbfdff;color:var(--muted);border-radius:6px} .article-share{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap} .article-share a, .article-share button{ padding:9px 14px; border-radius:10px; background:#f1f5f9; color:var(--accent); text-decoration:none; font-weight:700; border:1px solid rgba(37,99,235,0.08); cursor:pointer; } .article-share button{ font-family:inherit; } .article-share a:hover, .article-share button:hover{ filter:brightness(0.98); } .cta-btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; background:var(--accent); color:#fff; font-weight:800; box-shadow:0 10px 24px rgba(37,99,235,0.18); } .cta-btn:hover{ filter:brightness(0.98); } /* author box */ .author-box{display:flex;gap:12px;align-items:center;margin-top:24px;padding:14px;border-radius:10px;background:#f8fafc;border:1px solid #eef2f7} .author-box img{width:64px;height:64px;object-fit:cover;border-radius:8px} .author-info .bio{color:var(--muted);font-size:14px;margin-top:6px} /* related posts */ .related-posts{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap} .related-card{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;background:var(--card);text-decoration:none;color:inherit;border:1px solid rgba(2,6,23,0.04)} .related-card img{width:80px;height:56px;object-fit:cover;border-radius:6px} /* sidebar recent posts */ .recent-post{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(2,6,23,0.03);align-items:center} .recent-post img{width:64px;height:48px;object-fit:cover;border-radius:6px;flex:0 0 64px} .recent-post .rp-body{font-size:14px;color:var(--text)} @media(max-width:980px){ .layout{flex-direction:column} .layout .sidebar{width:auto;order:2} .article-container{padding:22px} }