UI: тёплый современный дизайн + русификация

client/src/index.css

@@ -1,30 +1,33 @@
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
 
-:root {
-  --background: #ffffff;
-  --foreground: #0a0a0a;
-  --card: #ffffff;
-  --card-foreground: #0a0a0a;
-  --popover: #ffffff;
-  --popover-foreground: #0a0a0a;
-  --primary: #0a0a0a;
-  --primary-foreground: #ffffff;
-  --secondary: #f5f5f5;
-  --secondary-foreground: #0a0a0a;
-  --muted: #f7f7f7;
-  --muted-foreground: #8a8a8a;
-  --accent: #f0f0f0;
-  --accent-foreground: #0a0a0a;
-  --destructive: #e00;
-  --destructive-foreground: #fff;
-  --border: #e8e8e8;
-  --input: #e8e8e8;
-  --ring: #0a0a0a;
-  --radius: 0;
+@custom-variant dark (&:is(.dark *));
 
-  --accent-coral: #ff6b35;
-  --accent-coral-light: #fff4f0;
+:root {
+  --background: #faf7f3;
+  --foreground: #1c1613;
+  --card: #ffffff;
+  --card-foreground: #1c1613;
+  --popover: #ffffff;
+  --popover-foreground: #1c1613;
+  --primary: #e85d3a;
+  --primary-foreground: #ffffff;
+  --secondary: #fff0eb;
+  --secondary-foreground: #e85d3a;
+  --muted: #f5f0ec;
+  --muted-foreground: #8a7f75;
+  --accent: #fceae3;
+  --accent-foreground: #1c1613;
+  --destructive: #e03e2f;
+  --destructive-foreground: #ffffff;
+  --border: #e8e0d8;
+  --input: #e8e0d8;
+  --ring: #e85d3a;
+  --radius: 0.75rem;
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
 }
 
 * {
@@ -34,48 +37,53 @@
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+::selection {
+  background: #e85d3a;
+  color: white;
+}
+
 /* Heart animation */
 @keyframes heart-pop {
   0% { transform: scale(1); }
-  25% { transform: scale(1.25); }
+  25% { transform: scale(1.3); }
   50% { transform: scale(0.9); }
   75% { transform: scale(1.1); }
   100% { transform: scale(1); }
 }
 
 .heart-animate {
-  animation: heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* Double tap heart burst */
+/* Double tap heart */
 @keyframes heart-burst {
-  0% { transform: scale(0) rotate(-15deg); opacity: 1; }
-  60% { transform: scale(1.3) rotate(5deg); opacity: 0.8; }
-  100% { transform: scale(1.8) rotate(0deg); opacity: 0; }
+  0% { transform: scale(0) rotate(-12deg); opacity: 1; }
+  55% { transform: scale(1.2) rotate(3deg); opacity: 0.8; }
+  100% { transform: scale(1.6) rotate(0deg); opacity: 0; }
 }
 
 .heart-burst {
-  animation: heart-burst 0.6s ease-out forwards;
+  animation: heart-burst 0.5s ease-out forwards;
 }
 
 /* Fade in */
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(6px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .animate-fade-in {
-  animation: fade-in 0.3s ease-out;
+  animation: fade-in 0.35s ease-out;
 }
 
 /* Scale in */
 @keyframes scale-in {
-  from { opacity: 0; transform: scale(0.97); }
+  from { opacity: 0; transform: scale(0.95); }
   to { opacity: 1; transform: scale(1); }
 }
 
@@ -83,9 +91,9 @@ body {
   animation: scale-in 0.2s ease-out;
 }
 
-/* Slide up for toasts */
+/* Slide up */
 @keyframes slide-up {
-  from { opacity: 0; transform: translateY(12px); }
+  from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
@@ -93,14 +101,14 @@ body {
   animation: slide-up 0.25s ease-out;
 }
 
-/* Skeleton shimmer */
+/* Shimmer */
 @keyframes shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 }
 
 .skeleton-shimmer {
-  background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%);
   background-size: 200% 100%;
   animation: shimmer 1.2s ease-in-out infinite;
 }
@@ -111,29 +119,18 @@ body {
 }
 .page-enter-active {
   opacity: 1;
-  transition: opacity 0.15s ease-out;
+  transition: opacity 0.18s ease-out;
 }
 
 /* Like button press */
 .like-btn {
   transition: transform 0.1s;
+  cursor: pointer;
 }
 .like-btn:active {
   transform: scale(0.8);
 }
 
-/* Hide scrollbar for stories */
-.scrollbar-none::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-none {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-/* Terax-style divider */
-.divider-clean {
-  height: 1px;
-  background: #e8e8e8;
-  margin: 24px 0;
-}
+/* Scrollbar hide */
+.scrollbar-none::-webkit-scrollbar { display: none; }
+.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }