/* |-------------------------------------------------------------------------- | News masonry grid |-------------------------------------------------------------------------- | | Replaces the old `.card-columns` (CSS multi-column) grid, which filled | column one top-to-bottom before starting column two. Cards are placed into | plain flex columns by themes/bangali/js/news-grid.js, which assigns card N | to column N % columnCount. That keeps a left-to-right, top-to-bottom | reading order while each column still grows to its own height, so the | masonry look is preserved. | */ .news-grid { --news-grid-gap: 1.25rem; transition: opacity 0.2s ease-in; } /* | Hide the grid until the columns are built, but only when JavaScript is | actually running. The `js` class is set by an inline script in the theme | , so a visitor without JavaScript always sees the cards. */ .js .news-grid:not(.news-grid--ready) { opacity: 0; } .news-grid--ready { display: flex; flex-flow: row nowrap; align-items: flex-start; gap: var(--news-grid-gap); opacity: 1; } .news-grid__col { display: flex; flex-direction: column; gap: var(--news-grid-gap); flex: 1 1 0; /* Without this, long unbroken titles blow the column past its share. */ min-width: 0; } /* Infinite-scroll trigger. Must stay in flow so it can be observed. */ .news-grid__sentinel { min-height: 1px; } /* |-------------------------------------------------------------------------- | Card |-------------------------------------------------------------------------- */ .news-card { margin: 0; } .news-card__inner { position: relative; overflow: hidden; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .news-card__inner:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .news-card__media { display: block; position: relative; overflow: hidden; background: #e9ecef; aspect-ratio: 16 / 10; } .news-card__img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.35s ease-in-out; } .news-card__inner:hover .news-card__img { transform: scale(1.06); } .news-card__category { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 5px 9px; border-radius: 3px; background: #c00; line-height: 1; } .news-card__category a { display: inline-block; font-family: Montserrat, sans-serif; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .news-card__category a:hover { color: #fff; text-decoration: none; opacity: 0.85; } .news-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.15rem 1.15rem; } .news-card__title { margin: 0; font-family: Montserrat, sans-serif; font-size: 1.0625rem; line-height: 1.4; font-weight: 700; } .news-card__title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #111; } .news-card__title a:hover { color: #c00; text-decoration: none; } .news-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5a5a5a; } .news-card__meta { margin-top: 0.35rem; padding-top: 0.65rem; border-top: 1px solid #eee; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; color: #6c757d; } /* |-------------------------------------------------------------------------- | Feature card |-------------------------------------------------------------------------- | | The tall, image-led variant that gives the grid its uneven column heights. | news-grid.js tags every 4th card so the tall cards rotate across the three | columns instead of stacking up in one of them. | */ .news-card--feature .news-card__media { aspect-ratio: 3 / 4; } .news-card--feature .news-card__media::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.2) 100%); pointer-events: none; } .news-card--feature .news-card__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.15rem 1.25rem; } .news-card--feature .news-card__title { font-size: 1.3125rem; } .news-card--feature .news-card__title a { color: #fff; } .news-card--feature .news-card__title a:hover { color: #fff; opacity: 0.9; } .news-card--feature .news-card__excerpt { -webkit-line-clamp: 2; color: rgba(255, 255, 255, 0.82); } .news-card--feature .news-card__meta { border-top-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.75); } /* |-------------------------------------------------------------------------- | Advert card |-------------------------------------------------------------------------- */ .news-card--ad .news-card__ad { padding: 0.5rem; } .news-card--ad .news-card__ad img, .news-card--ad .news-card__ad iframe { display: block; max-width: 100%; } .news-card--ad .news-card__inner:hover { transform: none; } /* |-------------------------------------------------------------------------- | Responsive |-------------------------------------------------------------------------- | | Column counts live in news-grid.js; these rules only tune the cards. | */ @media (max-width: 991.98px) { .news-card--feature .news-card__title { font-size: 1.1875rem; } } @media (max-width: 575.98px) { .news-grid { --news-grid-gap: 1rem; } /* A 3:4 hero at full phone width is taller than the viewport. */ .news-card--feature .news-card__media { aspect-ratio: 4 / 3; } .news-card--feature .news-card__title, .news-card__title { font-size: 1.0625rem; } }