Инфраструктура для управления капиталом на глобальных рынках.

Идея

Монограмма Keystone построена из параллельных штрихов. В первой версии они были статичным фоном, теперь это живое поле на canvas: линии дышат, расступаются под курсором, а арка проявляется из них как более яркая зона. Ни у одного референса из папки такого нет, Robinhood и Revolut работают волнами и градиентами, TradingView космосом.

Второе правило осталось: акцентного цвета не вводим. Роль акцента играет свет, холодное свечение линий и подсветка кнопок при наведении. Палитра прежняя, добавился только свет.

Типографика

Антиква Source Serif ушла: она звучала как инвестбанк девяностых. Unbounded геометричный и широкий, он рифмуется с разрядкой в самом логотипе, а Martian Mono даёт техничность вместо казённости.

Палитра

Светлая секция теперь одна, инфраструктура. Сайт стал темнее, и это тоже про современность: тёмный интерфейс ближе к торговому терминалу, чем к печатному проспекту.

Что движется

• Прелоадер: логотип проявляется из размытия за 0,9 секунды, один раз за сессию.
• Герой: арка собирается из потока штрихов за 1,8 секунды после прелоадера и распадается обратно при скролле; поле реагирует на курсор и медленно дышит.
• Появление блоков при скролле через IntersectionObserver, с каскадом по 70 мс.
• Спарклайны в котировках дорисовываются, когда строка попадает в кадр.
• Решения: три направления сцеплены со sticky-панелью справа, она меняет содержимое при скролле и по клику.
• Маршрут ордера: узлы цепочки включаются по мере скролла секции, импульс бежит только по пройденным звеньям; на десктопе карточка липкая.
• Световая волна проходит по карточкам гарантий и тезисам инфраструктуры при появлении.
• Бегущая mono-строка инструментов между инфраструктурой и командой.
• Терминальное перекрестье с координатами на тёмных секциях, только на мыши.
• Зерно плёнки поверх страницы, 5 процентов непрозрачности, снимает пластиковость сплошного цвета.
• Номера глав 01–04 контуром в шапках секций, от 880 пикселей ширины.
• Цифры 15+, 4, 3 накручиваются при появлении.
• Кнопки магнитные, тянутся к курсору на несколько пикселей, только на мыши.
• Скайлайны четырёх городов в разделе о команде прорисовываются линией при появлении.
• Всё выключается при prefers-reduced-motion.

Что нужно от вас

• Даты, темы и города ближайших мероприятий для раздела «Мероприятия».
• Подтверждение списка юрисдикций: пятнадцать стран в макете это черновик.
• Номер лицензии ЦБ РА, юрлицо, адрес в Ереване, домен и почта комплаенса.
• Список бирж и валют, который можно публиковать без оговорок.
• Поставщик котировок для строки под главным экраном.
• Тексты на английском и армянском, переключатель языков уже стоит в шапке.
• Горизонтальную версию логотипа для шапки я собрал из тех же элементов, в брендбуке её нет. Нужна отрисовка в Illustrator и ваше «да».

Правки этой версии

• Структура пересобрана: 01 О компании, 02 Услуги, 03 Аналитика, 04 Документы, 05 Карьера и гранты, 06 Мероприятия, 07 Контакты. Гарантии переехали внутрь блока о компании, тезисы про исполнение ордера стали подсекцией услуг.
• Услуг стало шесть: к трейдингу, wealth и расчётам добавились прайм-брокеридж, кастоди и FX. У каждой своя панель справа.
• Вместо списка стран техногенная карта: точечная суша, Ереван как хаб и дуги к тринадцати юрисдикциям. Россия и Беларусь убраны.
• Зернистость с фона снята, фон поднят до #0f2145, логотип в подвале крупнее.
• Фон заметно светлее: рабочий тёмный теперь #0b1a38. Брендовый #000a1e остался за логотипом, печатью и светлыми секциями.
• В разделе о команде появились четыре города: Moscow, Yerevan, New York, Paris. Силуэты нарисованы линией, тем же приёмом, что и вся графика сайта, готовых картинок в макете нет.
• Флаги юрисдикций набраны шрифтом Noto Color Emoji с Google Fonts, поэтому выглядят одинаково в Windows, macOS и на телефонах.
• Адрес в подвале: Ереван, Хоренаци 31/3, бизнес-центр «Терминал 5».

Дальше

Вся анимация написана на голом JS и CSS, без библиотек, вес страницы держится за счёт этого маленьким. Canvas рисует один кадр и останавливается, когда секция уходит из вида.

Следующий шаг: внутренние страницы по той же сетке, «Тарифы и регламенты», «Раскрытие информации», карточка каждого из трёх направлений и форма открытия счёта. Между страницами имеет смысл включить View Transitions API, на одностраничнике он не нужен.