hera-web/src/pages/agreement/index.scss

.agreement-page {
  width: 100%;
  max-width: 750px;
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(132px + env(safe-area-inset-top)) 32px calc(36px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  color: #28243a;
  background:
    radial-gradient(circle at 16% 5%, rgba(180, 155, 255, 0.62), transparent 31%),
    linear-gradient(180deg, #c8b7ff 0%, #e8e2ff 34%, #f0f5ff 70%, #edf5ff 100%);
  overflow: hidden;
}

.agreement-page .nav {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: 750px;
  height: calc(106px + env(safe-area-inset-top));
  padding-bottom: 20px;
  transform: translateX(-50%);
}

.agreement-page .nav-title {
  color: #27213f;
  font-size: 38px;
  font-weight: 800;
}

.agreement-page .back {
  color: #30294b;
}

.agreement-tabs {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 84px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 46px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 10px 28px rgba(95, 76, 139, 0.08);
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}

.tab-indicator {
  position: absolute;
  left: 6px;
  top: 6px;
  width: calc(50% - 6px);
  height: 68px;
  border-radius: 38px;
  background: linear-gradient(135deg, #7862dc 0%, #9279ed 100%);
  box-shadow: 0 8px 18px rgba(102, 78, 193, 0.24);
  transition: transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.agreement-tabs.privacy-active .tab-indicator {
  transform: translateX(100%);
}

.agreement-tab {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 68px;
  flex: none;
  color: #59516f;
  font-size: 30px;
  font-weight: 700;
  line-height: 68px;
  text-align: center;
  transition: color 180ms ease;
}

.agreement-tab + .agreement-tab {
  margin-top: 0;
}

.agreement-tab.current {
  color: #fff;
}

.agreement-article {
  height: calc(100vh - 252px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin-top: 28px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(85, 72, 119, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.article-inner {
  min-height: 100%;
  padding: 38px 34px 56px;
  box-sizing: border-box;
  animation: article-enter 230ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.article-title {
  display: block;
  margin-bottom: 30px;
  color: #28213f;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.paragraph {
  display: block;
  margin-bottom: 26px;
  color: #4c465c;
  font-size: 28px;
  line-height: 1.9;
  text-align: justify;
}

.paragraph:last-child {
  margin-bottom: 0;
}

@keyframes article-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-height: 700px) {
  .agreement-page {
    padding-top: calc(112px + env(safe-area-inset-top));
  }

  .agreement-article {
    height: calc(100vh - 222px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top: 22px;
  }

  .article-inner {
    padding-top: 30px;
  }
}