better animation

Author: pirate

docs/index.html

@@ -178,27 +178,23 @@
         position: relative;
         overflow: hidden;
         background:
-          linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)),
-          rgba(255, 253, 248, 0.9);
+          linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)) padding-box,
+          linear-gradient(
+            120deg,
+            rgba(201, 111, 45, 0.18),
+            rgba(15, 118, 110, 0.18),
+            rgba(255, 255, 255, 0.9),
+            rgba(201, 111, 45, 0.2),
+            rgba(15, 118, 110, 0.18)
+          ) border-box;
+        border: 1px solid transparent;
+        background-size: 100% 100%, 220% 220%;
+        background-position: 0 0, 0% 50%;
         box-shadow:
           0 0 0 1px rgba(201, 111, 45, 0.14),
           0 10px 28px rgba(22, 35, 31, 0.08),
           0 0 24px rgba(201, 111, 45, 0.12);
-        animation: cta-glow-pulse 2.8s ease-in-out infinite;
-      }
-
-      .stat-link--cta::before {
-        content: "";
-        position: absolute;
-        top: -35%;
-        bottom: -35%;
-        left: -40%;
-        width: 38%;
-        border-radius: 24px;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
-        transform: translateX(-180%) rotate(18deg);
-        animation: cta-sheen 3.4s ease-in-out infinite;
-        pointer-events: none;
+        animation: cta-border-shimmer 2.6s linear infinite, cta-glow-pulse 2.8s ease-in-out infinite;
       }
 
       .stat-link--cta strong,
@@ -226,15 +222,12 @@
         line-height: 1;
       }
 
-      @keyframes cta-sheen {
+      @keyframes cta-border-shimmer {
         0% {
-          transform: translateX(-180%) rotate(18deg);
-        }
-        55% {
-          transform: translateX(430%) rotate(18deg);
+          background-position: 0 0, 0% 50%;
         }
         100% {
-          transform: translateX(430%) rotate(18deg);
+          background-position: 0 0, 200% 50%;
         }
       }
 
@@ -8196,7 +8189,7 @@ <h3 class="section-title">Config Options</h3>
 
       <footer class="page-footer">
         <span>Generated from <a href="https://github.com/ArchiveBox/abx-plugins" target="_blank" rel="noreferrer">ArchiveBox/abx-plugins</a> at ref <code>main</code>.</span>
-        <span>Updated 2026-03-15 08:21 UTC</span>
+        <span>Updated 2026-03-15 08:22 UTC</span>
       </footer>
     </div>
 

docs/index.html.j2

@@ -178,27 +178,23 @@
         position: relative;
         overflow: hidden;
         background:
-          linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)),
-          rgba(255, 253, 248, 0.9);
+          linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)) padding-box,
+          linear-gradient(
+            120deg,
+            rgba(201, 111, 45, 0.18),
+            rgba(15, 118, 110, 0.18),
+            rgba(255, 255, 255, 0.9),
+            rgba(201, 111, 45, 0.2),
+            rgba(15, 118, 110, 0.18)
+          ) border-box;
+        border: 1px solid transparent;
+        background-size: 100% 100%, 220% 220%;
+        background-position: 0 0, 0% 50%;
         box-shadow:
           0 0 0 1px rgba(201, 111, 45, 0.14),
           0 10px 28px rgba(22, 35, 31, 0.08),
           0 0 24px rgba(201, 111, 45, 0.12);
-        animation: cta-glow-pulse 2.8s ease-in-out infinite;
-      }
-
-      .stat-link--cta::before {
-        content: "";
-        position: absolute;
-        top: -35%;
-        bottom: -35%;
-        left: -40%;
-        width: 38%;
-        border-radius: 24px;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
-        transform: translateX(-180%) rotate(18deg);
-        animation: cta-sheen 3.4s ease-in-out infinite;
-        pointer-events: none;
+        animation: cta-border-shimmer 2.6s linear infinite, cta-glow-pulse 2.8s ease-in-out infinite;
       }
 
       .stat-link--cta strong,
@@ -226,15 +222,12 @@
         line-height: 1;
       }
 
-      @keyframes cta-sheen {
+      @keyframes cta-border-shimmer {
         0% {
-          transform: translateX(-180%) rotate(18deg);
-        }
-        55% {
-          transform: translateX(430%) rotate(18deg);
+          background-position: 0 0, 0% 50%;
         }
         100% {
-          transform: translateX(430%) rotate(18deg);
+          background-position: 0 0, 200% 50%;
         }
       }