UI Improvements v5

assets/stylesheets/community_landing/landing.css

@@ -128,6 +128,7 @@
 /* ── Smooth Scroll ── */
 html {
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 /* ── Focus-visible Accessibility ── */
@@ -393,10 +394,12 @@ html {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
+  max-width: 100vw;
   z-index: 1000;
   padding: 0.85rem 0;
   transition: all 0.3s ease;
+  overflow: hidden;
 }
 
 .cl-navbar.scrolled {
@@ -422,6 +425,7 @@ html {
 
 .cl-navbar__inner {
   max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
   padding: 0 1.25rem;
   display: flex;
@@ -456,6 +460,24 @@ html {
   object-fit: contain;
 }
 
+/* Accent-colored logo via CSS mask — hidden <img> inside provides natural dimensions */
+.cl-logo--accent {
+  display: inline-block;
+  background-color: var(--cl-accent);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: left center;
+  mask-position: left center;
+}
+
+.cl-logo--accent img {
+  display: block;
+  width: auto;
+  visibility: hidden;
+}
+
 .cl-navbar__site-name {
   font-size: 1.05rem;
   font-weight: 700;
@@ -778,6 +800,7 @@ html {
 /* ── Hero Image ── */
 .cl-hero__image {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1010,20 +1033,40 @@ html {
 }
 
 .cl-stats__grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
   gap: 0.6rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scroll-padding: 0 1rem;
+  padding-bottom: 4px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.cl-stats__grid::-webkit-scrollbar {
+  display: none;
+}
+
+.cl-stats__grid > * {
+  flex: 0 0 calc(70% - 0.3rem);
+  scroll-snap-align: start;
 }
 
 @media (min-width: 480px) {
-  .cl-stats__grid {
-    grid-template-columns: repeat(3, 1fr);
+  .cl-stats__grid > * {
+    flex: 0 0 calc(45% - 0.4rem);
   }
 }
 
 @media (min-width: 768px) {
   .cl-stats__grid {
-    grid-template-columns: repeat(5, 1fr);
+    overflow-x: visible;
+    scroll-snap-type: none;
+  }
+
+  .cl-stats__grid > * {
+    flex: 1 1 0;
   }
 }