Refactor project styles and update SVG icon colors; enhance plan supp…

…ort hover effect

Signed-off-by: Lee Calcote <[email protected]>

assets/scss/_styles_project.scss

@@ -386,14 +386,18 @@ a:not([href]):not([class]):hover {
 
 .matterheader {
   font-size: 1.2rem;
-  color: #00b39f;
+  color: $casper;
 }
 
 .matterinfo .plan-support {
   padding: .5rem;
-  border: .5px solid $casper;
+  border: .5px solid $border-color;
   display: flex;
   align-items: center;
+  color: $casper;
+  &:hover {
+    background-color: rgba($primary, 0.3)
+  }
 }
 
 .matterinfo .plan-support .support-icon {
@@ -407,9 +411,9 @@ a:not([href]):not([class]):hover {
 }
 
 .tier {
-  color: $casper;
   font-weight: bold;
   padding: 0 5px;
+  color: $casper;
 }
 
 

layouts/partials/feature-info.html

@@ -51,13 +51,13 @@
 
 {{ if len $uniqueTiers }}
 <div class="matterinfo">
+  <a href="https://layer5.io/pricing" class="tier-link" target="_blank">
   <div class="plan-support all-plans">
     <img src="/images/subscription.svg" alt="Icon" class="support-icon adaptive-icon" data-modal="false">
     Subscription:
-    <a href="https://layer5.io/pricing" class="tier-link" target="_blank">
       <span class="tier">{{ delimit $uniqueTiers ", " }}</span>
-    </a>
-  </div>
+    </div>
+  </a>
 </div>
 {{ end }}
 {{ end }}