/* ТОКЕНЫ ВИТРИНЫ. Единственный файл, где у цвета, радиуса и шрифта есть значение. Источник каждого числа — design/design-system.md, редакция 2 от 16.09.2026: вид витрины — стиль каталога core (стекло, сцена, радиусы 18/14/12, системный шрифт) с зелёным акцентом клиентского КП core. Решение владельца Р1/Р2 того же дня. Значения нет в системе — нет и здесь: новое число сначала попадает в дизайн-систему, потом сюда. Компоненты (komponenty.css) берут только var(--…). ТЕМА. Без атрибута — по prefers-color-scheme. В Telegram тему знает Telegram.WebApp.colorScheme, и её ставят атрибутом data-tema на : атрибут сильнее системной настройки в обе стороны. У core тёмной темы нет — у витрины она производная от тех же ролей (Р2): витрина живёт внутри Telegram, и белое приложение поверх тёмного Telegram ломает ощущение сильнее всего. Тёмная палитра записана дважды — под медиазапросом и под атрибутом. Это не небрежность: light-dark() короче, но его нет в Safari до 17.5, а у клиента бывает iOS 16. Две копии одной таблицы дешевле, чем белый экран у части людей. ШРИФТЫ — СИСТЕМНЫЙ СТЕК ТЕЛЕФОНА, как в каталоге core: SF Pro на iPhone, Roboto на Android, Segoe UI на Windows. Своих файлов нет с 16.09.2026 (было 77 КБ на четыре woff2) — килобайты возвращаются домам, лицензионный вопрос снимается. Цифры тем же шрифтом, но табличные (tabular-nums): площадь, цена и дата не пляшут по ширине. СТЕКЛО. Панели — полупрозрачный белый с размытием того, что за ним (backdrop-filter). Дорого для слабых телефонов, поэтому под prefers-reduced-transparency стекло становится плотной поверхностью — глушилка из core, дословно. */ :root { color-scheme: light; /* --- Холст ---------------------------------------------------------------- */ --fon: #E9EDF4; /* Сцена под всем: четыре цветных пятна на холсте — «свет над посёлком» из core. Рисуется одним слоем body::before, поверх него всё остальное. */ --scena: radial-gradient(46% 38% at 20% -4%, rgb(34 197 94 / .30) 0%, transparent 60%), radial-gradient(44% 40% at 88% 3%, rgb(37 99 235 / .26) 0%, transparent 58%), radial-gradient(50% 44% at 97% 78%, rgb(147 51 234 / .16) 0%, transparent 60%), radial-gradient(56% 42% at 28% 104%, rgb(8 145 178 / .20) 0%, transparent 62%), linear-gradient(162deg, #F8FAFD 0%, #E7ECF5 52%, #DDE5F1 100%); /* --- Стекло: поверхность карточек, плиток, блока цены, панели ------------- */ --karta: rgb(255 255 255 / .82); --karta-plotnaya: #FFFFFF; /* без размытия: prefers-reduced-transparency */ --karta-liniya: rgb(255 255 255 / .72); /* край стекла */ --steklo: saturate(180%) blur(22px); --steklo-malo: saturate(170%) blur(12px); --steklo-knopki: rgb(255 255 255 / .6); /* вторичная кнопка и превью */ --pole-fon: rgb(255 255 255 / .8); /* --- Линии ---------------------------------------------------------------- */ --liniya: rgb(17 24 39 / .09); --liniya-slabaya: rgb(17 24 39 / .055); --granica: rgb(17 24 39 / .28); /* край при наведении, норма 3:1 не требуется */ /* --- Текст ---------------------------------------------------------------- */ --tekst: #11151C; /* 16,4:1 к стеклу */ --tusklyy: #5C6675; /* 5,8:1 к стеклу, 4,9:1 к холсту */ /* --- Акцент: зелёный клиентского КП core --------------------------------- */ --akcent: #15803D; /* 5,0:1 к стеклу; кнопка, цена, отметка, фокус */ --akcent-navedenie: #166534; --akcent-nazhatie: #14532D; --akcent-liniya: rgb(21 128 61 / .22); /* рамка вторичной кнопки — .btn.ghost core: акцент на 22% */ --akcent-liniya-navedenie: rgb(21 128 61 / .42); --na-akcente: #FFFFFF; --podlozhka: #DCFCE7; /* отмеченная карточка; акцент на ней 4,5:1 */ --chip-fon: #ECFDF5; --chip-tekst: #047857; /* 5,3:1 к чипу */ --zatemnenie: rgb(17 24 39 / .45); /* --- Тени: как в core ---------------------------------------------------- */ --ten: 0 1px 1px rgb(17 24 39 / .04), 0 10px 26px -10px rgb(17 24 39 / .18); --ten-podnyataya: 0 2px 4px rgb(17 24 39 / .05), 0 20px 44px -14px rgb(17 24 39 / .28); --ten-blik: inset 0 1px 0 rgb(255 255 255 / .85); /* блик по верхнему краю стекла */ --ten-knopki: 0 7px 16px -5px rgb(22 163 74 / .5), inset 0 1px 0 rgb(255 255 255 / .3); --ten-knopki-navedenie: 0 10px 22px -6px rgb(22 163 74 / .55), inset 0 1px 0 rgb(255 255 255 / .3); --ten-vdavlena: inset 2px 2px 5px rgb(15 23 42 / .10), inset -2px -2px 5px rgb(255 255 255 / .92); --ten-vypuklaya: 3px 3px 8px rgb(15 23 42 / .08), -2px -2px 6px rgb(255 255 255 / .95); --ten-segmenta: inset 0 2px 4px rgb(0 0 0 / .45), 0 4px 10px -3px rgb(17 21 28 / .5); --ten-paneli: 0 -10px 26px -10px rgb(17 24 39 / .18); --ten-badzha: 0 4px 10px -3px rgb(17 24 39 / .3); /* бейдж на обложке — .kg-badge core */ /* --- Шрифты: системный стек, свои файлы сняты 16.09.2026 ----------------- */ --shrift-zagolovok: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --shrift-tekst: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif; --shrift-cifry: var(--shrift-zagolovok); /* --- Шкала: размеры core, поднятые до пола 16 px ---------------------------- */ --font-zagolovok-ekrana: 800 28px/34px var(--shrift-zagolovok); --font-imya: 800 26px/32px var(--shrift-zagolovok); /* название дома на своей странице */ --font-imya-karty: 800 18px/24px var(--shrift-zagolovok); /* название в карточке ленты */ --font-cena: 800 26px/32px var(--shrift-cifry); /* цена на странице дома */ --font-cena-karty: 800 18px/24px var(--shrift-cifry); /* цена в карточке ленты */ --font-plitka: 800 20px/24px var(--shrift-cifry); /* значение в плитке факта */ --font-vvodnaya: 400 20px/28px var(--shrift-tekst); --font-tekst: 400 16px/24px var(--shrift-tekst); /* плотность core, пол 16 px */ --font-knopka: 600 17px/20px var(--shrift-tekst); --font-podpis: 400 16px/22px var(--shrift-tekst); --font-podpis-zhirnaya: 700 16px/22px var(--shrift-tekst); --font-cifry: 400 16px/22px var(--shrift-cifry); --trekking-zagolovka: -0.028em; --trekking-imeni: -0.03em; /* --- Геометрия: шаг 4 px ------------------------------------------------- */ --otstup-4: 4px; --otstup-8: 8px; --otstup-12: 12px; --otstup-16: 16px; --otstup-24: 24px; --otstup-32: 32px; --otstup-48: 48px; --otstup-64: 64px; --kraya: 16px; /* отступ от края экрана: свайп от края закрывает мини-приложение */ --skruglenie-karty: 18px; /* карточка, кадр, блок цены, диалог */ --skruglenie-vnutr: 14px; /* плитка факта, картинка внутри карточки */ --skruglenie-knopki: 12px; /* кнопка, поле, превью */ --skruglenie-pilyuli: 999px; /* чип */ --liniya-1: 1px; --liniya-2: 2px; /* кольцо фокуса и рамка отмеченного дома */ --tach: 44px; --tach-glavnaya: 48px; --kolonka: 720px; --shirina-dialoga: 480px; --shirina-menu: 200px; --znachok: 20px; --znachok-otdelno: 24px; /* --- Движение: кривые и длительности core ---------------------------------- */ --krivaya: cubic-bezier(.2, 0, 0, 1); --krivaya-podyom: cubic-bezier(.22, 1, .36, 1); /* подъём карточки при наведении */ --smena-cveta: 180ms; /* наведение и нажатие; анимацией не считается */ --podyom: 250ms; --anim-otmetka: 160ms; --anim-podborka: 200ms; --anim-foto: 240ms; } @media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { color-scheme: dark; --fon: #0F1318; --scena: radial-gradient(46% 38% at 20% -4%, rgb(34 197 94 / .14) 0%, transparent 60%), radial-gradient(44% 40% at 88% 3%, rgb(37 99 235 / .14) 0%, transparent 58%), radial-gradient(50% 44% at 97% 78%, rgb(147 51 234 / .10) 0%, transparent 60%), radial-gradient(56% 42% at 28% 104%, rgb(8 145 178 / .12) 0%, transparent 62%), linear-gradient(162deg, #151B23 0%, #0F1318 52%, #0B0E13 100%); --karta: rgb(24 29 36 / .82); --karta-plotnaya: #181D24; --karta-liniya: rgb(255 255 255 / .09); --steklo-knopki: rgb(255 255 255 / .06); --pole-fon: rgb(255 255 255 / .06); --liniya: rgb(255 255 255 / .09); --liniya-slabaya: rgb(255 255 255 / .055); --granica: rgb(255 255 255 / .3); --tekst: #ECEFF3; --tusklyy: #A3ADB9; --akcent: #4ADE80; --akcent-navedenie: #86EFAC; --akcent-nazhatie: #22C55E; --akcent-liniya: rgb(74 222 128 / .3); --akcent-liniya-navedenie: rgb(74 222 128 / .5); --na-akcente: #062B12; --podlozhka: #14301E; --chip-fon: #12291B; --chip-tekst: #86EFAC; --zatemnenie: rgb(0 0 0 / .6); --ten: 0 1px 1px rgb(0 0 0 / .2), 0 10px 26px -10px rgb(0 0 0 / .6); --ten-podnyataya: 0 2px 4px rgb(0 0 0 / .25), 0 20px 44px -14px rgb(0 0 0 / .7); --ten-blik: inset 0 1px 0 rgb(255 255 255 / .06); --ten-knopki: 0 7px 16px -5px rgb(74 222 128 / .35), inset 0 1px 0 rgb(255 255 255 / .2); --ten-knopki-navedenie: 0 10px 22px -6px rgb(74 222 128 / .4), inset 0 1px 0 rgb(255 255 255 / .2); --ten-vdavlena: inset 2px 2px 5px rgb(0 0 0 / .5), inset -2px -2px 5px rgb(255 255 255 / .04); --ten-vypuklaya: 3px 3px 8px rgb(0 0 0 / .4), -2px -2px 6px rgb(255 255 255 / .04); --ten-segmenta: inset 0 2px 4px rgb(0 0 0 / .6), 0 4px 10px -3px rgb(0 0 0 / .6); --ten-paneli: 0 -10px 26px -10px rgb(0 0 0 / .6); --ten-badzha: 0 4px 10px -3px rgb(0 0 0 / .6); } } :root[data-tema="dark"] { color-scheme: dark; --fon: #0F1318; --scena: radial-gradient(46% 38% at 20% -4%, rgb(34 197 94 / .14) 0%, transparent 60%), radial-gradient(44% 40% at 88% 3%, rgb(37 99 235 / .14) 0%, transparent 58%), radial-gradient(50% 44% at 97% 78%, rgb(147 51 234 / .10) 0%, transparent 60%), radial-gradient(56% 42% at 28% 104%, rgb(8 145 178 / .12) 0%, transparent 62%), linear-gradient(162deg, #151B23 0%, #0F1318 52%, #0B0E13 100%); --karta: rgb(24 29 36 / .82); --karta-plotnaya: #181D24; --karta-liniya: rgb(255 255 255 / .09); --steklo-knopki: rgb(255 255 255 / .06); --pole-fon: rgb(255 255 255 / .06); --liniya: rgb(255 255 255 / .09); --liniya-slabaya: rgb(255 255 255 / .055); --granica: rgb(255 255 255 / .3); --tekst: #ECEFF3; --tusklyy: #A3ADB9; --akcent: #4ADE80; --akcent-navedenie: #86EFAC; --akcent-nazhatie: #22C55E; --akcent-liniya: rgb(74 222 128 / .3); --akcent-liniya-navedenie: rgb(74 222 128 / .5); --na-akcente: #062B12; --podlozhka: #14301E; --chip-fon: #12291B; --chip-tekst: #86EFAC; --zatemnenie: rgb(0 0 0 / .6); --ten: 0 1px 1px rgb(0 0 0 / .2), 0 10px 26px -10px rgb(0 0 0 / .6); --ten-podnyataya: 0 2px 4px rgb(0 0 0 / .25), 0 20px 44px -14px rgb(0 0 0 / .7); --ten-blik: inset 0 1px 0 rgb(255 255 255 / .06); --ten-knopki: 0 7px 16px -5px rgb(74 222 128 / .35), inset 0 1px 0 rgb(255 255 255 / .2); --ten-knopki-navedenie: 0 10px 22px -6px rgb(74 222 128 / .4), inset 0 1px 0 rgb(255 255 255 / .2); --ten-vdavlena: inset 2px 2px 5px rgb(0 0 0 / .5), inset -2px -2px 5px rgb(255 255 255 / .04); --ten-vypuklaya: 3px 3px 8px rgb(0 0 0 / .4), -2px -2px 6px rgb(255 255 255 / .04); --ten-segmenta: inset 0 2px 4px rgb(0 0 0 / .6), 0 4px 10px -3px rgb(0 0 0 / .6); --ten-paneli: 0 -10px 26px -10px rgb(0 0 0 / .6); --ten-badzha: 0 4px 10px -3px rgb(0 0 0 / .6); } /* Затемнение под диалогом объявлено ещё и на самом ::backdrop. В старых движках (Chrome до 122; по Safari — не проверено) ::backdrop не наследует переменные от :root, и var(--zatemnenie) там пустой: окно открылось бы без затемнения. */ ::backdrop { --zatemnenie: rgb(17 24 39 / .45); } @media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) ::backdrop { --zatemnenie: rgb(0 0 0 / .6); } } :root[data-tema="dark"] ::backdrop { --zatemnenie: rgb(0 0 0 / .6); } /* СТЕКЛО ДОРОГО СЛАБЫМ ТЕЛЕФОНАМ. Человек попросил меньше прозрачности — стекло становится плотной поверхностью, размытие снимается. Глушилка из core, дословно. */ @media (prefers-reduced-transparency: reduce) { :root, :root[data-tema="dark"] { --karta: var(--karta-plotnaya); --steklo: none; --steklo-malo: none; } } /* Всё из бюджета анимаций происходит мгновенно (design-system, раздел 5). */ @media (prefers-reduced-motion: reduce) { :root { --smena-cveta: 0ms; --podyom: 0ms; --anim-otmetka: 0ms; --anim-podborka: 0ms; --anim-foto: 0ms; } }