ux(mobile): tighten hero and Hall of Fame spacing

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -545,7 +545,7 @@ a.subpage-inline-mail {
   main { padding-left: 16px !important; padding-right: 16px !important; }
   .page-shell-main {
     min-height: 100svh;
-    padding-top: calc(env(safe-area-inset-top) + 36px) !important;
+    padding-top: calc(env(safe-area-inset-top) + 30px) !important;
   }
 
   /* Certificate wrapper spacing only; scale is handled in CertificateCard.tsx */
@@ -573,7 +573,7 @@ a.subpage-inline-mail {
   }
 
   /* Hero: keep CTA above the fold on small screens */
-  .page-hero { padding-top: 14px; padding-bottom: 10px; }
+  .page-hero { padding-top: 10px; padding-bottom: 10px; }
   .page-hero-emoji { font-size: clamp(48px, 13vw, 62px); margin-bottom: 6px; }
   .page-hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); margin: 4px 0 8px; }
   .page-hero-sub { font-size: 13px; }
@@ -582,12 +582,16 @@ a.subpage-inline-mail {
   .recent-marquee {
     padding-left: 16px !important;
     padding-right: 16px !important;
-    height: 284px !important;
+    height: 268px !important;
     -webkit-mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent) !important;
     mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent) !important;
   }
   .recent-card {
-    height: 230px !important;
+    height: 214px !important;
+  }
+
+  .homepage-recent-wrap {
+    margin-top: 14px !important;
   }
 
   .input-button-wrapper {

src/app/page.tsx

@@ -187,7 +187,7 @@ function HomePage() {
       )}
 
       {idle && (
-        <div style={{ width: '100%', marginTop: '56px' }}>
+        <div className="homepage-recent-wrap" style={{ width: '100%', marginTop: '28px' }}>
           <RecentlyBuried onSelect={handleSelect} />
         </div>
       )}