feat: Simplification of UI and icons creation

public/css/components.css

@@ -128,16 +128,6 @@
   font-size: 1.25rem;
 }
 
-.btn--buy {
-  flex-direction: column;
-  min-width: 7.5rem;
-  align-self: center;
-}
-
-.btn__label {
-  font-weight: 600;
-}
-
 /* ----------------------------------------------------------- form fields */
 
 .field {
@@ -312,7 +302,7 @@ select,
   font-variant-numeric: tabular-nums;
 }
 
-/* Narrow phones: the buy button drops under the text. */
+/* Narrow phones: the price drops under the text. */
 @media (max-width: 479px) {
   .card {
     flex-wrap: wrap;
@@ -322,10 +312,14 @@ select,
     flex-basis: calc(100% - var(--icon-size) - var(--gap));
   }
 
-  .btn--buy {
+  .card__price {
     flex: 1 0 100%;
     flex-direction: row;
+    align-items: baseline;
     justify-content: space-between;
+    padding-top: 0.35rem;
+    border-top: 1px solid var(--border);
+    text-align: left;
   }
 }
 
@@ -642,3 +636,151 @@ select,
 .tile .hint {
   display: block;
 }
+
+/* ------------------------------------------------ blocks you click to buy */
+
+.card--buy {
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    box-shadow 0.12s ease,
+    transform 0.08s ease,
+    opacity 0.12s ease;
+}
+
+/* A soft outline on hover (only where there is a real hover: not on touch screens). */
+@media (hover: hover) {
+  .card--buy:hover:not(.is-disabled) {
+    box-shadow: 0 0 0 2px var(--accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
+  }
+}
+
+.card--buy:active:not(.is-disabled) {
+  transform: scale(0.985);
+}
+
+.card--buy.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* What it costs, on the right of the block; a fixed width keeps the figures aligned. */
+.card__price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  align-self: center;
+  gap: 0.1rem;
+  min-width: 6.5rem;
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.card__price strong {
+  font-size: 1rem;
+}
+
+.card__price small {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+.card__hint {
+  align-self: center;
+  margin-right: auto;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+/* --------------------------------------------------- purchase animations */
+/* Quick on purpose (0.15 to 0.25 s): feedback, not a show. */
+
+@keyframes fx-pop {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--accent);
+  }
+  40% {
+    transform: scale(1.04);
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@keyframes fx-bump {
+  50% {
+    transform: scale(1.35);
+  }
+}
+
+@keyframes fx-spend {
+  from {
+    color: var(--bad);
+    transform: scale(1.1);
+  }
+}
+
+@keyframes floater {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(-100% - 26px));
+  }
+}
+
+.fx-pop {
+  animation: fx-pop 0.2s ease-out;
+}
+
+.fx-bump {
+  animation: fx-bump 0.15s ease-out;
+}
+
+.fx-spend {
+  animation: fx-spend 0.2s ease-out;
+}
+
+.floater {
+  position: fixed;
+  z-index: 20;
+  color: var(--accent);
+  font-weight: 700;
+  pointer-events: none;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+  animation: floater 0.25s ease-out forwards;
+}
+
+.floater--good {
+  color: var(--good);
+}
+
+.floater--bad {
+  color: var(--bad);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fx-pop,
+  .fx-bump,
+  .fx-spend {
+    animation: none;
+  }
+
+  .floater {
+    display: none;
+  }
+
+  .card--buy {
+    transition: none;
+  }
+}