haiyushuke-website/src/styles/responsive.css

/**
 * 全站响应式：手机 (<768)、平板 (768–991)、桌面 (≥992)。
 */
@layer components {
  html {
    --nav-offset: 4.75rem;
  }

  @media (width >= 768px) {
    html {
      --nav-offset: 5rem;
    }
  }

  @media (width >= 992px) {
    html {
      --nav-offset: 5.5rem;
    }
  }

  /** 顶栏吸顶融合后，仅占导航条高度 */
  html.nav-is-docked {
    --nav-offset: 3.25rem;
  }

  body {
    overflow-x: clip;
  }

  .site-content {
    width: 100%;
    min-width: 0;
  }

  @media (width < 768px) {
    .band-section {
      padding-block: 3.5rem;
    }

    .section-stack {
      gap: var(--spacing-2xl);
    }
  }

  @media (width >= 768px) and (width < 992px) {
    .band-section {
      padding-block: 4.75rem;
    }
  }

  .hero-section {
    min-height: min(400px, 78svh);
  }

  @media (width >= 768px) {
    .hero-section {
      min-height: min(480px, 72vh);
    }
  }

  @media (width >= 992px) {
    .hero-section {
      min-height: min(520px, 72vh);
    }
  }

  .hero-section__content {
    min-height: inherit;
    padding-block: 3rem;
  }

  @media (width >= 768px) {
    .hero-section__content {
      padding-block: 4rem;
    }
  }

  @media (width >= 992px) {
    .hero-section__content {
      padding-block: 5rem;
    }
  }

  .hero-section__shade--mobile {
    background: linear-gradient(
      180deg,
      rgb(248 250 252 / 0.55) 0%,
      rgb(248 250 252 / 0.82) 42%,
      rgb(248 250 252 / 0.92) 100%
    );
  }

  @media (width >= 768px) {
    .hero-section__shade--mobile {
      background: linear-gradient(
        to right,
        rgb(248 250 252 / 0.88) 0%,
        rgb(248 250 252 / 0.88) 22%,
        rgb(248 250 252 / 0.45) 45%,
        transparent 70%
      );
    }
  }

  @media (width < 768px) {
    .report-example-overlay {
      align-items: flex-end;
      padding: var(--spacing-md);
    }

    .report-example-dialog__header,
    .report-example-dialog__body,
    .report-example-dialog__footer {
      padding: var(--spacing-lg);
    }

    .report-example-dialog__footer .btn-outline {
      width: 100%;
    }
  }

  .subpage-main {
    padding-top: var(--nav-offset);
  }
}