From da43ff3d7c2fd1f1b480dbbb05d9502a083b85fc Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Sat, 06 Jun 2026 20:03:54 +0800
Subject: [PATCH] Replace hero visual with user-provided reference image

---
 docs/styles.css |  205 +++++++++++++++-----------------------------------
 1 files changed, 62 insertions(+), 143 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 8d5a908..e3b4730 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -12,7 +12,7 @@
   --radius: 16px;
   --shadow: 0 20px 50px rgba(30, 45, 90, 0.12);
   --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
-  --hero-bg: linear-gradient(155deg, #eef2fa 0%, #e2e9f6 42%, #d6dff0 100%);
+  --hero-bg: #ffffff;
 }
 
 * {
@@ -141,130 +141,69 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-/* Hero — light studio, glass screenshots + reflection */
+/* Legacy floating hero icon — must not appear */
+.icon-float,
+.icon-orb {
+  display: none !important;
+}
+
+.page-home .site-header {
+  background: rgba(255, 255, 255, 0.88);
+}
+
+/* Hero — copy left, original design visual right (compact, no forced full-screen) */
 .hero {
-  position: relative;
   width: 100%;
-  min-height: calc(100svh - var(--header-h));
-  min-height: calc(100vh - var(--header-h));
-  padding: 40px 0 56px;
+  padding: 40px 0 48px;
+  background: var(--hero-bg);
   overflow: hidden;
+}
+
+.hero__split {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: 12px 32px;
+  align-items: center;
+}
+
+.hero__copy {
+  padding: 8px 0;
+}
+
+.hero__headline {
+  margin: 0;
+  font-size: clamp(2rem, 4.8vw, 3.15rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1.1;
+  color: #000;
+}
+
+.hero__lead {
+  margin: 28px 0 0;
+  font-size: clamp(1rem, 1.7vw, 1.2rem);
+  line-height: 1.7;
+  color: #1d1d1f;
+  max-width: 22em;
+}
+
+/* Right art: user-provided hero visual (black bg removed → white) */
+.hero__art {
+  margin: 0;
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   background: var(--hero-bg);
 }
 
-.hero__mosaic {
-  position: relative;
-  width: min(1040px, 92vw);
-  height: min(560px, 58vh);
-  margin: 0 auto;
-  perspective: 1600px;
-  perspective-origin: 50% 40%;
-}
-
-.glass-panel {
-  position: absolute;
-  margin: 0;
-  transform-style: preserve-3d;
-}
-
-.glass-panel__frame {
-  border-radius: 22px;
-  padding: 11px;
-  background: rgba(255, 255, 255, 0.62);
-  backdrop-filter: blur(22px) saturate(1.35);
-  -webkit-backdrop-filter: blur(22px) saturate(1.35);
-  border: 1px solid rgba(255, 255, 255, 0.85);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.95) inset,
-    0 28px 70px rgba(40, 55, 100, 0.18),
-    0 10px 28px rgba(40, 55, 100, 0.1);
-}
-
-.glass-panel__body {
-  border-radius: 14px;
-  overflow: hidden;
-  line-height: 0;
-  background: #fff;
-}
-
-.glass-panel__body img {
+.hero__art img {
   display: block;
   width: 100%;
+  max-width: 100%;
   height: auto;
-}
-
-.glass-panel__shine {
-  position: absolute;
-  inset: 0;
-  border-radius: 22px;
-  pointer-events: none;
-  background: linear-gradient(
-    125deg,
-    rgba(255, 255, 255, 0.55) 0%,
-    transparent 42%,
-    transparent 70%,
-    rgba(255, 255, 255, 0.15) 100%
-  );
-}
-
-.glass-panel__reflection {
-  margin-top: 10px;
-  padding: 0 11px 0;
-  transform: scaleY(-1);
-  opacity: 0.26;
-  filter: blur(0.3px);
-  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
-  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
-}
-
-.glass-panel__reflection img {
-  display: block;
-  width: 100%;
-  height: auto;
-  border-radius: 14px;
-}
-
-.glass-panel--main {
-  left: 50%;
-  top: 6%;
-  width: 62%;
-  transform: translateX(-50%) rotateY(-7deg) rotateX(7deg) translateZ(30px);
-  z-index: 2;
-}
-
-.glass-panel--memo {
-  right: -2%;
-  bottom: 2%;
-  width: 44%;
-  transform: rotateY(11deg) rotateX(-3deg) translateZ(80px);
-  z-index: 4;
-}
-
-.glass-panel--tags {
-  left: -4%;
-  top: 18%;
-  width: 42%;
-  transform: rotateY(-12deg) rotateX(4deg) translateZ(50px);
-  z-index: 3;
-}
-
-.hero__tagline {
-  margin: 36px auto 0;
-  text-align: center;
-  font-size: clamp(1.45rem, 3.8vw, 2.35rem);
-  font-weight: 650;
-  letter-spacing: -0.03em;
-  line-height: 1.2;
-  color: #1a1a22;
-  max-width: 16em;
-}
-
-.hero__tagline-sub {
-  margin: 12px auto 0;
-  text-align: center;
-  font-size: 1.02rem;
-  color: var(--muted);
-  max-width: 28em;
+  background: var(--hero-bg);
+  border: 0;
 }
 
 /* Main content */
@@ -428,25 +367,14 @@
     justify-self: end;
   }
 
-  .hero__mosaic {
-    height: min(480px, 52vh);
+  .hero__split {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    gap: 32px;
   }
 
-  .glass-panel--main {
-    width: 78%;
-    top: 4%;
-  }
-
-  .glass-panel--memo {
-    width: 52%;
-    right: -6%;
-    bottom: 0;
-  }
-
-  .glass-panel--tags {
-    width: 50%;
-    left: -8%;
-    top: 28%;
+  .hero__art {
+    justify-content: center;
   }
 }
 
@@ -456,15 +384,6 @@
   }
 
   .hero {
-    padding-bottom: 40px;
-  }
-
-  .hero__mosaic {
-    height: 400px;
-  }
-
-  .glass-panel--memo,
-  .glass-panel--tags {
-    opacity: 0.92;
+    padding: 32px 0 48px;
   }
 }
\ No newline at end of file

--
Gitblit v1.9.3