*/
a.service-card .service-card__content .price-item {
display: flex;
justify-content: space-between; /* Название услуги слева, цена справа */
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
font-size: 14px;
}
a.service-card .service-card__content .price-item:last-child {
border-bottom: none;
}
a.service-card .service-card__content .price-item-label { /* Для названия услуги в строке */
color: #5a677d;
}
a.service-card .service-card__content .price-item-value { /* Для цены в строке */
color: #007bff;
font-weight: 600;
}
a.service-card .service-card__content .КЛАСС_ССЫЛКИ_ПОДРОБНЕЕ {
font-size: 14px;
color: #007bff;
text-decoration: underline;
display: inline-block; /* или block, если должна быть на всю ширину и по центру */
margin-top: 15px;
}
/* ... остальные ваши стили для :hover, ::before и т.д. для a.service-card ... */
/* Не забудьте, что a.service-card > * { position: relative; z-index: 1; } нужно, если используете ::before с z-index: 0 */
a.service-card:hover {
border-color: #00faff;
box-shadow: 0 0 18px rgba(0, 250, 255, 0.25);
transform: translateY(-4px);
}
a.service-card::before { /* Если вы используете этот псевдоэлемент для рамки */
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 18px; /* Должен быть чуть больше, чем border-radius у a.service-card */
pointer-events: none;
background: linear-gradient(45deg, #00faff, #ff00ff, #00faff);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
a.service-card:hover::before {
opacity: 1;
}
/* Это правило ОБЯЗАТЕЛЬНО, если используете ::before с z-index:0 */
a.service-card > div { /* Применяем к прямым потомкам div (service-card__img и service-card__content) */
position: relative;
z-index: 1;
}
/* КНОПКИ В РАЗДЕЛЕ УСЛУГИ */
/* Стили для контейнера табов (оставляем как есть или настраиваем по желанию) */
.services__tabs {
text-align: center;
margin-bottom: 20px;
}
/* Стили для кнопок-табов услуг с использованием box-shadow для обводки */
.services__tabs a.services__tab {
padding: 10px 20px;
border-radius: 8px; /* Ваше скругление для прямоугольной формы */
background: white;
color: #0a0a0a; /* Темный текст по умолчанию */
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500; /* Medium */
transition: all 0.25s ease-in-out;
position: relative;
z-index: 1;
overflow: hidden; /* Может быть полезно, если тень выходит за рамки */
text-decoration: none;
display: inline-block;
cursor: pointer;
margin: 0 5px 10px 5px;
line-height: normal;
border: none; /* <<< УБИРАЕМ СТАНДАРТНУЮ РАМКУ */
box-shadow: 0 0 0 1px rgba(0, 250, 255, 0.4); /* <<< ДОБАВЛЯЕМ ОБВОДКУ ЧЕРЕЗ ТЕНЬ */
/* Цвет rgba(0, 250, 255, 0.4) - ваш неоновый циан с прозрачностью */
}
/* Стили при наведении на кнопку-таб */
.services__tabs a.services__tab:hover {
color: #ffffff;
background: linear-gradient(90deg, #00faff, #ff00ff); /* Градиентный фон */
/* Тень/свечение при наведении. Обводка от предыдущего box-shadow перекроется этим. */
/* Если хотите сохранить и обводку и добавить свечение, можно использовать несколько теней: */
/* box-shadow: 0 0 0 1px rgba(0, 250, 255, 0.6), 0 0 10px rgba(0, 250, 255, 0.4); */
box-shadow: 0 0 10px rgba(0, 250, 255, 0.4); /* Только свечение */
}
/* Стили для активной (выбранной) кнопки-таба */
.services__tabs a.services__tab.active {
background: linear-gradient(90deg, #00faff, #ff00ff); /* Градиентный фон */
color: white;
/* Тень/свечение для активного состояния. Обводка также перекроется. */
/* Если хотите сохранить и обводку и добавить свечение, можно использовать несколько теней: */
/* box-shadow: 0 0 0 1px rgba(0, 250, 255, 0.7), 0 0 16px rgba(0, 250, 255, 0.5); */
box-shadow: 0 0 16px rgba(0, 250, 255, 0.5); /* Только свечение */
font-weight: 600; /* SemiBold */
}
/* Фон для фото на главной - прозрачный. Раннее был серым */
.company-info-card__img {
background: transparent; /* ИЛИ background-color: transparent; */
/* ... остальные стили для этого класса (height, aspect-ratio в медиа-запросах и т.д.) должны остаться ... */
}
/* Стили для общего фона страницы (из вашего примера) */
body {
/* background: #fefefe; /* Если хотите этот фон, раскомментируйте, но у вас уже есть градиент */
font-family: 'Segoe UI', 'Roboto', sans-serif; /* Установит новый шрифт по умолчанию, если хотите */
/* Если хотите оставить Montserrat, эту строку не добавляйте */
/* padding: 40px; /* Этот padding для body может быть лишним, если у вас уже есть структура страницы */
/* margin: 0; /* Хорошо иметь для сброса стандартных отступов body */
/* color: #111; /* Если фон body темный, этот цвет текста не подойдет */
}
/* Контейнер для карточек услуг (адаптация .service-section) */
/* ПРИМЕНИТЕ ЭТОТ КЛАСС К РОДИТЕЛЬСКОМУ БЛОКУ ВАШИХ КАРТОЧЕК, ЕСЛИ НУЖНО */
/* Например, к
или к его родителю */
.company-info-cards-wrapper { /* Вымышленный класс, вам нужно будет найти реальный или добавить */
display: flex;
gap: 32px; /* Промежуток между карточками */
/* justify-content: space-between; /* Это может не подойти для свайпера, который сам управляет расположением */
flex-wrap: nowrap; /* Для свайпера обычно nowrap, чтобы элементы шли в одну линию */
/* Если это не свайпер, а просто ряд карточек, можно flex-wrap: wrap; */
}
/* Стили для карточки услуги (адаптация .service-card) */
a.company-info-card { /* Используем ваш класс */
flex: 1; /* Позволяет карточкам растягиваться, если есть место (для свайпера может не требоваться) */
min-width: 240px; /* Минимальная ширина карточки */
padding: 32px 24px;
background: #ffffff; /* Белый фон карточки */
border-radius: 20px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
position: relative; /* Необходимо для псевдоэлемента ::after */
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.06); /* Тонкая граница */
overflow: hidden; /* Чтобы shimmer-линия не вылезала за скругленные углы */
cursor: pointer;
text-decoration: none; /* Убираем подчеркивание у ссылки */
display: flex; /* Используем flex для внутреннего расположения */
flex-direction: column; /* Контент внутри карточки будет идти сверху вниз */
color: #111; /* Цвет текста по умолчанию внутри карточки */
}
a.company-info-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 255, 255, 0.15); /* Циановая тень при наведении */
border: 1px solid rgba(0, 255, 255, 0.1); /* Циановая граница при наведении */
}
/* Разделительная shimmer линия (псевдоэлемент ::after) */
a.company-info-card::after {
content: "";
position: absolute;
top: 10%;
right: -16px; /* Изначально линия справа, может быть не видна из-за overflow: hidden, если карточка не последняя */
/* Если хотите линию ВНУТРИ карточки, измените right, например, на 0 или 1px, и уберите :last-child::after ниже */
width: 2px;
height: 80%;
background: linear-gradient(
to bottom,
rgba(0, 255, 255, 0.1),
rgba(255, 0, 255, 0.2), /* Пурпурный цвет в центре градиента */
rgba(0, 255, 255, 0.1)
);
background-size: 100% 200%; /* Для анимации градиента */
animation: shimmer 3s ease-in-out infinite;
border-radius: 2px;
pointer-events: none; /* Чтобы не мешала кликам */
z-index: 1; /* Поверх фона карточки, но под контентом, если у контента z-index выше */
}
/* Убираем shimmer-линию у последней карточки в ряду (если это не свайпер) */
/* Для свайпера это правило может не работать корректно или быть ненужным */
/* Если это свайпер, возможно, линию ::after нужно будет позиционировать иначе или убрать */
.company-info__list > a.company-info-card:last-child::after { /* Селектор для последней карточки в контейнере */
display: none;
}
/* Стили для заголовка карточки (адаптация .service-title) */
a.company-info-card .company-info-card__title { /* Используем ваши классы */
font-size: 18px;
font-weight: 700; /* Bold */
margin-bottom: 12px;
color: #111; /* Темный цвет заголовка */
font-family: 'Montserrat', sans-serif; /* Можно использовать ваш основной шрифт */
position: relative; /* Чтобы был поверх shimmer-линии */
z-index: 2;
}
/* Стили для описания карточки (адаптация .service-description) */
a.company-info-card .company-info-card__text { /* Используем ваши классы */
font-size: 14px;
line-height: 1.6;
color: #555; /* Серый цвет для описания */
font-family: 'Montserrat', sans-serif; /* Можно использовать ваш основной шрифт */
position: relative; /* Чтобы был поверх shimmer-линии */
z-index: 2;
margin-bottom: auto; /* Прижимает описание к верху, если цены внизу */
}
/* Если у вас есть цены, их тоже нужно поднять над shimmer-линией */
a.company-info-card .company-info-card__prices {
position: relative;
z-index: 2;
margin-top: 16px; /* Отступ перед ценами */
}
/* Анимация shimmer */
@keyframes shimmer {
0% {
background-position: 0 0%;
}
100% {
background-position: 0 100%;
}
}
}
/* End */
/* /local/templates/main/css/style.css?1755877629181530 */
/* /local/templates/main/css/custom.css?17487901343305 */
/* /local/templates/main/styles.css?175587771529306 */