/* ============================================================ Blog post — editorial reading layout, dark dashboard theme. Styles the server-rendered (sanitized) markdown inside .bp-content. NOTE: the content div is `.bp-content` (NOT `.bp-body`, which is the element) so page-level rules don't bleed into the article. Tokens only. ============================================================ */ .bp-body { background: var(--bg-body); color: var(--text-primary); min-height: 100vh; } /* Calm the busy 3D-grid background (base.css body::before) with a near-opaque dark overlay so the article is comfortable to read. Replaces body::after. */ .bp-body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% -5%, rgba(74, 158, 255, 0.06), transparent 45%), linear-gradient(180deg, rgba(8, 12, 22, 0.94) 0%, rgba(5, 9, 17, 0.98) 100%); } .bp-main { position: relative; z-index: 1; padding: var(--space-xl) 0 var(--space-3xl); } .bp-shell { width: min(720px, calc(100vw - 32px)); margin: 0 auto; } .bp-back { display: inline-block; margin-bottom: var(--space-xl); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--accent-highlight); text-decoration: none; opacity: 0.85; } .bp-back:hover { opacity: 1; } /* ── Header ── */ .bp-head { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(74, 158, 255, 0.14); } .bp-cat { display: inline-block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--font-semibold); color: var(--accent-highlight); margin-bottom: var(--space-md); } .bp-title { font-size: clamp(30px, 4.6vw, 46px); font-weight: var(--font-bold); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 var(--space-md); color: #f5fbff; } .bp-meta { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--text-muted); } .bp-dot { opacity: 0.5; } .bp-cover { width: 100%; border-radius: var(--radius-lg); margin: 0 0 var(--space-2xl); border: 1px solid rgba(74, 158, 255, 0.14); display: block; } /* ── Article body typography ── */ .bp-content { font-size: 18px; line-height: 1.8; color: #c4cfdb; } .bp-content > *:first-child { margin-top: 0; } /* Lead paragraph reads a touch larger / lighter. */ .bp-content > p:first-of-type { font-size: 19px; color: var(--text-secondary); } .bp-content h2, .bp-content h3, .bp-content h4 { color: #eef5fb; line-height: 1.25; letter-spacing: -0.01em; margin: var(--space-2xl) 0 var(--space-md); } .bp-content h2 { font-size: clamp(24px, 3vw, 30px); font-weight: var(--font-bold); } .bp-content h3 { font-size: clamp(20px, 2.4vw, 23px); font-weight: var(--font-semibold); } .bp-content h4 { font-size: var(--text-lg); font-weight: var(--font-semibold); } .bp-content p { margin: 0 0 var(--space-lg); } .bp-content a { color: var(--accent-highlight); text-decoration: underline; text-decoration-color: rgba(4, 137, 205, 0.5); text-underline-offset: 3px; transition: text-decoration-color var(--transition-fast); } .bp-content a:hover { text-decoration-color: var(--accent-highlight); } .bp-content strong { color: #eef5fb; font-weight: var(--font-semibold); } .bp-content ul, .bp-content ol { margin: 0 0 var(--space-lg); padding-left: 1.5em; } .bp-content li { margin-bottom: var(--space-sm); } .bp-content li::marker { color: var(--accent-highlight); } .bp-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-xl) 0; border: 1px solid rgba(74, 158, 255, 0.12); display: block; } .bp-content blockquote { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-xl); border-left: 3px solid var(--accent-highlight); background: rgba(7, 89, 144, 0.08); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-secondary); font-style: italic; } .bp-content blockquote p:last-child { margin-bottom: 0; } .bp-content code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.88em; background: rgba(110, 160, 220, 0.12); padding: 2px 7px; border-radius: 5px; color: #d6e4f0; } .bp-content pre { background: #0a1422; border: 1px solid rgba(74, 158, 255, 0.14); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); overflow-x: auto; margin: 0 0 var(--space-lg); line-height: 1.6; } .bp-content pre code { background: none; padding: 0; font-size: 0.9em; color: #c9d6e3; } .bp-content hr { border: none; border-top: 1px solid rgba(74, 158, 255, 0.16); margin: var(--space-2xl) 0; } .bp-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-lg); font-size: var(--text-sm); } .bp-content th, .bp-content td { border: 1px solid var(--border-default); padding: 8px 12px; text-align: left; } .bp-content th { background: var(--bg-subtle); color: var(--text-primary); font-weight: var(--font-semibold); } /* ── CTA ── */ .bp-cta { margin-top: var(--space-3xl); padding: var(--space-2xl) var(--space-xl); text-align: center; border: 1px solid rgba(74, 158, 255, 0.18); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 50% 0%, rgba(7, 89, 144, 0.22), transparent 65%), linear-gradient(180deg, rgba(74, 158, 255, 0.04), transparent); } .bp-cta-title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0 0 var(--space-sm); } .bp-cta-sub { font-size: var(--text-md); color: var(--text-secondary); margin: 0 0 var(--space-lg); } .bp-cta-btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary)); color: #fff; font-weight: var(--font-semibold); text-decoration: none; transition: filter var(--transition-fast), transform var(--transition-fast); } .bp-cta-btn:hover { filter: brightness(1.12); transform: translateY(-1px); } .bp-notfound { padding: var(--space-3xl) 0; text-align: center; color: var(--text-secondary); } .bp-notfound a { color: var(--accent-highlight); } @media (max-width: 520px) { .bp-main { padding: var(--space-lg) 0 var(--space-2xl); } .bp-content { font-size: 17px; } }