From a2d0d2d8c0ea6a07a46b871140a7d4638ea9015e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 13 Jan 2026 12:46:34 -0600
Subject: [PATCH] feat: card styles

---
 .../website-ue/src/components/AvatarCard/index.css    |  5 +++++
 packages/website-ue/src/components/BaseStyles.astro   |  2 ++
 packages/website-ue/src/components/Navbar.astro       |  2 +-
 .../src/pages/[...locale]/avatars/index.astro         | 11 +++++++----
 packages/website-ue/src/pages/[...locale]/index.astro |  2 +-
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/website-ue/src/components/AvatarCard/index.css b/packages/website-ue/src/components/AvatarCard/index.css
index aba12f507..e67b7aed0 100644
--- a/packages/website-ue/src/components/AvatarCard/index.css
+++ b/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 {
diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index ba674f142..8bac9c140 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/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);
   }
diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro
index 98e947d11..5127b29ba 100644
--- a/packages/website-ue/src/components/Navbar.astro
+++ b/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;
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/index.astro b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
index b459b4f82..fff0ba90f 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
@@ -1,4 +1,5 @@
 ---
+import Section from "../../../components/Section.astro";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import { Page } from "./_index";
 
@@ -11,12 +12,14 @@ const { locale } = Astro.props;
   .avatars {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--space-7), 1fr));
-    gap: var(--space-4);
+    gap: var(--space-5) var(--space-4);
   }
 </style>
 
 <BaseLayout {locale} accent="gold">
-  <Page client:only="react">
-    <Page skeleton slot="fallback" />
-  </Page>
+  <Section>
+    <Page client:only="react">
+      <Page skeleton slot="fallback" />
+    </Page>
+  </Section>
 </BaseLayout>
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index 25fe3bbdc..8d8269016 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -21,7 +21,7 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<BaseLayout accent="amber" noNavbar>
+<BaseLayout {locale} accent="amber" noNavbar>
   <ColorScale color="purple" slot="head" />
   <ColorScale color="gold" slot="head" />
   <ColorScale color="lime" slot="head" />