From a7bef8b98cb74e45c403569ae98e5f9eab08565a Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 4 Mar 2026 15:53:41 -0500
Subject: [PATCH] Fix corner ribbon: use !important to override inline styles,
 match brand gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ribbon was rendering as flat green text because inline <style> block
overrode external CSS. Now uses !important on color/background/display.
Also upgraded to brand gradient (#5871ad → #82A8FF), larger size, smoother
transitions.
---
 common.css      | 32 +++++++++++++++++---------------
 styleguide.html | 11 ++++++-----
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/common.css b/common.css
index 987451a..7b33174 100644
--- a/common.css
+++ b/common.css
@@ -786,31 +786,33 @@ textarea.markup-editor-textarea {
     right: 0;
     z-index: 99;
     overflow: hidden;
-    width: 150px;
-    height: 150px;
+    width: 185px;
+    height: 185px;
     pointer-events: none;
 }
 
 .corner-ribbon a {
-    display: block;
-    position: absolute;
-    right: -40px;
-    top: 30px;
-    width: 220px;
-    padding: 8px 0;
+    display: block !important;
+    position: absolute !important;
+    right: -45px;
+    top: 40px;
+    width: 250px;
+    padding: 10px 0;
     text-align: center;
-    font-size: 13px;
-    font-weight: bold;
-    color: #ffffff;
-    background-color: #5871ad;
-    text-decoration: none;
+    font-size: 14px;
+    font-weight: bold !important;
+    color: #ffffff !important;
+    background: linear-gradient(to right, #5871ad, #82A8FF) !important;
+    text-decoration: none !important;
     transform: rotate(45deg);
     pointer-events: auto;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+    letter-spacing: 0.03em;
+    transition: background 300ms ease;
 }
 
 .corner-ribbon a:hover {
-    background-color: #a3c765;
+    background: #a3c765 !important;
 }
 
 @media (min-width: 800px) {
diff --git a/styleguide.html b/styleguide.html
index 7a17120..5346e71 100644
--- a/styleguide.html
+++ b/styleguide.html
@@ -338,17 +338,18 @@ Hidden on mobile, visible at 800px+</div>
 
         <div class="sg-subsection">
           <div class="sg-label">Corner Ribbon (fixed, top-right)</div>
-          <div class="sg-demo" style="position: relative; min-height: 160px; overflow: hidden;">
-            <div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 150px; height: 150px;">
-              <a href="#" style="display: block; position: absolute; right: -40px; top: 30px; width: 220px; padding: 8px 0; text-align: center; font-size: 13px; font-weight: bold; color: #ffffff; background-color: #5871ad; text-decoration: none; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2);">Contribute Code</a>
+          <div class="sg-demo" style="position: relative; min-height: 200px; overflow: hidden;">
+            <div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 185px; height: 185px;">
+              <a href="#" style="display: block; position: absolute; right: -45px; top: 40px; width: 250px; padding: 10px 0; text-align: center; font-size: 14px; font-weight: bold; color: #ffffff; background: linear-gradient(to right, #5871ad, #82A8FF); text-decoration: none; transform: rotate(45deg); box-shadow: 0 3px 6px rgba(0,0,0,0.25); letter-spacing: 0.03em;">Contribute Code</a>
             </div>
           </div>
           <div class="sg-code">&lt;div class="corner-ribbon"&gt;
   &lt;a href="https://git.unturf.com/..." target="_blank"&gt;Contribute Code&lt;/a&gt;
 &lt;/div&gt;
 
-Navy #5871ad, hovers to green #a3c765
-Fixed position, z-index 99</div>
+Gradient: #5871ad &#8594; #82A8FF, hovers to green #a3c765
+Fixed position, z-index 99
+Uses !important to override inline page styles</div>
         </div>
       </div>