feat: button design, icons fix

packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css

@@ -1,28 +1,29 @@
 .frame-type-cloonar_stats .stats-wrapper {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    justify-content: flex-start;
-    justify-content: space-between;
     align-items: flex-start;
     position: relative;
-    z-index: 10; /* Ensure it's on top of the hero container */
+    z-index: 10;
     background: #fff;
-    padding: 2rem 1rem;
+    padding: 1rem;
     max-width: 1140px;
     margin-left: auto;
     margin-right: auto;
+    gap: 1rem; /* maintain gap on mobile */
 }
 
-/* Each paragraph is treated as a column */
+/* Two columns on mobile */
 .frame-type-cloonar_stats .stats-wrapper p {
-    flex: 1 1 100%;
+    box-sizing: border-box;
+    flex: 0 0 calc((100% - 1rem) / 2);
+    max-width: calc((100% - 1rem) / 2);
     text-align: center;
     margin-bottom: 1rem;
     text-transform: uppercase;
     color: var(--bs-primary);
 }
 
-/* Lead paragraphs have larger text for numbers */
 .frame-type-cloonar_stats .stats-wrapper span.big-number {
     font-size: 4rem;
     font-family: 'Hajime Sans', sans-serif;
@@ -31,11 +32,13 @@
 
 @media (min-width: 768px) {
   .frame-type-cloonar_stats .stats-wrapper {
-      gap: 2rem;
       padding: 3rem 1rem;
-  }
+      gap: 2rem; /* increase gap on desktop */
-  .frame-type-cloonar_stats .stats-wrapper p {
-      flex: 1 1 calc(25% - 2rem);
   }
 
+  /* Four columns on desktop */
+  .frame-type-cloonar_stats .stats-wrapper p {
+      flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */
+      max-width: calc((100% - 6rem) / 4);
+  }
 }

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -1,20 +1,11 @@
-.ci, 
+.ci {
-a[href*="instagram.com"],
-a[href*="tiktok.com"],
-a[href*="linkedin.com"],
-a[href*="twitter.com"],
-a[href*="x.com"] {
   display: inline-block;
   vertical-align: middle;
   line-height: 1;
   position: relative;
 }
 
-.ci::before, 
+.ci::before {
-a[href*="instagram.com*"]::before,
-a[href*="tiktok.com"]::before,
-a[href*="linkedin.com"]::before,
-a[href*="x.com"]::before {
   display: inline-block;
   content: ' ';
   width: 1em;
@@ -48,22 +39,6 @@ a[href*="x.com"]::before {
 .ci-phone::before {
   mask-image: url(../Icons/phone.svg);
 }
-
-a[href*="instagram.com*"]::before {
-  mask-image: url(../Icons/instagram.svg);
-}
-a[href*="tiktok.com"]::before {
-  mask-image: url(../Icons/tiktok.svg);
-  width: 0.9em;
-  height: 0.9em;
-}
-a[href*="linkedin.com"]::before {
-  mask-image: url(../Icons/linkedin.svg);
-}
-a[href*="x.com"]::before {
-  mask-image: url(../Icons/x.svg);
-}
-
 .ci-angle-right::before {
   mask-image: url(../Icons/angle-right.svg);
 }

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -0,0 +1,9 @@
+.btn {
+  background-color: var(--bs-primary);
+  color: var(--bs-yellow);
+  font-family: 'Hajime Sans', sans-serif;
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  cursor: pointer;
+}

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -120,6 +120,7 @@ header {
   @media (max-width: $breakpoint-lg) {
     .nav-toggle {
       display: block;
+      margin-left: auto; // move toggle to the right on mobile
     }
 
     .nav-links {
@@ -130,6 +131,7 @@ header {
       flex-direction: column;
       max-height: 0;
       overflow: hidden;
+      background: #fff; // Add white background for mobile dropdown
       @include transition(max-height, 0.4s);
 
       .nav-item {

packages/base/Resources/Public/Scss/components/_news.scss

@@ -25,7 +25,6 @@
         grid-column: 5 / span 2;
         grid-row: 2;
       }
-
     }
   }
 
@@ -82,7 +81,6 @@
     height: auto;
   }
 
-
   a {
     position: relative;
     display: flex;
@@ -133,10 +131,9 @@
   }
 }
 
-/* Show mobile button only below desktop breakpoint */
+/* Show mobile button only below desktop breakpoint, add space above */
 .mobile-btn {
-  display: block;
+  margin-top: 2rem; /* Added space between the news list and the show all button */
-  margin-top: 1rem;
   @media (min-width: $breakpoint-lg) {
     display: none;
   }

packages/base/Resources/Public/Scss/main.scss

@@ -7,3 +7,4 @@
 @import 'components/contentElements';
 @import 'components/news';
 @import 'components/footer';
+@import 'components/buttons';