From 10b8ad27f83cbb76dcd850c4e8f8917d8add660f Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 4 Mar 2026 15:54:47 -0500
Subject: [PATCH] Purple corner ribbon with green glow animation, sticky
 position

Ribbon now purple gradient with pulsing green glow keyframes.
Hover intensifies the glow and slightly scales up.
Changed from position:fixed to position:sticky so it scrolls
with the page but sticks to top.
---
 common.css | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/common.css b/common.css
index 7b33174..38c8b77 100644
--- a/common.css
+++ b/common.css
@@ -780,14 +780,24 @@ textarea.markup-editor-textarea {
    CORNER RIBBON
    ============================================ */
 
+@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); }
+}
+
+@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); }
+}
+
 .corner-ribbon {
-    position: fixed;
+    position: sticky;
     top: 0;
-    right: 0;
     z-index: 99;
-    overflow: hidden;
-    width: 185px;
-    height: 185px;
+    height: 0;
+    overflow: visible;
     pointer-events: none;
 }
 
@@ -802,17 +812,19 @@ textarea.markup-editor-textarea {
     font-size: 14px;
     font-weight: bold !important;
     color: #ffffff !important;
-    background: linear-gradient(to right, #5871ad, #82A8FF) !important;
+    background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important;
     text-decoration: none !important;
     transform: rotate(45deg);
     pointer-events: auto;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     letter-spacing: 0.03em;
-    transition: background 300ms ease;
+    animation: ribbon-glow 2.5s ease-in-out infinite;
+    transition: all 300ms ease;
 }
 
 .corner-ribbon a:hover {
-    background: #a3c765 !important;
+    background: linear-gradient(135deg, #6A1B7A, #8E44AD, #6A1B7A) !important;
+    animation: ribbon-glow-hover 1.5s ease-in-out infinite;
+    transform: rotate(45deg) scale(1.05);
 }
 
 @media (min-width: 800px) {