/* ---------------------------------------------------------- Global typography for blog cards ---------------------------------------------------------- */ .blog-container { width: 70%; /* or whatever you prefer */ max-width: 900px; /* optional, to avoid super wide lines */ margin: 0 auto; /* keep it centered */ } .blog-card, .post-hero, .post-meta, .post-related { /* 1 — typeface (Prompt is already imported in ) */ font-family: 'Prompt', sans-serif; /* 2 — default text colour */ color: #222; /* pick any hex / rgb / hsl you like */ } /* optional – tweak specific bits */ .post-title { color: #444; } /* darker headline */ .post-excerpt { color: #555; } /* slightly muted blurb */ .post-read-more a { color: #000; } /* --- blog overview grid --- */ .blog-grid { display: grid; gap: 2rem; /* on ≥900 px we get ~3 cards, on tablets ~2, on phones 1 */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* --- card shell (inherits your shadow & rounding language) --- */ .post-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); transition: box-shadow .25s; display: flex; flex-direction: column; } .post-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .post-image img { width: 100%; height: 200px; object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px; transition: transform .3s; } .post-card:hover img { transform: scale(1.02); } .post-content { padding: 1rem; flex: 1 1 auto; text-align: left; } .post-title { font-size: var(--fs-600); margin: 0 0 .6rem; } .post-excerpt { font-size: var(--font-base); color: #555; } .post-read-more { border-top: 1px solid #eee; } .btn-read-more { display: block; padding: .75rem 1rem; text-align: center; font-weight: 600; text-transform: uppercase; text-decoration: none; color: #000; } /* ----- HERO CARD (single post) --------------------------- */ .post-hero { background: #fff; border-radius: 16px; padding: 4rem; } .post-page-title { font-size: var(--fs-700); margin: 2rem 0 1.5rem; } .post-body>* { margin-block: 0 1.25rem; /* rhythm inside article */ } .post-body img { max-width: 100%; height: auto; border-radius: 8px; } /* ----- RELATED POSTS ------------------------------------- */ .post-related { margin-block: 4rem 2rem; text-align: left; } .related-title { font-size: var(--fs-600); font-weight: 700; margin: 0 0 2rem; } /* ─── single‑post meta line ───────────────────────────────────────── */ .post-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; /* keeps things tidy on very narrow screens */ } .author-avatar { width: 48px; height: 48px; border-radius: 50%; /* perfect circle */ object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); } .meta-text { display: flex; flex-direction: column; font-size: var(--font-base); line-height: 1.3; } .author-name { font-weight: 700; } .post-date { color: #888; font-size: .8rem; } a.source-link { text-decoration: none; font-size: 0.9em; margin-left: 4px; } /* --- date under the title --- */ .card-date { display: block; margin: 0 0 .75rem; font-size: .9rem; color: #888; /* light grey, tweak as needed */ } /* ───────────────────────────────────────────────────────────── 1 · scale the WHOLE card (image + text) on hover ──────────────────────────────────────────────────────────── */ .post-card { overflow: hidden; /* keeps corners rounded */ transition: transform .30s, /* smooth scale */ box-shadow .25s; /* keep your old shadow */ } .post-card:hover { transform: translateY(-4px) scale(1.03); /* subtle lift + zoom */ } /* remove the old image‑only zoom so it doesn’t stack */ .post-card:hover .post-image img { transform: none; } /* ───────────────────────────────────────────────────────────── 2 · keep bottom corners rounded when the CTA turns blue ──────────────────────────────────────────────────────────── */ .post-read-more { /* clip children */ overflow: hidden; } .btn-read-more { border-bottom-left-radius: 12px; /* same 12 px as card */ border-bottom-right-radius: 12px; transition: background .25s; } /* ───────────────────────────────────────────────────────────── 3 · OPTIONAL · match the font across card text ──────────────────────────────────────────────────────────── */ .post-card, .post-card * { font-family: 'Prompt', sans-serif; color: #333; /* default text colour */ } .cb-simplify-btn { margin-bottom: 1rem !important; }