revamping the services page

_includes/styles/base.css

@@ -128,6 +128,15 @@ button {
     }
 }
 
+/* information colors */
+[info] {
+    color: var(--blue);
+}
+
+[warning] {
+    color: var(--warning);
+}
+
 /* links should look good i think */
 a {
     color: var(--foreground);
@@ -319,45 +328,66 @@ details.cw[open] {
 
 /* card styling */
 card-container {
-    display: flex;
-    gap: .5rem;
-
-    .card {
-        background-color: ;
-    }
-
-    &[horizontal] {
-        flex-flow: row wrap;
-    }
-}
-
-.card {
-    background-color: color-mix(in srgb, var(--background) 95%, white);
-    border-radius: 1rem;
-    border: .2rem solid var(--border);
-    gap: .5rem;
-    margin-bottom: 1.4rem;
-    padding: 1rem;
-
-    h4 {
-        margin-top: unset !important;
-        margin-bottom: .4rem !important;
-    }
-}
-
-.card.last {
-    margin-bottom: unset !important;
-}
-
-.card.tilde-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
-    margin-bottom: unset !important;
-}
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
+    margin-bottom: 1.5rem;
 
-.card.question {
-    p {
-        margin: .6rem !important;
+    card-entry {
+        background-color: var(--background-secondary);
+        border-radius: 1rem;
+        border: .15rem solid var(--border);
+        display: flex;
+        flex-flow: column;
+        padding: .6rem;
+        width: auto;
+
+        h3 {
+            margin-top: 0;
+            margin-bottom: .6rem;
+
+            [icon] {
+                height: 1.4rem;
+                transition: .3s;
+                vertical-align: middle;
+            }
+
+            icon-tabler {
+                float: right;
+                vertical-align: middle;
+
+                &[server] {
+                    color: var(--link);
+                }
+            }
+        }
+
+        &:hover {
+            h3 {
+                [icon] {
+                    margin-right: .4rem;
+                    transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem);
+                }
+            }
+        }
+
+        p {
+            margin-top: 0;
+        }
+
+        &[dont-suggest] {
+            opacity: .7;
+            transition: 1s;
+            border-color: color-mix(in srgb, var(--warning) 30%, transparent);
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        buttons-container {
+            margin-top: auto;
+        }
     }
 }
 
@@ -619,6 +649,25 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
 
 /* widgets */
 
+buttons-container {
+    display: flex;
+    flex-flow: row wrap;
+    gap: .4rem;
+
+    [button] {
+        background: light-dark(color-mix(in srgb,var(--accent)60%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
+        padding: .2rem .5rem;
+        border-radius: 10rem;
+        transition: .2s;
+        text-decoration: none !important;
+
+        &:hover {
+            background: var(--accent);
+            color: light-dark(var(--foreground), var(--background));
+        }
+    }
+}
+
 radio-button-group {
     display: flex;
     flex-flow: row wrap;