/* Related Guides / Related Topics card grid. Extracted from article.css so hub, tool and case-study pages can use these cards without pulling in article.css (its `*` reset and `body` rule would break those layouts). article.css @imports this file, so article pages are unaffected. */ .related-guides { margin: 3rem 0 2rem; padding: 2rem 0; border-top: 1px solid #e8edf2; border-bottom: 1px solid #e8edf2; } .related-guides h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin-bottom: 1rem; } .related-guides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .related-guide-card { position: relative; display: flex; flex-direction: column; padding: 1.1rem 2.5rem 1.1rem 1.25rem; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 19, 39, 0.05); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; } .related-guide-card::after { content: "→"; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); font-size: 1rem; color: #cbd5e1; transition: color 0.18s, right 0.18s; } .related-guide-card:hover { border-color: #39FF12; box-shadow: 0 4px 14px rgba(57, 255, 18, 0.15); transform: translateY(-2px); } .related-guide-card:hover::after { color: #39FF12; right: 0.75rem; } .related-guide-card:focus-visible { outline: 2px solid #39FF12; outline-offset: 2px; } .related-guide-card .guide-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #22c55e; margin-bottom: 0.35rem; } .related-guide-card .guide-title { font-size: 0.9rem; font-weight: 500; color: #1e293b; line-height: 1.45; } /* Related Topics carries the same cards but links out to other clusters. Its label is a cluster name rather than a content type, so it is toned down to read as a category rather than a call to action. */ .related-topics .related-guide-card .guide-label { color: #64748b; } /* When Related Topics follows a Related Guides block, drop the duplicate top border so the two read as one group instead of two stacked sections. */ .related-guides + .related-topics { margin-top: 0; padding-top: 1.25rem; border-top: none; } /* On-dark variant. The card defaults above are tuned for the white article background; hubs, tool pages and case studies sit on #001327, either directly or because their section rule sets padding without a background and falls through to . Add this modifier alongside .related-topics there. */ .related-topics--on-dark { border-top-color: rgba(255, 255, 255, 0.14); border-bottom-color: rgba(255, 255, 255, 0.14); } .related-topics--on-dark h3 { color: rgba(255, 255, 255, 0.55); } .related-topics--on-dark .related-guide-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; } .related-topics--on-dark .related-guide-card:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--primary, #39FF12); } .related-topics--on-dark .related-guide-card .guide-label { color: var(--primary, #39FF12); } .related-topics--on-dark .related-guide-card .guide-title { color: #ffffff; } .related-topics--on-dark .related-guide-card::after { color: rgba(255, 255, 255, 0.35); } /* Wrapper for pages whose layout has no content container where the block is inserted (tool pages that close their own

first). */ .related-topics-standalone { max-width: 80rem; margin: 0 auto; padding: 0 2rem 3rem; box-sizing: border-box; } @media (max-width: 768px) { .related-guides-grid { grid-template-columns: 1fr; } .related-topics-standalone { padding: 0 1rem 2rem; } }