Spaces:
Runtime error
Runtime error
| /* ─────────── Exocore Docs · 2026 palette + reset ─────────── | |
| * Deep onyx canvas with violet/cyan accents and warm signal dots. | |
| * Inspired by current docs sites (Linear, Vercel, Resend, Anthropic) | |
| * — soft mesh gradients, hairline borders, generous spacing, and | |
| * tactile micro-interactions instead of heavy chrome. */ | |
| :root { | |
| /* Surfaces — graphite ramp */ | |
| --bg: #07070A; | |
| --bg-soft: #0D0D11; | |
| --bg-card: #111116; | |
| --bg-elev: #16161D; | |
| --bg-hover: #1A1A22; | |
| --border: #1F2029; | |
| --border-strong: #2A2B36; | |
| /* Text */ | |
| --text: #F2F2F7; | |
| --text-dim: #9B9CAD; | |
| --text-mute: #61627A; | |
| /* Brand — Exocore signal violet → cyan */ | |
| --accent: #8B7CFF; /* primary */ | |
| --accent-2: #4FE3FF; /* secondary */ | |
| --accent-3: #FFB45E; /* warm signal dot */ | |
| --link: #B8AEFF; | |
| --code-bg: #0B0B10; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); | |
| --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55); | |
| --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7), 0 6px 18px -6px rgba(139,124,255,0.18); | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --radius-xs: 6px; | |
| --topbar-h: 60px; | |
| --sidebar-w: 280px; | |
| --content-max: 920px; | |
| --ease: cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body, #root { height: 100%; } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| font-feature-settings: "ss01", "cv11"; | |
| } | |
| /* Subtle ambient glow that lives behind the whole app — gives the | |
| * page a faint horizon without being a solid block of color. */ | |
| body::before { | |
| content: ""; | |
| position: fixed; inset: 0; | |
| background: | |
| radial-gradient(900px 500px at 12% -10%, rgba(139, 124, 255, 0.10), transparent 60%), | |
| radial-gradient(800px 480px at 95% 110%, rgba(79, 227, 255, 0.07), transparent 60%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| a { | |
| color: var(--link); | |
| text-decoration: none; | |
| transition: color 140ms var(--ease); | |
| } | |
| a:hover { color: var(--accent-2); } | |
| kbd { | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border-strong); | |
| border-bottom-width: 2px; | |
| border-radius: 6px; | |
| padding: 1px 7px; | |
| font-family: "JetBrains Mono", "Fira Code", monospace; | |
| font-size: 11.5px; | |
| color: var(--text-dim); | |
| } | |
| /* ─────────── App shell ─────────── */ | |
| .app-shell { | |
| min-height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| height: var(--topbar-h); | |
| background: rgba(8, 8, 12, 0.65); | |
| backdrop-filter: saturate(180%) blur(18px); | |
| -webkit-backdrop-filter: saturate(180%) blur(18px); | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 24px; | |
| gap: 14px; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-weight: 600; | |
| color: var(--text); | |
| font-size: 15.5px; | |
| letter-spacing: -0.015em; | |
| } | |
| .brand-mark { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 9px; | |
| background: | |
| conic-gradient(from 220deg at 50% 50%, | |
| var(--accent) 0%, var(--accent-2) 35%, | |
| var(--accent) 65%, var(--accent-2) 100%); | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: | |
| 0 0 0 1px rgba(255,255,255,0.06), | |
| 0 8px 22px -6px rgba(139,124,255,0.45); | |
| transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); | |
| } | |
| .brand-mark::before { | |
| content: ""; | |
| position: absolute; inset: 2px; | |
| border-radius: 7px; | |
| background: linear-gradient(160deg, #0E0E14 0%, #16161E 100%); | |
| } | |
| .brand-mark::after { | |
| content: ""; | |
| position: absolute; | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--accent-2); | |
| box-shadow: 0 0 12px var(--accent-2); | |
| animation: brand-blink 2.4s ease-in-out infinite; | |
| } | |
| @keyframes brand-blink { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(0.7); } | |
| } | |
| .brand:hover .brand-mark { | |
| transform: rotate(-12deg); | |
| box-shadow: | |
| 0 0 0 1px rgba(255,255,255,0.08), | |
| 0 12px 30px -6px rgba(79,227,255,0.55); | |
| } | |
| .brand-text { white-space: nowrap; } | |
| .brand-text-accent { | |
| background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 700; | |
| } | |
| .topbar-actions { | |
| margin-left: auto; | |
| display: flex; | |
| gap: 4px; | |
| align-items: center; | |
| } | |
| .topbar-link { | |
| color: var(--text-dim); | |
| padding: 7px 12px; | |
| border-radius: 8px; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease); | |
| border: 1px solid transparent; | |
| } | |
| .topbar-link:hover { | |
| color: var(--text); | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .topbar-link-primary { | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .topbar-link-primary:hover { | |
| border-color: rgba(139,124,255,0.5); | |
| background: rgba(139,124,255,0.08); | |
| color: var(--text); | |
| } | |
| .hamburger { | |
| background: transparent; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 8px; | |
| width: 36px; | |
| height: 36px; | |
| display: none; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 4px; | |
| cursor: pointer; | |
| } | |
| .hamburger span { | |
| display: block; | |
| width: 16px; | |
| height: 1.5px; | |
| background: var(--text); | |
| border-radius: 2px; | |
| } | |
| /* ─────────── Body grid ─────────── */ | |
| .shell-body { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: var(--sidebar-w) minmax(0, 1fr); | |
| position: relative; | |
| } | |
| .main-pane { | |
| padding: 40px 48px 96px; | |
| min-width: 0; | |
| } | |
| .sidebar-backdrop { | |
| display: none; | |
| position: fixed; | |
| inset: var(--topbar-h) 0 0 0; | |
| background: rgba(0,0,0,0.6); | |
| backdrop-filter: blur(4px); | |
| z-index: 30; | |
| } | |
| /* ─────────── Sidebar ─────────── */ | |
| .sidebar { | |
| border-right: 1px solid rgba(255,255,255,0.04); | |
| background: rgba(13,13,17,0.4); | |
| backdrop-filter: blur(8px); | |
| padding: 28px 18px 48px; | |
| overflow-y: auto; | |
| height: calc(100vh - var(--topbar-h)); | |
| position: sticky; | |
| top: var(--topbar-h); | |
| } | |
| .sidebar-home { | |
| display: block; | |
| color: var(--text-dim); | |
| padding: 7px 10px; | |
| border-radius: 7px; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| margin-bottom: 18px; | |
| transition: 140ms var(--ease); | |
| } | |
| .sidebar-home.active, | |
| .sidebar-home:hover { | |
| color: var(--text); | |
| background: rgba(139,124,255,0.10); | |
| } | |
| .sidebar-section { | |
| margin-bottom: 22px; | |
| } | |
| .sidebar-section-label { | |
| text-transform: uppercase; | |
| letter-spacing: 0.10em; | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| color: var(--text-mute); | |
| padding: 0 10px 8px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .sidebar-section-icon { | |
| font-size: 12px; | |
| line-height: 1; | |
| opacity: 0.8; | |
| } | |
| .sidebar-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .sidebar-link { | |
| display: block; | |
| padding: 6px 10px; | |
| border-radius: 7px; | |
| color: var(--text-dim); | |
| font-size: 13.5px; | |
| line-height: 1.4; | |
| margin-bottom: 1px; | |
| border-left: 2px solid transparent; | |
| transition: 140ms var(--ease); | |
| } | |
| .sidebar-link:hover { color: var(--text); background: rgba(255,255,255,0.03); } | |
| .sidebar-link.active { | |
| color: var(--text); | |
| background: linear-gradient(90deg, rgba(139,124,255,0.14), rgba(139,124,255,0.02)); | |
| border-left-color: var(--accent); | |
| font-weight: 600; | |
| } | |
| /* ─────────── Search ─────────── */ | |
| .search-wrap { position: relative; width: 100%; max-width: 720px; } | |
| .search-shell { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: rgba(17,17,22,0.7); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 11px 14px; | |
| transition: 180ms var(--ease); | |
| backdrop-filter: blur(12px); | |
| } | |
| .search-shell:focus-within { | |
| border-color: rgba(139,124,255,0.55); | |
| background: rgba(17,17,22,0.9); | |
| box-shadow: 0 0 0 4px rgba(139,124,255,0.12); | |
| } | |
| .search-icon { font-size: 14px; opacity: 0.6; } | |
| .search-input { | |
| flex: 1; | |
| background: transparent; | |
| border: 0; | |
| outline: 0; | |
| color: var(--text); | |
| font-size: 14.5px; | |
| min-width: 0; | |
| } | |
| .search-input::placeholder { color: var(--text-mute); } | |
| .search-clear { | |
| background: transparent; | |
| border: 0; | |
| color: var(--text-mute); | |
| font-size: 18px; | |
| cursor: pointer; | |
| padding: 0 4px; | |
| line-height: 1; | |
| } | |
| .search-clear:hover { color: var(--text); } | |
| .search-results { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| left: 0; | |
| right: 0; | |
| background: rgba(13,13,17,0.96); | |
| border: 1px solid var(--border-strong); | |
| border-radius: 14px; | |
| box-shadow: var(--shadow-lg); | |
| backdrop-filter: blur(14px); | |
| max-height: 60vh; | |
| overflow-y: auto; | |
| z-index: 40; | |
| } | |
| .search-empty { | |
| padding: 18px; | |
| color: var(--text-dim); | |
| font-size: 14px; | |
| } | |
| .search-result { | |
| display: block; | |
| padding: 13px 16px; | |
| border-bottom: 1px solid rgba(255,255,255,0.04); | |
| color: var(--text); | |
| } | |
| .search-result:last-child { border-bottom: 0; } | |
| .search-result.active, | |
| .search-result:hover { background: rgba(139,124,255,0.06); } | |
| .search-result-head { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| align-items: baseline; | |
| margin-bottom: 4px; | |
| } | |
| .search-result-title { font-weight: 600; font-size: 14px; color: var(--text); } | |
| .search-result-section { | |
| color: var(--text-mute); | |
| font-size: 10.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| } | |
| .search-result-snippet { | |
| color: var(--text-dim); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| /* ─────────── Home / hero ─────────── */ | |
| .home { max-width: var(--content-max); margin: 0 auto; } | |
| /* Conic mesh hero — the whole panel is one big living gradient. */ | |
| .hero { | |
| position: relative; | |
| padding: 56px 44px 52px; | |
| margin: 8px 0 44px; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| border-radius: 22px; | |
| overflow: hidden; | |
| isolation: isolate; | |
| background: | |
| radial-gradient(1100px 480px at 0% -10%, rgba(139,124,255,0.22), transparent 55%), | |
| radial-gradient(900px 420px at 100% 110%, rgba(79,227,255,0.18), transparent 60%), | |
| radial-gradient(500px 300px at 50% 130%, rgba(255,180,94,0.10), transparent 60%), | |
| linear-gradient(180deg, #0B0B10 0%, #0F0F15 100%); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Hairline grid overlay — fades out softly toward the edges. */ | |
| .hero::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; | |
| mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 80%); | |
| z-index: 0; | |
| } | |
| /* Soft floating orb for depth. */ | |
| .hero::after { | |
| content: ""; | |
| position: absolute; | |
| top: -120px; right: -120px; | |
| width: 360px; height: 360px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(139,124,255,0.30), transparent 70%); | |
| filter: blur(20px); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: orb-drift 18s ease-in-out infinite; | |
| } | |
| @keyframes orb-drift { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 50% { transform: translate(-30px, 40px); } | |
| } | |
| .hero > * { position: relative; z-index: 1; } | |
| .hero-eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| color: var(--text); | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.10); | |
| border-radius: 999px; | |
| padding: 6px 14px; | |
| margin-bottom: 24px; | |
| font-weight: 600; | |
| backdrop-filter: blur(8px); | |
| } | |
| .hero-eyebrow::before { | |
| content: ""; | |
| width: 7px; height: 7px; border-radius: 50%; | |
| background: var(--accent-3); | |
| box-shadow: 0 0 10px var(--accent-3); | |
| animation: hero-pulse 2.4s ease-in-out infinite; | |
| } | |
| @keyframes hero-pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.45; transform: scale(0.7); } | |
| } | |
| .hero-title { | |
| font-size: clamp(32px, 4.6vw, 52px); | |
| line-height: 1.05; | |
| margin: 0 0 18px; | |
| letter-spacing: -0.035em; | |
| font-weight: 600; | |
| background: linear-gradient(180deg, #FFFFFF 0%, #B8B9CC 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| max-width: 18ch; | |
| } | |
| .hero-sub { | |
| color: var(--text-dim); | |
| font-size: 16.5px; | |
| line-height: 1.55; | |
| max-width: 640px; | |
| margin: 0 0 28px; | |
| } | |
| .hero-cta { | |
| color: var(--text-dim); | |
| font-size: 13.5px; | |
| margin-top: 18px; | |
| } | |
| .hero-cta a { color: var(--accent-2); font-weight: 500; } | |
| .hero-link { | |
| background: transparent; | |
| border: 0; | |
| color: var(--accent-2); | |
| cursor: pointer; | |
| padding: 0; | |
| font: inherit; | |
| font-weight: 500; | |
| } | |
| .hero-link:hover { color: var(--accent); } | |
| /* ── Stat strip just below the hero ── */ | |
| .hero-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 1px; | |
| background: rgba(255,255,255,0.06); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| margin: -20px 0 44px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .hero-stat { | |
| background: rgba(13,13,17,0.92); | |
| backdrop-filter: blur(12px); | |
| padding: 18px 22px; | |
| } | |
| .hero-stat-num { | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| line-height: 1.1; | |
| } | |
| .hero-stat-label { | |
| color: var(--text-mute); | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-top: 6px; | |
| font-weight: 500; | |
| } | |
| .section { margin: 56px 0; } | |
| .section-title { | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| margin: 0 0 22px; | |
| color: var(--text-mute); | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .section-title::before { | |
| content: ""; | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 10px var(--accent); | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 14px; | |
| } | |
| .doc-card { | |
| position: relative; | |
| display: block; | |
| padding: 22px 22px 20px; | |
| background: linear-gradient(180deg, rgba(22,22,29,0.8) 0%, rgba(17,17,22,0.8) 100%); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| color: var(--text); | |
| overflow: hidden; | |
| isolation: isolate; | |
| transition: transform 240ms var(--ease), border-color 240ms var(--ease), | |
| background 240ms var(--ease), box-shadow 240ms var(--ease); | |
| } | |
| .doc-card::before { | |
| /* Inner top highlight — gives the card a glassy lit edge. */ | |
| content: ""; | |
| position: absolute; | |
| top: 0; left: 12%; right: 12%; | |
| height: 1px; | |
| background: linear-gradient(90deg, | |
| transparent, rgba(255,255,255,0.18), transparent); | |
| z-index: 1; | |
| } | |
| .doc-card::after { | |
| /* Animated gradient halo behind the card on hover. */ | |
| content: ""; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, | |
| rgba(139,124,255,0.55) 0%, | |
| rgba(79,227,255,0.40) 50%, | |
| rgba(255,180,94,0.20) 100%); | |
| -webkit-mask: | |
| linear-gradient(#000 0 0) content-box, | |
| linear-gradient(#000 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| opacity: 0; | |
| transition: opacity 280ms var(--ease); | |
| z-index: -1; | |
| } | |
| .doc-card:hover { | |
| background: linear-gradient(180deg, rgba(28,28,38,0.85) 0%, rgba(20,20,28,0.85) 100%); | |
| border-color: transparent; | |
| transform: translateY(-3px); | |
| box-shadow: 0 20px 40px -20px rgba(139,124,255,0.40); | |
| } | |
| .doc-card:hover::after { opacity: 1; } | |
| .doc-card-tag { | |
| display: inline-block; | |
| font-size: 10.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.10em; | |
| color: var(--accent-2); | |
| background: rgba(79,227,255,0.08); | |
| border: 1px solid rgba(79,227,255,0.22); | |
| padding: 3px 9px; | |
| border-radius: 999px; | |
| margin-bottom: 14px; | |
| font-weight: 600; | |
| } | |
| .doc-card-title { | |
| font-weight: 600; | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.01em; | |
| } | |
| .doc-card-excerpt { | |
| color: var(--text-dim); | |
| font-size: 13.5px; | |
| margin: 0 0 16px; | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .doc-card-cta { | |
| color: var(--text-dim); | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: color 180ms var(--ease), transform 180ms var(--ease); | |
| display: inline-block; | |
| } | |
| .doc-card:hover .doc-card-cta { | |
| color: var(--accent-2); | |
| transform: translateX(2px); | |
| } | |
| .all-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 28px; | |
| } | |
| .all-section-label { | |
| text-transform: uppercase; | |
| letter-spacing: 0.10em; | |
| font-size: 11px; | |
| color: var(--text-mute); | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .all-section-list { | |
| list-style: none; | |
| margin: 0; padding: 0; | |
| } | |
| .all-section-list li { padding: 5px 0; } | |
| .all-section-list a { | |
| color: var(--text-dim); | |
| font-size: 14px; | |
| transition: color 140ms var(--ease), padding-left 180ms var(--ease); | |
| } | |
| .all-section-list a:hover { | |
| color: var(--text); | |
| padding-left: 4px; | |
| } | |
| /* ─────────── Doc page ─────────── */ | |
| .doc-page { max-width: var(--content-max); margin: 0 auto; } | |
| .breadcrumb { | |
| color: var(--text-mute); | |
| font-size: 12.5px; | |
| margin-bottom: 18px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 500; | |
| } | |
| .crumb { display: inline-flex; align-items: center; } | |
| .crumb-sep { padding: 0 8px; color: var(--text-mute); opacity: 0.6; } | |
| .doc-page-search { margin: 0 0 32px; } | |
| .doc-pager { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 48px; | |
| padding-top: 28px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .doc-pager-cell.right { justify-self: end; text-align: right; } | |
| .doc-pager-link { | |
| display: block; | |
| padding: 16px 18px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| color: var(--text); | |
| min-width: 240px; | |
| transition: 200ms var(--ease); | |
| } | |
| .doc-pager-link:hover { | |
| border-color: rgba(139,124,255,0.4); | |
| background: var(--bg-elev); | |
| transform: translateY(-2px); | |
| } | |
| .doc-pager-dir { | |
| display: block; | |
| color: var(--text-mute); | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.10em; | |
| margin-bottom: 6px; | |
| font-weight: 600; | |
| } | |
| .doc-pager-title { | |
| color: var(--text); | |
| font-weight: 600; | |
| font-size: 14.5px; | |
| letter-spacing: -0.01em; | |
| } | |
| /* ─────────── Markdown body ─────────── */ | |
| .markdown-body { | |
| font-size: 15.5px; | |
| line-height: 1.72; | |
| color: var(--text); | |
| word-wrap: break-word; | |
| } | |
| .markdown-body h1, .markdown-body h2, .markdown-body h3, | |
| .markdown-body h4, .markdown-body h5 { | |
| line-height: 1.2; | |
| margin: 36px 0 14px; | |
| color: var(--text); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| } | |
| .markdown-body h1 { | |
| font-size: clamp(28px, 3.6vw, 38px); | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 14px; | |
| margin-top: 8px; | |
| letter-spacing: -0.025em; | |
| } | |
| .markdown-body h2 { font-size: 22px; } | |
| .markdown-body h3 { font-size: 18px; } | |
| .markdown-body p { margin: 0 0 16px; color: var(--text); } | |
| .markdown-body ul, .markdown-body ol { padding-left: 22px; margin: 0 0 16px; } | |
| .markdown-body li { margin-bottom: 5px; } | |
| .markdown-body blockquote { | |
| border-left: 2px solid var(--accent); | |
| background: linear-gradient(90deg, rgba(139,124,255,0.05), transparent 80%); | |
| color: var(--text-dim); | |
| padding: 12px 16px; | |
| margin: 18px 0; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| } | |
| .markdown-body code { | |
| background: var(--code-bg); | |
| border: 1px solid var(--border); | |
| padding: 1.5px 6px; | |
| border-radius: 5px; | |
| font-family: "JetBrains Mono", "Fira Code", monospace; | |
| font-size: 12.5px; | |
| color: var(--accent-2); | |
| } | |
| .markdown-body pre { | |
| background: var(--code-bg) ; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 16px 18px; | |
| overflow-x: auto; | |
| margin: 18px 0; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .markdown-body pre code { | |
| background: transparent; | |
| border: 0; | |
| padding: 0; | |
| color: var(--text); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| .markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; } | |
| .markdown-body table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin: 18px 0; | |
| font-size: 14px; | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .markdown-body th, .markdown-body td { | |
| border-bottom: 1px solid var(--border); | |
| padding: 10px 14px; | |
| text-align: left; | |
| } | |
| .markdown-body th { background: var(--bg-card); font-weight: 600; color: var(--text-dim); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.06em; } | |
| .markdown-body tr:last-child td { border-bottom: 0; } | |
| .markdown-body img { max-width: 100%; border-radius: var(--radius-sm); } | |
| .md-img-stub { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--bg-card); | |
| border: 1px dashed var(--border-strong); | |
| color: var(--text-mute); | |
| padding: 4px 10px; | |
| border-radius: 8px; | |
| font-size: 12.5px; | |
| } | |
| /* ─────────── Footer ─────────── */ | |
| .footer { | |
| padding: 22px 24px; | |
| color: var(--text-mute); | |
| font-size: 12px; | |
| border-top: 1px solid rgba(255,255,255,0.04); | |
| background: rgba(8,8,12,0.4); | |
| backdrop-filter: blur(8px); | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .footer-sep { opacity: 0.4; } | |
| .not-found { padding: 80px 0; text-align: center; } | |
| .not-found h1 { | |
| font-size: 96px; | |
| margin: 0; | |
| background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| letter-spacing: -0.04em; | |
| font-weight: 700; | |
| } | |
| /* ─────────── Responsive (≤ 960px) ─────────── */ | |
| @media (max-width: 960px) { | |
| .hamburger { display: inline-flex; } | |
| .shell-body { grid-template-columns: 1fr; } | |
| .sidebar { | |
| position: fixed; | |
| top: var(--topbar-h); | |
| left: 0; | |
| bottom: 0; | |
| width: min(85vw, 320px); | |
| z-index: 35; | |
| transform: translateX(-100%); | |
| transition: transform 260ms var(--ease); | |
| height: auto; | |
| } | |
| .shell-body.sidebar-open .sidebar { transform: translateX(0); } | |
| .shell-body.sidebar-open .sidebar-backdrop { display: block; } | |
| .main-pane { padding: 28px 20px 72px; } | |
| .hero { padding: 40px 28px 36px; border-radius: 18px; } | |
| .hero-stats { margin-top: -10px; } | |
| } | |