/* Blog — public index (/blog) + article (/blog/{slug}). Marketing pages toggle dark mode via the `.dark` class on (see landing.css). Light is the default; `.dark` selectors restyle for night. */ /* ── Category filter (chips, in the style of the post tags) ───────────────── */ .bl-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:38px;} .bl-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600; padding:8px 15px;border-radius:999px;text-decoration:none;color:#475569;background:#fff; border:1px solid rgba(15,23,42,.12);transition:border-color .15s,color .15s,background .15s;} .bl-chip:hover{border-color:#08a05a;color:#08a05a;} .bl-chip.on{background:#08a05a;border-color:#08a05a;color:#fff;} .bl-chip-n{font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px; background:rgba(8,160,90,.12);color:#08a05a;} .bl-chip.on .bl-chip-n{background:rgba(255,255,255,.24);color:#fff;} .dark .bl-chip{background:#0f1420;border-color:rgba(255,255,255,.12);color:#94a3b8;} .dark .bl-chip:hover{color:#08a05a;} .dark .bl-chip.on{color:#fff;} /* ── Post cards (index + related) ─────────────────────────────────────────── */ .bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;} .bl-card{display:flex;flex-direction:column;height:100%;border:1px solid rgba(15,23,42,.10);border-radius:18px; background:#fff;padding:22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;} .bl-card:hover{border-color:#08a05a;transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(8,160,90,.45);} .dark .bl-card{background:#0f1420;border-color:rgba(255,255,255,.10);} .bl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;} /* Emoji sits in a soft branded tile so it reads as an icon, not a stray glyph. */ .bl-card-emoji{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:24px;line-height:1; background:rgba(8,160,90,.10);border:1px solid rgba(8,160,90,.18);} .bl-card-tag{display:inline-block;flex-shrink:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px; color:#08a05a;background:rgba(8,160,90,.10);border:1px solid rgba(8,160,90,.25);padding:4px 11px;border-radius:999px;text-decoration:none;} a.bl-card-tag:hover{background:rgba(8,160,90,.18);border-color:#08a05a;} /* Clamp title (2 lines) + excerpt (3 lines) so every card is the same shape. */ .bl-card h3{margin:0 0 9px;font-size:18.5px;font-weight:800;letter-spacing:-.3px;line-height:1.32; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .bl-card p{margin:0;font-size:14.5px;line-height:1.6;color:#475569; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .dark .bl-card p{color:#94a3b8;} /* margin-top:auto pushes the footer down so cards align across a row. */ .bl-card-meta{margin-top:auto;padding-top:16px;border-top:1px solid rgba(15,23,42,.08); display:flex;align-items:center;gap:8px;font-size:12.5px;color:#697587;} .dark .bl-card-meta{color:#7e8798;border-top-color:rgba(255,255,255,.08);} .bl-card-readmore{margin-left:auto;font-weight:700;color:#08a05a;white-space:nowrap;} /* ── Article ──────────────────────────────────────────────────────────────── */ .bl-article-head{max-width:760px;margin:0 auto;text-align:center;} .bl-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#697587;text-decoration:none;} .bl-back:hover{color:#08a05a;} .bl-meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px; font-size:13px;color:#697587;margin-top:18px;} .dark .bl-meta-row{color:#94a3b8;} .bl-dot{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.5;} /* Prose body — shared rich-text styles for admin-authored HTML. */ .cp-prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.8;color:#334155;} .dark .cp-prose{color:#c3cad8;} .cp-prose>*:first-child{margin-top:0;} .cp-prose h2{font-size:26px;font-weight:800;letter-spacing:-.4px;margin:42px 0 14px;color:#0f172a;} .cp-prose h3{font-size:20px;font-weight:700;margin:30px 0 10px;color:#0f172a;} .dark .cp-prose h2,.dark .cp-prose h3{color:#eef2f8;} .cp-prose p{margin:0 0 18px;} .cp-prose ul,.cp-prose ol{margin:0 0 18px;padding-left:24px;} .cp-prose li{margin-bottom:9px;} .cp-prose a{color:#08a05a;font-weight:600;text-decoration:underline;text-underline-offset:2px;} .cp-prose a:hover{opacity:.85;} .cp-prose strong,.cp-prose b{color:#0f172a;font-weight:700;} .dark .cp-prose strong,.dark .cp-prose b{color:#fff;} .cp-prose blockquote{margin:24px 0;padding:6px 20px;border-left:3px solid #08a05a;color:#475569;font-style:italic;} .dark .cp-prose blockquote{color:#94a3b8;} .cp-prose code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:rgba(8,160,90,.10); color:#08a05a;padding:2px 6px;border-radius:6px;} .cp-prose img{max-width:100%;height:auto;border-radius:14px;margin:24px 0;} .cp-prose hr{border:0;border-top:1px solid rgba(15,23,42,.10);margin:32px 0;} .dark .cp-prose hr{border-top-color:rgba(255,255,255,.10);}