custom.css

/* ── Unica77 medium/light weights (regular loaded via docs.json) ── */
@font-face {
  font-family: 'Unica77';
  src: url('/fonts/Unica77LL-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unica77';
  src: url('/fonts/Unica77LL-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── Sidebar group headers vs page links ─────────────────── */
/* Group headers are not <a> tags — make them small, muted, uppercase */
aside p,
aside button > p,
aside nav > div > p,
aside nav div > p {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  opacity: 0.45 !important;
}

/* Page links are <a> tags — keep normal size, add subtle indent */
aside a {
  font-size: 0.875rem !important;
  padding-left: 0.5rem !important;
}

/* ── Headings: lighter weight, a touch more tracking ─────── */
/* The default headings render very heavy with tight tracking, which reads as
   cramped. Drop to medium and let the letters breathe. */
h1,
.prose h1 {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

h2,
h3,
h4,
.prose h2,
.prose h3,
.prose h4 {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── Discord navbar button: one flat neutral pill ────────── */
/* Style the anchor and flatten every nested layer so it reads as a single
   dark pill instead of two stacked rounded backgrounds. */
header a[href="https://discord.sirius.menu"] {
  background-color: #1c1c1f !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 0.6rem !important;
  color: #ededed !important;
}

header a[href="https://discord.sirius.menu"] * {
  background-color: transparent !important;
  box-shadow: none !important;
}

header a[href="https://discord.sirius.menu"]:hover {
  background-color: #26262a !important;
  border-color: #34343a !important;
}

/* ── Sentivel cross-promo banner ─────────────────────────── */
/* A slim bar pinned above the content on Rayfield and Gen2 pages. The bare
   Sentivel mark sits in a soft white bloom, with a solid white pill for the
   action, so it reads as a recommendation rather than an ad unit. No borders —
   a grey stroke fights the glow. No hover animation. */
a.sv-banner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin: 0 0 1.75rem;
  padding: 0.8rem 0.85rem 0.8rem 1.15rem;
  overflow: hidden;
  background: linear-gradient(100deg, #17171a 0%, #121214 45%, #0f0f11 100%);
  border: 1px solid transparent;
  border-radius: 0.85rem;
  text-decoration: none !important;
}

/* The bloom. Anchored behind the mark and breathing slowly, so the banner has a
   light source instead of a flat fill. */
a.sv-banner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15rem;
  height: 15rem;
  transform: translate(-40%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 34%,
    rgba(255, 255, 255, 0) 66%
  );
  pointer-events: none;
  animation: sv-banner-bloom 7s ease-in-out infinite;
}

/* Children are positioned so they paint above the bloom. */
.sv-banner-mark,
.sv-banner-copy,
.sv-banner-cta {
  position: relative;
}

.sv-banner-mark {
  flex: none;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.sv-banner-mark svg {
  display: block;
  width: auto;
  height: 1.5rem;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
}

.sv-banner-copy {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* MDX wraps multi-line inline content in an inner `span[data-as="p"]`, so the
   flex row has to be declared on that wrapper too — otherwise the gap lands on
   the wrapper and the badge sits on raw whitespace. */
.sv-banner-title,
.sv-banner-title > span:not(.sv-banner-badge) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.sv-banner-title {
  color: #f4f4f5;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.sv-banner-badge {
  color: #a9a9b2;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.1rem 0.42rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0.35rem;
}

.sv-banner-sub {
  color: #90909a;
  font-size: 0.79rem;
  line-height: 1.4;
}

.sv-banner-cta,
.sv-banner-cta > span:not(.sv-banner-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sv-banner-cta {
  flex: none;
  padding: 0.42rem 0.8rem;
  color: #0a0a0a !important;
  font-size: 0.79rem;
  font-weight: 500;
  white-space: nowrap;
  background: #ffffff;
  border-radius: 0.55rem;
}

@keyframes sv-banner-bloom {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-40%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-40%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.sv-banner::before {
    animation: none;
  }
}

/* ── Gen2 upgrade banner ─────────────────────────────────── */
/* Sits above the Sentivel bar on the Rayfield (2022) pages only, pointing
   readers at Gen2. Same slim geometry so the two stack as one block, but it
   carries the Rayfield mark, a blue hairline and bloom, and an outlined
   action — a signpost, not a second ad unit. Deliberately still: the Sentivel
   bloom breathes, so this one holds so they don't compete. */
a.rg2-banner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  /* Always directly above the Sentivel banner, so keep the pair tight. */
  margin: 0 0 0.6rem;
  padding: 0.8rem 0.85rem 0.8rem 1.15rem;
  overflow: hidden;
  background: linear-gradient(100deg, #0e1a26 0%, #0c141d 45%, #0b0f14 100%);
  border: 1px solid rgba(0, 136, 255, 0.22);
  border-radius: 0.85rem;
  text-decoration: none !important;
}

a.rg2-banner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15rem;
  height: 15rem;
  transform: translate(-40%, -50%);
  background: radial-gradient(
    circle,
    rgba(0, 136, 255, 0.28) 0%,
    rgba(0, 136, 255, 0.1) 34%,
    rgba(0, 136, 255, 0) 66%
  );
  pointer-events: none;
}

.rg2-banner-mark,
.rg2-banner-copy,
.rg2-banner-cta {
  position: relative;
}

.rg2-banner-mark {
  flex: none;
  display: grid;
  place-items: center;
  color: #3399ff;
}

.rg2-banner-mark svg {
  display: block;
  width: auto;
  height: 1.4rem;
  filter: drop-shadow(0 0 12px rgba(0, 136, 255, 0.55));
}

.rg2-banner-copy {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Same MDX `span[data-as="p"]` wrapper caveat as the Sentivel banner. */
.rg2-banner-title,
.rg2-banner-title > span:not(.rg2-banner-badge) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.rg2-banner-title {
  color: #f4f4f5;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.rg2-banner-badge {
  color: #7cc0ff;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.1rem 0.42rem;
  background: rgba(0, 136, 255, 0.14);
  border-radius: 0.35rem;
}

.rg2-banner-sub {
  color: #8d95a0;
  font-size: 0.79rem;
  line-height: 1.4;
}

.rg2-banner-cta,
.rg2-banner-cta > span:not(.rg2-banner-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.rg2-banner-cta {
  flex: none;
  padding: 0.42rem 0.8rem;
  color: #9ecdff !important;
  font-size: 0.79rem;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(0, 136, 255, 0.1);
  border: 1px solid rgba(0, 136, 255, 0.35);
  border-radius: 0.55rem;
}