Pumpkin-Docs/docs/.vitepress/theme/style.css

/**
 * Pumpkin Documentation Theme Styling
 * High-performance, clean developer theme for Pumpkin Minecraft Server.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Base Theme Variables & Brand Palette
   ========================================================================== */

:root {
  --vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --vp-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Refined Pumpkin Brand Colors (Warm Amber & Tangerine) */
  --vp-c-brand-1: #f97316;
  --vp-c-brand-2: #ea580c;
  --vp-c-brand-3: #c2410c;
  --vp-c-brand-soft: rgba(249, 115, 22, 0.14);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-warning-1: #eab308;
  --vp-c-warning-2: #ca8a04;
  --vp-c-warning-3: #a16207;
  --vp-c-warning-soft: rgba(234, 179, 8, 0.14);

  --vp-c-danger-1: #ef4444;
  --vp-c-danger-2: #dc2626;
  --vp-c-danger-3: #b91c1c;
  --vp-c-danger-soft: rgba(239, 68, 68, 0.14);
}

/* ==========================================================================
   Deep Obsidian Dark Mode
   ========================================================================== */

.dark {
  --vp-c-bg: #0c0d0e;
  --vp-c-bg-alt: #121316;
  --vp-c-bg-elv: #181a1f;
  --vp-c-bg-soft: rgba(255, 255, 255, 0.04);
  --vp-c-divider: rgba(255, 255, 255, 0.08);
  --vp-c-gutter: #0c0d0e;
}

/* ==========================================================================
   Typography Polish
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

.vp-doc h1 {
  font-weight: 700;
}

.vp-doc h2 {
  font-weight: 600;
  border-top: 1px solid var(--vp-c-divider);
  padding-top: 24px;
}

.vp-doc h3 {
  font-weight: 600;
}

/* ==========================================================================
   Component: Button
   ========================================================================== */

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: var(--vp-c-brand-2);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-hover-bg: var(--vp-c-brand-1);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: #ffffff;
  --vp-button-brand-active-bg: var(--vp-c-brand-3);
}

/* ==========================================================================
   Component: Home Hero
   ========================================================================== */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #f97316 30%,
    #fb923c
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #f97316 50%,
    #ea580c 50%
  );
  --vp-home-hero-image-filter: blur(44px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}

/* ==========================================================================
   Structured Tables
   ========================================================================== */

.vp-doc table {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px 0;
  border: 1px solid var(--vp-c-divider);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
}

.vp-doc th {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vp-c-divider);
  text-align: left;
}

.vp-doc td {
  padding: 12px 16px;
  border-top: 1px solid var(--vp-c-divider);
  transition: background-color 0.15s ease;
  line-height: 1.55;
}

.vp-doc tr:first-child td {
  border-top: none;
}

.vp-doc tr:hover td {
  background-color: var(--vp-c-bg-soft);
}

/* ==========================================================================
   Code Blocks & Inline Monospace
   ========================================================================== */

.vp-doc :not(pre) > code {
  font-family: var(--vp-font-family-mono);
  font-size: 0.85em;
  padding: 2.5px 6px;
  border-radius: 6px;
  background-color: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  font-weight: 500;
}

.vp-doc div[class*='language-'] {
  border: 1px solid var(--vp-c-divider);
  border-radius: 10px;
  overflow: hidden;
}

.vp-code-group .tabs {
  border-bottom: 1px solid var(--vp-c-divider);
}

/* ==========================================================================
   Rounded Pill Badges
   ========================================================================== */

.VPBadge {
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 2px 8px !important;
  line-height: 16px !important;
}

/* ==========================================================================
   Component: Custom Block / Callouts
   ========================================================================== */

.vp-doc .custom-block {
  border-radius: 10px;
  border: 1px solid var(--vp-c-divider);
}

/* ==========================================================================
   Component: Algolia / Local Search
   ========================================================================== */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand-1) !important;
}