diff --git a/app/globals.css b/app/globals.css
index 395f7e5..64fd2be 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -173,10 +173,16 @@ html, body {
font-feature-settings: "tnum", "zero";
}
.num-display {
- letter-spacing: -0.02em;
+ font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+ letter-spacing: -0.03em;
font-weight: 800;
- line-height: 0.95;
+ line-height: 0.92;
}
+/* Дисплейный шрифт для заголовков/крупных элементов — выразительнее Inter */
+h1, h2, h3, .display, .num-display, .eyebrow {
+ font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+}
+h1, h2, h3 { letter-spacing: -0.02em; }
/* ——————————————————————————————
Grain overlay
@@ -260,34 +266,78 @@ html, body {
}
/* ——————————————————————————————
- Cards
+ Cards — премиальное стекло-bento с глубиной
+ Полупрозрачный градиент + backdrop-blur поверх живого ambient,
+ тонкая градиентная кромка сверху (inset highlight) и мягкая внешняя тень.
—————————————————————————————— */
-.card {
- background: var(--surface-1);
+.card,
+.card-raised,
+.card-hero,
+.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);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-sm);
+ -webkit-backdrop-filter: blur(18px) saturate(1.3);
+ backdrop-filter: blur(18px) saturate(1.3);
+ 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);
+ transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
+ box-shadow 0.22s ease, border-color 0.22s ease;
}
-.card-raised {
- background: var(--surface-1);
- border: 1px solid var(--border-subtle);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-md);
+.light .card,
+.light .card-raised,
+.light .card-hero,
+.light .glass-card {
+ background:
+ linear-gradient(160deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 255, 255, 0.72) 100%);
+ box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
+.card { border-radius: var(--radius-lg); }
+.card-raised { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08); }
.card-hero {
- background: var(--surface-1);
- border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
- box-shadow: var(--shadow-lg);
+ box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+/* Верхняя градиентная кромка — «свет» на стекле сверху */
+.card-hero::before,
+.card-raised::before {
+ content: '';
+ position: absolute;
+ inset: 0 0 auto 0;
+ height: 1px;
+ border-radius: inherit;
+ background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
+ opacity: 0.8;
+ pointer-events: none;
+}
+/* Интерактивные карточки (те, что кликаются) — лёгкий подъём/масштаб */
+button.card, button.card-raised, a.card, [role="button"].card,
+.card-interactive {
+ cursor: pointer;
+}
+button.card:active, .card-interactive:active {
+ transform: scale(0.985);
+}
+@media (hover: hover) {
+ .card-interactive:hover {
+ transform: translateY(-2px);
+ border-color: var(--border-strong);
+ box-shadow: var(--shadow-lg), 0 0 24px -8px var(--accent-glow),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ }
}
/* Focus-card styling — for the context-aware hero */
.focus-card {
position: relative;
- background: var(--surface-1);
- border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
- box-shadow: var(--shadow-lg);
overflow: hidden;
}
.focus-card-accent::before {
@@ -307,13 +357,10 @@ html, body {
pointer-events: none;
}
-.glass-card {
- background: var(--surface-1);
- border: 1px solid var(--border-subtle);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-sm);
+.glass-card { border-radius: var(--radius-lg); }
+@media (hover: hover) {
+ .glass-card:hover { border-color: var(--border-strong); }
}
-.glass-card:hover { background: var(--surface-hover); }
/* ——— Смелые опциональные утилиты (opt-in, раскладку не меняют) ——— */
/* Светящаяся рамка-акцент для избранных карточек */
@@ -448,3 +495,16 @@ button:focus-visible {
.light.weather-bg-snow { --accent-glow: rgba(125, 211, 252, 0.22); }
.light.weather-bg-thunder { --accent-glow: rgba(109, 40, 217, 0.14); }
.light.weather-bg-night { --accent-glow: rgba(55, 48, 163, 0.14); }
+
+/* ——————————————————————————————
+ Reduced motion — уважаем системную настройку (a11y)
+ —————————————————————————————— */
+@media (prefers-reduced-motion: reduce) {
+ *, *::before, *::after {
+ animation-duration: 0.001ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.001ms !important;
+ }
+ .bg-ambient::before, .bg-ambient::after, .bg-ambient .aurora-3 { animation: none; }
+ .card-interactive:hover { transform: none; }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 0d44276..58df8c1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
-
+
{children}