/* ================================================================== «По рукам» · токены ================================================================== Два мира в одном приложении, оба взяты с референсов: • «вход» — чёрно-синий градиент, светлый текст. Регистрация и ссылка-приглашение. Тёмный, потому что это первое впечатление и оно должно быть весомым. • «приложение» — светлый размытый мешь с зерном, тёмный текст. Всё остальное: главный, сделка, протокол, история. Это не тема на выбор пользователя, а свойство экрана: поэтому не prefers-color-scheme, а атрибут data-surface на . Токены с одинаковыми именами переопределяются внутри каждого мира, и код компонентов не знает, в каком он. Правило проекта, которое пережило переделку: ни одного border и outline на кромках. Объём даём заливками, градиентами и тенями. Единственное исключение — рамка фокуса с клавиатуры: на десктопе без неё работать нельзя. ================================================================== */ @import url('/fonts/onest.css'); :root { /* ── чернила и синий: пипеткой с референсов онбординга ─────────── */ --ink: #05060a; --ink-2: #0b0d18; --blue-deep: #101a5c; --blue: #2340ff; --blue-lit: #4a6cff; --blue-soft: #93a7ff; /* ── мешь: пятна с «задний фон.jpg» ───────────────────────────── */ --mesh-warm: #ff5a26; --mesh-red: #dd2a21; --mesh-amber: #f07a3c; --mesh-blue: #0f62d8; --mesh-sky: #7fb4ea; --mesh-pale: #eef4fb; --mesh-cream: #f9e4d2; /* ── смысловые цвета: отдельно от акцента ──────────────────────── */ --good: #0f8a5f; --good-soft: #d6f0e4; --bad: #cf2f22; --bad-soft: #fbe4e2; --wait: #8a6a12; --wait-soft: #f7ecd0; /* ── геометрия ─────────────────────────────────────────────────── */ --r-card: 24px; --r-md: 18px; --r-sm: 12px; --r-pill: 999px; /* Тап-зона 56px — не «побольше на всякий случай», а нижняя граница, ниже которой на телефоне промахиваются мимо кнопки. */ --tap: 56px; /* Всё кратно восьми: так вертикальный ритм не расползается. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ── типографика ───────────────────────────────────────────────── */ --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Заголовок экрана: строчными, плотно, межстрочное меньше единицы — ровно как на референсах. Растёт к десктопу. */ --t-display: 800 clamp(30px, 8.4vw, 34px) / 0.94 var(--font); --t-h1: 800 clamp(24px, 6.6vw, 27px) / 1 var(--font); --t-h2: 600 19px / 1.25 var(--font); --t-card: 600 17px / 1.3 var(--font); --t-body: 400 15px / 1.5 var(--font); --t-sub: 500 13px / 1.45 var(--font); --t-tiny: 500 11px / 1.35 var(--font); --t-amount: 800 clamp(34px, 11vw, 44px) / 1 var(--font); --track-display: -0.03em; --track-tiny: 0.02em; /* ── движение ──────────────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 160ms; --norm: 240ms; /* ── ширины ────────────────────────────────────────────────────── */ --col: 460px; /* карточка входа на десктопе */ --page: 1080px; /* контент главного и истории */ --flow: 1200px; /* поток сделки в две колонки */ color-scheme: light; } /* ================================================================== Вход: чёрное сверху, электрический синий снизу ================================================================== */ body[data-surface='auth'] { --bg: var(--ink); /* Стопы сдвинуты вниз нарочно: на референсе чёрное держится больше половины экрана, и синий разгоняется только в нижней трети. Ровный переход от чёрного к синему выглядит как заливка, а не как свет. */ --bg-image: radial-gradient(110% 46% at 50% 106%, rgba(58, 86, 255, 0.9), transparent 72%), linear-gradient( 180deg, #04050a 0%, #05060c 46%, #0a1038 66%, #14229c 82%, #2138f0 93%, #2f4bff 100% ); --txt: #ffffff; --txt-2: rgba(207, 215, 255, 0.72); --txt-3: rgba(207, 215, 255, 0.46); --accent: var(--blue-soft); /* * Блоки непрозрачные. Прозрачность на градиенте читалась плохо: текст * ложился на пятна фона, и человек попросил сделать все блоки строго * непрозрачными. Тон подобран так, чтобы карточка была видна на тёмном * фоне и не спорила с ним. */ --glass: #171c30; --glass-2: #1f2540; --glass-txt: #ffffff; /* Главная кнопка на тёмном — белая пилюля с чёрным текстом. */ --cta-bg: #ffffff; --cta-txt: #06070f; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -22px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* ================================================================== Приложение: светлый мешь с зерном ================================================================== Мешь собран слоями радиальных градиентов, а не картинкой и не filter: blur(). Картинка из референса не берётся — она с чужим логотипом; а blur на элементе во весь экран стоит кадров на телефоне, и мягкость дешевле получить самими градиентами. Зерно — отдельным слоем в .mesh (см. base.css). ================================================================== */ body[data-surface='app'] { --bg: #f2f5fa; /* Пятна нарочно крупные и с большим перекрытием: на референсе они сходятся в середине кадра, а мелкие «кляксы» на белом читаются как дефект печати, а не как свет. Проценты — от размера слоя, поэтому рисунок держится и на телефоне, и на мониторе. */ --bg-image: radial-gradient(88% 52% at 4% 2%, var(--mesh-warm) 0%, transparent 62%), radial-gradient(72% 44% at -8% 24%, var(--mesh-red) 0%, transparent 64%), radial-gradient(66% 34% at 26% 38%, var(--mesh-amber) 0%, transparent 68%), radial-gradient(96% 54% at 18% 98%, var(--mesh-blue) 0%, transparent 70%), radial-gradient(70% 42% at 60% 80%, var(--mesh-sky) 0%, transparent 68%), radial-gradient(70% 54% at 106% 56%, var(--mesh-pale) 0%, transparent 72%), radial-gradient(84% 52% at 92% 0%, var(--mesh-cream) 0%, transparent 66%), linear-gradient(152deg, #eff3f9 0%, #fdfdfe 46%, #e9eff7 100%); --txt: #0a0c12; --txt-2: rgba(10, 12, 18, 0.62); --txt-3: rgba(10, 12, 18, 0.38); --accent: var(--blue); /* * Блоки строго непрозрачные: белый, без просвета. Полупрозрачность * пропускала пятна меша сквозь текст, и читать его было тяжело. * `--glass-2` — второй уровень (цитаты, поля ввода): чуть холоднее * белого, чтобы отделяться от карточки, но так же непрозрачный. */ --glass: #ffffff; --glass-2: #eef2f9; --glass-txt: #0a0c12; /* Главная кнопка на светлом — синяя: белая на белом стекле исчезнет. */ --cta-bg: var(--blue); --cta-txt: #ffffff; --shadow-card: 0 1px 2px rgba(13, 16, 23, 0.05), 0 12px 32px -16px rgba(13, 16, 23, 0.22); color-scheme: light; } /* ================================================================== Тёмные рабочие экраны поверх светлого мира ================================================================== Камера и подпись: видео на светлом фоне не читается, и кольцо секторов на нём теряется. Поэтому у них свой тёмный слой. ================================================================== */ /* * Тёмный слой остался только для площадки с камерой. * * Сама карточка подписи теперь белая и непрозрачная, как все остальные — * так попросил человек, и он прав: тёмная карточка среди белых читалась * как чужая. А вот под самим видео тёмная подложка нужна: кольцо * секторов и кадр на белом теряются. */ .cam-stage { --txt: #ffffff; --txt-2: rgba(255, 255, 255, 0.72); --glass: #10131f; --glass-2: #1a1f30; --glass-txt: #ffffff; background: #0b0d16; border-radius: var(--r-card); padding: var(--s4); color-scheme: dark; } /* ================================================================== Десктоп ================================================================== Три контрольные ширины: 390 телефон, 768 планшет, 1200 десктоп. Здесь только то, что меняется в токенах; раскладки — в screens.css. ================================================================== */ @media (min-width: 768px) { :root { --t-display: 800 clamp(34px, 4.4vw, 44px) / 0.95 var(--font); --t-h1: 800 clamp(27px, 3vw, 32px) / 1 var(--font); --t-body: 400 16px / 1.55 var(--font); --tap: 48px; /* мышью попадают точнее, чем пальцем */ } } @media (min-width: 1200px) { :root { --t-display: 800 48px / 0.95 var(--font); --r-card: 26px; } } /* Люди, которым анимация мешает физически, не должны её получать. */ @media (prefers-reduced-motion: reduce) { :root { --fast: 1ms; --norm: 1ms; } }