@callstack/rspress-theme/dist/index.css

Callstack theme for Rspress docs

.bar-yFRNhz {
  color: #fff;
  background-color: #8232ff;
  justify-content: center;
  align-items: center;
  height: 32px;
  display: flex;
  position: relative;
}

.link-iUd1SG {
  color: #fff;
  font-family: Switzer Variable, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.link-iUd1SG:hover {
  opacity: .9;
  text-decoration: underline;
}

.link-iUd1SG:active {
  opacity: .7;
}

.close-kUdhEg {
  z-index: 1;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 16px;
  cursor: pointer !important;
}

.close-kUdhEg:hover {
  background-color: #ffffff4d;
}

.badge-JOuwlY {
  vertical-align: middle;
  border-radius: var(--rp-radius-small);
  padding-inline: .625rem;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  height: 1.5rem;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: color .25s;
  display: inline-flex;
}

.badge-JOuwlY.tip-obOVcS {
  color: var(--rp-container-tip-border);
  background-color: var(--rp-container-tip-bg);
}

.badge-JOuwlY.info-q_r3eR {
  color: var(--rp-container-info-border);
  background-color: var(--rp-container-info-bg);
}

.badge-JOuwlY.warning-BggZiV {
  color: var(--rp-container-warning-border);
  background-color: var(--rp-container-warning-bg);
}

.badge-JOuwlY.danger-UwnNxJ {
  color: var(--rp-container-danger-border);
  background-color: var(--rp-container-danger-bg);
}

.badge-JOuwlY.note-ItYjre {
  color: var(--rp-container-note-border);
  background-color: var(--rp-container-note-bg);
}

.outline-gGpHp9.tip-obOVcS {
  border-color: var(--rp-container-tip-border);
}

.outline-gGpHp9.info-q_r3eR {
  border-color: var(--rp-container-info-border);
}

.outline-gGpHp9.warning-BggZiV {
  border-color: var(--rp-container-warning-border);
}

.outline-gGpHp9.danger-UwnNxJ {
  border-color: var(--rp-container-danger-border);
}

.outline-gGpHp9.note-ItYjre {
  border-color: var(--rp-container-note-border);
}

.button-DogSnd {
  font-family: var(--rp-font-family);
  cursor: pointer;
  border-radius: 2px;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 4px 4px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: background-position .45s cubic-bezier(.625, .05, 0, 1), color .45s cubic-bezier(.625, .05, 0, 1), transform .45s cubic-bezier(.625, .05, 0, 1);
}

@media (pointer: fine) {
  .button-DogSnd:hover {
    color: #fff !important;
    background-position: 0 100% !important;
  }

  .button-DogSnd:hover svg.button-icon-Okk0hT > path {
    animation: .2s cubic-bezier(.625, .05, 0, 1) slide-out-Yp9sdv, .25s cubic-bezier(.625, .05, 0, 1) .2s slide-in-_qbjG1;
  }
}

.button-DogSnd > * {
  vertical-align: -50%;
}

.button-DogSnd.alt-XB5jdj {
  background: linear-gradient(to right, var(--rp-c-brand) 50%, #fff 50%) right bottom / calc(200% + 1px) 100%;
  color: #201f24;
}

.dark .button-DogSnd.brand-rT2ahT {
  background: linear-gradient(to right, var(--rp-c-brand) 50%, #fff 50%) right bottom / calc(200% + 1px) 100%;
  color: #201f24;
}

.button-DogSnd.brand-rT2ahT {
  background: linear-gradient(to right, var(--rp-c-brand) 50%, #201f24 50%) right bottom / calc(200% + 1px) 100%;
  color: #fff;
}

.dark .button-DogSnd.alt-XB5jdj {
  background: linear-gradient(to right, var(--rp-c-brand) 50%, #201f24 50%) right bottom / calc(200% + 1px) 100%;
  color: #fff;
}

@keyframes slide-in-_qbjG1 {
  from {
    transform: translateX(-150%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes slide-out-Yp9sdv {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(150%);
  }
}

.brand-rT2ahT {
  border: none;
}

.alt-XB5jdj {
  border: 1px solid var(--rp-c-divider-light);
}

.button-icon-Okk0hT {
  border-radius: 2px;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  padding: 8px;
  transition: color .45s cubic-bezier(.625, .05, 0, 1);
  display: inline-block;
  overflow: hidden;
}

.button-DogSnd.alt-XB5jdj .button-icon-Okk0hT, .button-icon-Okk0hT {
  color: inherit;
  background: #1514151a;
}

.dark .button-DogSnd.brand-rT2ahT .button-icon-Okk0hT {
  color: inherit;
  background: #1514151a;
}

.button-DogSnd.brand-rT2ahT .button-icon-Okk0hT {
  color: inherit;
  background: #fff3;
}

.dark .button-DogSnd.alt-XB5jdj .button-icon-Okk0hT {
  color: inherit;
  background: #fff3;
}

.card-Mp1eVU {
  color: var(--rp-c-text-1);
  border: 1px dashed var(--rp-c-divider);
  border-radius: var(--rp-radius-small);
  justify-content: space-between;
  align-items: flex-start;
  margin: 1rem 0;
  padding: 32px;
  display: flex;
  position: relative;
}

.cardContentContainer-uPAwxW {
  flex-direction: column;
  display: flex;
}

.cardTitle-TpjSJW {
  font-family: var(--ck-header-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.cardContent-IHYWJn {
  font-family: var(--rp-font-family);
  color: var(--rp-c-text-2);
  letter-spacing: -.32px;
  text-align: left;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.container-JklxSY {
  color: var(--rp-c-brand-light);
  background-image: url(./static/image/gradient-dark.avif);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 16px);
  height: 382px;
  margin: 32px auto;
  padding: 64px 48px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.logo-wGu6zG {
  pointer-events: none;
  opacity: .7;
  position: absolute;
}

.content-qrbCuM {
  z-index: 4;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 640px;
  display: flex;
  position: relative;
}

.headline-urbBtl {
  color: #fff;
  font-family: var(--ck-header-font-family);
  letter-spacing: -1.6px;
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.description-a82hKX {
  flex-direction: column;
  gap: 32px;
  max-width: 416px;
  display: flex;
}

.descriptionText-UMW_4H {
  color: #cfced5;
  letter-spacing: -.36px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  font-family: var(--rp-font-family);
}

@media (max-width: 960px) {
  .container-JklxSY {
    height: 320px;
    padding: 32px 16px;
  }

  .content-qrbCuM {
    gap: 24px;
    max-width: 90vw;
  }

  .logo-wGu6zG {
    scale: 1.2;
  }

  .headline-urbBtl {
    letter-spacing: -1px;
    font-size: 28px;
  }

  .description-a82hKX {
    gap: 20px;
    max-width: 380px;
  }

  .descriptionText-UMW_4H {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .container-JklxSY {
    height: 240px;
    margin: 16px auto;
  }

  .content-qrbCuM {
    gap: 16px;
    max-width: 100vw;
  }

  .logo-wGu6zG {
    scale: 1.5;
  }

  .headline-urbBtl {
    letter-spacing: -.5px;
    font-size: 20px;
  }

  .description-a82hKX {
    gap: 12px;
    max-width: 320px;
  }

  .descriptionText-UMW_4H {
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .grid-2-cgAqRP, .grid-4-JvWJqM, .grid-6-dUNjnk {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .grid-2-cgAqRP, .grid-4-JvWJqM, .grid-6-dUNjnk {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .grid-2-cgAqRP, .grid-4-JvWJqM {
    width: 50%;
  }

  .grid-3-UOYenV, .grid-6-dUNjnk {
    width: 33.3333%;
  }
}

@media (min-width: 960px) {
  .grid-3-UOYenV {
    width: 25%;
  }

  .grid-4-JvWJqM {
    width: 33.3333%;
  }

  .grid-6-dUNjnk {
    width: 50%;
  }
}

.featureCardContainer-NOFPt7 {
  height: 100%;
  padding: 8px;
}

.featureCard-XfKTmz {
  color: var(--rp-c-text-1);
  border: 1px dashed var(--rp-c-divider);
  border-radius: var(--rp-radius-small);
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  height: 100%;
  padding: 32px;
  transition: border-color .3s cubic-bezier(.65, .05, .36, 1);
  display: flex;
  position: relative;
}

.featureCard-XfKTmz:hover {
  color: var(--rp-c-brand);
  border-color: var(--ck-accent);
}

.featureCard-XfKTmz:before {
  content: "";
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url(./static/image/gradient-light.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity .3s cubic-bezier(.65, .05, .36, 1);
  position: absolute;
  inset: 0;
}

.dark .featureCard-XfKTmz:before {
  background-image: url(./static/image/gradient-dark.avif);
}

.featureCard-XfKTmz:hover:before {
  opacity: 1;
}

.dark .featureCard-XfKTmz:hover:before {
  opacity: .5;
}

.featureIcon-Hb8_cv {
  width: 32px;
  height: 32px;
  color: var(--rp-c-brand);
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.featureTitle-cyqmgX {
  font-family: var(--ck-header-font-family);
  letter-spacing: -.8px;
  text-align: left;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.featureDetail-QDEU9M {
  font-family: var(--rp-font-family);
  color: var(--rp-c-text-2);
  letter-spacing: -.32px;
  text-align: left;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.container-IBgsxu {
  width: calc(100% - 16px);
  margin: 0 auto 150px;
  padding: 4px;
}

.row-VpRJwk {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.logo-eionWK {
  width: 101px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.message-flKFGZ {
  color: var(--rp-c-text-3);
  text-align: center;
  margin: 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .container-IBgsxu {
    margin: 0 auto 100px;
  }
}

@media (max-width: 960px) {
  .container-IBgsxu {
    margin: 0 auto 64px;
  }
}

@media (max-width: 640px) {
  .container-IBgsxu {
    margin: 0 auto 16px;
  }
}

.container-Ey5SDc {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: calc(100% - 16px);
  margin: 0 auto;
  padding-top: 12vh;
  padding-bottom: 6vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.heroMain-aBhXSi {
  text-wrap: balance;
  flex-direction: column;
  max-width: 55%;
  display: flex;
}

.heroImage-SovGBC {
  max-height: 24px;
  margin: 0 0 32px;
}

.heroName-_0lw9K {
  color: var(--rp-c-text-1);
  font-family: Alliance No\.2, Arial, sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

.heroTaglineActions-jKkfzE {
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
  align-items: flex-end;
  margin: 0 32px 0 60%;
  display: flex;
}

.heroTagline-HUMGEx {
  color: var(--rp-c-text-2);
  font-family: var(--rp-font-family);
  letter-spacing: -.36px;
  text-wrap: pretty;
  max-width: 500px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.heroActions-x2L3Tk {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 16px;
  margin: 32px 0;
  display: flex;
}

@media (max-width: 960px) {
  .container-Ey5SDc {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .heroMain-aBhXSi {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
  }

  .heroImage-SovGBC {
    margin: 0 32px 32px;
  }

  .heroName-_0lw9K {
    text-align: center;
    margin: 0 32px;
    font-size: 48px;
  }

  .heroTaglineActions-jKkfzE {
    align-self: center;
    margin: 32px;
  }

  .heroTagline-HUMGEx {
    text-align: center;
    max-width: 100%;
  }

  .heroActions-x2L3Tk {
    align-self: center;
  }
}

@media (max-width: 640px) {
  .heroMain-aBhXSi {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .heroImage-SovGBC {
    margin: 0 16px 32px;
  }

  .heroName-_0lw9K {
    text-align: center;
    margin: 0 16px;
    font-size: 32px;
  }

  .heroActions-x2L3Tk {
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .heroTaglineActions-jKkfzE {
    align-self: center;
    margin-bottom: 0;
  }

  .heroActions-x2L3Tk {
    gap: 12px;
  }
}

.linkCard-cPk9Gt {
  color: var(--rp-c-text-1);
  border: 1px dashed var(--rp-c-divider);
  border-radius: var(--rp-radius-small);
  justify-content: space-between;
  align-items: flex-start;
  margin: 1rem 0;
  padding: 32px;
  transition: border-color .3s cubic-bezier(.65, .05, .36, 1);
  display: flex;
  position: relative;
}

.linkCard-cPk9Gt:hover {
  border-color: var(--ck-accent);
  color: var(--rp-c-brand) !important;
}

.linkCard-cPk9Gt:before {
  content: "";
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url(./static/image/gradient-light.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity .3s cubic-bezier(.65, .05, .36, 1);
  position: absolute;
  inset: 0;
}

.link-zuNVWp:before {
  content: "";
  position: absolute;
  inset: 0;
}

.dark .linkCard-cPk9Gt:before {
  background-image: url(./static/image/gradient-dark.avif);
}

.linkCard-cPk9Gt:hover:before {
  opacity: 1;
}

.dark .linkCard-cPk9Gt:hover:before {
  opacity: .5;
}

.linkCardContent-GW7Cr2 {
  flex-direction: column;
  display: flex;
}

.linkCardTitle-uyQhA8 {
  font-family: var(--ck-header-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.linkCardDescription-vJgWKQ {
  font-family: var(--rp-font-family);
  color: var(--rp-c-text-2);
  letter-spacing: -.32px;
  text-align: left;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.container-LzbylO {
  border-left: 1px solid var(--rp-c-divider-light);
  border-radius: 0;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 48px;
  display: flex;
  position: relative;
}

.container-LzbylO:before {
  content: "";
  border-top: 1px solid var(--rp-c-divider-light);
  width: 90%;
  display: block;
  position: absolute;
  top: -1px;
  left: 5%;
}

.headline-y75_LS {
  color: var(--rp-c-text-1);
  font-family: var(--ck-header-font-family);
  letter-spacing: -.64px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.description-muYVs3 {
  color: var(--rp-c-text-2);
  font-family: var(--rp-font-family);
  letter-spacing: -.28px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.pager-link-NSBULJ {
  border: 1px solid var(--rp-c-divider-light);
  border-radius: var(--rp-radius-small);
  box-sizing: border-box;
  padding: 12px;
  text-decoration: none;
  display: block;
}

.pager-link-NSBULJ:hover, .pager-link-NSBULJ:focus {
  border-color: var(--ck-accent) !important;
}

.pager-link-NSBULJ:hover .title-hrit_i, .pager-link-NSBULJ:focus .title-hrit_i {
  color: var(--ck-accent);
}

.pager-link-NSBULJ.next-axkYXz {
  text-align: right;
  margin-left: auto;
}

.desc-sp3vRh {
  font-size: 12px;
  line-height: 1;
  font-family: var(--rp-font-family);
  color: var(--rp-c-text-2);
  letter-spacing: -.24px;
  font-weight: 400;
}

.title-hrit_i {
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--rp-font-family);
  color: var(--rp-c-text-1);
  letter-spacing: -.32px;
  font-weight: 400;
}

.inner-MA3YUN {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  display: flex;
}

.textWrap-lmdyLc {
  flex-direction: column;
  flex: auto;
  gap: 2px;
  display: flex;
}

.iconWrap-ATpUMW {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.iconBg-mnR30D {
  background-color: var(--rp-c-divider-light);
  border-radius: var(--rp-radius-small);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.icon-WRLCnG {
  width: 16px;
  height: 16px;
  display: block;
}

.iconPrev-ZwYZt5 {
  transform: rotate(180deg)scaleY(-1);
}

::view-transition-old(root) {
  mix-blend-mode: normal;
  animation: none;
}

::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}

::view-transition-old(root) {
  z-index: 1;
}

.dark-q8ZwQl::view-transition-new(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

.dark-q8ZwQl::view-transition-old(root) {
  z-index: 9999;
}

.container-guehiO {
  padding-bottom: 8px;
}