ff

src/styles/responsive.css

@@ -0,0 +1,125 @@
+/**
+ * 全站响应式：手机 (<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);
+  }
+}