style: refine homepage hero and vision layout

Author: DIYgod

index.html

@@ -75,9 +75,20 @@ <h1>An open web, readable again.</h1>
 
       <section id="vision" class="section section--vision">
         <div class="wrap">
-          <div class="section-heading" data-reveal>
-            <p class="eyebrow">Vision</p>
-            <h2>RSS never left. It just needed a better shape.</h2>
+          <div class="vision-lead">
+            <div class="section-heading" data-reveal>
+              <p class="eyebrow">Vision</p>
+              <h2>RSS never left. It just needed a better shape.</h2>
+            </div>
+
+            <aside class="vision-note" data-reveal>
+              <p class="vision-note__eyebrow">Open information, rebuilt.</p>
+              <p class="vision-note__copy">
+                RSS3 keeps the idea simple: keep information portable, keep
+                distribution open, and shape that network into products people
+                actually want to use.
+              </p>
+            </aside>
           </div>
 
           <div class="vision-grid">
@@ -136,7 +147,6 @@ <h2>A quieter way to follow what matters.</h2>
               <div class="folo-card folo-card--two"></div>
               <div class="folo-card folo-card--three"></div>
               <div class="folo-card folo-card--four"></div>
-              <div class="chapter-caption">One timeline. Less noise.</div>
             </div>
           </div>
         </div>
@@ -156,7 +166,6 @@ <h2>A quieter way to follow what matters.</h2>
               <div class="rsshub-node rsshub-node--four"></div>
               <div class="rsshub-node rsshub-node--five"></div>
               <div class="rsshub-node rsshub-node--six"></div>
-              <div class="chapter-caption">Over 5,000 global instances.</div>
             </div>
           </div>
 

styles.css

@@ -196,9 +196,14 @@ ul {
 
 .top-banner {
   display: block;
-  padding-top: 0.9rem;
   position: relative;
   z-index: 2;
+  padding-top: 0;
+}
+
+.top-banner .wrap {
+  width: 100%;
+  max-width: none;
 }
 
 .top-banner__inner {
@@ -209,20 +214,18 @@ ul {
   width: 100%;
   min-height: 3rem;
   padding: 0.82rem 1rem;
-  border: 1px solid rgba(20, 17, 15, 0.08);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.54);
-  box-shadow: 0 10px 28px rgba(67, 101, 159, 0.07);
+  border: 0;
+  border-radius: 0;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: none;
   backdrop-filter: blur(16px);
   transition:
-    transform 180ms ease,
     background-color 180ms ease;
 }
 
 .top-banner:hover .top-banner__inner,
 .top-banner:focus-visible .top-banner__inner {
-  transform: translateY(-1px);
-  background: rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.5);
 }
 
 .top-banner__label {
@@ -500,6 +503,64 @@ h3 {
   padding-top: calc(var(--section-gap) * 0.78);
 }
 
+.vision-lead {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 0.68fr);
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  align-items: end;
+  margin-bottom: 2.8rem;
+}
+
+.section--vision .section-heading {
+  margin-bottom: 0;
+}
+
+.vision-note {
+  position: relative;
+  display: grid;
+  gap: 1.1rem;
+  min-height: 100%;
+  padding: 1.5rem 1.5rem 1.35rem;
+  border: 1px solid rgba(61, 140, 255, 0.14);
+  border-radius: 1.8rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
+    linear-gradient(135deg, rgba(61, 140, 255, 0.08), rgba(128, 168, 255, 0.04));
+  box-shadow: 0 18px 48px rgba(83, 118, 177, 0.08);
+  overflow: hidden;
+}
+
+.vision-note::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(120deg, transparent 0 58%, rgba(61, 140, 255, 0.08) 58% 62%, transparent 62%),
+    radial-gradient(circle at 100% 0, rgba(61, 140, 255, 0.16), transparent 34%);
+  pointer-events: none;
+}
+
+.vision-note__eyebrow,
+.vision-note__copy {
+  position: relative;
+  z-index: 1;
+}
+
+.vision-note__eyebrow {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #4c78bf;
+}
+
+.vision-note__copy {
+  max-width: 28rem;
+  color: var(--text);
+  font-size: 1.02rem;
+  line-height: 1.75;
+}
+
 .vision-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -961,19 +1022,6 @@ h3 {
   bottom: 18%;
 }
 
-.chapter-caption {
-  position: absolute;
-  left: 1.2rem;
-  bottom: 1.2rem;
-  padding: 0.7rem 0.95rem;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.84);
-  border: 1px solid rgba(255, 255, 255, 0.88);
-  color: var(--text);
-  font-size: 0.88rem;
-  backdrop-filter: blur(12px);
-}
-
 .section--ecosystem {
   padding-bottom: calc(var(--section-gap) * 1.1);
 }
@@ -1308,6 +1356,7 @@ body.page--article h1 {
 
 @media (max-width: 1080px) {
   .hero-layout,
+  .vision-lead,
   .chapter-layout,
   .chapter-layout--reverse,
   .blog-grid,
@@ -1383,6 +1432,10 @@ body.page--article h1 {
     grid-template-columns: 1fr;
   }
 
+  .vision-note {
+    padding: 1.3rem 1.2rem 1.15rem;
+  }
+
   .chapter-art,
   .hero-art {
     min-height: 24rem;
@@ -1413,7 +1466,7 @@ body.page--article h1 {
   }
 
   .top-banner {
-    padding-top: 0.7rem;
+    padding-top: 0;
   }
 
   .top-banner__inner {
@@ -1459,12 +1512,6 @@ body.page--article h1 {
     width: 7rem;
   }
 
-  .chapter-caption {
-    left: 0.8rem;
-    right: 0.8rem;
-    bottom: 0.8rem;
-    text-align: center;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {