feat: card styles

packages/website-ue/src/components/AvatarCard/index.css

@@ -2,13 +2,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: var(--space-4);
 
   .avatar-image {
     width: 100%;
     aspect-ratio: 7 / 8;
+    border-radius: var(--space-3);
 
     background-size: cover;
     background-position: center;
+
+    outline: var(--outline-interactive);
+    box-shadow: var(--shadow-subtle);
   }
 
   .avatar-label {

packages/website-ue/src/components/BaseStyles.astro

@@ -47,6 +47,8 @@ import "@fontsource-variable/roboto-flex";
         var(--space-1) var(--white-a3),
       inset calc(var(--space-1) * sin(45deg) * -1)
         calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+    --shadow-subtle: var(--space-1) var(--space-1) var(--space-4)
+      var(--black-a11);
 
     --blur-glass: blur(4rem);
   }

packages/website-ue/src/components/Navbar.astro

@@ -8,7 +8,7 @@ import { BlitzKitIcon } from "../icons/BlitzKit";
     position: sticky;
     top: 0;
     width: 100%;
-    margin-bottom: calc(var(--space-5) * -1);
+    margin-bottom: calc(var(--space-4) * -1);
 
     display: flex;
     justify-content: space-between;