/* * Blog Build Lite Child Theme CSS * Custom styles for list blog layout, primary color changes, and header improvements */ /* Custom primary color */ :root { --color-primary: #ff5671; } input[type="submit"], input[type="button"], input[type="reset"], button, .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); } a{ color: var(--color-primary); } /* Header style */ .site-header.blog-build-lite-header { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: #fff; } .site-title a{ color: var(--color-primary); font-weight: 700; } h1.site-title a:before { left: auto; right: -5px; } h1.site-title a:after { right: auto; left: -5px; } .d-flex.logo-menu { justify-content: space-between; } .stv-list-content .entry-title{ font-size: 20px; } /* List blog layout styles */ .list-blog-item { display: flex; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.5rem; background: #fff; border-radius: 8px; box-shadow: 0 0.2rem 2.8rem rgba(36, 36, 36, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .stv-search-top-form .search-field, .search-bar-container .search-field { background: #fff; } .list-blog-item:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 3.5rem rgba(36, 36, 36, 0.15); } .list-blog-thumbnail { flex: 0 0 35%; padding-right: 1.5rem; } .list-blog-content { flex: 0 0 65%; } .list-blog-thumbnail img { width: 100%; height: auto; } .stv-list-item .stv-list-thumb { border-radius: 0; } .list-blog-title { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.5rem; } .list-blog-title a { text-decoration: none; color: #222; } .list-blog-title a:hover { color: var(--color-primary); } .list-blog-meta { margin-bottom: 1rem; font-size: 0.9rem; color: #666; } .list-blog-meta span { margin-right: 1rem; } .list-blog-excerpt { margin-bottom: 1rem; } .list-blog-readmore { display: inline-block; padding: 0.5rem 1rem; background-color: var(--color-primary); color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; transition: background-color 0.3s ease; } .list-blog-readmore:hover { background-color: #e55a2b; color: white; } /* Footer styles */ .site-footer { background-color: #f8f9fa; margin-top: 2rem; border-top: 1px solid #e9ecef; } .site-info { text-align: center; font-size: 0.9rem; color: #6c757d; } .site-info a { color: var(--color-primary); text-decoration: none; } .site-info a:hover { text-decoration: underline; } /* Responsive adjustments */ @media (max-width: 768px) { .list-blog-item { flex-direction: column; } .list-blog-thumbnail, .list-blog-content { flex: 0 0 100%; width: 100%; } .list-blog-thumbnail { padding-right: 0; margin-bottom: 1rem; } } /* Additional styling for better visual hierarchy */ .entry-header.pb-4 { padding-bottom: 1rem !important; } .blog-build-meta { display: flex; align-items: center; margin-bottom: 1rem; } .blog-build-author-img { width: 30px; height: 30px; border-radius: 50%; margin-right: 0.5rem; } .blog-build-author, .blog-build-date { margin-right: 1rem; font-size: 0.9rem; color: #666; }