From 9359568a3321a09bdd3d030d41bee7df6286a523 Mon Sep 17 00:00:00 2001
From: Marc Froehlich <praktimarc@gmail.com>
Date: Tue, 7 Jul 2026 00:23:45 +0200
Subject: [PATCH] Add ordered and featured feature collections

---
 website/_site/assets/css/main.css | 21 ++++++++++++++++++++-
 website/src/assets/css/main.css   | 21 ++++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/website/_site/assets/css/main.css b/website/_site/assets/css/main.css
index e90f362..2c4905d 100644
--- a/website/_site/assets/css/main.css
+++ b/website/_site/assets/css/main.css
@@ -48,7 +48,11 @@ body {
             linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
     background-size: 54px 54px;
-    mask-image: radial-gradient(circle at center, black, transparent 72%);
+    -webkit-mask-image:
+            radial-gradient(circle at center, black, transparent 72%);
+
+    mask-image:
+            radial-gradient(circle at center, black, transparent 72%);
 }
 
 a {
@@ -70,6 +74,7 @@ a:hover {
     align-items: center;
     padding: 18px 6vw;
     background: rgba(5, 8, 22, 0.76);
+    -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
     border-bottom: 1px solid var(--border);
 }
@@ -159,6 +164,20 @@ a:hover {
     font-size: 1.18rem;
     max-width: 850px;
 }
+.hero::before {
+    content:"";
+    position:absolute;
+    inset:-200px;
+
+    background:
+            radial-gradient(circle,
+            rgba(56,189,248,.18),
+            transparent 65%);
+
+    filter:blur(120px);
+
+    pointer-events:none;
+}
 
 .badge,
 .eyebrow {
diff --git a/website/src/assets/css/main.css b/website/src/assets/css/main.css
index e90f362..2c4905d 100644
--- a/website/src/assets/css/main.css
+++ b/website/src/assets/css/main.css
@@ -48,7 +48,11 @@ body {
             linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
     background-size: 54px 54px;
-    mask-image: radial-gradient(circle at center, black, transparent 72%);
+    -webkit-mask-image:
+            radial-gradient(circle at center, black, transparent 72%);
+
+    mask-image:
+            radial-gradient(circle at center, black, transparent 72%);
 }
 
 a {
@@ -70,6 +74,7 @@ a:hover {
     align-items: center;
     padding: 18px 6vw;
     background: rgba(5, 8, 22, 0.76);
+    -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
     border-bottom: 1px solid var(--border);
 }
@@ -159,6 +164,20 @@ a:hover {
     font-size: 1.18rem;
     max-width: 850px;
 }
+.hero::before {
+    content:"";
+    position:absolute;
+    inset:-200px;
+
+    background:
+            radial-gradient(circle,
+            rgba(56,189,248,.18),
+            transparent 65%);
+
+    filter:blur(120px);
+
+    pointer-events:none;
+}
 
 .badge,
 .eyebrow {