Сессия 2
Единый визуальный язык сайта: токены, шрифты с полной поддержкой кириллицы, стеклянные поверхности на CSS и WebGL, и все повторно используемые компоненты.
Основа
Эволюция синего и бирюзового с текущего сайта плюс латунь для денежных величин. Светлые фоны, глубокие чернила, один акцент.
Матовое стекло на светлом фоне — главный риск читаемости, поэтому каждая пара проверена по WCAG 2.1. Ни один текстовый токен не опускается ниже AA.
| Текст | Фон | Коэффициент | Уровень |
|---|---|---|---|
--text-strong (ink-900) | фон страницы | 15.3 | AAA |
--text (ink-800) | фон страницы | 12.5 | AAA |
--text-muted (ink-500) | фон страницы | 5.3 | AA |
--text-subtle (ink-400) | фон страницы | 4.8 | AA |
--text-strong | стекло 66% над авророй | 14.5 | AAA |
--text-muted | стекло 66% над авророй | 5.0 | AA |
--text-subtle | стекло-карточка (самая тёмная точка) | 4.7 | AA |
--accent-strong (teal-700) | белый | 7.4 | AAA |
--gain (brass-700) | белый | 5.9 | AA |
белый | кнопка solid (teal-600→800) | 5.4–9.9 | AA |
--text-on-ink | подвал (ink-900) | 14.2 | AAA |
--text-on-ink-muted | подвал (ink-900) | 7.2 | AAA |
Основа
Onest — кириллический гротеск для интерфейса, заголовков и цифр. Literata — серифная антиква для голоса человека: цитат, отзывов и длинных текстов блога.
Onest Variable · 100–900 · латиница, кириллица
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
0123456789 $ % ₽ № —
Literata Variable · цитаты и длинные тексты
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
Инвестируйте в недвижимость США с гарантированным доходом в долларах
Почему инвесторы из 12 стран выбирают Penninvest
Два простых способа заработать
Penninvest предлагает проверенные инвестиционные решения с доходностью от 15% до 36% годовых. Воспользуйтесь возможностями американского рынка недвижимости без необходимости переезда и сложностей управления.
PennInvest — международная инвестиционная компания, специализирующаяся на безопасных инвестициях в недвижимость США с высокой доходностью. Мы предлагаем полный цикл услуг: от подбора недвижимости в Пенсильвании до управления вашими инвестиционными объектами.
Основатель компании Игорь Свечин — инвестор с 30-летним стажем и 15-летним опытом работы с недвижимостью в США.
Инвестиционная стратегия · Питтсбург, Пенсильвания
Ядро сессии
По умолчанию поверхности матируются средствами CSS. На мощных десктопах те же элементы берёт на себя WebGL-рендер LiquidGlass. Переключатель ниже отключает WebGL — так проверяется запасной вариант.
Проверка режима…
Преломление искажает только то, что находится позади. Над ровной светлой секцией искажать нечего, и никакие параметры этого не исправят: поверхность честно выглядит матовым CSS. Поэтому WebGL-стекло разрешенотолько над шейдером героя и над фотографией. Всё остальное — обычная карточка.
Эксклюзивная возможность
5 Clarion St, Pittsburgh, PA 15207
$71,000
Требуемые инвестиции
$80,000
Стоимость ремонта
$230,000
Прогнозируемая продажа
Собрано инвестиций
$35,000 из $71,000
Флиппинг
1946 Pioneer Ave, Pittsburgh, PA 15226
$185,000
Стоимость покупки:
$53,000
Чистая прибыль:
Инвестиция$185,000
Тип объектаТаунхаус
СтратегияРемонт и продажа
Срок4 месяца
Эксклюзивная возможность
5 Clarion St, Pittsburgh, PA 15207
$71,000
Требуемые инвестиции
$80,000
Стоимость ремонта
$230,000
Прогнозируемая продажа
Та же панель, тот же контент, ноль WebGL-контекстов и ноль захватов DOM. На контентных страницах это дешевле, читается лучше и не притворяется тем, чем не является.
GlassStage.document.fonts.ready: иначе в снимок попадут системные шрифты вместо Onest.zRadius — глубина фаски в пикселях от края. Дальше неё поверхность плоская и не преломляет ничего. Было 22 на панель шириной 400 px; стало 56.blurAmount 0,34 → 0,10: размытие уничтожало ту самую фактуру, которую должно гнуть преломление.refraction 0,52 → 0,80 (кнопки 0,92) — выше стандартного 0,69.zRadius: Infinity и упирается в половину короткой стороны: линза на всю высоту.--liquid-veil возвращает мягкую вуаль под текст: у канта её нет, поэтому преломление видно, а контраст держится.< 900px.prefers-reduced-motion: reduce.?glass=css.glass--panel
Крупная панель
glass--card
Карточка
glass--interactive
Наведите курсор
glass--ink
Тёмное стекло
Компоненты
что такое penninvest
эксклюзивная возможность
align: start · с действием
Кейсы
Посмотрите, как наши клиенты уже зарабатывают на недвижимости в США
align: center
Команда
Опираясь на многолетний опыт работы на американском рынке, наша команда экспертов обеспечивает полный цикл сопровождения инвестиций: от подбора объектов до управления недвижимостью и налоговой оптимизации
Компоненты
Цифры — главный аргумент сайта, поэтому у них своя шкала кегля и табличные цифры.
8+
Лет на рынке США
$3,8млн
Прибыли инвесторам
65
Объектов в управлении
$6,4млн
Стоимость портфеля
17,3%
средняя доходность
$3,8млн
Прибыли инвесторам
235+
успешных кейсов
8+ лет
на рынке США
235+
успешных кейсов
17,3%
средняя доходность
Компоненты
Карточка кейса и карточка сотрудника получают данные напрямую из контент-файлов Сессии 1.
CaseCard
1946 Pioneer Ave, Pittsburgh, PA 15226
109 Owendale Ave, Pittsburgh, PA 15227
53 Garden Ter, Pittsburgh, PA 15221
TeamCard · layout="stack"
Операционный директор
Отвечает за организацию внутренних процессов компании и контроль эффективности работы всех подразделений. Обеспечивает стабильность и результативность ежедневных операций, внедряет системы контроля качества и оптимизирует бизнес-процессы.
Технический директор
Находится в Питтсбурге и курирует все процессы работы компании в регионе. Отвечает за организацию деятельности Penninvest на месте, контролирует выполнение задач, управляет подрядчиками и обеспечивает слаженную работу команды в США.
Административный директор
Курирует административную часть бизнеса: документооборот, организацию работы офиса и поддержку управленческих процессов. Следит за тем, чтобы компания работала слаженно и без перебоев, обеспечивает правовую поддержку сделок.
TeamCard · layout="row"
Операционный директор
Отвечает за организацию внутренних процессов компании и контроль эффективности работы всех подразделений. Обеспечивает стабильность и результативность ежедневных операций, внедряет системы контроля качества и оптимизирует бизнес-процессы.
Технический директор
Находится в Питтсбурге и курирует все процессы работы компании в регионе. Отвечает за организацию деятельности Penninvest на месте, контролирует выполнение задач, управляет подрядчиками и обеспечивает слаженную работу команды в США.
Компоненты
Единственное место, где на сайте появляется антиква: здесь говорит человек, а не компания.
За 15 лет работы я понял главное: лучшие инвестиции – те, что понятны и прозрачны. Мы превращаем сложный рынок американской недвижимости в простой источник стабильного дохода.
«Это была моя первая инвестиция в недвижимость. Я выбрал долевое участие, чтобы войти с небольшой суммой. Каждый месяц получаю $650 на счет.»
Наша миссия — сделать инвестиции в американскую недвижимость доступными и понятными для клиентов по всему миру. Мы не просто помогаем приобретать недвижимость, мы создаём источники пассивного дохода, которые работают годами.
Компоненты
Только внешний вид: отправку и эндпоинты подключает Сессия 7. Имена полей совпадают с текущим сайтом.
forms.consultation
forms.contactPage
Связаться
Оставьте свой номер телефона, и наш эксперт свяжется с вами в ближайшее время
Основа
Одно правило: движение объясняет изменение, а не украшает его. Всё выключается по prefers-reduced-motion.
Появление
14px вверх + прозрачность, 720 мс, ease-out. Шаг между соседями 70 мс.
Наведение
240 мс. Подъём максимум на 2 px, тень усиливается, блик следует за курсором.
Аврора
44 с, бесконечно, один композиторский слой на весь документ.
| Токен | Значение | Где |
|---|---|---|
--dur-fast | 140 мс | микро-отклик |
--dur | 240 мс | наведение, фокус |
--dur-slow | 420 мс | смена состояния шапки |
--dur-slower | 720 мс | появление при скролле |
--ease-out | cubic-bezier(.22,1,.36,1) | всё, что входит |