redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

components/TopBar.tsx

@@ -36,7 +36,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       );
       setDate(
         now.toLocaleDateString("ru-RU", {
-          weekday: "long",
+          weekday: "short",
           day: "numeric",
           month: "long",
         })
@@ -50,6 +50,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
   return (
     <motion.div
       className="glass-card px-6 py-3 flex items-center justify-between no-select"
+      style={{ borderRadius: "20px" }}
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
@@ -57,8 +58,8 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       {/* Time & Date */}
       <div className="flex items-baseline gap-4">
         <span
-          className="text-5xl font-bold tracking-tight"
-          style={{ color: "var(--text-primary)" }}
+          className="font-black tracking-tight leading-none"
+          style={{ fontSize: "42px", color: "var(--text-primary)" }}
         >
           {time}
         </span>
@@ -70,41 +71,35 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
         </span>
       </div>
 
-      {/* Weather */}
+      {/* Weather pill */}
       {weather && (
         <motion.div
-          className="flex items-center gap-3 px-4 py-2 rounded-xl"
+          className="flex items-center gap-3 px-5 py-2 rounded-2xl"
           style={{
-            background: "rgba(99,102,241,0.1)",
-            border: "1px solid rgba(99,102,241,0.2)",
+            background: "rgba(59,130,246,0.1)",
+            border: "1px solid rgba(59,130,246,0.22)",
           }}
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.3 }}
         >
-          <span className="text-2xl">
+          <span className="text-2xl leading-none">
             {getWeatherEmoji(weather.weatherCode)}
           </span>
           <div>
             <div
-              className="text-xl font-bold"
+              className="text-xl font-black leading-tight"
               style={{ color: "var(--text-primary)" }}
             >
               {weather.temp}°C
             </div>
             <div
-              className="text-xs"
+              className="text-xs leading-tight"
               style={{ color: "var(--text-secondary)" }}
             >
-              Ощущается {weather.feelsLike}°
+              {weather.desc}
             </div>
           </div>
-          <div
-            className="text-xs ml-2 max-w-[80px] text-center leading-tight"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            {weather.desc}
-          </div>
         </motion.div>
       )}
 
@@ -112,7 +107,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
       <div className="flex items-center gap-3">
         {weather?.demo && (
           <span
-            className="text-xs px-2 py-1 rounded-full"
+            className="text-xs px-2.5 py-1 rounded-full font-semibold"
             style={{
               background: "rgba(245,158,11,0.15)",
               color: "#f59e0b",