feat: integrate Tailwind CSS and remove legacy styles

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

@@ -1,44 +0,0 @@
-.frame-type-cloonar_stats .stats-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    position: relative;
-    z-index: 10;
-    background: #fff;
-    padding: 1rem;
-    max-width: 1140px;
-    margin-left: auto;
-    margin-right: auto;
-    gap: 1rem; /* maintain gap on mobile */
-}
-
-/* Two columns on mobile */
-.frame-type-cloonar_stats .stats-wrapper p {
-    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);
-}
-
-.frame-type-cloonar_stats .stats-wrapper span.big-number {
-    font-size: 4rem;
-    font-family: 'Hajime Sans', sans-serif;
-    text-transform: none;
-}
-
-@media (min-width: 768px) {
-  .frame-type-cloonar_stats .stats-wrapper {
-      padding: 3rem 1rem;
-      gap: 2rem; /* increase gap on desktop */
-  }
-
-  /* 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/ContentBlocks/ContentElements/stats/templates/frontend.html

@@ -3,11 +3,12 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <f:asset.css identifier="CBStats" href="{cb:assetPath()}/frontend.css" />
-
-  <div class="stats-wrapper">
+  <div class="relative z-10 bg-white p-4 md:py-12 md:px-4 max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
     <f:format.html>
-      {data.bodytext}
+      {data.bodytext -> f:format.raw() -> cb:processRichText(styles: [
+          'p=text-center uppercase text-primary',
+          'span.big-number=block text-6xl font-hajime normal-case'
+      ])}
     </f:format.html>
   </div>
 </f:section>