/* ── MemPalace Custom Theme ──────────────────────────────────────────── */ /* Crystal Lattice palette — crystalline cyan through deep blue-black */ :root { /* Crystal Lattice palette */ --mp-bg: #080C18; --mp-surface: #0F1524; --mp-surface-high: #182033; --mp-border: #1C2640; --mp-border-soft: #121829; --mp-cyan: #7DD3FC; --mp-cyan-vivid: #38BDF8; --mp-ice: #DBE7F5; --mp-body: #CDD5E0; --mp-muted: #8B99B0; --mp-dim: #5B6B82; --mp-ok: #34D399; --mp-warn: #FBBF24; --mp-hot: #FF8B8B; --mp-violet: #A78BFA; /* VitePress overrides */ --vp-c-brand-1: var(--mp-cyan-vivid); --vp-c-brand-2: var(--mp-cyan); --vp-c-brand-3: var(--mp-violet); --vp-c-brand-soft: rgba(56, 189, 248, 0.14); --vp-font-family-base: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --vp-font-family-mono: 'JetBrains Mono', monospace; /* Home hero gradient */ --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: linear-gradient(135deg, var(--mp-ice) 0%, var(--mp-cyan-vivid) 60%, var(--mp-violet) 100%); --vp-home-hero-image-background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(125, 211, 252, 0.2) 50%, rgba(167, 139, 250, 0.15) 100%); --vp-home-hero-image-filter: blur(56px); /* Button colors */ --vp-button-brand-border: transparent; --vp-button-brand-text: #080C18; --vp-button-brand-bg: var(--mp-cyan-vivid); --vp-button-brand-hover-border: transparent; --vp-button-brand-hover-text: #080C18; --vp-button-brand-hover-bg: var(--mp-cyan); --vp-button-alt-border: rgba(56, 189, 248, 0.25); --vp-button-alt-text: var(--mp-cyan-vivid); --vp-button-alt-bg: rgba(56, 189, 248, 0.08); --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4); --vp-button-alt-hover-text: var(--mp-cyan); --vp-button-alt-hover-bg: rgba(56, 189, 248, 0.14); } /* Dark mode overrides */ .dark { --vp-c-brand-1: var(--mp-cyan-vivid); --vp-c-brand-2: var(--mp-cyan); --vp-c-brand-3: var(--mp-violet); --vp-c-brand-soft: rgba(56, 189, 248, 0.14); --vp-button-brand-bg: var(--mp-cyan-vivid); --vp-button-brand-hover-bg: var(--mp-cyan); --vp-button-alt-border: rgba(56, 189, 248, 0.25); --vp-button-alt-text: var(--mp-cyan-vivid); --vp-button-alt-bg: rgba(56, 189, 248, 0.08); --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4); --vp-button-alt-hover-text: var(--mp-cyan); --vp-button-alt-hover-bg: rgba(56, 189, 248, 0.14); --vp-home-hero-image-background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(125, 211, 252, 0.2) 50%, rgba(167, 139, 250, 0.15) 100%); } /* ── Hero section ───────────────────────────────────────────────────── */ .VPHero .VPImage { max-width: 180px; border-radius: 20px; } .VPHero .name { font-family: 'Neue Machina', 'Satoshi', sans-serif !important; font-weight: 500 !important; letter-spacing: -1.5px; } .VPHero .text { font-family: 'Satoshi', 'Onest', sans-serif; font-weight: 500; background: linear-gradient(135deg, var(--vp-c-text-1) 0%, var(--mp-cyan-vivid) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dark .VPHero .text { background: linear-gradient(135deg, var(--mp-ice) 0%, var(--mp-cyan-vivid) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Feature cards ──────────────────────────────────────────────────── */ .VPFeature { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--vp-c-divider); } .VPFeature:hover { transform: translateY(-4px); border-color: var(--mp-cyan-vivid); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12); } .dark .VPFeature:hover { border-color: var(--mp-cyan-vivid); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12); } .VPFeature .title { font-family: 'Satoshi', 'Onest', sans-serif; font-weight: 600; } /* ── Sidebar ────────────────────────────────────────────────────────── */ .VPSidebar .VPSidebarItem .text { transition: color 0.2s ease; } .VPSidebar .VPSidebarItem.is-active .text { color: var(--mp-cyan-vivid) !important; font-weight: 600; } .dark .VPSidebar .VPSidebarItem.is-active .text { color: var(--mp-cyan-vivid) !important; } /* ── Code blocks ────────────────────────────────────────────────────── */ .vp-doc div[class*='language-'] { border: 1px solid var(--vp-c-divider); border-radius: 8px; } .dark .vp-doc div[class*='language-'] { border-color: rgba(56, 189, 248, 0.15); } /* ── Custom containers ──────────────────────────────────────────────── */ .vp-doc .custom-block.tip { border-color: var(--mp-ok); } .vp-doc .custom-block.warning { border-color: var(--mp-warn); } .vp-doc .custom-block.info { border-color: var(--mp-cyan-vivid); } /* ── Tables ─────────────────────────────────────────────────────────── */ .vp-doc table { border-radius: 8px; overflow: hidden; } .vp-doc th { background: rgba(56, 189, 248, 0.06); font-weight: 600; } .dark .vp-doc th { background: rgba(56, 189, 248, 0.08); } /* ── Nav ────────────────────────────────────────────────────────────── */ .VPNavBar .VPNavBarTitle .title { font-family: 'Neue Machina', 'Satoshi', sans-serif; font-weight: 500; letter-spacing: -0.4px; } /* ── Footer ─────────────────────────────────────────────────────────── */ .VPFooter { border-top: 1px solid var(--vp-c-divider); } /* ── Scrollbar ──────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--vp-c-divider); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--mp-cyan-vivid); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--mp-cyan-vivid); } /* ── Smooth transitions ─────────────────────────────────────────────── */ a, .VPLink { transition: color 0.2s ease; } .VPButton { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .VPButton:hover { transform: translateY(-1px); }