Update card styling

SamHillierDev · Mar 8, 2024 · c74d790 · c74d790
1 parent f2b055a
commit c74d790
Showing 1 changed file with 27 additions and 6 deletions.
diff --git a/frontend/src/components/Card.module.css b/frontend/src/components/Card.module.css
@@ -2,15 +2,26 @@
     display: flex;
     width: 300px;
     height: 400px;
-    border: 1px solid #707070;
+    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
     padding: 16px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
-    background-color: #383D40;
+    background-image: radial-gradient(circle at center, #48555A 0%, #383D40 100%);
     flex-direction: column;
     align-items: center;
     overflow: hidden;
+    transition: transform 0.5s ease, background-color 0.1s ease;
+}
+
+.card:hover {
+    background-image: radial-gradient(circle at center, #4F6267 0%, #383c3f 100%);
+    transform: scale(1.03);
+}
+
+.card:active {
+    background-image: radial-gradient(circle at center, #48555A 0%, #383D40 100%);
+    transform: scale(1.00);
 }
 
 .card h3, .card h4, .card p {
@@ -23,16 +34,26 @@
 }
 
 .card h3 {
-    margin-bottom: 5px;
     color: white;
     font-size: 18px;
     min-height: 24px;
+    transition: color 0.1s ease, text-shadow 0.1s ease;
+}
+
+.card:hover h3 {
+    color: hsl(var(--text2));
+    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
+}
+
+.card:active h3 {
+    color: #fff;
+    text-shadow: 0 0 8px hsl(var(--text3));
 }
 
 .card h4 {
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     font-size: 14px;
-    color: white;
+    color: #919292;
 }
 
 .card p {
@@ -41,7 +62,7 @@
     width: 100%;
     min-height: 22px;
     font-size: 16px;
-    background-color: #8376D8;
+    background-image: radial-gradient(circle at center, #7569B5 0%, #8376D8 50%, #6258A4 100%);
     border-radius: 50px;
     padding: 5px 0;
 }