Update the superseded-by note to use same user-feedback styling, and improve contrast ratio to meet WCAG AA guidelines

Author: hugovk

static/sass/style.css

@@ -2645,7 +2645,8 @@ p.quote-by-organization {
   background-color: #fff7dc;
   border: 2px solid #ffd343; }
   .level-notice span {
-    color: #dca900; }
+    color: #765a00;
+    font-weight: bold; }
 
 /* Something went wrong */
 .level-error {

static/sass/style.scss

@@ -1758,7 +1758,10 @@ $colors: $blue, $psf, $yellow, $green, $purple, $red;
     background-color: lighten( $yellow, 30% );
     border: 2px solid $yellow;
 
-    span { color: darken( $yellow, 20% ); }
+    span {
+        color: darken( $yellow, 40% );
+        font-weight: bold;
+    }
 }
 
 /* Something went wrong */

templates/downloads/release_detail.html

@@ -38,7 +38,9 @@ <h1 class="page-title">{{ release.name }}</h1>
         {% endif %}
 
         {% if latest_in_series %}
-        <p><strong>Note:</strong> {{ release.name }} has been superseded by <a href="{{ latest_in_series.get_absolute_url }}">{{ latest_in_series.name }}</a>.</p>
+        <div class="user-feedback level-notice">
+            <span>Note:</span> {{ release.name }} has been superseded by <a href="{{ latest_in_series.get_absolute_url }}">{{ latest_in_series.name }}</a>.
+        </div>
         {% endif %}
 
         <p><strong>Release date:</strong> {{ release.release_date|date }}</p>