feat: classic styled components

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -36,6 +36,7 @@ export function ArmorPlateDisplay() {
         style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
       >
         <Card
+          variant="classic"
           mb="4"
           style={{
             whiteSpace: 'nowrap',
@@ -72,6 +73,7 @@ export function ArmorPlateDisplay() {
             {highlightArmor.editingPlate && (
               <Flex gap="2" align="center">
                 <TextField.Root
+                  variant="classic"
                   style={{ width: 96 }}
                   mt="2"
                   ref={input}

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -115,7 +115,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
   const inTitleColor = shotStatusColors[shot.in.status];
 
   return (
-    <Card style={{ width: 300 }} {...props}>
+    <Card variant="classic" style={{ width: 300 }} {...props}>
       <Flex direction="column" gap="2">
         <Flex direction="column" gap="1">
           <Text color={inTitleColor} weight="bold">