/* ══════════════════════════════════════════════════════════════════════════ «Спокойная ночь» — материал темы ────────────────────────────────────────────────────────────────────────── Контрасты темы посчитаны и проверены (theme-contrast.css). Этот лист про другое: почему при верных цифрах интерфейс всё равно выглядел «так себе». Причина простая: всё было плоским. Кнопка — прямоугольник ровного золота, карточка — прямоугольник ровного тёмного, фон — ровная заливка. Дорого выглядят не цвета, а материал: свет падает сверху, у поверхностей есть толщина и тень, у золота — глубина, у фона — зерно, а у продукта — свой орнамент, а не чужой набор градиентов. Правила ниже: • ничего не двигают — только красят; • действуют только в теме по умолчанию (`html[data-theme="steppe-night"]`), три прежние темы остаются ровно такими, какими были; • не трогают доску: партия и разбор показывают одно и то же дерево. ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="steppe-night"] { /* Свет падает сверху: верхняя грань светлее, нижняя тонет в тени. */ --rich-top-light: rgba(255, 246, 228, 0.075); --rich-top-light-strong: rgba(255, 246, 228, 0.14); --rich-inner-shade: rgba(0, 0, 0, 0.28); --rich-gold-1: #f0d29a; --rich-gold-2: #d2a75e; --rich-gold-3: #b4863f; /* Тень тёплая, а не чёрная: чистый чёрный на тёплом фоне выглядит грязью. */ --rich-shadow-card: 0 24px 48px -32px rgba(24, 14, 4, 0.95), 0 2px 6px -4px rgba(0, 0, 0, 0.7); --rich-shadow-gold: 0 12px 28px -14px rgba(210, 167, 94, 0.55); /* Зерно: 180px плитка со стохастическим шумом. Без него большие тёмные заливки на телефоне идут полосами (банд), и экран выглядит дешёвым. */ --rich-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"); /* Қошқар мүйіз — тот же мотив, что на заставке приложения. */ --rich-oyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 112' fill='none' stroke='%23d2a75e' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 H74 C92 18 100 30 94 40 C89 49 76 50 72 42 C69 36 73 30 79 31'/%3E%3Cpath d='M18 18 V74 C18 92 30 100 40 94 C49 89 50 76 42 72 C36 69 30 73 31 79'/%3E%3C/svg%3E"); /* Тот же орнамент, но с прозрачной обводкой: он идёт фоном там, где нельзя задать `opacity` всему слою (обложка профиля рисует поверх него фото). */ --rich-oyu-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 112' fill='none' stroke='%23d2a75e' stroke-opacity='0.20' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 H74 C92 18 100 30 94 40 C89 49 76 50 72 42 C69 36 73 30 79 31'/%3E%3Cpath d='M18 18 V74 C18 92 30 100 40 94 C49 89 50 76 42 72 C36 69 30 73 31 79'/%3E%3C/svg%3E"); } /* ── Земля страницы ──────────────────────────────────────────────────────── Тёплое золотое зарево у верхней кромки — как свет лампы над столом, — и поверх него зерно. Карточек это не касается: у них своя заливка. */ html[data-theme="steppe-night"] body:not(.game-active) > .app-container.tp-shell { background: var(--rich-grain) repeat, radial-gradient(1200px 640px at 50% -14%, rgba(210, 167, 94, 0.11), transparent 62%), radial-gradient(820px 520px at 56% -18%, color-mix(in srgb, var(--surface-raised) 34%, transparent), transparent 68%), var(--product-bg) !important; background-size: 180px 180px, auto, auto, auto; } /* ── Поверхности ─────────────────────────────────────────────────────────── Одна и та же формула на все карточки продукта: светлая грань сверху, мягкий градиент внутрь, тёплая тень наружу. */ html[data-theme="steppe-night"] :is( #screen-home .tp-home-section, #screen-home .tp-home-hero, .tp-settings-card, .tp-settings-profile-card, .tp-product-page .tp-card, .lb-card, .tp-continue-card, .tp-exercise-card, #screen-profile .profile-identity-card, #screen-profile .profile-section, #screen-profile .profile-stat-item, #screen-profile .profile-pool-card ) { background-image: linear-gradient(180deg, var(--rich-top-light) 0%, rgba(255, 246, 228, 0) 46%); box-shadow: inset 0 1px 0 var(--rich-top-light-strong), inset 0 -24px 40px -32px var(--rich-inner-shade), var(--rich-shadow-card); } /* Строка внутри карточки не должна получать вторую тень — иначе слои складываются и поверхность выглядит грязной. */ html[data-theme="steppe-night"] .tp-settings-card .tp-settings-row { box-shadow: none; } /* ── Золото ──────────────────────────────────────────────────────────────── Главная кнопка была ровной заливкой. Металл так не выглядит: сверху он светлее, снизу глубже, а по верхней кромке идёт тонкий блик. */ html[data-theme="steppe-night"] :is(.tp-button--primary, .tp-home-hero__cta, .tp-release-news__cta.tp-button--primary) { background-image: linear-gradient(180deg, var(--rich-gold-1) 0%, var(--rich-gold-2) 52%, var(--rich-gold-3) 100%); border-color: color-mix(in srgb, var(--rich-gold-3) 70%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.18), var(--rich-shadow-gold); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16); } html[data-theme="steppe-night"] :is(.tp-button--primary, .tp-home-hero__cta):hover { background-image: linear-gradient(180deg, #f6dcab 0%, #e0b671 52%, #c2954c 100%); } html[data-theme="steppe-night"] :is(.tp-button--primary, .tp-home-hero__cta):active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); } /* Второстепенная кнопка — не золотая, но с той же логикой света. */ html[data-theme="steppe-night"] :is(.tp-button--secondary, .tp-time-control) { background-image: linear-gradient(180deg, rgba(255, 246, 228, 0.07), rgba(255, 246, 228, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 246, 228, 0.09), 0 10px 22px -18px rgba(0, 0, 0, 0.9); } /* ── Верхняя панель ──────────────────────────────────────────────────────── Стекло вместо плашки: под ней проходит содержимое страницы, и панель это показывает. Тонкая золотая линия по нижней кромке отделяет её от полотна. */ html[data-theme="steppe-night"] body:not(.game-active) .tp-topbar { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--product-bg) 88%, transparent)) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent), 0 18px 36px -34px rgba(0, 0, 0, 0.9); } /* ── Орнамент ────────────────────────────────────────────────────────────── Қошқар мүйіз в углу приветствия — тот же мотив, что на заставке. Едва заметный: он должен читаться как тиснение на обложке, а не как картинка. */ html[data-theme="steppe-night"] #screen-home .tp-home-hero { position: relative; overflow: hidden; } html[data-theme="steppe-night"] #screen-home .tp-home-hero::after { content: ""; position: absolute; top: -18px; right: -22px; width: 152px; height: 152px; background: var(--rich-oyu) no-repeat center / contain; opacity: 0.075; transform: scaleX(-1); pointer-events: none; } html[data-theme="steppe-night"] #screen-home .tp-home-hero > * { position: relative; z-index: 1; } /* ── Имя в приветствии ───────────────────────────────────────────────────── Одно золотое слово вместо целой золотой строки: акцент дороже выглядит там, где он один. Цвет задан и обычным свойством — если браузер не умеет обрезать фон по тексту, слово просто останется золотым. */ html[data-theme="steppe-night"] #screen-home .tp-home-hero__copy h1 > span:last-child { color: var(--rich-gold-1); background: linear-gradient(180deg, var(--rich-gold-1) 0%, var(--rich-gold-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { html[data-theme="steppe-night"] #screen-home .tp-home-hero__copy h1 > span:last-child { background: none; -webkit-text-fill-color: currentColor; } } /* ── Мелочи, из которых складывается ощущение ────────────────────────────── Плашки-«таблетки» (рейтинг, статус) получают ту же грань сверху. */ html[data-theme="steppe-night"] :is(.tp-home__rating, .tp-home__status, .tp-chip, .tp-badge) { background-image: linear-gradient(180deg, rgba(255, 246, 228, 0.06), rgba(255, 246, 228, 0) 70%); box-shadow: inset 0 1px 0 rgba(255, 246, 228, 0.08); } /* Разделители внутри карточек светлее сверху и темнее снизу — как настоящий стык двух поверхностей. */ html[data-theme="steppe-night"] .tp-settings-row:not(:last-child) { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--rich-inner-shade), 0 2px 0 rgba(255, 246, 228, 0.045); } @media (prefers-reduced-transparency: reduce) { html[data-theme="steppe-night"] body:not(.game-active) .tp-topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-1) !important; } } /* ── Золотая линия под заголовком раздела ────────────────────────────────── Тонкая линия, растворяющаяся вправо: она отделяет заголовок от содержимого мягче, чем рамка, и это тот приём, по которому «дорогая» вёрстка узнаётся быстрее всего. */ html[data-theme="steppe-night"] #screen-home .tp-section-heading, html[data-theme="steppe-night"] .tp-settings-panel__header { position: relative; padding-bottom: 12px; } html[data-theme="steppe-night"] #screen-home .tp-section-heading::after, html[data-theme="steppe-night"] .tp-settings-panel__header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 52%, transparent) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 32%, transparent 78%); pointer-events: none; } /* Пустая секция и так свёрнута до двух строк — линия там лишняя. */ html[data-theme="steppe-night"] #screen-home .tp-home-section.is-empty .tp-section-heading { padding-bottom: 0; } html[data-theme="steppe-night"] #screen-home .tp-home-section.is-empty .tp-section-heading::after { display: none; } /* ── Плашка рейтинга ─────────────────────────────────────────────────────── Число рейтинга — то, ради чего человек открывает главную. Оправа у него золотая: тонкая грань, тёплая подсветка внутри, само число — золотом. */ html[data-theme="steppe-night"] .tp-home__rating { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 20px -16px rgba(210, 167, 94, 0.7); } html[data-theme="steppe-night"] .tp-home__rating strong, html[data-theme="steppe-night"] .tp-home__rating b, html[data-theme="steppe-night"] .tp-home__rating span:last-child { color: var(--rich-gold-1); } /* ══════════════════════════════════════════════════════════════════════════ Профиль — то, что игрок показывает другим ══════════════════════════════════════════════════════════════════════════ */ /* Обложка без загруженной картинки была ровной коричневой полосой. Теперь это тёплое зарево с тиснёным орнаментом — как форзац книги. Своё фото, если оно загружено, рисуется поверх и всё это перекрывает. */ html[data-theme="steppe-night"] #screen-profile .profile-cover:not(.has-image) { background-color: var(--surface-2); background-image: var(--rich-oyu-soft), radial-gradient(120% 180% at 78% -40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%); background-repeat: no-repeat, no-repeat, no-repeat; background-position: right -14px top -16px, center, center; background-size: 132px 132px, cover, cover; } /* Оправа аватара: золотое кольцо и мягкое свечение — приём, по которому портрет читается как медальон, а не как заглушка. */ html[data-theme="steppe-night"] #screen-profile .profile-avatar { border-color: color-mix(in srgb, var(--accent) 62%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--product-bg) 92%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent), 0 14px 30px -18px rgba(0, 0, 0, 0.9); } /* Плашка рейтинга в профиле — та же оправа, что и на главной. */ html[data-theme="steppe-night"] #screen-profile .profile-rating-pill { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 20px -16px rgba(210, 167, 94, 0.7); } /* Число в карточке результата — золотом: именно за ним человек сюда заходит. */ html[data-theme="steppe-night"] #screen-profile .profile-stat-item strong { color: var(--rich-gold-1); } /* WCAG 1.4.3: "Нет аккаунта?" on the auth card was 4.14:1 at 72% alpha; 80% gives 4.77:1. */ html[data-theme="steppe-night"] #web-auth-screen .sm-auth-hint { color: color-mix(in srgb, var(--text-secondary) 80%, transparent) !important; }