/* Базовые параметры разметки и сброс отступов */ * { /* Полностью обнуляет внешние отступы для всех элементов на странице */ /* Настраивает CSS-свойство margin для текущего элемента. */ margin: 0; /* Полностью обнуляет внутренние отступы для всех элементов на странице */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 0; /* Включает подсчет размеров элементов с учетом внутренних отступов и рамок */ /* Настраивает CSS-свойство box-sizing для текущего элемента. */ box-sizing: border-box; } /* Глобальные переменные проекта: Цвета и палитры брендов */ :root { /* Насыщенный уютный бежевый фон, если картинка текстуры не прогрузилась */ /* Настраивает CSS-свойство --bg-creamy-fallback для текущего элемента. */ --bg-creamy-fallback: #F4EFE2; /* Устанавливает бордовый идентификационный цвет для направления арендаторов */ /* Настраивает CSS-свойство --color-tenants для текущего элемента. */ --color-tenants: #2B78A6; /* Устанавливает темно-зеленый идентификационный цвет для направления домовладельцев */ /* Настраивает CSS-свойство --color-homeowners для текущего элемента. */ --color-homeowners: #357554; /* Яркий фиолетовый идентификационный цвет для направления инвесторов */ /* Настраивает CSS-свойство --color-investors для текущего элемента. */ --color-investors: #8B6BA0; /* Контрастный темный текст для основного контента сайта */ /* Настраивает CSS-свойство --text-dark для текущего элемента. */ --text-dark: #2B2925; /* Выразительный приглушенный текст подписей и второстепенных элементов */ /* Настраивает CSS-свойство --text-muted для текущего элемента. */ --text-muted: #575349; /* Цвет тонких вертикальных разделителей между карточками и блоками */ /* Настраивает CSS-свойство --border-soft для текущего элемента. */ --border-soft: #bdb6a7; } /* Настройки отображения шрифтов и акварельного фонда страниц */ body { /* Lora на первом месте для мягкого, округлого и уютного вида всего текста на сайте */ /* Настраивает CSS-свойство font-family для текущего элемента. */ font-family: 'Lora', 'Georgia', serif; /* Задает базовый резервный цвет фона из глобальной переменной */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--bg-creamy-fallback); /* Подключает фоновое изображение с текстурой бежевой бумаги */ /* Настраивает CSS-свойство background-image для текущего элемента. */ background-image: url("../images/main/beige_bg.JPEG"); /* Циклически повторяет текстуру изображения по горизонтали и вертикали */ /* Настраивает CSS-свойство background-repeat для текущего элемента. */ background-repeat: repeat; /* Масштабирует ширину текстуры до 500 пикселей с автоматической высотой */ /* Настраивает CSS-свойство background-size для текущего элемента. */ background-size: 500px auto; /* Устанавливает основной цвет текста на странице из переменной */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-dark); /* Скрывает горизонтальную полосу прокрутки при выходе элементов за край */ /* Настраивает CSS-свойство overflow-x для текущего элемента. */ overflow-x: hidden; /* Включает сглаживание шрифтов для браузеров на движке WebKit */ /* Настраивает CSS-свойство -webkit-font-smoothing для текущего элемента. */ -webkit-font-smoothing: antialiased; } /* Общие стили для нативных векторных inline SVG элементов */ .icon-svg, .arrow-svg, .badge-svg, .feature-svg, .btn-arrow-svg, .nav-svg-icon { /* Позволяет векторным иконкам вести себя как строчно-блочные элементы */ /* Настраивает CSS-свойство display для текущего элемента. */ display: inline-block; /* Выравнивает иконку строго по центру текстовой строки */ /* Настраивает CSS-свойство vertical-align для текущего элемента. */ vertical-align: middle; } /* HEADER (ШАПКА САЙТА) */ .header { /* Делает фоновую подложку шапки полностью прозрачной */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: transparent; /* Создает тонкую сплошную линию разграничения под шапкой сайта */ /* Настраивает CSS-свойство border-bottom для текущего элемента. */ border-bottom: 1px solid var(--border-soft); /* Задает внутренние отступы: 22 пикселя сверху/снизу и 0 по бокам */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 22px 0; /* Создает внешний отступ в 25 пикселей снизу до основного контента */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 25px; /* Растягивает блок шапки на всю доступную ширину экрана */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; } .header-container { /* Растягивает внутренний блок шапки на 100% от родителя */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Позволяет шапке тянуться без ограничений на всю ширину монитора */ /* Настраивает CSS-свойство max-width для текущего элемента. */ max-width: 100%; /* Центрирует внутреннее содержимое шапки по горизонтали */ /* Настраивает CSS-свойство margin для текущего элемента. */ margin: 0 auto; /* Задает боковые отступы в 4%, идеально совпадающие с основным контентом */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 0 4%; /* Включает отображение гибкой flex-структуры элементов шапки */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Распределяет логотип и меню по противоположным краям шапки */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: space-between; /* Центрирует элементы логотипа и меню по вертикальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; } .logo { /* Включает flex-модель для элементов внутри логотипа */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выравнивает картинку логотипа и текст по центру вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Задает фиксированный зазор 14 пикселей между картинкой и текстом */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 14px; } .logo img { /* Фиксирует высоту картинки логотипа на уровне 65 пикселей */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 65px; /* Автоматически подстраивает ширину для сохранения пропорций логотипа */ /* Настраивает CSS-свойство width для текущего элемента. */ width: auto; } .logo-text p { /* Устанавливает мелкий размер шрифта для подписи под логотипом */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 9px; /* Разрежает символы подписи, добавляя зазор 2 пикселя между буквами */ /* Настраивает CSS-свойство letter-spacing для текущего элемента. */ letter-spacing: 2px; /* Задает приглушенный цвет текста подписи из глобальных переменных */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-muted); /* Добавляет аккуратный верхний отступ в 2 пикселя от основного названия */ /* Настраивает CSS-свойство margin-top для текущего элемента. */ margin-top: 2px; /* Устанавливает полужирное начертание для букв подписи */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 600; } .nav-menu { /* Включает flex-модель для построения пунктов навигационного меню */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выравнивает ссылки навигации по центру вертикальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Создает фиксированное расстояние в 25 пикселей между пунктами меню */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 25px; } .nav-links-group { /* Включает flex-структуру для группировки внутренних ссылок */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выравнивает ссылки и разделители внутри группы по вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; } .nav-menu a { /* Отменяет стандартное текстовое подчеркивание для ссылок меню */ /* Настраивает CSS-свойство text-decoration для текущего элемента. */ text-decoration: none; /* Устанавливает цвет текста навигационных ссылок из переменных */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-dark); /* Задает фиксированный размер шрифта для пунктов меню */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 14px; /* Повышенная плотность ссылок */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 600; /* Включает flex-структуру внутри ссылки для выравнивания текста и иконки */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Центрирует текст ссылки и её внутреннюю микроиконку по вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Задает фиксированный зазор 8 пикселей между иконкой и текстом ссылки */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 8px; } .nav-divider { /* Фиксирует ширину вертикальной разделительной черты в меню */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 1px; /* Фиксирует высоту вертикальной разделительной черты в меню */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 14px; /* Окрашивает разделительную черту в мягкий цвет из переменных */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--border-soft); /* Задает внешние боковые отступы по 15 пикселей слева и справа от черты */ /* Настраивает CSS-свойство margin для текущего элемента. */ margin: 0 15px; } /* Иконки в хэдере: размер прежний, но линии стали жирнее */ .nav-svg-icon { /* Устанавливает фиксированную ширину для векторных иконок в шапке */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 20px; /* Устанавливает фиксированную высоту для векторных иконок в шапке */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 20px; /* Принудительно увеличивает толщину контурных линий иконки до 3.5 пикселей */ /* Настраивает CSS-свойство stroke-width для текущего элемента. */ stroke-width: 3.5px !important; } .location { /* Принудительно делает текст локации максимально жирным */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 700 !important; } /* ========================================================================== ВЕРХНИЙ РЯД: ОТЦЕНТРОВАННЫЕ КНОПКИ И СКВОЗНЫЕ РАЗДЕЛИТЕЛИ ОДИНАКОВОЙ ДЛИНЫ ========================================================================== */ .quick-nav-row { /* Включает сетку Grid для верхнего навигационного ряда */ /* Настраивает CSS-свойство display для текущего элемента. */ display: grid; /* Полное соответствие нижней сетке: 3 колонки, зазор 7px */ /* Настраивает CSS-свойство grid-template-columns для текущего элемента. */ grid-template-columns: repeat(3, 1fr); /* Задает фиксированный зазор 7 пикселей между ячейками верхних кнопок */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 7px; /* Устанавливает внутренние отступы: 5px сверху, 15px снизу, 0 по бокам */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 5px 0 15px 0; /* Добавляет внешний отступ 10 пикселей снизу до главной секции */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 10px; margin-top: 10px; /* Растягивает сетку верхнего ряда на 100% ширины контейнера страницы */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; } .quick-button { /* Включает отображение flex-модели для контента внутри кнопки */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Изменяем на center, чтобы содержимое кнопки красиво центрировалось внутри всей ячейки */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: center; /* Выравнивает иконки и текст внутри кнопки строго по центру вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Задает фиксированный зазор 12 пикселей между элементами внутри кнопки */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 12px; /* Заставляет кнопку занимать 100% доступной ширины своей Grid-ячейки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* УБРАНО: max-width и margin: 0 auto, чтобы кнопка занимала всю ширину ячейки сетки */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 8px 15px; /* Задает контекст позиционирования для абсолютного разделителя после кнопки */ /* Настраивает CSS-свойство position для текущего элемента. */ position: relative; /* Менят указатель мыши на палец при наведении на область кнопки */ /* Настраивает CSS-свойство cursor для текущего элемента. */ cursor: pointer; /* Убирает дефолтное подчеркивание текста у ссылки-кнопки */ /* Настраивает CSS-свойство text-decoration для текущего элемента. */ text-decoration: none; /* Задает время и плавность анимации изменения фона при наведении */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: background-color 0.25s ease; } /* Вертикальные разделительные линии встают строго по границам ячеек (копия логики нижнего блока) */ .quick-button:not(:last-child)::after { /* Генерирует пустой псевдоэлемент для отображения линии */ /* Настраивает CSS-свойство content для текущего элемента. */ content: ""; /* Позволяет свободно позиционировать разделительную линию на кнопке */ /* Настраивает CSS-свойство position для текущего элемента. */ position: absolute; /* Линия встает ровно по центру зазора 7px, продолжая геометрию нижних блоков */ /* Настраивает CSS-свойство right для текущего элемента. */ right: -4px; /* Прижимает верхний край разделительной линии к верху кнопки */ /* Настраивает CSS-свойство top для текущего элемента. */ top: 0; /* Растягивает разделительную линию на 100% от всей высоты кнопки */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 100%; /* Задает фиксированную ширину вертикального разделителя в 1 пиксель */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 1px; /* Окрашивает линию в мягкий цвет из глобальных переменных проекта */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--border-soft); } /* Контейнер для группировки иконки и текстового описания кнопки */ .quick-content { /* Включает внутренний flex-режим для иконки и текстового блока */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Центрирует иконку и текстовый блок по вертикальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Задает фиксированное расстояние в 16 пикселей между иконкой и текстом */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 16px; /* Центрирует строки текста внутри общего контейнера */ /* Настраивает CSS-свойство text-align для текущего элемента. */ text-align: center; } /* Размеры иконок в верхних кнопках навигации */ .icon-svg { /* Фиксирует ширину главной векторной SVG-иконки на 50 пикселях */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 50px; /* Фиксирует высоту главной векторной SVG-иконки на 50 пикселях */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 50px; /* Принудительно устанавливает жирный контур для линий иконки */ /* Настраивает CSS-свойство stroke-width для текущего элемента. */ stroke-width: 4px !important; /* Устанавливает параметры и плавность для анимации масштабирования */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: transform 0.25s ease; } /* Cтрелочки перехода */ .arrow-svg, .btn-arrow-svg { /* Фиксирует ширину вспомогательной векторной стрелочки на 40 пикселях */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 40px; /* Фиксирует высоту вспомогательной векторной стрелочки на 40 пикселях */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 40px; /* Принудительно устанавливает толщину линий стрелочки в 3.5 пикселя */ /* Настраивает CSS-свойство stroke-width для текущего элемента. */ stroke-width: 3.5px !important; /* Устанавливает параметры и плавность для анимации движения стрелки */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: transform 0.25s ease; } .quick-text h3 { /* Включает flex-модель для правильного выстраивания заголовка */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Направляет элементы внутри заголовка вертикально сверху вниз */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Центрирует символы заголовка по горизонтальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Устанавливает крупный фиксированный размер шрифта для заголовка */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 19px; /* Делает буквы главного заголовка максимально жирными */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 700; /* Фиксирует точку трансформации масштаба строго по центру элемента */ /* Настраивает CSS-свойство transform-origin для текущего элемента. */ transform-origin: center center; } .quick-text p { /* Включает flex-модель для подписи под главным заголовком */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Направляет элементы подписи вертикально сверху вниз */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Центрирует символы текста подписи по горизонтальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Устанавливает фиксированный размер шрифта для текста подписи */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 15px; /* Применяет цвет текста из глобальной палитры темных оттенков */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-dark); /* Устанавливает среднюю плотность букв для подписи */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 500; /* Добавляет аккуратный отступ в 1 пиксель сверху от заголовка h3 */ /* Настраивает CSS-свойство margin-top для текущего элемента. */ margin-top: 1px; /* Фиксирует точку трансформации масштаба текста строго по центру */ /* Настраивает CSS-свойство transform-origin для текущего элемента. */ transform-origin: center center; } /* Анимация текста, главной иконки и стрелочки при наведении */ .quick-button:hover .quick-text { /* Слегка увеличивает масштаб всего текстового блока на 3% при ховере */ /* Настраивает CSS-свойство transform для текущего элемента. */ transform: scale(1.03); } .quick-button:hover .icon-svg { /* Увеличивает масштаб главной SVG-иконки на 8% при наведении на кнопку */ /* Настраивает CSS-свойство transform для текущего элемента. */ transform: scale(1.08); } .quick-button:hover .arrow-svg { /* Увеличивает масштаб стрелки на 15% и сдвигает её вправо на 3 пикселя */ /* Настраивает CSS-свойство transform для текущего элемента. */ transform: scale(1.15) translateX(3px); } /* Плавный переход для текстового контейнера в кнопке */ .quick-text { /* Задает время и плавность для любых анимаций трансформации текста */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: transform 0.25s ease; /* Изменено на center, чтобы при ховере текст не съезжал вбок */ /* Настраивает CSS-свойство transform-origin для текущего элемента. */ transform-origin: center center; } /* ========================================================================== СРЕДНИЙ РЯД: ТРИ КАРТОЧКИ (СКРУГЛЕННЫЙ ВЕРХ И АКВАРЕЛЬНОЕ ТАЯНИЕ) ========================================================================== */ .main-cards-row { /* Включает отображение сетки Grid */ /* Настраивает CSS-свойство display для текущего элемента. */ display: grid; /* Создает 3 колонки одинаковой ширины, занимающие все доступное пространство */ /* Настраивает CSS-свойство grid-template-columns для текущего элемента. */ grid-template-columns: repeat(3, 1fr); /* Задает фиксированный зазор 7 пикселей между карточками */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 7px; /* Добавляет отступ 30 пикселей снизу всей секции */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 30px; } /* Элемент главной карточки */ .main-card { /* Включает блочную flex-модель */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выстраивает внутренние элементы вертикально сверху вниз */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Центрирует все внутренние элементы по горизонтальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Задает полупрозрачную тонкую рамку вокруг карточки */ /* Настраивает CSS-свойство border для текущего элемента. */ border: 1px solid rgba(211, 202, 186, 0.4); /* Скругляет все углы карточки на 14 пикселей */ /* Настраивает CSS-свойство border-radius для текущего элемента. */ border-radius: 14px; /* Задает легкий бежевый фоновый оттенок с прозрачностью */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: rgba(247, 244, 235, 1); /* Добавляет отступ 20 пикселей снизу внутри карточки */ /* Настраивает CSS-свойство padding-bottom для текущего элемента. */ padding-bottom: 20px; /* Задает плавный переход анимации для масштаба и тени */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: transform 1s ease, box-shadow 1s ease; } /* Анимация увеличения карточки на размер зазора при наведении курсора */ .main-card:hover { /* Увеличивает карточку на 2% от ее исходного размера */ /* Настраивает CSS-свойство transform для текущего элемента. */ transform: scale(1.02); /* Добавляет мягкую глубокую тень вокруг активной карточки */ /* Настраивает CSS-свойство box-shadow для текущего элемента. */ box-shadow: 0 10px 25px rgba(117, 112, 101, 0.15); /* Выводит карточку на передний план над соседними элементами */ /* Настраивает CSS-свойство z-index для текущего элемента. */ z-index: 10; } /* Контейнер картинки со скругленным верхом и мягким акварельным низом */ .image-mask-container { /* Растягивает контейнер маски на 100% ширины карточки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Сохраняет полные пропорции одинаковых исходных изображений. */ /* Настраивает CSS-свойство aspect-ratio для текущего элемента. */ aspect-ratio: 1122 / 1402; /* Позволяет пропорциям изображения определять высоту блока. */ /* Настраивает CSS-свойство height для текущего элемента. */ height: auto; /* Прячет части картинки, выходящие за границы скругления */ /* Настраивает CSS-свойство overflow для текущего элемента. */ overflow: hidden; /* Задает точку отсчета координат для позиционирования маски */ /* Настраивает CSS-свойство position для текущего элемента. */ position: relative; /* Скругляет только верхний левый и верхний правый углы */ /* Настраивает CSS-свойство border-radius для текущего элемента. */ border-radius: 14px 14px 0 0; /* Создает градиентную маску исчезновения для браузеров WebKit */ /* Настраивает CSS-свойство -webkit-mask-image для текущего элемента. */ -webkit-mask-image: -webkit-linear-gradient(to bottom, #fff 72%, transparent 100%); /* Создает стандартную линейную маску плавного растворения картинки к низу */ /* Настраивает CSS-свойство mask-image для текущего элемента. */ mask-image: linear-gradient(to bottom, #fff 72%, transparent 100%); } .card-image { /* Растягивает изображение по всей ширине контейнера маски */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Растягивает изображение по всей высоте контейнера маски */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 100%; /* Показывает исходное изображение полностью без обрезки. */ /* Настраивает CSS-свойство object-fit для текущего элемента. */ object-fit: contain; } /* Зона размещения текстового контента под изображением карточки */ .card-content-area { /* Заставляет текстовый блок занимать всю доступную ширину карточки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Включает отображение внутренней flex-структуры */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выстраивает элементы текста и кнопок друг под другом */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Выравнивает внутренние элементы строго по центру горизонтали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Центрирует многострочный текст внутри блока */ /* Настраивает CSS-свойство text-align для текущего элемента. */ text-align: center; /* Задает внутренние отступы по 10 пикселей слева и справа */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 0 10px; /* Задает контекст позиционирования для дочерних абсолютных элементов */ /* Настраивает CSS-свойство position для текущего элемента. */ position: relative; /* Сдвигает весь блок вверх, накладывая его на область картинки */ /* Настраивает CSS-свойство margin-top для текущего элемента. */ margin-top: -15px; } /* Увеличенный круглый бейдж под новые размеры иконок */ .floating-badge-circle { /* Устанавливает базовый бежевый цвет фона круга из переменных */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--bg-creamy-fallback); /* Задает тонкую сплошную рамку вокруг круглого бейджа */ /* Настраивает CSS-свойство border для текущего элемента. */ border: 1px solid var(--border-soft); /* Устанавливает фиксированную ширину круга */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 86px; /* Устанавливает фиксированную высоту круга */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 86px; /* Делает квадратный блок идеальным кругом */ /* Настраивает CSS-свойство border-radius для текущего элемента. */ border-radius: 50%; /* Включает flex-режим для выравнивания иконки внутри */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Центрирует внутреннюю SVG-иконку по вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Центрирует внутреннюю SVG-иконку по горизонтали */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: center; /* Выталкивает круг наверх, перекрывая нижнюю часть картинки */ /* Настраивает CSS-свойство margin-top для текущего элемента. */ margin-top: -65px; /* Полностью убирает внешнюю границу снизу */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 0px; /* Размещает круг слоем выше, чем основное изображение */ /* Настраивает CSS-свойство z-index для текущего элемента. */ z-index: 5; /* Задает плавность анимации при изменении масштаба круга */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: transform 1s ease; } /* Интерактивный подъем круглой иконки при наведении на карточку */ .main-card:hover .floating-badge-circle { /* Увеличивает круглую иконку на 5% при наведении на карточку */ /* Настраивает CSS-свойство transform для текущего элемента. */ transform: scale(1.05) translateY(-5px); } /* Иконки внутри карточек увеличены в полтора раза */ .badge-svg { /* Задает ширину векторной иконки внутри круга */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 60px; /* Задает высоту векторной иконки внутри круга */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 60px; /* Принудительно устанавливает жирность контурных линий иконки */ /* Настраивает CSS-свойство stroke-width для текущего элемента. */ stroke-width: 4px !important; } .main-card h2 { /* Задает семейство шрифтов для главных заголовков карточек */ /* Настраивает CSS-свойство font-family для текущего элемента. */ font-family: 'Playfair Display', 'Georgia', serif; /* Устанавливает крупный адаптивный размер шрифта заголовка */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 36px; /* Делает символы заголовка жирными */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 700; /* Задает верхний внешний отступ от круглой иконки */ /* Настраивает CSS-свойство margin-top для текущего элемента. */ margin-top: 10px; /* Задает нижний внешний отступ до блока описания */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 8px; } /* Текст описания внутри карточек сделан темным и плотным */ .description-text { /* Позволяет шрифту слегка масштабироваться в зависимости от ширины */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 15px; /* Устанавливает высоту строки для комфортного чтения текста */ /* Настраивает CSS-свойство line-height для текущего элемента. */ line-height: 1.6; /* Задает цвет текста из глобальной палитры проекта */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-dark); /* Задает среднюю плотность букв */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 500; /* Увеличивает максимальную ширину текстового блока до 85% от ширины всей карточки */ /* Настраивает CSS-свойство max-width для текущего элемента. */ max-width: 85%; /* Устанавливает фиксированную высоту для выравнивания кнопок в ряд */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 75px; /* Включает flex-модель для центрирования строк внутри блока */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Центрирует многострочный абзац по вертикальной оси */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Центрирует текстовые строки по горизонтальной оси */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: center; /* Задает увеличенный нижний отступ до интерактивной кнопки */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 25px; } /* Стилизация и геометрия кнопок под карточками */ .action-btn { /* Включает строчно-блочную flex-модель для правильного позиционирования */ /* Настраивает CSS-свойство display для текущего элемента. */ display: inline-flex; /* Выравнивает текст и стрелку внутри кнопки по вертикали */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Распределяет текст и стрелку по противоположным краям кнопки */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: space-between; /* Задает адаптивную ширину кнопки в 55% от текущей ширины всей карточки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 55%; /* Задает минимальный лимит ширины, чтобы кнопка не сжималась на ноутбуках */ /* Настраивает CSS-свойство min-width для текущего элемента. */ min-width: 185px; /* Добавляет внутренние симметричные отступы сверху, снизу и по бокам */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 13px 22px; /* Делает фоновую подложку кнопки полностью прозрачной */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: transparent; /* Отменяет стандартное подчеркивание ссылки */ /* Настраивает CSS-свойство text-decoration для текущего элемента. */ text-decoration: none; /* Устанавливает размер шрифта для текста ссылки */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 16px; /* Делает текст внутри кнопки максимально жирным */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 700; /* Скругляет углы рамки кнопки на 4 пикселя */ /* Настраивает CSS-свойство border-radius для текущего элемента. */ border-radius: 4px; /* Задает плавность для всех интерактивных эффектов кнопки */ /* Настраивает CSS-свойство transition для текущего элемента. */ transition: all 0.2s ease; } .action-btn span { /* Запрещает тексту внутри кнопки переноситься на новую строку */ /* Настраивает CSS-свойство white-space для текущего элемента. */ white-space: nowrap; } /* ========================================================================== НИЖНИЙ РЯД: ОТЦЕНТРОВАННЫЕ ПРЕИМУЩЕСТВА С ИДЕНТИЧНЫМИ РАЗДЕЛИТЕЛЯМИ ========================================================================== */ .features-row { /* Включает отображение сетки Grid */ /* Настраивает CSS-свойство display для текущего элемента. */ display: grid; /* Создает 3 колонки одинаковой ширины, занимающие все доступное пространство */ /* Настраивает CSS-свойство grid-template-columns для текущего элемента. */ grid-template-columns: repeat(3, 1fr); /* Задает фиксированный зазор 7 пикселей между карточками преимуществ */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 7px; /* Добавляет внутренний отступ 40 пикселей снизу всей секции */ /* Настраивает CSS-свойство padding-bottom для текущего элемента. */ padding-bottom: 40px; /* Растягивает контейнер сетки на 100% ширины родительского блока */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; } .feature-card { /* Включает отображение внутренней flex-структуры */ /* Настраивает CSS-свойство display для текущего элемента. */ display: flex; /* Выравнивает иконку и текст по центру вертикальной оси внутри карточки */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; /* Центрирует строки текста по горизонтали внутри их блоков */ /* Настраивает CSS-свойство text-align для текущего элемента. */ text-align: center; /* Задает фиксированный зазор 16 пикселей между иконкой и текстовым блоком */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 16px; /* Растягивает карточку преимущества на всю доступную ей ширину ячейки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Задает внутренние боковые отступы по 15 пикселей слева и справа */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 0 15px; /* Задает контекст позиционирования для внутренних абсолютных элементов */ /* Настраивает CSS-свойство position для текущего элемента. */ position: relative; } /* Вертикальные разделительные линии в нижнем блоке (идентичны верхним) */ .feature-card:not(:last-child)::after { /* Создает пустой псевдоэлемент, необходимый для генерации линии */ /* Настраивает CSS-свойство content для текущего элемента. */ content: ""; /* Позволяет точно позиционировать разделитель внутри карточки */ /* Настраивает CSS-свойство position для текущего элемента. */ position: absolute; /* Сдвигает линию вправо за пределы карточки ровно в центр зазора 7px */ /* Настраивает CSS-свойство right для текущего элемента. */ right: -4px; /* Выравнивает верхний край линии по верхнему краю карточки */ /* Настраивает CSS-свойство top для текущего элемента. */ top: 0; /* Растягивает линию на 100% высоты карточки */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 100%; /* Устанавливает фиксированную ширину разделительной линии в 1 пиксель */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 1px; /* Задает цвет линии из глобальной переменной мягких разделителей */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--border-soft); } .feature-icon-box { /* Устанавливает фиксированную ширину контейнера иконки */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 36px; /* Устанавливает фиксированную высоту контейнера иконки */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 36px; /* Запрещает контейнеру сжиматься, если тексту не хватает места */ /* Настраивает CSS-свойство flex-shrink для текущего элемента. */ flex-shrink: 0; } /* Нижние SVG иконки преимуществ сделаны крупными и жирными */ .feature-svg { /* Растягивает векторную графику на 100% ширины своего контейнера */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Растягивает векторную графику на 100% высоты своего контейнера */ /* Настраивает CSS-свойство height для текущего элемента. */ height: 100%; /* Принудительно задает жирность контурных линий векторной иконки */ /* Настраивает CSS-свойство stroke-width для текущего элемента. */ stroke-width: 4px !important; } .feature-info-text h4 { /* Устанавливает фиксированный размер шрифта для заголовка преимущества */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 16.5px; /* Делает символы заголовка жирными */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 700; /* Задает внешний нижний отступ в 4 пикселя до пояснительного текста */ /* Настраивает CSS-свойство margin-bottom для текущего элемента. */ margin-bottom: 4px; } /* Мелкий текст преимуществ сделан более контрастным */ .feature-info-text p { /* Устанавливает фиксированный размер шрифта для описания преимущества */ /* Настраивает CSS-свойство font-size для текущего элемента. */ font-size: 13.5px; /* Применяет цвет текста из глобальной палитры темных оттенков */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--text-dark); /* Задает высоту строки в 1.4 единицы для читаемости абзаца */ /* Настраивает CSS-свойство line-height для текущего элемента. */ line-height: 1.4; /* Устанавливает среднюю плотность символов в тексте */ /* Настраивает CSS-свойство font-weight для текущего элемента. */ font-weight: 500; } /* ========================================================================== РАСПРЕДЕЛЕНИЕ ЦВЕТОВЫХ КАТЕГОРИЙ ДЛЯ INLINE SVG ========================================================================== */ /* Направление Арендаторов (Бордовые элементы) */ .item-tenants h3, .item-tenants h2, .item-tenants h4, .item-tenants .icon-svg, .item-tenants .arrow-svg, .item-tenants .badge-svg, .item-tenants .feature-svg, .item-tenants .btn-arrow-svg { /* Применяет бордовый цвет из переменной ко всем текстовым и SVG элементам арендаторов */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-tenants); } .item-tenants .action-btn { /* Задает бордовую рамку для кнопки арендаторов */ /* Настраивает CSS-свойство border для текущего элемента. */ border: 1px solid var(--color-tenants); /* Устанавливает бордовый цвет текста для кнопки арендаторов */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-tenants); } .item-tenants .action-btn:hover { /* Окрашивает фон кнопки в бордовый цвет при наведении курсора */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--color-tenants); /* Меняет цвет текста кнопки на белый при наведении курсора */ /* Настраивает CSS-свойство color для текущего элемента. */ color: #FFFFFF; } /* Направление Домовладельцев (Зеленые элементы) */ .item-homeowners h3, .item-homeowners h2, .item-homeowners h4, .item-homeowners .icon-svg, .item-homeowners .arrow-svg, .item-homeowners .badge-svg, .item-homeowners .feature-svg, .item-homeowners .btn-arrow-svg { /* Применяет зеленый цвет из переменной ко всем текстовым и SVG элементам домовладельцев */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-homeowners); } .item-homeowners .action-btn { /* Задает зеленую рамку для кнопки домовладельцев */ /* Настраивает CSS-свойство border для текущего элемента. */ border: 1px solid var(--color-homeowners); /* Устанавливает зеленый цвет текста для кнопки домовладельцев */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-homeowners); } .item-homeowners .action-btn:hover { /* Окрашивает фон кнопки в зеленый цвет при наведении курсора */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--color-homeowners); /* Меняет цвет текста кнопки на белый при наведении курсора */ /* Настраивает CSS-свойство color для текущего элемента. */ color: #FFFFFF; } /* Направление Инвесторов (Светлые фиолетовые элементы) */ .item-investors h3, .item-investors h2, .item-investors h4, .item-investors .icon-svg, .item-investors .arrow-svg, .item-investors .badge-svg, .item-investors .feature-svg, .item-investors .btn-arrow-svg { /* Применяет фиолетовый цвет из переменной ко всем текстовым и SVG элементам инвесторов */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-investors); } .item-investors .action-btn { /* Задает фиолетовую рамку для кнопки инвесторов */ /* Настраивает CSS-свойство border для текущего элемента. */ border: 1px solid var(--color-investors); /* Устанавливает фиолетовый цвет текста для кнопки инвесторов */ /* Настраивает CSS-свойство color для текущего элемента. */ color: var(--color-investors); } .item-investors .action-btn:hover { /* Окрашивает фон кнопки в фиолетовый цвет при наведении курсора */ /* Настраивает CSS-свойство background-color для текущего элемента. */ background-color: var(--color-investors); /* Меняет цвет текста кнопки на белый при наведении курсора */ /* Настраивает CSS-свойство color для текущего элемента. */ color: #FFFFFF; } .action-btn:hover .btn-arrow-svg { /* Принудительно перекрашивает стрелку внутри любой кнопки в белый цвет при ховере */ /* Настраивает CSS-свойство color для текущего элемента. */ color: #FFFFFF !important; } /* ========================================================================== ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ И МОБИЛЬНАЯ АДАПТИВНОСТЬ ========================================================================== */ .decor-berry { /* Позволяет свободно позиционировать декоративную ягоду поверх разметки */ /* Настраивает CSS-свойство position для текущего элемента. */ position: absolute; /* Сдвигает ягоду вниз, заставляя ее слегка выходить за край родительского блока */ /* Настраивает CSS-свойство bottom для текущего элемента. */ bottom: -10px; /* Устанавливает фиксированную ширину для декоративного элемента */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 155px; /* Автоматически вычисляет высоту для сохранения пропорций изображения */ /* Настраивает CSS-свойство height для текущего элемента. */ height: auto; /* Игнорирует клики мышкой, позволяя нажимать на элементы под ягодой */ /* Настраивает CSS-свойство pointer-events для текущего элемента. */ pointer-events: none; /* Выводит изображение ягоды на слой выше основного контента */ /* Настраивает CSS-свойство z-index для текущего элемента. */ z-index: 1; } .left-berry { /* Фиксирует декоративную ягоду в 10 пикселях от левого края контейнера */ /* Настраивает CSS-свойство left для текущего элемента. */ left: 10px; } .right-berry { /* Фиксирует декоративную ягоду в 10 пикселях от правого края контейнера */ /* Настраивает CSS-свойство right для текущего элемента. */ right: 10px; } /* Адаптивный сброс сетки на мобильных разрешениях */ /* Перестроение сетки для экранов меньше 1024px */ @media (max-width: 1024px) { .header-container { /* Перестраивает элементы шапки сайта в один вертикальный столбец */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Задает отступ в 15 пикселей между вертикальными элементами шапки */ /* Настраивает CSS-свойство gap для текущего элемента. */ gap: 15px; /* Устанавливает внутренние отступы шапки: 15px сверху/снизу и 20px по бокам */ /* Настраивает CSS-свойство padding для текущего элемента. */ padding: 15px 20px; } .nav-menu { /* Разрешает пунктам меню переноситься на новую строку при нехватке места */ /* Настраивает CSS-свойство flex-wrap для текущего элемента. */ flex-wrap: wrap; /* Центрирует перенесенные строки меню по горизонтальной оси */ /* Настраивает CSS-свойство justify-content для текущего элемента. */ justify-content: center; } .quick-nav-row > *:not(:last-child)::after { /* Полностью скрывает вертикальные разделители верхнего ряда на планшетах */ /* Настраивает CSS-свойство display для текущего элемента. */ display: none; } /* Если у вас используется Flexbox для трех карточек, они встанут вертикально */ .main-cards-section { /* Перестраивает горизонтальный ряд главных карточек в вертикальный список */ /* Настраивает CSS-свойство flex-direction для текущего элемента. */ flex-direction: column; /* Центрирует вертикальные карточки по горизонтальной оси экрана */ /* Настраивает CSS-свойство align-items для текущего элемента. */ align-items: center; } .main-card-item { /* Заставляет карточку занимать всю ширину экрана на мобильных устройствах */ /* Настраивает CSS-свойство width для текущего элемента. */ width: 100%; /* Ограничивает ширину карточки на планшетах, чтобы она не растягивалась слишком сильно */ /* Настраивает CSS-свойство max-width для текущего элемента. */ max-width: 450px; } } /* Ограничивает главную страницу тем же контейнером, что и другие публичные страницы. */ .page-container { /* Ограничивает контент восемьюдесятью семью процентами широкого экрана. */ width: 87vw; /* Не допускает превышения ширины окна. */ max-width: 100%; /* Центрирует основной контент. */ margin-inline: auto; /* Сохраняет безопасные вертикальные поля. */ padding-inline: 0; /* Сохраняет контекст позиционирования дочерних элементов. */ position: relative; } /* Расширяет главную страницу на планшетах. */ @media (max-width: 1120px) { /* Сохраняет удобные поля на среднем экране. */ .page-container { /* Использует девяносто два процента ширины. */ width: 92vw; } } /* Расширяет главную страницу на телефонах. */ @media (max-width: 620px) { /* Сохраняет небольшие поля на телефоне. */ .page-container { /* Использует девяносто четыре процента ширины. */ width: 94vw; } } /* Consistent content imagery and readable single-column mobile navigation. */ .home-page .main-card, .home-page .card-content-area, .home-page .quick-button, .home-page .quick-content { min-width: 0; } .home-page .image-mask-container .card-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 620px) { .home-page .quick-nav-row, .home-page .main-cards-row, .home-page .features-row { grid-template-columns: 1fr; } .home-page .quick-button { min-height: 64px; padding-inline: 14px; } .home-page .quick-text h3 { font-size: 17px !important; } .home-page .quick-text p { font-size: 14px; } .home-page .main-card { width: 100%; height: auto; } } /* Paints every replacement Main icon with its existing section color. */ .main-masked-icon { /* Uses the color already assigned to the surrounding audience card. */ background-color: currentColor; /* Prevents the external SVG files from repeating inside their boxes. */ -webkit-mask-repeat: no-repeat; /* Prevents the external SVG files from repeating in standards-based browsers. */ mask-repeat: no-repeat; /* Centers each new SVG shape inside the existing icon dimensions. */ -webkit-mask-position: center; /* Centers each new SVG shape in standards-based browsers. */ mask-position: center; /* Preserves the complete icon shape inside its existing box. */ -webkit-mask-size: contain; /* Preserves the complete icon shape in standards-based browsers. */ mask-size: contain; /* Keeps flex layouts from compressing decorative symbols. */ flex-shrink: 0; } /* Loads the updated Tenants icon everywhere it appears on the main page. */ .icon-tenants { -webkit-mask-image: url("/images/main/icon-tenants.svg"); mask-image: url("/images/main/icon-tenants.svg"); } /* Loads the new Homeowners card icon. */ .icon-homeowners { /* Uses the supplied Homeowners artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-homeowners.svg"); /* Uses the supplied Homeowners artwork in standards-based browsers. */ mask-image: url("/images/main/icon-homeowners.svg"); } /* Loads the new upper Homeowners icon. */ .icon-homeowners-up { /* Uses the supplied upper-navigation artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-homeowners-up.svg"); /* Uses the supplied upper-navigation artwork in standards-based browsers. */ mask-image: url("/images/main/icon-homeowners-up.svg"); } /* Loads the new Investors card icon. */ .icon-investors { /* Uses the supplied Investors artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-investors.svg"); /* Uses the supplied Investors artwork in standards-based browsers. */ mask-image: url("/images/main/icon-investors.svg"); } /* Loads the new upper Investors icon. */ .icon-investors-up { /* Uses the supplied upper-navigation artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-investors-up.svg"); /* Uses the supplied upper-navigation artwork in standards-based browsers. */ mask-image: url("/images/main/icon-investors-up.svg"); } /* Loads the new shared arrow artwork. */ .icon-arrow { /* Uses the supplied arrow as the visible shape. */ -webkit-mask-image: url("/images/main/icon-arrow.svg"); /* Uses the supplied arrow in standards-based browsers. */ mask-image: url("/images/main/icon-arrow.svg"); } /* Loads the new licensing icon. */ .icon-license { /* Uses the supplied licensing artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-license.svg"); /* Uses the supplied licensing artwork in standards-based browsers. */ mask-image: url("/images/main/icon-license.svg"); } /* Loads the new maintenance icon. */ .icon-maintenance { /* Uses the supplied maintenance artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-maintenance.svg"); /* Uses the supplied maintenance artwork in standards-based browsers. */ mask-image: url("/images/main/icon-maintenance.svg"); } /* Loads the new reporting icon. */ .icon-reporting { /* Uses the supplied reporting artwork as the visible shape. */ -webkit-mask-image: url("/images/main/icon-reporting.svg"); /* Uses the supplied reporting artwork in standards-based browsers. */ mask-image: url("/images/main/icon-reporting.svg"); } @media (max-width: 620px) { /* Tightens only the outer advantage cards around their added artwork. */ .features-row .feature-card.item-tenants, .features-row .feature-card.item-investors { /* Preserves enough room for the text and icon. */ gap: 6px; /* Reduces side padding without changing the grid. */ padding-inline: 6px; } } /* Aligns the home-page content scale with the larger public-page typography. */ .home-page .quick-text h3 { font-size: clamp(20px, 1.35vw, 25px); } .home-page .quick-text p { font-size: clamp(16px, 1.05vw, 19px); } .home-page .quick-button .icon-svg { width: clamp(56px, 4vw, 68px); height: clamp(56px, 4vw, 68px); } .home-page .quick-button .arrow-svg { width: clamp(44px, 3vw, 52px); height: clamp(44px, 3vw, 52px); } .home-page .floating-badge-circle { width: clamp(88px, 6vw, 104px); height: clamp(88px, 6vw, 104px); margin-top: -78px; } .home-page .floating-badge-circle .badge-svg { position: relative; z-index: 1; display: block; opacity: 1; visibility: visible; width: clamp(62px, 4.2vw, 74px); height: clamp(62px, 4.2vw, 74px); } .home-page .main-card h2 { font-size: clamp(38px, 2.3vw, 44px); } .home-page .description-text { font-size: clamp(16px, 1.05vw, 19px); min-height: 88px; height: auto; } .home-page .action-btn { min-height: 53px; font-size: clamp(16px, 1.05vw, 18px); } .home-page .action-btn .btn-arrow-svg { width: clamp(24px, 1.8vw, 32px); height: clamp(24px, 1.8vw, 32px); } .home-page .feature-icon-box { width: clamp(44px, 3vw, 54px); height: clamp(44px, 3vw, 54px); } .home-page .feature-icon-box .feature-svg { width: 100%; height: 100%; } .home-page .feature-info-text h4 { font-size: clamp(18px, 1.35vw, 22px); } .home-page .feature-info-text p { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; } .home-page .feature-card { gap: clamp(16px, 1.4vw, 24px); padding-block: 12px; } /* Pulls the complete card interface into the faded part of the artwork. */ .home-page .card-content-area { margin-top: -42px; } @media (max-width: 620px) { .home-page .image-mask-container { aspect-ratio: 1 / 1; } .home-page .card-content-area { margin-top: -48px; } .home-page .floating-badge-circle { margin-top: -82px; } } @media (max-width: 620px) { .home-page .quick-button .icon-svg { width: clamp(30px, 9vw, 42px); height: clamp(30px, 9vw, 42px); } .home-page .main-card h2 { font-size: clamp(38px, 11vw, 46px); } .home-page .description-text { font-size: 16px; min-height: 0; } .home-page .floating-badge-circle { width: 88px; height: 88px; } .home-page .floating-badge-circle .badge-svg { width: 62px; height: 62px; } .home-page .feature-info-text h4 { font-size: 18px; } .home-page .feature-info-text p { font-size: 15px; } }