/* Author profile card. * * Theme-aware: light styles are the default; `.dark` (set on by the * site's theme toggle) switches to the original dark design. Scoped under * `.author-section` so it never hijacks the page. The global `body` * background and `*` reset from the standalone design were removed. */ .author-section { max-width: 900px; width: 100%; margin: 0 auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .author-section .author-card { max-width: 100%; } .author-section *, .author-section *::before, .author-section *::after { box-sizing: border-box; } /* Eyebrow label (cyan reads on both themes) */ .author-section .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #0891b2; margin-bottom: 1.25rem; } .dark .author-section .eyebrow { color: #06B6D4; } .author-section .eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: currentColor; border-radius: 2px; } /* Card */ .author-section .author-card { border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: #ffffff; border: 1px solid #e2e8f0; color: #1e293b; } .dark .author-section .author-card { background: #111827; border-color: rgba(6, 182, 212, 0.15); color: #e2e8f0; } /* Left column */ .author-section .author-sidebar { background: linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%); border-right: 1px solid #e2e8f0; padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } .dark .author-section .author-sidebar { background: linear-gradient(160deg, #0f1f35 0%, #0C1222 100%); border-right-color: rgba(6, 182, 212, 0.12); } .author-section .avatar-ring { width: 110px; height: 110px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #06B6D4, #7C3AED); flex-shrink: 0; } .author-section .avatar-inner { width: 100%; height: 100%; border-radius: 50%; background: #e0f2fe; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: #0891b2; letter-spacing: -0.03em; overflow: hidden; } .dark .author-section .avatar-inner { background: #1a2540; color: #06B6D4; } .author-section .avatar-inner img { width: 100%; height: 100%; object-fit: cover; } .author-section .author-name { font-size: 1.25rem; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; } .dark .author-section .author-name { color: #f1f5f9; } .author-section .author-title { font-size: 0.78rem; color: #64748b; line-height: 1.5; font-weight: 400; margin-top: 0.4rem; } .dark .author-section .author-title { color: #94a3b8; } .author-section .divider { width: 40px; height: 1px; background: rgba(6, 182, 212, 0.3); } /* Tags */ .author-section .tag-group { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .author-section .tag { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid; } /* Light-mode tag colours (darker text for contrast on the white card) */ .author-section .tag-cyan { color: #0e7490; border-color: rgba(6,182,212,0.4); background: rgba(6,182,212,0.08); } .author-section .tag-violet { color: #6d28d9; border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.08); } .author-section .tag-amber { color: #b45309; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); } .dark .author-section .tag-cyan { color: #06B6D4; border-color: rgba(6,182,212,0.35); background: rgba(6,182,212,0.07); } .dark .author-section .tag-violet { color: #a78bfa; border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.07); } .dark .author-section .tag-amber { color: #F59E0B; border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); } /* Publisher badge */ .author-section .publisher-badge { margin-top: auto; font-size: 0.65rem; color: #94a3b8; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .dark .author-section .publisher-badge { color: #475569; } .author-section .publisher-badge span { color: #0891b2; } .dark .author-section .publisher-badge span { color: #06B6D4; } /* Right column */ .author-section .author-body { padding: 2.5rem 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .author-section .bio-heading { font-size: 1.55rem; font-weight: 700; color: #0f172a; letter-spacing: -0.03em; line-height: 1.25; } .dark .author-section .bio-heading { color: #f1f5f9; } .author-section .bio-heading em { font-style: normal; color: #0891b2; } .dark .author-section .bio-heading em { color: #06B6D4; } /* Markdown-rendered bio */ .author-section .bio-rendered p { font-size: 0.9rem; line-height: 1.8; color: #475569; font-weight: 400; } .dark .author-section .bio-rendered p { color: #94a3b8; } .author-section .bio-rendered p + p { margin-top: 0.9rem; } .author-section .bio-rendered strong { color: #0f172a; font-weight: 600; } .dark .author-section .bio-rendered strong { color: #cbd5e1; font-weight: 500; } .author-section .bio-rendered a { color: #0891b2; text-decoration: none; } .dark .author-section .bio-rendered a { color: #06B6D4; } .author-section .bio-rendered a:hover { text-decoration: underline; } /* Stats row */ .author-section .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 0.5rem; } .author-section .stat { background: rgba(6,182,212,0.06); border: 1px solid rgba(6,182,212,0.15); border-radius: 10px; padding: 1rem; } .dark .author-section .stat { background: rgba(6,182,212,0.05); border-color: rgba(6,182,212,0.1); } .author-section .stat-number { font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -0.04em; line-height: 1; } .dark .author-section .stat-number { color: #f1f5f9; } .author-section .stat-number span { color: #0891b2; } .dark .author-section .stat-number span { color: #06B6D4; } .author-section .stat-label { font-size: 0.68rem; color: #64748b; font-weight: 500; margin-top: 0.3rem; letter-spacing: 0.04em; text-transform: uppercase; } /* Quote */ .author-section .author-quote { border-left: 3px solid #F59E0B; padding: 0.6rem 1rem; background: rgba(245, 158, 11, 0.08); border-radius: 0 8px 8px 0; } .dark .author-section .author-quote { background: rgba(245, 158, 11, 0.05); } .author-section .author-quote p { font-size: 0.85rem; color: #475569; font-style: italic; line-height: 1.7; } .dark .author-section .author-quote p { color: #cbd5e1; } /* Certs */ .author-section .cert-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; } .author-section .cert-badge { font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 4px; background: rgba(6,182,212,0.12); color: #0e7490; letter-spacing: 0.03em; } .dark .author-section .cert-badge { color: #67e8f9; } /* Responsive: single column on tablets/phones; stats wrap when very narrow. */ @media (max-width: 768px) { .author-section .author-card { grid-template-columns: 1fr; } .author-section .author-sidebar { border-right: none; border-bottom: 1px solid #e2e8f0; padding: 2rem; } .dark .author-section .author-sidebar { border-bottom-color: rgba(6,182,212,0.12); } .author-section .author-body { padding: 2rem 1.5rem; } } @media (max-width: 380px) { .author-section .stats-row { grid-template-columns: 1fr 1fr; } }