Platinum sponsors separated

Author: anatoliykmetyuk

_includes/scala-days-sponsors.html

@@ -1,15 +1,25 @@
 <div class="scala-days-sponsors-bar">
+  <!-- Static Platinum Sponsors Row -->
+  <div class="sponsors-static-row">
+    {% for sponsor in site.data.scala-days-sponsors.sponsors %}
+      {% if sponsor.type == 'Platinum' %}
+        <a href="{{ sponsor.url }}" class="sponsor-logo-link-platinum" target="_blank" rel="noopener">
+          <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo-platinum" />
+        </a>
+      {% endif %}
+    {% endfor %}
+  </div>
+  <!-- Scrolling Track for Non-Platinum Sponsors -->
   <div class="sponsors-carousel">
-    <div class="sponsors-track">
+    <div class="sponsors-track" id="sponsors-track">
+      {% for i in (1..10) %}
       {% for sponsor in site.data.scala-days-sponsors.sponsors %}
-        <a href="{{ sponsor.url }}" class="sponsor-logo-link" target="_blank" rel="noopener">
-          <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo" />
-        </a>
+        {% unless sponsor.type == 'Platinum' %}
+          <a href="{{ sponsor.url }}" class="sponsor-logo-link" target="_blank" rel="noopener">
+            <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo" />
+          </a>
+        {% endunless %}
       {% endfor %}
-      {% for sponsor in site.data.scala-days-sponsors.sponsors %}
-        <a href="{{ sponsor.url }}" class="sponsor-logo-link" target="_blank" rel="noopener">
-          <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo" />
-        </a>
       {% endfor %}
     </div>
   </div>

_sass/components/scala-days-sponsors.scss

@@ -23,7 +23,7 @@
   align-items: center;
   white-space: nowrap;
   width: max-content;
-  animation: sponsors-scroll 40s linear infinite;
+  animation: sponsors-scroll 120s linear infinite;
   will-change: transform;
 }
 
@@ -52,6 +52,30 @@
   opacity: 1;
 }
 
+.sponsors-static-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+  gap: 3em;
+  margin-bottom: 1em;
+}
+
+.sponsor-logo-link-platinum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sponsor-logo-platinum {
+  max-height: 80px !important;
+  filter: brightness(0) invert(1);
+  opacity: 0.92;
+  transition: opacity 0.2s;
+}
+
 @keyframes sponsors-scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }