From d7b1747533117cb5acdf0858328c887cc017d17a Mon Sep 17 00:00:00 2001
From: "d.klimov" <d.klimov@arenadata.io>
Date: Wed, 22 Jul 2026 23:17:41 +0300
Subject: [PATCH] =?UTF-8?q?design:=20=D0=B3=D1=80=D0=B0=D0=B4=D0=B8=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=BD=D1=8B=D0=B9=20=D0=BF=D0=BE=D0=B3=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20hero,=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=81=D1=82=D0=B5=D0=BA=D0=BB=D1=8F=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA?=
 =?UTF-8?q?=D0=B8,=20=D0=B6=D0=B8=D0=B2=D0=BE=D0=B9=20ambient?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- погода-hero: насыщенный indigo/violet градиент, крупная анимация справа
  (убирает воид), температура 100px, стеклянные чипы деталей
- карточки заметно светлее (surface-3 glass) — явно поднимаются над фоном
- ambient крупнее и насыщеннее (indigo/cyan/violet) — фон живой, не чёрный
---
 app/globals.css | 40 ++++++++++----------
 app/page.tsx    | 98 ++++++++++++++++++++++++++-----------------------
 2 files changed, 73 insertions(+), 65 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 64fd2be..825297e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -226,28 +226,28 @@ h1, h2, h3 { letter-spacing: -0.02em; }
   filter: blur(80px);
 }
 .bg-ambient::before {
-  width: 680px; height: 680px;
-  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
-  top: -200px; right: -100px;
+  width: 820px; height: 820px;
+  background: radial-gradient(circle, rgba(109, 94, 252, 0.5) 0%, transparent 66%);
+  top: -240px; right: -140px;
   animation: float1 22s ease-in-out infinite;
 }
 .bg-ambient::after {
-  width: 600px; height: 600px;
-  background: radial-gradient(circle, rgba(46, 230, 246, 0.16) 0%, transparent 68%);
-  bottom: -180px; left: -80px;
+  width: 720px; height: 720px;
+  background: radial-gradient(circle, rgba(46, 230, 246, 0.3) 0%, transparent 66%);
+  bottom: -220px; left: -120px;
   animation: float2 27s ease-in-out infinite;
 }
 .light .bg-ambient::after {
-  background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(8, 145, 178, 0.14) 0%, transparent 70%);
 }
 /* Третий, центральный ореол — глубина «космоса» */
 .bg-ambient .aurora-3 {
   position: absolute;
-  width: 520px; height: 520px;
+  width: 680px; height: 680px;
   border-radius: 50%;
-  filter: blur(90px);
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
-  top: 30%; left: 40%;
+  filter: blur(100px);
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.32) 0%, transparent 68%);
+  top: 22%; left: 34%;
   animation: float1 31s ease-in-out infinite reverse;
 }
 .light .bg-ambient .aurora-3 {
@@ -276,16 +276,16 @@ h1, h2, h3 { letter-spacing: -0.02em; }
 .glass-card {
   position: relative;
   background:
-    linear-gradient(160deg,
-      color-mix(in srgb, var(--surface-2) 82%, transparent) 0%,
-      color-mix(in srgb, var(--surface-1) 78%, transparent) 100%);
-  border: 1px solid var(--border-subtle);
-  -webkit-backdrop-filter: blur(18px) saturate(1.3);
-  backdrop-filter: blur(18px) saturate(1.3);
+    linear-gradient(155deg,
+      color-mix(in srgb, var(--surface-3) 92%, transparent) 0%,
+      color-mix(in srgb, var(--surface-1) 88%, transparent) 100%);
+  border: 1px solid rgba(160, 168, 255, 0.14);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  backdrop-filter: blur(20px) saturate(1.4);
   box-shadow:
-    var(--shadow-md),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
+    var(--shadow-lg),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
   transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
               box-shadow 0.22s ease, border-color 0.22s ease;
 }
diff --git a/app/page.tsx b/app/page.tsx
index 28fdb83..191c94d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -503,69 +503,77 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         {/* Hero weather card */}
         {weather ? (
           <div
-            className="card-hero"
+            className="card-hero card-interactive"
             onClick={() => weather?.forecast?.[0] && setSelectedDay(weather.forecast[0])}
             style={{
-              padding: '24px 26px',
+              padding: 0,
               display: 'flex', flexDirection: 'column',
               position: 'relative', overflow: 'hidden',
-              cursor: 'pointer',
+              cursor: 'pointer', minHeight: 232,
             }}
           >
-            {/* Decorative animation, large, behind */}
+            {/* Насыщенный градиентный фон-hero (тема «Космо») */}
             <div style={{
-              position: 'absolute', top: -24, right: -12,
-              opacity: 0.14, pointerEvents: 'none',
+              position: 'absolute', inset: 0, pointerEvents: 'none',
+              background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #2563eb 100%)',
+              opacity: 0.92,
+            }} />
+            {/* Мягкое свечение сверху-справа для глубины */}
+            <div style={{
+              position: 'absolute', top: -80, right: -60, width: 320, height: 320,
+              borderRadius: '50%', pointerEvents: 'none',
+              background: 'radial-gradient(circle, rgba(255,255,255,0.25), transparent 62%)',
+            }} />
+            {/* Крупная погодная анимация — заполняет правую часть */}
+            <div style={{
+              position: 'absolute', top: -14, right: 2,
+              opacity: 0.95, pointerEvents: 'none',
+              filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.25))',
             }}>
-              <WeatherAnimation condition={weather.desc} size={180} />
-            </div>
-
-            <div className="eyebrow" style={{ marginBottom: 10, position: 'relative', zIndex: 1 }}>
-              Сейчас
+              <WeatherAnimation condition={weather.desc} size={168} />
             </div>
 
             <div style={{
-              display: 'flex', alignItems: 'center', gap: 14,
-              position: 'relative', zIndex: 1, marginBottom: 8,
+              position: 'relative', zIndex: 1,
+              padding: '24px 28px', display: 'flex', flexDirection: 'column', height: '100%',
             }}>
+              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 6 }}>
+                Сейчас
+              </div>
+
               <div className="num-display" style={{
-                fontSize: 76, color: 'var(--text-primary)',
+                fontSize: 100, color: '#fff', lineHeight: 0.9,
+                textShadow: '0 4px 24px rgba(0,0,0,0.28)',
               }}>
                 {weather.temp}°
               </div>
-              <WeatherAnimation condition={weather.desc} size={60} />
-            </div>
 
-            <div style={{
-              fontSize: 17, color: 'var(--text-primary)', fontWeight: 600,
-              position: 'relative', zIndex: 1, marginBottom: 16,
-              textTransform: 'capitalize',
-            }}>
-              {weather.desc}
-            </div>
+              <div style={{
+                fontSize: 19, color: '#fff', fontWeight: 700,
+                marginTop: 6, textTransform: 'capitalize',
+                textShadow: '0 2px 12px rgba(0,0,0,0.25)',
+              }}>
+                {weather.desc}
+              </div>
 
-            <div style={{
-              display: 'flex', gap: 22, flexWrap: 'wrap',
-              marginTop: 'auto', position: 'relative', zIndex: 1,
-            }}>
-              {weather.feelsLike && (
-                <div>
-                  <div className="eyebrow">Ощущается</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.feelsLike}°</div>
-                </div>
-              )}
-              {weather.humidity && (
-                <div>
-                  <div className="eyebrow">Влажность</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.humidity}</div>
-                </div>
-              )}
-              {weather.windSpeed && (
-                <div>
-                  <div className="eyebrow">Ветер</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.windSpeed}</div>
-                </div>
-              )}
+              {/* Стеклянные чипы деталей */}
+              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 'auto', paddingTop: 20 }}>
+                {[
+                  weather.feelsLike && { label: 'Ощущается', value: `${weather.feelsLike}°` },
+                  weather.humidity && { label: 'Влажность', value: `${weather.humidity}` },
+                  weather.windSpeed && { label: 'Ветер', value: `${weather.windSpeed}` },
+                ].filter(Boolean).map((chip: any) => (
+                  <div key={chip.label} style={{
+                    padding: '9px 15px', borderRadius: 14,
+                    background: 'rgba(255,255,255,0.14)',
+                    border: '1px solid rgba(255,255,255,0.2)',
+                    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
+                  }}>
+                    <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>{chip.label}</div>
+                    <div className="num" style={{ fontSize: 17, color: '#fff', fontWeight: 800, marginTop: 2 }}>{chip.value}</div>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         ) : (