` once; every rule below is scoped under it so no other Resido view is affected. Cache-bust by FILE RENAME only (e.g. v1 -> v2). Never `?v=` in path. Theme::asset()->add() drops paths containing `?v=`. Targets BOTH markup variants the blog plugin emits: - Card grid: blog-wrap-grid > blog-thumb / blog-info / blog-body (used by /news index, category, related-posts) - House item: grid-in > grid-shadow > hourseitem + grid-h (used by tag.blade.php — legacy Resido pattern) - Single: single-post-item.format-standard ============================================================ */ .rd-blog { background: var(--color-bg-light); color: var(--color-fg1); font-family: var(--rd-font-body); line-height: var(--leading-relaxed); /* Fill down to the footer so the .rd-blog ivory doesn't stop short. */ padding-bottom: 64px; } /* Carry the ivory all the way to the footer. Blog views render either at the top of the page body (search / tag — transparent wrappers show the white ) or inside the CMS .rd-page chrome (news / category — .rd-page__body is explicitly white with 80px bottom padding). Both left a white band above the footer; tint the host ivory wherever a .rd-blog is present. */ body:has(.rd-blog) { background: var(--color-bg-light); } .rd-page__body:has(.rd-blog) { background: var(--color-bg-light) !important; } /* ── Archive / post header ──────────────────────────── */ .rd-blog .page-title, .rd-blog .bgheadproject { background: var(--color-bg-cream) !important; background-image: none !important; border-bottom: 1px solid var(--color-border-light); padding: var(--space-12) 0 var(--space-10) !important; margin-bottom: 0 !important; text-align: center; } .rd-blog .page-title .ipt-title, .rd-blog .bgheadproject h1 { font-family: var(--rd-font-display); font-weight: var(--weight-semibold); font-size: var(--text-5xl); color: var(--color-fg1); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-3); } .rd-blog .page-title .ipn-subtitle, .rd-blog .bgheadproject p { font-size: var(--text-base); color: var(--color-fg2); max-width: 640px; margin: 0 auto; line-height: var(--leading-relaxed); } /* The header breadcrumb is a flex

, so the parent's text-align:center doesn't reach its items — they hugged the left while the title was centered. Center the flex items and strip Bootstrap's default bg/padding so it sits cleanly under the centered title. */ .rd-blog .page-title .breadcrumb, .rd-blog .bgheadproject .breadcrumb { justify-content: center; background: transparent; padding-left: 0; margin-bottom: 0; } /* ── Section + container shell (replaces gray-simple) ─ */ .rd-blog .gray-simple, .rd-blog section.blog-page, .rd-blog section.gray-simple { background: var(--color-bg-light) !important; padding: var(--space-12) 0 !important; } .rd-blog .sec-heading.center { margin-bottom: var(--space-8); } .rd-blog .sec-heading .breadcrumb, .rd-blog .sec-heading nav { background: transparent !important; padding: 0; font-size: var(--text-sm); color: var(--color-fg3); } .rd-blog .sec-heading .breadcrumb a { color: var(--color-accent); text-decoration: none; } .rd-blog .sec-heading .breadcrumb a:hover { color: var(--color-accent-hover); text-decoration: underline; } /* ── Post card (loop.blade.php / category.blade.php) ── */ .rd-blog .blog-wrap-grid { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-light); overflow: hidden; margin-bottom: var(--space-8); transition: transform 0.18s ease, box-shadow 0.18s ease; display: flex; flex-direction: column; } .rd-blog .blog-wrap-grid:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .rd-blog .blog-wrap-grid .blog-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-cream); } .rd-blog .blog-wrap-grid .blog-thumb img, .rd-blog .blog-wrap-grid .blog-thumb .thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .rd-blog .blog-wrap-grid:hover .blog-thumb img { transform: scale(1.04); } .rd-blog .blog-info { padding: var(--space-5) var(--space-5) 0; font-size: var(--text-sm); color: var(--color-fg3); } .rd-blog .blog-info .post-meta, .rd-blog .blog-info .post-meta * { color: var(--color-fg3); font-size: var(--text-sm); } .rd-blog .blog-info .post-meta a { color: var(--color-accent); text-decoration: none; } .rd-blog .blog-info .post-meta a:hover { color: var(--color-accent-hover); } .rd-blog .blog-body { padding: var(--space-3) var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; } .rd-blog .blog-body .bl-title { font-family: var(--rd-font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); } .rd-blog .blog-body .bl-title a { color: var(--color-fg1); text-decoration: none; } .rd-blog .blog-body .bl-title a:hover { color: var(--color-accent); } .rd-blog .blog-body p { color: var(--color-fg2); font-size: var(--text-base); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4); flex: 1; } .rd-blog .blog-body .bl-continue { align-self: flex-start; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 0.15s ease, border-color 0.15s ease; } .rd-blog .blog-body .bl-continue:hover { color: var(--color-warm); border-bottom-color: var(--color-warm); } /* ── Tag archive house-item variant ───────────────────── */ .rd-blog .grid-in { margin-bottom: var(--space-8); } .rd-blog .grid-shadow { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-light); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .rd-blog .grid-shadow:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .rd-blog .grid-shadow .hourseitem, .rd-blog .grid-shadow .blii { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 !important; } .rd-blog .grid-shadow .img, .rd-blog .grid-shadow .thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } .rd-blog .grid-shadow .linkdetail { position: absolute; inset: 0; z-index: 2; } .rd-blog .grid-h { padding: var(--space-5); } .rd-blog .grid-h .blog-title h2 { font-family: var(--rd-font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-fg1); margin: 0 0 var(--space-3); } .rd-blog .grid-h .blog-title h2:hover { color: var(--color-accent); } .rd-blog .grid-h .blog-excerpt p { color: var(--color-fg2); font-size: var(--text-base); line-height: var(--leading-relaxed); margin: 0; } /* ── Single post (post.blade.php) ───────────────────── */ .rd-blog .single-post-item.format-standard { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-light); padding: var(--space-8); margin-bottom: var(--space-8); } .rd-blog .single-post-item .post-featured-img { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); } .rd-blog .single-post-item .post-featured-img img { width: 100%; height: auto; display: block; } .rd-blog .single-post-item .post-top-meta { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-fg3); } .rd-blog .single-post-item .post-top-meta a { color: var(--color-accent); text-decoration: none; } .rd-blog .single-post-item .post-title { font-family: var(--rd-font-display); font-size: var(--text-4xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-fg1); margin: 0 0 var(--space-6); } .rd-blog .single-post-item .post-details > div:not([class]) { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-fg1); } .rd-blog .single-post-item .post-details p { margin-bottom: var(--space-4); } .rd-blog .single-post-item .post-details h2, .rd-blog .single-post-item .post-details h3, .rd-blog .single-post-item .post-details h4 { font-family: var(--rd-font-display); font-weight: var(--weight-semibold); color: var(--color-fg1); margin-top: var(--space-8); margin-bottom: var(--space-3); } .rd-blog .single-post-item .post-details h2 { font-size: var(--text-2xl); } .rd-blog .single-post-item .post-details h3 { font-size: var(--text-xl); } .rd-blog .single-post-item .post-details h4 { font-size: var(--text-lg); } .rd-blog .single-post-item .post-details a { color: var(--color-accent); text-decoration: underline; } .rd-blog .single-post-item .post-details img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-4) 0; } .rd-blog .single-post-item .post-details blockquote { border-left: 3px solid var(--color-accent); padding: var(--space-2) var(--space-5); margin: var(--space-5) 0; color: var(--color-fg2); font-style: italic; } /* Bottom-meta: tags + share */ .rd-blog .post-bottom-meta { border-top: 1px solid var(--color-border-light); margin-top: var(--space-8); padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .rd-blog .post-tags .pbm-title { font-family: var(--rd-font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-fg1); margin: 0 0 var(--space-2); } .rd-blog .post-tags ul.list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .rd-blog .post-tags ul.list li a { display: inline-block; padding: 4px var(--space-3); background: var(--color-bg-cream); border: 1px solid var(--color-border-light); border-radius: var(--radius-pill); color: var(--color-fg2); font-size: var(--text-sm); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .rd-blog .post-tags ul.list li a:hover { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent-soft); } .rd-blog .post-share { font-size: var(--text-sm); color: var(--color-fg2); } /* ── Sidebar widgets (primary_sidebar) ──────────────── */ .rd-blog .widget, .rd-blog .sidebar > div { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); } .rd-blog .widget .widget-title, .rd-blog .sidebar h4 { font-family: var(--rd-font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-fg1); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-light); } .rd-blog .widget ul { list-style: none; padding: 0; margin: 0; } .rd-blog .widget ul li a { color: var(--color-fg2); text-decoration: none; padding: var(--space-1) 0; display: block; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border-light); } .rd-blog .widget ul li:last-child a { border-bottom: 0; } .rd-blog .widget ul li a:hover { color: var(--color-accent); } /* ── Pagination ─────────────────────────────────────── */ .rd-blog .pagination, .rd-blog nav.d-flex { margin-top: var(--space-8); } .rd-blog .pagination .page-item .page-link { color: var(--color-fg1); border: 1px solid var(--color-border-light); background: var(--color-bg-white); margin: 0 2px; border-radius: var(--radius-sm); padding: 6px var(--space-3); font-size: var(--text-sm); } .rd-blog .pagination .page-item.active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-white); } .rd-blog .pagination .page-item .page-link:hover { background: var(--color-accent-soft); color: var(--color-accent); } /* ── Related-posts grid (post.blade.php) ────────────── */ .rd-blog .blog-container .row { margin-top: var(--space-2); } /* ── Thai locale type tweaks ────────────────────────── */ .rd-blog:lang(th) .bl-title, .rd-blog:lang(th) .blog-title h2, .rd-blog:lang(th) .post-title { letter-spacing: 0; line-height: var(--leading-relaxed); } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 768px) { .rd-blog .page-title, .rd-blog .bgheadproject { padding: var(--space-8) 0 var(--space-6) !important; } .rd-blog .page-title .ipt-title, .rd-blog .bgheadproject h1 { font-size: var(--text-3xl); } .rd-blog .single-post-item.format-standard { padding: var(--space-5); } .rd-blog .single-post-item .post-title { font-size: var(--text-2xl); } } /* Pagination cell centering. The legacy 37x37 cell relies on line-height:37px to center the digit, but Bootstrap's .page-link{padding:.375rem .75rem} wins the cascade and shoves the number to the top-left. Flex-center it and drop the padding so the digit sits dead-center in the box. */ .rd-blog .pagination .page-link { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }