daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: градиентный погодный hero, заметные стеклянные карточки, живой ambient
All checks were successful
Deploy / deploy (push) Successful in 2m1s
Details

Browse Source 
- погода-hero: насыщенный indigo/violet градиент, крупная анимация справа
  (убирает воид), температура 100px, стеклянные чипы деталей
- карточки заметно светлее (surface-3 glass) — явно поднимаются над фоном
- ambient крупнее и насыщеннее (indigo/cyan/violet) — фон живой, не чёрный
This commit is contained in:
d.klimov
2026-07-22 23:17:41 +03:00
parent f97b41b848
commit d7b1747533
2 changed files with 73 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/globals.css
View File

@@ -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;
}