/* Minimal Blog Styles */ .blog-post-page { background: #fff; color: #111; } #read-progress { position: fixed; top: 0; left: 0; height: 3px; background: #000; z-index: 1000; width: 0; transition: width 0.1s; } /* Hero */ .post-hero-minimal { background: #050505; color: #fff; padding: 300px 60px 120px 60px; margin: -140px 0 0 0; } .post-hero-minimal a { color: #fff; text-decoration: none; } .post-hero-minimal a:hover { text-decoration: underline; } .post-hero-inner { max-width: 1000px; margin: 0; } @media (max-width: 1024px) { .post-hero-minimal { padding: 140px 20px 60px 20px; margin: -80px -20px 0 -20px; } } .post-meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 14px; color: rgba(255,255,255,0.6); } .post-category { color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 4px; text-decoration: none; transition: background 0.2s; } .post-category:hover { background: rgba(255,255,255,0.2); } .sep { color: rgba(255,255,255,0.2); } .post-title { font-size: clamp(24px, 4vw, 48px); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 24px 0; color: #fff; } .post-lead { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 800px; margin: 0 0 40px 0; font-weight: 300; } .post-author-minimal { display: flex; align-items: center; gap: 12px; } .author-img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); } .author-details { display: flex; flex-direction: column; line-height: 1.3; } .author-name { color: #fff; font-weight: 500; font-size: 15px; } .author-role { color: rgba(255,255,255,0.5); font-size: 13px; } .author-bio { margin-top: 8px; max-width: 520px; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.65; } .author-link { margin-top: 8px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Layout */ .post-layout-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 60px; max-width: 1400px; margin: 0 auto; padding: 80px 40px; align-items: stretch; } .sticky-wrapper { position: sticky; top: 120px; display: flex; flex-direction: column; height: calc(100vh - 160px); } .sidebar-bottom { margin-top: auto; } .sidebar-section { margin-bottom: 40px; } .sidebar-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; margin-bottom: 16px; font-weight: 600; } /* TOC */ .toc-nav ul { list-style: none; padding: 0; margin: 0; } .toc-nav li { margin-bottom: 12px; } .toc-nav a { color: #555; text-decoration: none; font-size: 14px; line-height: 1.4; transition: color 0.2s; display: block; } .toc-nav a:hover { color: #000; } /* Share */ .share-icons { display: flex; gap: 12px; } .share-icons a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f5f5f5; color: #333; transition: all 0.2s; } .share-icons a:hover { background: #000; color: #fff; } /* Content */ .post-cover { margin-bottom: 40px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.05); } .post-cover img { width: 100%; height: auto; display: block; } .post-prose { font-size: 18px; line-height: 1.8; color: #222; } .post-prose p { margin-bottom: 1.5em; } .post-prose h2 { font-size: 28px; margin: 60px 0 24px 0; color: #000; letter-spacing: -0.01em; line-height: 1.3; } .post-prose ul { margin-bottom: 1.5em; padding-left: 20px; } .post-prose li { margin-bottom: 8px; } .post-prose table { width: 100%; border-collapse: collapse; margin: 28px 0 36px; display: block; overflow-x: auto; white-space: normal; font-size: 15px; line-height: 1.6; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; } .post-prose thead { background: #f8fafc; } .post-prose th, .post-prose td { min-width: 180px; padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .post-prose th { font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: #475569; } .post-prose tr:last-child td { border-bottom: none; } .post-prose a { color: #000; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.2); text-underline-offset: 3px; transition: text-decoration-color 0.2s; } .post-prose a:hover { text-decoration-color: #000; } .post-prev-next { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; padding-top:16px; border-top:1px solid rgba(15,23,42,.12) } .post-prev-next a { color:#0f172a; text-decoration:none; font-weight:600 } .post-prev-next a:hover { text-decoration:underline; text-underline-offset:3px } /* Right Sidebar */ .recent-posts { list-style: none; padding: 0; margin: 0; } .recent-posts li { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; } .recent-posts li:last-child { border-bottom: none; } .recent-post-card { text-decoration: none; display: block; } .recent-post-title { display: block; font-size: 15px; color: #111; font-weight: 500; line-height: 1.4; margin-bottom: 6px; transition: color 0.2s; } .recent-post-card:hover .recent-post-title { color: #666; } .recent-post-date { display: block; font-size: 12px; color: #999; } .tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-link { font-size: 12px; padding: 4px 10px; background: #f5f5f5; color: #555; text-decoration: none; border-radius: 4px; transition: all 0.2s; } .tag-link:hover { background: #000; color: #fff; } /* Responsive */ @media (max-width: 1200px) { .post-layout-grid { grid-template-columns: 200px 1fr; gap: 40px; } .post-sidebar-right { display: none; } } @media (max-width: 900px) { .post-layout-grid { grid-template-columns: 1fr; padding: 40px 20px; } .post-sidebar-left { display: none; /* Hide TOC on mobile for now or move it */ } .post-hero-minimal { padding: 140px 20px 60px 20px; margin: -80px -20px 0 -20px; } .post-title { font-size: 36px; } }