Style golden cards

app/assets/images/golden-ticket.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.58 16.8-3.58-2.3-3.58 2.3 1.08-4.12-3.29-2.68 4.25-.26 1.54-3.94 1.54 3.94 4.25.26-3.29 2.68m5.5-.68c0-1.11.9-2 2-2v-4c0-1.11-.9-2-2-2h-16a2 2 0 0 0 -2 2v4c1.11 0 2 .9 2 2a2 2 0 0 1 -2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1 -2-2z"/></svg>

app/assets/images/star.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 18.5 7.5 4.5-2-8.5 6.6-5.7-8.7-.8-3.4-8-3.4 8-8.7.8 6.6 5.7-2 8.5z"/></svg>

app/assets/stylesheets/_global.css

@@ -31,6 +31,7 @@
   --lch-blue: 54% 0.15 255;
   --lch-blue-light: 95% 0.03 255;
   --lch-blue-dark: 80% 0.08 255;
+  --lch-golden: 83% 0.1128 72.43;
   --lch-orange: 70% 0.2 44;
   --lch-red: 51% 0.2 31;
   --lch-green: 65.59% 0.234 142.49;
@@ -58,6 +59,7 @@
   --color-always-black: oklch(var(--lch-always-black));
   --color-always-white: oklch(var(--lch-always-white));
   --color-container: oklch(var(--lch-light-blue));
+  --color-golden: oklch(var(--lch-golden));
 
   @media (prefers-color-scheme: dark) {
     --lch-black: 100% 0 0;

app/assets/stylesheets/cards.css

@@ -98,7 +98,14 @@
   }
 
   .card--golden {
-    outline: 5px solid orange;
+    --border-color: var(--color-bg) !important;
+
+    background-color: var(--color-bg);
+    background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
+    box-shadow: 
+      0 0 0.5em 0.2em var(--color-golden),
+      0 0 1em 0.4em var(--color-golden) !important;
+    outline: 1px solid var(--color-golden);
   }
 
   .card__actions {
@@ -251,12 +258,6 @@
     display: inline-flex;
     margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
     padding: var(--padding-block) var(--padding-inline);
-
-    &:has(.card__star-input:checked) {
-      .card {
-        outline: 4px solid var(--color-negative);
-      }
-    }
   }
 
   .card__container--pointing {

app/assets/stylesheets/icons.css

@@ -38,6 +38,7 @@
   .icon--everyone { --svg: url("everyone.svg "); }
   .icon--filter { --svg: url("filter.svg "); }
   .icon--globe { --svg: url("globe.svg "); }
+  .icon--golden-ticket { --svg: url("golden-ticket.svg "); }
   .icon--home { --svg: url("home.svg "); }
   .icon--logout { --svg: url("logout.svg "); }
   .icon--menu { --svg: url("menu.svg "); }
@@ -61,7 +62,6 @@
   .icon--rename { --svg: url("rename.svg "); }
   .icon--settings { --svg: url("settings.svg "); }
   .icon--share { --svg: url("share.svg "); }
-  .icon--star { --svg: url("star.svg "); }
   .icon--tag { --svg: url("tag.svg "); }
   .icon--thumb-up { --svg: url("thumb-up.svg "); }
   .icon--trash { --svg: url("trash.svg "); }

app/views/cards/_golden_toggle.html.erb

@@ -1,11 +1,11 @@
 <% if card.golden? %>
   <%= button_to card_goldeness_path(card), method: :delete, class: "btn btn--reversed" do %>
-    <%= icon_tag "star" %>
+    <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Demote to normal</span>
   <% end %>
 <% else %>
   <%= button_to card_goldeness_path(card), class: "btn" do %>
-    <%= icon_tag "star" %>
+    <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Promote to golden</span>
   <% end %>
 <% end %>