改为轻拟物服务入口风格

assets/css/layout.css

@@ -1,115 +1,126 @@
-.site-header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: min(1180px, calc(100% - 40px));
-  min-height: 72px;
-  margin: 0 auto;
-  transition:
-    background 180ms ease,
-    border-color 180ms ease,
-    box-shadow 180ms ease;
-}
-
-.site-header.is-scrolled {
-  width: 100%;
-  padding: 0 max(20px, calc((100% - 1180px) / 2));
-  background: rgba(255, 255, 255, 0.88);
-  border-bottom: 1px solid rgba(229, 235, 245, 0.9);
-  box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
-  backdrop-filter: blur(18px);
-}
-
+.site-header,
 .hero,
 .services-section,
 .record {
-  width: min(1180px, calc(100% - 40px));
+  width: min(1480px, calc(100% - 36px));
   margin-inline: auto;
 }
 
+.site-header {
+  position: sticky;
+  top: 16px;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 26px;
+  align-items: center;
+  min-height: 88px;
+  padding: 0 28px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(217, 227, 241, 0.9);
+  border-radius: 24px;
+  box-shadow: 0 18px 44px rgba(30, 46, 78, 0.12);
+  backdrop-filter: blur(20px);
+}
+
 .hero {
-  min-height: auto;
-  padding: clamp(64px, 12vh, 128px) 0 56px;
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
+  gap: clamp(22px, 4vw, 58px);
+  align-items: center;
+  min-height: 420px;
+  padding: 42px 48px 22px;
 }
 
 .services-section {
-  padding: 10px 0 86px;
+  position: relative;
+  padding: 30px 42px 34px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(215, 226, 242, 0.95);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(16px);
 }
 
 .section-heading {
   display: flex;
-  align-items: end;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 22px;
+  gap: 28px;
+  margin-bottom: 26px;
 }
 
 .services {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 24px;
 }
 
 .record {
   display: flex;
-  align-items: center;
-  flex-direction: column;
   justify-content: center;
-  gap: 8px;
-  padding: 24px 0 34px;
-  color: #7a8598;
-  font-size: 0.88rem;
-  border-top: 1px solid var(--line);
+  padding: 24px 0 30px;
+  color: #7f8798;
+  font-size: 0.95rem;
 }
 
 .record-main {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 22px;
 }
 
-@media (max-width: 960px) {
-  .nav-links {
-    display: none;
+@media (max-width: 1180px) {
+  .site-header {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 18px 22px;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+    padding-inline: 24px;
+  }
+
+  .hero-art {
+    min-height: 320px;
   }
 
   .services {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-
-  .section-heading {
-    align-items: flex-start;
-    flex-direction: column;
-  }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 640px) {
   .site-header,
   .hero,
   .services-section,
   .record {
-    width: min(100% - 28px, 1180px);
+    width: min(100% - 24px, 1480px);
   }
 
   .site-header {
-    min-height: 64px;
+    top: 10px;
+    border-radius: 18px;
+  }
+
+  .hero {
+    padding: 34px 0 20px;
+  }
+
+  .services-section {
+    padding: 24px 18px;
+    border-radius: 20px;
   }
 
   .services {
     grid-template-columns: 1fr;
   }
 
-  .record {
-    gap: 6px;
-    text-align: center;
-  }
-
   .record-main {
     flex-direction: column;
     gap: 6px;
+    text-align: center;
   }
 }