cleanup. ajust spacings. light icons.

styles/_pages.scss

@@ -172,6 +172,15 @@
     background-image: url(../img/backgrounds/use-cases-blue.svg);
   }
 
+  .card-grid {
+    grid-gap: 8px
+  }
+
+  .card-grid img {
+    max-height: 40px;
+  }
+
+
 @each $usecase in "infrastructure",
 "developer_tooling",
 "interoperability",
@@ -187,11 +196,24 @@
 "custody",
 "defi" {
   ##{$usecase} {
-    max-height: 48px;
     content: url("../img/icons/usecases/ic_#{$usecase}.png");
   }
 }
 
+
+@include media-breakpoint-up(lg) {
+  .card-grid img {
+    max-height: 48px;
+  }
+
+  .card-grid {
+    grid-gap: 48px
+  }
+}
+
+
+
+
   // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
   //   ##{$usecase} {
   //     content: url("../img/icons/#{$usecase}.svg");

styles/light/_light-theme.scss

@@ -569,26 +569,56 @@ pre code {
 .page-uses {
 
   .card-body {
-    background: #FFFFFF;
-
-    color: #343437
+    background: $white;
+    color: $gray-700;
   }
 
   .modal-footer,
   .modal-header {
-    background-color: #FCFCFD;
+    background-color: $gray-050;
   }
 
 
 
-  
-
-  @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
+  @each $usecase in "infrastructure",
+  "developer_tooling",
+  "interoperability",
+  "wallet",
+  "nfts",
+  "exchanges",
+  "gaming",
+  "security",
+  "payments",
+  "web_monetization",
+  "sustainability",
+  "cbdc",
+  "custody",
+  "defi" {
     ##{$usecase} {
-      content: url("../img/icons/lightmode/#{$usecase}.svg");
+      content: url("../img/icons/usecases/lightmode/ic_#{$usecase}.png");
     }
   }
 
+  .category-header {
+    color: $gray-700;
+  }
+
+  .category_count {
+    background: #D2B2FF;
+    color: #350080;
+  }
+
+
+
+
+
+
+  // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
+  //   ##{$usecase} {
+  //     content: url("../img/icons/lightmode/#{$usecase}.svg");
+  //   }
+  // }
+
   // darkened card graphics
   @each $company,$card-graphic in (
     "bitpay": "blue-green",

template/page-uses.html.jinja

@@ -24,7 +24,17 @@
     padding-right: 16px;
   }
 
+  h1 {
+    font-size: 42px;
+  }
+
   @media (min-width: 992px) {
+
+    h1 {
+      font-size: 62px;
+    }
+
+
     .container-new {
       padding-left: 64px;
       padding-right: 64px;
@@ -444,13 +454,11 @@
                 {% for category_id, category_name in featured_categories.items() %}
                   <div class="cat_checkbox category-checkbox pb-2">
                       <input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
-                      <label for="input_{{category_id}}">{{ category_name }}</label>
+                      <label class="font-weight-bold" for="input_{{category_id}}">{{ category_name }}</label>
                   </div>
                 {% endfor %}
-  
-              <br><br>
-  
-              <p class="category-header pt-lg-4 mt-lg-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>    
+  <!-- pt-lg-4 mt-lg-3 -->
+              <p class="category-header pt-5 mt-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>    
                 {% for category_id, category_name in other_categories.items() %}
                   <div class="cat_checkbox category-checkbox pb-2">
                       <input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">
@@ -474,7 +482,7 @@
 <div class="overflow-hidden">
 
    <section class="container-new py-26 text-lg-center">
-    <div class="p-0 col-lg-6 mx-lg-auto">
+    <div class="p-3 col-lg-8 mx-lg-auto">
       <div class="d-flex flex-column-reverse">
         <h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
         <h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
@@ -483,14 +491,14 @@
   </section>
 
   <section class="container-new py-26">
-    <div class="col-lg-5 p-3 mb-5">
+    <div class="col-lg-5 p-3 mb-3 mb-lg-5">
       <div class="d-flex flex-column-reverse">
         <h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
         <h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
       </div>
     </div>
 
-    <ul class="card-grid card-grid-3xN ls-none mt-4 pt-2" id="use-case-card-grid">
+    <ul class="card-grid card-grid-3xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
       {% set uses = [
         
           {"id": "infrastructure",
@@ -554,7 +562,7 @@
       <li class="col ls-none p-3">
         <img id="{{use.id}}" alt="{{use.title}} icon">
         <h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
-        <p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
+        <p class="mt-2 mt-md-3 mb-0">{{use.description}}</p>
       </li>
       {% endfor %}
     </ul>
@@ -604,11 +612,13 @@
     margin: 0;
     padding-left: 26px;
   }
+
   .category-header {
     font-weight: bold;
     /*color: $gray-300;*/
     color: #c1c1c2;
   }
+
   .category-checkbox {
     display: flex;
     align-items: center;
@@ -661,13 +671,11 @@
                 {% for category_id, category_name in featured_categories.items() %}
                   <div class="cat_checkbox category-checkbox pb-2">
                       <input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
-                      <label for="input_{{category_id}}">{{ category_name }}</label>
+                      <label class="font-weight-bold" for="input_{{category_id}}">{{ category_name }}</label>
                   </div>
                 {% endfor %}
   
-              <br><br>
-  
-              <p class="category-header pt-4 mt-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>    
+              <p class="category-header pt-5 mt-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>    
                 {% for category_id, category_name in other_categories.items() %}
                   <div class="cat_checkbox category-checkbox pb-2">
                       <input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">