From c55164ef41233ddd3410ca0ea155f601d9342072 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 4 Mar 2026 15:56:07 -0500
Subject: [PATCH] Epic corner ribbon: larger band, fixed position, shimmer +
 glow animations

300px container, 380px band width, 16px font, letter-spacing 0.08em.
Triple-layer green glow pulses at 2.5s. Hover adds quad-layer glow
reaching 140px, green shimmer gradient sweep, 1.08x scale-up, green
text-shadow bloom. Fixed position stays visible on scroll.
---
 common.css | 49 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/common.css b/common.css
index 38c8b77..c0b70b5 100644
--- a/common.css
+++ b/common.css
@@ -781,50 +781,61 @@ textarea.markup-editor-textarea {
    ============================================ */
 
 @keyframes ribbon-glow {
-    0%   { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3),  0 0 15px rgba(163, 199, 101, 0.15); }
-    50%  { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 30px rgba(163, 199, 101, 0.3); }
-    100% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3),  0 0 15px rgba(163, 199, 101, 0.15); }
+    0%   { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4),  0 0 20px rgba(163, 199, 101, 0.2),  0 0 40px rgba(163, 199, 101, 0.1); }
+    50%  { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.7),  0 0 35px rgba(163, 199, 101, 0.4),  0 0 60px rgba(163, 199, 101, 0.15); }
+    100% { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4),  0 0 20px rgba(163, 199, 101, 0.2),  0 0 40px rgba(163, 199, 101, 0.1); }
 }
 
 @keyframes ribbon-glow-hover {
-    0%   { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
-    50%  { box-shadow: 0 3px 18px rgba(163, 199, 101, 0.9), 0 0 50px rgba(163, 199, 101, 0.6), 0 0 80px rgba(163, 199, 101, 0.25); }
-    100% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
+    0%   { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2),  0 0 120px rgba(163, 199, 101, 0.1); }
+    50%  { box-shadow: 0 3px 24px rgba(163, 199, 101, 1.0), 0 0 60px rgba(163, 199, 101, 0.7), 0 0 100px rgba(163, 199, 101, 0.3), 0 0 140px rgba(163, 199, 101, 0.15); }
+    100% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2),  0 0 120px rgba(163, 199, 101, 0.1); }
+}
+
+@keyframes ribbon-shimmer {
+    0%   { background-position: 200% center; }
+    100% { background-position: -200% center; }
 }
 
 .corner-ribbon {
-    position: sticky;
+    position: fixed;
     top: 0;
+    right: 0;
     z-index: 99;
-    height: 0;
-    overflow: visible;
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
     pointer-events: none;
 }
 
 .corner-ribbon a {
     display: block !important;
     position: absolute !important;
-    right: -45px;
-    top: 40px;
-    width: 250px;
-    padding: 10px 0;
+    right: -60px;
+    top: 60px;
+    width: 380px;
+    padding: 14px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold !important;
     color: #ffffff !important;
     background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important;
+    background-size: 200% auto !important;
     text-decoration: none !important;
     transform: rotate(45deg);
     pointer-events: auto;
-    letter-spacing: 0.03em;
-    animation: ribbon-glow 2.5s ease-in-out infinite;
+    letter-spacing: 0.08em;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(163, 199, 101, 0.4);
+    animation: ribbon-glow 2.5s ease-in-out infinite, ribbon-shimmer 4s linear infinite;
     transition: all 300ms ease;
 }
 
 .corner-ribbon a:hover {
-    background: linear-gradient(135deg, #6A1B7A, #8E44AD, #6A1B7A) !important;
-    animation: ribbon-glow-hover 1.5s ease-in-out infinite;
-    transform: rotate(45deg) scale(1.05);
+    background: linear-gradient(135deg, #6A1B7A, #a3c765, #6A1B7A) !important;
+    background-size: 200% auto !important;
+    animation: ribbon-glow-hover 1.5s ease-in-out infinite, ribbon-shimmer 2s linear infinite;
+    transform: rotate(45deg) scale(1.08);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(163, 199, 101, 0.8);
 }
 
 @media (min-width: 800px) {