src/entities/project/ui/ProjectCard/ProjectCard.test.tsx

@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
     it('card has hover transition classes', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
       const card = container.firstChild as HTMLElement;
-      expect(card).toHaveClass('group', 'transition-all', 'duration-300');
+      expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
     });
 
     it('year badge has correct classes', () => {

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -30,12 +30,7 @@ type Props = {
  */
 export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
   return (
-    <Card
-      className={cn(
-        'group hover:translate-x-[2px] hover:translate-y-[2px]',
-        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
-      )}
-    >
+    <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
       <CardHeader>
         <div className="flex flex-row justify-between items-start mb-3">
           <CardTitle className="flex-1">{title}</CardTitle>

src/widgets/Navigation/ui/SidebarNav.tsx

@@ -53,7 +53,7 @@ export function SidebarNav({ items }: Props) {
             className={cn(
               'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
               isActive(item)
-                ? 'shadow-[12px_12px_0_var(--blue)] opacity-100 translate-x-0'
+                ? 'shadow-brutal-2xl opacity-100 translate-x-0'
                 : 'opacity-40 shadow-none hover:opacity-60',
             )}
           >