/* ===================================================================== MyvanCMS — blog card refinement --------------------------------------------------------------------- palace.css already gives .blog-card its bones: white background, 16px radius, 16px padding, a 222px cover image that scales 1.06 on hover, a meta row with a brand-coloured dot, an h4 and a .more-link. This file does NOT replace any of that — it adds the things the base is missing, in the same visual language. WHAT WAS MISSING, AND WHY EACH ADDITION EARNS ITS PLACE 1. DEFINITION. The card is #fff on a #fff page, with no border and no shadow, so it has no edge at all — the grid reads as floating text, not as cards. A hairline plus a soft shadow gives it a boundary without heaviness. 2. EQUAL HEIGHTS. palace.css sets height:100% but not display:flex, so the "Read Article" link sits directly under each excerpt. With posts of differing title and excerpt lengths, those links land at three different heights across a row, which is the single most obvious thing that makes a card grid look unfinished. Making the card a flex column and pushing the link down with margin-top:auto pins every link to the same baseline. 3. LINE CLAMPING. Same root cause: a two-line title next to a one-line title makes ragged cards. Titles clamp at 2 lines and excerpts at 3. 4. A CATEGORY BADGE. The cards were monochrome; the design's brand maroon appears only as a 5px dot. A category pill on the image adds the accent and is genuinely useful navigation. 5. MOTION THAT MATCHES. The base already animates the image on hover. The card now lifts and its arrow slides, so the whole tile responds as one object rather than the photo moving on its own. palace.css and pages.css are NOT edited — remove the in layouts/public.php to revert to the base styling exactly. ===================================================================== */ /* --- 1 + 2: definition, and a real flex column --------------------- */ .blog-card{ display:flex; flex-direction:column; border:1px solid var(--pl-line); box-shadow:0 2px 10px rgba(27,21,24,.04); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .blog-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(27,21,24,.13); border-color:transparent; } /* --- 4: the category badge ---------------------------------------- Positioned against .blog-card__media, which palace.css already gives overflow:hidden + a radius — so the badge is clipped to the image's rounded corner rather than poking outside it. ------------------------------------------------------------------ */ .blog-card__media{position:relative;display:block} .blog-card__cat{ position:absolute; top:12px;left:12px; z-index:2; background:var(--pl-brand); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:7px 14px; /* MPDI: radius removed, see assets/mpdi.css */ text-decoration:none; box-shadow:0 6px 16px rgba(107,18,22,.32); transition:background .2s ease; } .blog-card__cat:hover{background:var(--pl-brand-dark);color:#fff} /* A gentle bottom gradient on the image. Without it a white badge-adjacent caption or a pale photo edge runs straight into the white card body; this gives the image a visual base to sit on. Kept subtle — the photo is the point. */ .blog-card__media::after{ content:""; position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(to top, rgba(27,21,24,.28), transparent); pointer-events:none; } /* --- 3: clamping + typography -------------------------------------- */ .blog-card .blog-meta{ color:var(--pl-body); font-size:.8125rem; letter-spacing:.01em; flex-wrap:wrap; margin:16px 0 .55rem; } .blog-card h4{ /* Two lines maximum, so every card's excerpt starts at the same y. */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.6rem; } .blog-card h4 a{transition:color .2s ease} .blog-card:hover h4 a{color:var(--pl-brand) !important} /* the inline style="color:inherit" in the markup needs overriding */ .blog-card p{ color:var(--pl-body); font-size:.9375rem; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* --- 5: the link, pinned to the bottom with a moving arrow --------- */ .blog-card .more-link{ margin-top:auto; /* THIS is what aligns links across a row */ padding-top:6px; align-self:flex-start; } .blog-card .more-link i{transition:transform .24s ease} .blog-card:hover .more-link{color:var(--pl-brand)} .blog-card:hover .more-link i{transform:translateX(5px)} /* Keyboard users must get the same affordance as the mouse. */ .blog-card:focus-within{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(27,21,24,.13); } .blog-card a:focus-visible{ outline:3px solid var(--pl-brand); outline-offset:3px; } /* --- grid rhythm --------------------------------------------------- 9 posts per page = three clean rows of three at lg. The row gap is set here rather than by swapping the markup's Bootstrap gutter class. ------------------------------------------------------------------ */ @media (min-width:992px){ .blog-grid{row-gap:30px} } /* --- responsive ---------------------------------------------------- */ @media (max-width:991.98px){ .blog-card__media img{height:200px} } @media (max-width:575.98px){ .blog-card{padding:12px} .blog-card__media img{height:190px} .blog-card h4{font-size:1.125rem} /* On one-column mobile there is no row to align to, so let the excerpt breathe instead of clamping it hard. */ .blog-card p{-webkit-line-clamp:4} } /* Reduced-motion users get the colour changes but none of the movement. */ @media (prefers-reduced-motion:reduce){ .blog-card, .blog-card .more-link i, .blog-card__media img{transition:none} .blog-card:hover, .blog-card:focus-within{transform:none} .blog-card:hover .more-link i{transform:none} }