UX prettified

item/item.css

@@ -10,6 +10,7 @@
 }
 .topDetailsMain {
   overflow: hidden;
+  margin-top: 11em;
 }
 .topDetailsMain.padded-left {
   -webkit-padding-start: 2.5%;
@@ -38,7 +39,6 @@
 }
 .detailImageContainerCard:not(.imageWidthTest) {
   width: 100% !important;
-  padding: 10em
 }
 .detailImageContainerCard .cardBox {
   -webkit-margin-end: 0 !important;
@@ -81,6 +81,7 @@
 .detailImageContainer-main.detailImageContainer-backdrop {
   width: 28vw;
   width: clamp(20vw, 49.5em, 28vw);
+  top: 5em;
 }
 .detailImageContainer-main.detailImageContainer-banner {
   width: 28vw;
@@ -265,13 +266,60 @@
 .detailButton {
   margin-top: 0.75em !important;
   margin-bottom: 0.75em !important;
-  -webkit-margin-start: 0 !important;
+  -webkit-marg0in-start: 0 !important;
   margin-inline-start: 0 !important;
   -webkit-margin-end: 0.5em !important;
   margin-inline-end: 0.5em !important;
   -webkit-flex-shrink: 0;
   flex-shrink: 0;
-  box-shadow: none !important;
+  box-shadow: 0px 3px 15px rgba(0,0,0,0.4); !important;
+  opacity 0.2s ease-out;
+  color: var(--theme-accent-text-color);
+}
+.detailButton:before {
+    content: '';
+    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+    position: absolute;
+    top: -2px;
+    left:-2px;
+    background-size: 400%;
+    z-index: -1;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity ease-in-out;
+    border-radius: 10px;
+}
+.detailButton:active {
+    color: #000;
+}
+
+.detailButton:active:after {
+    background: transparent;
+}
+
+.detailButton:hover:before {
+    opacity: 1;
+}
+
+.detailButton:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
 }
 .detailButton.raised {
   -webkit-justify-content: center;
@@ -355,8 +403,9 @@
   padding-right: 0.5em;
 }
 .detailTextContainer {
-  margin: 0 -1em;
+  margin: 0 0;
-  padding: 10em 1em;
+  padding: 5em 1em;
+  padding-bottom: 20em;
 }
 .detailTextContainer-extrapadding {
   padding: 0 1.6em;

modules/cardbuilder/card.css

@@ -1001,9 +1001,12 @@
     display: flex;
   }
   .card-hoverable:hover .cardOverlayContainer {
-    opacity: 1;
+    opacity: 0;
   }
 }
+.detailImageContainerCard:hover {
+  transform: none;
+}
 .chkCardSelect {
   top: 0;
   left: 0;