/* ============================================================ styles.css — Content site layout (Articles / Research / Docs) Shared across all three sites. Site-specific overrides via data-site attribute on . ============================================================ */ /* ── Hero ───────────────────────────────────────────────────── */ .site-hero { padding: 64px 48px 52px; border-bottom: 1px solid var(--border-color); background: var(--surface-primary); } .site-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1100px; margin: 0 auto; } .site-hero-text { flex: 1; } .site-hero-eyebrow { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 14px; } .site-hero-headline { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-primary); margin: 0 0 14px; } .site-hero-sub { font-size: 0.96rem; color: var(--text-secondary); line-height: 1.65; margin: 0; max-width: 460px; } .site-hero-icon { flex-shrink: 0; width: 96px; height: 96px; color: var(--accent-color); opacity: 0.14; } .site-hero-icon svg { width: 100%; height: 100%; } /* ── Layout: list + reader ──────────────────────────────────── */ .site-body { display: flex; max-width: 1100px; margin: 0 auto; padding: 0 48px; gap: 32px; padding-top: 40px; padding-bottom: 80px; min-height: 60vh; } /* ── Post / Doc list (left column) ─────────────────────────── */ .post-list { width: 300px; min-width: 260px; flex-shrink: 0; } .post-list-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; } .post-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; margin-bottom: 4px; } .post-item:hover { background: var(--hover-bg); border-color: var(--border-color); } .post-item.active { background: var(--sidebar-active-bg); border-color: color-mix(in srgb, var(--accent-color) 30%, transparent); } .post-item-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.35; } .post-item.active .post-item-title { color: var(--accent-color); } .post-item-meta { font-size: 11.5px; color: var(--text-tertiary); } .post-item-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .post-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border-color); color: var(--text-tertiary); background: var(--surface-secondary); } /* ── Skeleton list items ────────────────────────────────────── */ .post-item--skeleton { pointer-events: none; animation: skeleton-pulse 1.4s ease-in-out infinite; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .skeleton-line { height: 11px; background: var(--surface-tertiary); border-radius: 5px; width: 100%; margin-bottom: 5px; } .skeleton-line--title { height: 14px; width: 70%; } .skeleton-line--short { width: 40%; } /* ── Reader (right column) ──────────────────────────────────── */ .reader { flex: 1; min-width: 0; } .reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: var(--text-tertiary); font-size: 14px; gap: 10px; text-align: center; } .reader-empty svg { width: 40px; height: 40px; opacity: 0.4; } /* ── Article / Doc header inside reader ─────────────────────── */ .reader-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); } .reader-header-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 10px; display: block; } .reader-header-title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-primary); margin: 0 0 12px; } .reader-header-meta { font-size: 12.5px; color: var(--text-tertiary); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .reader-header-tags { display: flex; gap: 5px; flex-wrap: wrap; } /* ── Markdown body ───────────────────────────────────────────── */ .md-body { font-size: 15px; line-height: 1.75; color: var(--text-primary); } .md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 2em 0 0.6em; color: var(--text-primary); } .md-body h1 { font-size: 1.6rem; margin-top: 0; } .md-body h2 { font-size: 1.2rem; } .md-body h3 { font-size: 1.05rem; } .md-body h4 { font-size: 0.95rem; } .md-body p { margin: 0 0 1.1em; text-align: justify; hyphens: auto; } .md-body a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent-color) 40%, transparent); transition: text-decoration-color 0.15s; } .md-body a:hover { text-decoration-color: var(--accent-color); } .md-body strong { font-weight: 700; } .md-body em { font-style: italic; } .md-body ul, .md-body ol { padding-left: 1.5em; margin: 0 0 1.1em; } .md-body ul { list-style: disc; } .md-body ol { list-style: decimal; } .md-body li { margin-bottom: 0.35em; } .md-body blockquote { border-left: 3px solid var(--accent-color); margin: 1.4em 0; padding: 0.6em 1em; color: var(--text-secondary); background: var(--surface-secondary); border-radius: 0 8px 8px 0; font-style: italic; } .md-body code { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.875em; background: var(--surface-secondary); border: 1px solid var(--border-color); border-radius: 5px; padding: 0.15em 0.45em; } .md-body pre { background: var(--surface-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.1em 1.3em; overflow-x: auto; margin: 1.4em 0; } .md-body pre code { background: none; border: none; padding: 0; font-size: 0.875rem; line-height: 1.6; } .md-body hr { border: none; border-top: 1px solid var(--border-color); margin: 2em 0; } .md-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; } .md-body th, .md-body td { text-align: left; padding: 9px 14px; border: 1px solid var(--border-color); } .md-body th { background: var(--surface-secondary); font-weight: 600; font-size: 13px; } .md-body img { max-width: 100%; border-radius: 10px; margin: 1.2em 0; border: 1px solid var(--border-color); } /* ── Research-specific: abstract callout ────────────────────── */ .abstract-box { background: var(--surface-secondary); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color); border-radius: 0 10px 10px 0; padding: 16px 20px; margin-bottom: 28px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; } .abstract-box-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 6px; display: block; } /* ── Docs-specific: breadcrumb + on-this-page ───────────────── */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 20px; } .breadcrumb-sep { opacity: 0.4; } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--text-primary); } .toc { position: sticky; top: 24px; align-self: flex-start; width: 200px; min-width: 180px; flex-shrink: 0; } .toc-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; } .toc-list { display: flex; flex-direction: column; gap: 2px; } .toc-item { font-size: 12.5px; color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: color 0.15s, background 0.15s; } .toc-item:hover { color: var(--text-primary); background: var(--hover-bg); } .toc-item.active { color: var(--accent-color); font-weight: 600; } .toc-item--h3 { padding-left: 18px; font-size: 12px; } /* ── Footer ─────────────────────────────────────────────────── */ #site-footer { border-top: 1px solid var(--border-color); background: var(--surface-primary); } .site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .site-footer-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .site-footer-links { display: flex; gap: 18px; } .site-footer-link { font-size: 13px; color: var(--text-secondary); transition: color 0.15s; } .site-footer-link:hover { color: var(--text-primary); } .site-footer-copy { font-size: 12px; color: var(--text-tertiary); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { .site-body { flex-direction: column; padding: 24px; gap: 24px; } .post-list { width: 100%; min-width: 0; } .toc { display: none; } .site-hero { padding: 40px 24px 36px; } .site-hero-icon { display: none; } .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; } } /* ── Welcome list (index screen) ───────────────────────────── */ .welcome-list-wrap { background: var(--surface-primary); padding: 40px 48px 80px; min-height: 100vh; width: 100%; } .welcome-list { max-width: 1100px; margin: 0 auto; } .welcome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; } .welcome-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--surface-primary); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; text-decoration: none; } .welcome-card:hover { border-color: color-mix(in srgb, var(--accent-color) 35%, transparent); box-shadow: 0 4px 20px var(--shadow-color); transform: translateY(-2px); } .welcome-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.3; } .welcome-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; flex: 1; } .welcome-card-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; } .welcome-card-tags { display: flex; gap: 4px; flex-wrap: wrap; } .docs-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary); padding: 24px 0 10px; } .docs-section-label:first-child { padding-top: 4px; } /* ── Full-width reader view ─────────────────────────────────── */ .article-reader-wrap { display: flex; flex-direction: column; min-height: 100vh; background: var(--surface-primary); /* Stretch to cover full main-content area so no app-bg gray bleeds through */ width: 100%; } .reader-topbar { position: sticky; top: 0; z-index: 50; background: var(--surface-primary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 16px; padding: 0 48px; height: 52px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .reader-back-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: none; border: none; cursor: pointer; padding: 6px 10px 6px 4px; border-radius: 8px; transition: color 0.15s, background 0.15s; flex-shrink: 0; white-space: nowrap; } .reader-back-btn:hover { color: var(--text-primary); background: var(--hover-bg); } .reader-topbar-title { font-size: 13px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .article-reader-body { flex: 1; background: var(--surface-primary); padding: 48px 64px 0; } .article-reader-content { max-width: 100%; margin: 0; padding-bottom: 80px; } /* md-body spans full content width */ .article-reader-content .md-body { max-width: none; } /* ── Author card (bottom of reader) ────────────────────────── */ .author-card { display: flex; align-items: flex-start; gap: 16px; background: var(--surface-primary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 22px; margin-top: 48px; } .author-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 14%, var(--surface-secondary)); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--accent-color); letter-spacing: -0.02em; } .author-info { flex: 1; min-width: 0; } .author-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: 3px; } .author-name { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; display: block; margin-bottom: 6px; } .author-bio { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-top: 4px; border-top: 1px solid var(--border-color); padding-top: 10px; } /* ── Related section ────────────────────────────────────────── */ .related-section { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border-color); } .related-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .related-card { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--surface-primary); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; } .related-card:hover { border-color: color-mix(in srgb, var(--accent-color) 35%, transparent); box-shadow: 0 4px 16px var(--shadow-color); transform: translateY(-2px); } .related-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.35; } .related-card-meta { font-size: 11.5px; color: var(--text-tertiary); } /* ── Feedback section ───────────────────────────────────────── */ .feedback-section { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border-color); padding-bottom: 16px; } .feedback-inner { display: flex; align-items: center; gap: 18px; background: var(--surface-primary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 24px; } .feedback-icon { flex-shrink: 0; width: 40px; height: 40px; background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-secondary)); border: 1px solid var(--border-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent-color); } .feedback-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .feedback-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); } .feedback-sub { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; } .feedback-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 8px; background: var(--accent-color); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 0.15s; white-space: nowrap; } .feedback-btn:hover { opacity: 0.82; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 700px) { .welcome-list-wrap { padding: 24px 20px 60px; } .welcome-grid { grid-template-columns: 1fr; } .reader-topbar { padding: 0 20px; } .article-reader-body { padding: 36px 20px 0; } .related-grid { grid-template-columns: 1fr; } .feedback-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .author-card { flex-direction: column; gap: 12px; } } /* ─── 404 / Not Found ────────────────────────────────────────────────────── Add these rules to each section's styles.css (articles, research, docs). ────────────────────────────────────────────────────────────────────────── */ .not-found-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 80px 24px 120px; min-height: 60vh; } .not-found-inner { max-width: 480px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .not-found-svg { margin-bottom: 8px; opacity: 0.85; } .not-found-title { font-size: 22px; font-weight: 650; color: var(--text-primary); margin: 0; letter-spacing: -0.3px; } .not-found-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin: 0; } .not-found-slug { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12.5px; background: var(--surface-secondary, rgba(0,0,0,0.05)); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; color: var(--text-primary); } [data-theme="dark"] .not-found-slug { background: rgba(255,255,255,0.07); } .not-found-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; } .not-found-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: var(--accent-color, #0A84FF); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 560; cursor: pointer; transition: opacity 0.15s; font-family: inherit; } .not-found-back-btn:hover { opacity: 0.87; } .not-found-report-link { font-size: 13px; color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: color 0.15s, text-decoration-color 0.15s; } .not-found-report-link:hover { color: var(--text-secondary); text-decoration-color: currentColor; }