/* ========================================================================= Blog cards ------------------------------------------------------------------------- One card component, used by the blog listing, the homepage, product pages and the Load More / search results. Rendered by app/Views/frontend/blog/_card.php. Everything here is namespaced .blog-card*. That is the point of the file. The old cards leaned on .post-title / .post-info / .single-blog-item, which several page templates redeclare unscoped and some with !important - the product page sets `.post-title { font-size: 28px !important }` - so a card changed shape depending on which page it landed on. Nothing outside this file styles .blog-card*, and .blog-card* styles nothing outside itself. Loaded last in the frontend , after original-footer.css. ========================================================================= */ /* Bootstrap's .row is flex, so columns already stretch to the tallest in the line. The card fills that height; without this it shrink-wraps its text and the row looks ragged. */ .blog-card-col { display: flex; margin-bottom: 30px; } .blog-card { display: flex; flex-direction: column; width: 100%; background: #ffffff; border: 1px solid #e3e6ed; border-radius: 10px; overflow: hidden; /* The old homepage card was pinned to `height: 500px` with no overflow rule, so a long headline pushed the summary straight out of the bottom of the box. Height is driven by content now, and the clamps below keep that content bounded instead. */ transition: box-shadow .2s ease, transform .2s ease; } .blog-card:hover { box-shadow: 0 6px 22px rgba(34, 34, 129, .13); transform: translateY(-3px); } /* --- Head: headline and date, above the picture, as on coredocuments.com -- */ .blog-card-head { padding: 18px 20px 12px; } .blog-card-title { margin: 0 0 8px; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* !important on the sizes only, and deliberately. Several page templates declare bare element rules with !important - product/view.php has `h3 { font-size: 28px !important }` in an inline