/*
Theme Name: Kill Custom
Author: Dmitry Sorokin
Description: Кастомная тема для Kill
Version: 1.0
*/
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
a {
color: #E6B92A;
}
footer {
text-align: center;
padding: 10px;
margin-top: 20px;
}
/* Общий контейнер */
.container {
margin: 0 auto;
padding: 20px 120px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 1) Фиксированная шапка */
.site-header {
position: static;
top: 0; left: 0;
width: 100%;
background: #ffffffa6; /* полупрозрачный фон */
padding: 15px 0;
z-index: 1003;
transition: transform 0.3s ease, background 0.3s ease;
}
.site-header.submenu-open {
background: #ffffff; /* полностью белый */
}
@media (max-width: 1200px) {
/* Фиксируем шапку и даём ей отступ у body */
.site-header {
position: fixed;
transition: transform 0.3s ease, background 0.3s ease;
}
}
/* Чтобы контент страницы не «заезжал» под шапку */
/* Скрыть шапку смещением вверх */
.site-header.hide {
transform: translateY(-100%);
}
/* 2) Логотип */
/* 3) Навигация (осталась без изменений, но теперь вне header) */
.main-nav {
display: flex;
justify-content: flex-end;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 80px;
font-size: 18px;
}
.main-nav a {
text-decoration: none;
color: #2F2F2F;
font-weight: 400;
transition: color 0.3s ease;
}
.main-nav a:hover {
color: #E6B92A;
}
/* 4) Оверлей */
.menu-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.3);
z-index: 1000;
}
.menu-overlay.open {
display: block;
}
/* 5) Бургер */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 38px;
height: 23px;
background: none;
border: none;
cursor: pointer;
z-index: 2007; /* чуть выше шапки */
}
.burger span {
display: block!important;
width: 100%;
height: 1px!important;
background: #000!important;
border-radius: 1px;
transition: 0.3s;
}
.burger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* 6) Адаптив до 1200px */
@media (max-width: 1200px) {
.burger {
display: flex;
position: static;
}
.burger.active {
position: fixed;
top: 28px;
right: 20px;
}
.main-nav {
position: fixed;
top: 0; right: -100%;
width: 200px;
/* max-width: 60%;*/
height: 100vh;
background: #fff;
flex-direction: column;
justify-content: center;
align-items: left;
transition: right 0.3s ease;
z-index: 1001;
padding-left: 40px;
padding-right: 40px;
}
.main-nav.open {
right: 0;
}
.main-nav ul {
flex-direction: column;
}
.main-nav li {
margin: 10px 0;
}
.main-nav a {
color: #2F2F2F;
font-size: 18px;
}
.site-header {
background: #fff; /* полупрозрачный фон */
}
}
@media (min-width: 1660px) {
.main-nav ul {
gap: 107px;
}
}
/* 7) Подстройка под промежуточные брейкпоинты */
@media (max-width: 1440px) {
.main-nav ul {
font-size: 14px;
gap: 80px;
}
}
.logo-link {
display: inline-block;
}
.logo-text {
display: block;
height: 50px;
transition: filter 0.2s; /* плавный переход */
}
@media (max-width: 1440px) {
.logo-text {
height: 38px;
}
}
@media (min-width: 1200px) {
.logo-link:hover .logo-text {
filter: brightness(0.94);
}
}
.has-submenu{
z-index: 9999;
}
@media (max-width: 1440px) {
.submenu-toggle{
font-size: 14px!important;
}
}
@media (max-width: 1200px) {
.submenu-toggle{
font-size: 18px!important;
}
}
/* Сброс базовых стилей у кнопки */
.main-nav .has-submenu .submenu-toggle {
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
color: #2F2F2F;
transition: color 0.3s ease;
}
.main-nav .has-submenu .submenu-toggle:hover {
color: #E6B92A;
}
/* Стрелка */
.main-nav .has-submenu .more-icon {
width: 12px;
margin-left: 6px;
transition: transform 0.3s ease;
vertical-align: middle;
}
/* Подменю десктоп */
.main-nav .has-submenu .submenu {
display: none;
position: absolute;
/* …далее ваши тени, фон и т.п.… */
}
.main-nav .has-submenu.open .submenu {
display: block;
}
.main-nav .has-submenu.open .more-icon {
transform: rotate(180deg);
}
/* На мобилке делаем подменю частью колонки */
@media (max-width: 1200px) {
.main-nav .has-submenu .submenu {
position: static;
display: none;
flex-direction: column;
margin-top: 10px;
/* …остальные ваши мобильные правила… */
}
.main-nav .has-submenu.open .submenu {
display: flex;
}
.submenu li a{
padding-top: 0px;
font-size: 14px;
}
.main-nav ul {
gap: 0px;
}
.main-nav li{
margin-top: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 1200px) {
/* Ограничиваем высоту мобильного меню полной высотой экрана
и включаем прокрутку внутри него */
.main-nav {
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
}
/* Опционально: если вы хотите, чтобы само подменю «Полезное» тоже прокручивалось,
когда в нём много пунктов */
.main-nav .has-submenu .submenu {
max-height: calc(100vh - 80px); /* 80px — высота шапки и отступов, подберите под себя */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Hero-Section: две колонки по 50% */
.hero {
display: flex;
align-items: center;
/* отступы по вкусу */
padding: 103px 120px 183px 120px;
/* отступ между колонками */
gap: 40px;
}
/* Левая колонка: текст + кнопка */
.hero-text {
text-align: left;
}
/* Заголовок */
.hero-text h1 {
font-size: 60px;
line-height: 1.2;
margin-bottom: 40px;
text-transform: uppercase;
font-weight: 400;
max-width: 500px;
}
.hero-text h1 span {
color: #2f2f2f;
}
.hero-text p {
font-size: 18px;
color: #2F2F2F;
margin-bottom: 40px;
max-width: 500px;
}
.hero-flex {
display: flex;
align-items: center;
justify-content: center;
padding: 50px 20px;
}
.hero-text {
text-align: left;
}
.main-block__button {
border-radius: 8px;
display: inline-flex; /* Подстраивается под содержимое */
width: 238px;
justify-content: center;
align-items: center;
font-weight: 400;
text-align: center;
line-height: 140%;
padding: 9px 12px 9px 30px; /* Отступ для стрелки */
color: #2F2F2F;
transition: all 0.3s ease 0s;
background-color: #FFDD2D;
position: relative;
max-width: auto;
}
.main-block__button{
text-decoration: none;
}
.main-block__arrow {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
background-color: #ffffff; /* Фон квадрата */
border-radius: 6px; /* Скругление углов */
margin-left: 30px; /* Отступ между текстом и стрелкой */
transition: background-color 0.3s ease;
}
.main-block__button:hover .main-block__arrow {
background-color: #ffffff; /* Фон квадрата при ховере */
}
.main-block__arrow svg {
transition: transform 0.3s ease; /* Плавная анимация вращения */
fill: #2F2F2F; /* Меняем цвет стрелки при ховере */
}
.main-block__button:hover .main-block__arrow svg {
transform: rotate(90deg); /* Поворачиваем стрелку на 90 градусов */
fill: #2F2F2F; /* Меняем цвет стрелки при ховере */
}
.main-block__button:hover {
background-color: #f0ca0f;
color: #2F2F2F;
}
.main-block__button:disabled {
background-color: #ff4f4f;
}
/* Правая колонка: презентация без скроллов */
.hero-presentation {
position: absolute;
width: 910px;
height: 674px; /* или 100vh, если нужно на весь рост экрана */
overflow: hidden; /* скрывает любую прокрутку внутри контейнера */
right: 120px;
z-index: -1;
top: 124px;
border-radius: 24px;
}
.hero-presentation iframe {
width: 100%;
height: 100%;
border: none;
overflow: hidden; /* IE10+ */
-ms-overflow-style: none; /* IE и Edge */
scrollbar-width: none; /* Firefox */
}
.hero-presentation iframe::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.wrap {
user-select: none;
position: relative;
z-index: 10;
max-width: 100%;
overflow: hidden; /* Ограничиваем видимую область */
height: 200px; /* Задайте высоту под ваше изображение */
}
.image-marquee {
display: flex;
min-width: 400%; /* Ширина в 2 раза больше видимой области */
height: 32px;
background-image: url('img/backgrounds/wrap.png');
background-repeat: repeat-x; /* Повтор по горизонтали */
background-size: contain; /* Изображение полностью вписывается */
animation: scroll-image 60s linear infinite;
}
@keyframes scroll-image {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-2383px);
}
}
/* ДОБРО ПОЖАЛОВАТЬ */
.welcome__container{
padding: 180px 0px 160px 0px;
}
.welcome__body {
display: flex;
gap: 150px;
margin: auto 120px;
}
.welcome__content_title {
margin-top: 20px;
font-weight: 400;
font-size: 42px;
line-height: 140%;
color: #2F2F2F;
margin-bottom: 20px;
text-transform: uppercase;
}
.welcome__content_title .highlight {
background-color: #FFDD2D;
border-radius: 6px;
padding: 0 6px;
white-space: nowrap; /* чтобы не ломались строки */
position: relative;
}
.welcome__content_title .highlight::after {
content: "";
display: inline-block;
width: 2px; /* толщина курсора */
height: 1em; /* высота как у текста */
margin-left: 4px;
background: #2F2F2F; /* цвет курсора */
animation: blink 1s steps(1) infinite;
vertical-align: -2px; /* подстройка по вертикали */
}
@keyframes blink {
50% { opacity: 0; }
}
.welcome__content_text {
line-height: 150%;
font-weight: 400;
color: #2F2F2F;
font-size: 18px;
max-width: 800px;
}
.welcome__avatar {
flex: 1;
}
@media(max-width: 1440px) {
.welcome__avatar {
display: none;
}
}
@media(max-width: 1200px) {
.welcome__avatar {
display: block;
}
}
.calc_row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.calc_block {
background-color: #F8F8F8;
padding: 15px 25px 20px 25px;
border-radius: 20px;
color: #2F2F2F;
box-sizing: border-box;
transition: background-color .25s ease; /* ← правильно */
}
.calc_block:hover {
background-color: #eee; /* любой нужный оттенок */
}
/* одно общее transition для всех трёх свойств */
.calc_block.reveal{
transition:
background-color .25s ease,
opacity var(--reveal-dur, .6s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1)),
transform var(--reveal-dur, .6s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1));
}
.calc_block:hover{ background-color:#e4e4e4; }
.new_block .welcome__content_title {
font-size: 32px;
margin-bottom: 10px;
color: #2F2F2F;
}
.new_block{
font-size: 16px;
line-height: 1.4;
}
.block_left,
.block_right {
width: 50%;
}
.block_full {
width: 100%;
margin-bottom: 20px;
}
@media (max-width: 1200px) {
.new_block .welcome__content_text {
font-size: 14px;
line-height: 1.4;
}
.calc_block {
background-color: #F8F8F8;
padding: 10px 10px 20px 15px;
}
.new_block .welcome__content_title{
font-size: 24px;
}
}
.services__background-image {
position: absolute;
top: 900px;
right: 0;
z-index: -1;
}
.bold {
font-weight: 500;
line-height: 150%;
color: #2F2F2F;
font-size: 18px;
margin-bottom: 0;
}
.welcome__content_name span {
font-weight: 400;
font-size: 14px;
font-style: italic;
line-height: 150%;
color: #767676;
}
@media (max-width: 1440px) {
.welcome__content_title {
font-size: 32px;
font-weight: 500;
}
}
@media (max-width: 1200px) {
.welcome__body {
flex-direction: column;
gap: 40px;
margin: 0 20px;
}
.page__work-process {
margin-bottom: 80px;
}
.bold {
margin-left: 0;
font-size: 16px;
}
.welcome__container {
padding: 40px 0 80px 0;
}
.welcome__content_title {
margin-top: 20px;
text-align: left;
}
.welcome__content_text {
text-align: left;
font-size: 14px;
}
.welcome__content_name {
text-align: left;
}
}
@media (max-width: 768px) {
.welcome__content_title {
font-size: 24px;
font-weight: 500;
}
}
@media (max-width: 420px) {
.welcome__content_title {
font-size: 18px;
font-weight: 500;
}
}
.page__clients {
margin-bottom: 100px;
background-color:#F8F8F8;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
}
.clients__title-section {
margin-bottom: 80px;
padding-top: 100px;
}
@media (max-width: 768px) {
.clients__title-section {
padding-top: 60px;
}
}
.clients__body {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.clients__item {
display: grid;
grid-template-columns: 96px 1fr;
align-items: center;
gap: 24px;
}
.clients__item__text {
color: #2F2F2F;
font-size: 18px;
font-weight: 400;
line-height: 130%;
width: 100%;
position: relative;
}
.clients__item__text p {
max-width: 190px;
}
.clients__item__text span {
color: #E6B92A;
}
.clients__item__photo {
width: 100%;
display: flex;
justify-content: center;
}
.clients__item__photo__img {
width: 96px;
height: 96px;
border-radius: 20px;
background-repeat: no-repeat;
background-size: 96px auto;
object-fit: contain;
}
.clients_all {
background-image: url('img/clients_all.webp');
}
/* Позиции в спрайте */
#clients1 { background-position: 0 -0px; }
#clients2 { background-position: 0 -96px; }
#clients3 { background-position: 0 -192px; }
#clients4 { background-position: 0 -288px; }
.title-section__subtitle {
font-size: 14px;
color: #767676;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.title-section__title {
font-size: 42px;
color: #2F2F2F;
text-transform: uppercase;
margin-bottom: 80px;
font-weight: 400;
}
.reasons {
margin-top: 235px;
margin-bottom: 150px;
padding-bottom: 60px;
padding-left: 120px;
padding-right: 120px;
}
.reasons__body, .clients__body {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 127px;
}
.reasons__body2 {
grid-template-columns: repeat(3, 1fr);
}
.reasons__body__item {
display: flex;
flex-direction: column;
gap: 26px;
width: 100%;
}
.reasons__body__item__header {
padding-left: 20px;
border-left: 2px solid #FFDD2D;
color: #2F2F2F;
font-size: 24px;
font-weight: 500;
line-height: normal;
}
.reasons__body__item__text {
color: #2F2F2F;
font-weight: 400;
line-height: 150%;
padding-left: 21px;
font-size: 18px;
}
.reasons__body__item--second {
margin-top: 100px;
}
.reasons__body__item--first {
margin-top: 180px;
}
.reasons__title__img {
position: absolute;
left: 377px;
top: -226px;
z-index: -1; /* остаются за текстом */
width: auto;
height: auto;
transform-origin: center center; /* вращаем вокруг центра */
}
/* Анимации */
@keyframes spin-left {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes spin-right {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* первое изображение — медленно влево */
.reasons__title__img--one {
animation: spin-left 120s linear infinite;
}
/* второе — медленно вправо */
.reasons__title__img--two {
animation: spin-right 20s linear infinite;
}
@media (max-width: 1200px) {
.reasons__body, .clients__body {
gap: 80px;
}
.reasons {
padding-bottom: 150px;
}
.clients__item {
gap: 0;}
.clients__item__photo__img {
width: 60px;
height: 60px;
background-size: 60px auto;
}
#clients1 { background-position: 0 -0px; }
#clients2 { background-position: 0 -60px; }
#clients3 { background-position: 0 -120px; }
#clients4 { background-position: 0 -180px; }
}
/* ==== SERVICES + PROCESS (combined) ==== */
.sp {
position: relative;
padding-left: 120px;
padding-right: 120px;
margin-bottom: 200px;
}
.sp__container { position: relative; padding-top: 40px; }
.sp__title { margin-bottom: 32px; }
/* Сетка 2 колонки */
.sp__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch; /* растягивает обе колонки на одну высоту */
}
/* Левая колонка (3 карточки одинаковой высоты на вебе) */
.sp__stack {
display: grid;
gap: 24px;
}
@media (max-width: 769px) {
.sp__stack {
gap: 12px;
}
}
.sp-card {
position: relative;
border-radius: 24px;
color: #2F2F2F;
background: #F8F8F8; /* перекрывается ниже */
display: flex;
flex-direction: column;
/* запас справа под маску (если задашь --mask-pad на карточке) */
padding: 32px calc(36px + var(--mask-pad, 0px)) 32px 36px;
}
/* одинаковая высота на вебе */
@media (min-width: 769px) {
.sp-card { min-height: 115px; }
}
.sp-card__title {
font-size: 24px;
font-weight: 500;
line-height: 122%;
margin: 0 0 12px;
}
@media (max-width: 1200px) {
.sp-card__title {
font-size: 18px;
}
}
.sp-card__text {
font-size: 18px;
line-height: 150%;
margin: 0;
}
/* Градиенты + (опционально) маска справа, растянутая на всю высоту */
/* 1) Карточка: гарантируем слойность */
.sp-card { position: relative; overflow: hidden; }
/* 2) Маска теперь отдельным слоем (используем твои --mask и --mask-pad) */
.sp-card::before{
content:"";
position:absolute; top:0; right:0; bottom:0;
width: var(--mask-pad, 0px);
background-image: var(--mask);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
pointer-events: none;
opacity: .98;
transform: translateZ(0); /* композитинг */
transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
will-change: transform;
}
/* 3) Тихое движение маски без «вжуха» */
.sp-card:hover::before{
transform: translateX(6px) scale(1.04);
opacity: 1;
}
/* 4) Фоны карточек: переписываем, чтобы убрать маску из background-image */
.sp-card--mk {
background-color: #FFE042;
}
.sp-card--ds {
background-color: #FFE042;
}
.sp-card--an {
background-color: #FFE042;
}
/* 5) На всякий случай гасим старые hover-правила, если они остались */
.sp-card--mk:hover,
.sp-card--ds:hover,
.sp-card--an:hover{
background-position: center, center !important;
background-size: cover, cover !important;
}
/* Правая колонка — процесс */
.sp-process {
position: relative;
background: #F8F8F8;
border-radius: 24px;
padding: 32px 36px 36px;
color: #2F2F2F;
overflow: hidden;
/* height убираем */
display: flex; /* добавляем */
flex-direction: column; /* чтобы содержимое красиво тянулось вниз */
}
/* Уголок без отступов в левом верхнем углу */
.sp-process__corner {
position: absolute;
top: 0;
left: 0;
display: block;
width: auto;
height: auto;
pointer-events: none;
user-select: none;
}
/* Заголовок поверх уголка (как subtitle, но чёрный) */
.sp-process__kicker {
position: absolute;
top: 12px;
left: 90px; /* твоя правка */
color: #2F2F2F;
z-index: 2;
}
/* Список шагов */
.sp-steps {
list-style: none;
margin: 60px 0 0; /* твоя правка: отступ сверху */
padding: 0;
display: grid;
gap: 22px;
}
.sp-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: start;
}
.sp-step__badge {
width: 36px;
height: 36px;
border-radius: 8px;
background: #FFDD2D;
color: #fff;
display: grid;
place-items: center;
font-weight: 600;
font-size: 16px;
line-height: 1;
flex: 0 0 36px;
}
/* Типографика шагов — как в левой колонке */
.sp-step__name {
font-size: 24px;
font-weight: 500;
line-height: 122%;
margin: 0 0 8px;
}
.sp-step__text {
font-size: 18px;
line-height: 150%;
margin: 0;
max-width: 760px;
}
/* ====== Адаптив ====== */
@media (max-width: 1200px) {
.sp { padding-left: 20px; padding-right: 20px; }
.sp-step__name { font-size: 18px; }
}
@media (max-width: 1024px) {
.sp__grid { grid-template-columns: 1fr; gap: 60px; }
.sp-card__text {
font-size: 14px;
z-index: 2000;
}
.sp-step__text{
font-size: 14px;
}
.sp-process__corner {
width: auto;
height: 40px;
}
.sp-process__kicker {
top: 2px;
left: 26px;
}
}
@media (max-width: 768px) {
.sp { padding-left: 24px; padding-right: 24px;
margin-bottom: 60px;}
.sp-card,
.sp-process { border-radius: 16px; padding: 20px; padding-bottom: 40px; }
.sp-step__badge { width: 28px; height: 28px; font-size: 14px; }
.sp-step__text { font-size: 14px; }
/* компактнее маску на мобилке */
.sp-card__text {
max-width: calc(100% - 130px) !important;
}
}
.stages_w {
width: 363px; /* Ширина одного логотипа */
height: 274px; /* Высота одного логотипа */
background-image: url('img/stages_work.svg'); /* Путь к твоему спрайту */
background-repeat: no-repeat; /* Отключаем повторение */
background-size: 363px auto; /* Уменьшаем фон до нужного размера по ширине */
}
/* Для каждого логотипа используем сдвиг по вертикали */
#stages_w1 {
background-position: 0 0;
}
#stages_w2 {
background-position: 0 -274px;
}
#stages_w3 {
background-position: 0 -548px;
}
@media (max-width: 768px) {
.stages_w {
width: 80px; /* Новая ширина */
height: 60px; /* Пропорциональная новая высота */
background-size: 80px auto; /* Уменьшаем фон до 80px по ширине */
margin-right: 20px; /* Отступ справа */
margin-top: -20px; /* Отступ справа */
}
/* Корректируем позиции фона для каждого элемента */
#stages_w1 {
background-position: 0 0;
}
#stages_w2 {
background-position: 0 -60px; /* Сдвиг на уменьшенную высоту */
}
#stages_w3 {
background-position: 0 -120px; /* Сдвиг на уменьшенную высоту */
}
}
/* ====== ДЕСКТОПНАЯ ВЕРСИЯ ====== */
.work-port {
padding: 0 120px;
}
.work-process__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.card {
position: relative;
height: 354px;
overflow: hidden;
border-radius: 24px;
transition: transform 0.3s ease;
background: none;
}
.card:hover {
transform: scale(1.03);
}
/* картинка-обёртка */
.card__img-wrapper {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
.card__img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/* тёмный фильтр (desktop only) */
.card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0);
transition: background 0.3s ease, backdrop-filter 0.3s ease;
z-index: 1;
}
/* overlay-контент */
.card__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
box-sizing: border-box;
color: #F8F8F8;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.card__title {
margin: 0 0 10px;
font-size: 24px;
font-weight: 400;
}
.card__desc {
margin: 0;
font-size: 16px;
}
.card:hover::before {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
}
.card:hover .card__content {
opacity: 1;
}
@media (min-width: 769px) {
.card:hover .card__img-wrapper img {
transform: scale(1.1);
}
}
/* расширение сетки */
.card--small { grid-column: span 1; }
.card--large { grid-column: span 2; }
/* кнопка */
.work-process__btn-wrapper {
text-align: center;
margin-top: 40px;
}
#load-more {
display: inline-block;
padding: 12px 184px;
font-size: 16px;
color: #2F2F2F;
border: 1px solid #2F2F2F;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 6px;
}
#load-more:hover {
background: #2F2F2F;
color: #fff;
}
/* ====== МОБИЛЬНАЯ ВЕРСИЯ (≤768px) ====== */
@media (max-width: 1200px) {
.work-process__container {
padding-top: 30px;
padding-bottom: 0;
}
.work-process__cards {
grid-template-columns: 1fr !important;
gap: 16px;
}
/* Сбрасываем span для всех карточек */
.card--small,
.card--large {
grid-column: span 1 !important;
}
/* Общие правки для mobile */
.card {
position: static;
width: 100%;
height: auto;
border-radius: 16px;
/* Отключаем все анимации */
transition: none !important;
}
.card:hover {
transform: none !important;
}
.card__img-wrapper {
position: relative;
height: 180px;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.card__img-wrapper img {
/* Отключаем масштабирование при hover */
transition: none !important;
}
/* Убираем псевдоэлемент */
.card::before {
display: none !important;
}
.card__content {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
background: #F8F8F8;
color: #2F2F2F;
padding: 16px;
border-radius: 0 0 16px 16px;
/* Отключаем появление по hover */
transition: none !important;
}
.card__title {
font-size: 20px;
margin-bottom: 8px;
}
.card__desc {
font-size: 14px;
line-height: 1.4;
}
#load-more {
width: 100%;
padding: 12px 0;
}
/* Если у вас ещё есть какие-то фоновые декорации */
.work-process__mobile-decor,
.work-process__body_item-3-decor {
display: none !important;
pointer-events: none !important;
}
/* Кнопка над всем */
.work-process__btn-wrapper {
z-index: 1 !important;
}
}
@media (max-width: 1687px) {
.hero-presentation {
width: 740px;
height: 780px; /* или 100vh, если нужно на весь рост экрана */
}
.hero {
padding: 140px 120px 183px 120px;
}
}
@media (max-width: 1500px) {
.hero-presentation {
width: 650px;
height: 700px; /* или 100vh, если нужно на весь рост экрана */
}
.hero {
padding: 140px 120px 183px 120px;
}
}
@media (max-width: 1440px) {
.hero-text h1 {
font-size: 42px;
margin-bottom: 24px;
}
.site-header {
padding: 8px 0;
}
.hero{
padding: 100px 120px 150px 120px;
}
.hero-text p {
font-size: 14px;
max-width: 370px;
margin-bottom: 24px;
}
.hero-presentation {
position: absolute;
width: 700px;
height: 600px; /* или 100vh, если нужно на весь рост экрана */
overflow: hidden; /* скрывает любую прокрутку внутри контейнера */
top: 90px;
z-index: -1;
}
.main-block__button {
font-size: 14px;
width: 216px;
}
}
@media (max-width: 1320px) {
.hero-presentation {
position: absolute;
width: 600px;
height: 674px; /* или 100vh, если нужно на весь рост экрана */
overflow: hidden; /* скрывает любую прокрутку внутри контейнера */
right: 0px;
z-index: -1;
}
}
@media (max-width: 1200px) {
.wrap {
display: none;
}
.hero {
flex-direction: column;
padding: 0 0 40px 0;
gap: 20px;
position: relative;
}
.container{
padding: 20px 20px;
}
.hero-text h1, p{
margin-left: 20px;
margin-right: 20px;
}
.main-block__button-body {
padding-left: 20px;
padding-right: 20px;
}
.main-block__button{
width: calc(100% - 40px) !important;
height: 30px;
}
.main-block__arrow{
display: none;}
/* Правая колонка (презентация) первой */
.hero-presentation {
order: 1;
position: relative;
width: 100%;
height: auto;
padding-top: 56.25%; /* Соотношение сторон 16:9 */
z-index: 1;
top: 60px;
right: 0;
border-radius: 0;
}
.hero-presentation iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Левая колонка (текст) второй */
.hero-text {
order: 2;
width: 100%;
text-align: left;
margin-top: 60px;
}
.hero-text h1 {
font-size: 32px;
margin-bottom: 20px;
max-width: 100%;
}
.hero-text p {
font-size: 14px;
margin-bottom: 20px;
max-width: 100%;
}
}
@media (max-width: 500px) {
.hero-presentation {
height: 160px; /* или 100vh, если нужно на весь рост экрана */
}
}
@media (max-width: 1300px) {
.clients__body {
grid-template-columns: 1fr; /* Одна карточка в ряд */
gap: 40px; /* Отступы между карточками */
}
.clients__item__photo__img {
border-radius: 12px;
}
.page__clients {
padding-left: 40px;
padding-right: 40px;
}
.title-section__title,
.title-section__subtitle {
text-align: left;
}
.clients__item {
grid-template-columns: 96px 1fr; /* Сохраняем картинка + текст */
justify-items: start;
}
.clients__item__text {
text-align: left;
}
.clients__item__text p {
max-width: 100% !important;
}
}
@media (max-width: 768px) {
.page__clients {
padding-left: 0px;
padding-right: 0px;
}
.title-comand {
margin-left: 20px;
}
.title-section__title{
font-size: 24px;
margin-bottom: 30px;
}
.clients__title-section{
margin-bottom: 20px;
padding-top: 0;
}
.page__clients{
padding-bottom: 60px;
padding-top: 60px;
}
.clients__item__text p {
margin-left: 0;
font-size: 16px;
}
}
@media (max-width: 600px) {
.clients__body {
grid-template-columns: 1fr; /* Одна карточка в ряд */
gap: 0px; /* Отступы между карточками */
}
}
@media (min-width: 1300px) and (max-width: 1690px) {
.clients__item--third {
display: none !important;
}
.clients__body {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1200px) {
.clients__item__photo {
justify-content: start;
}
.clients__item {
grid-template-columns: 74px 1fr; /* Сохраняем картинка + текст */
justify-items: start;
}
.clients__item__text p{
margin-right: 0;
}
.reasons__body {
grid-template-columns: 1fr; /* Одна колонка */
gap: 40px;
}
.reasons__body__item--first,
.reasons__body__item--second {
margin-top: 0;
}
.reasons__title__img {
display: none;
}
.reasons {
padding-left: 20px;
padding-right: 20px;
margin-top: 100px;
margin-bottom: 40px;
padding-bottom: 0px;
}
.title-section__title,
.title-section__subtitle {
text-align: left;
}
.reasons__body__item{
gap: 16px;
}
.reasons__body__item__header{
font-size: 18px;
}
.reasons__body__item__text{
font-size: 14px;
}
.title-section__subtitle{
font-size: 11px;
}
}
@media (max-width: 406px) {
.clients__item__text p{
font-size: 14px;
}
}
@media (min-width: 1200px) {
.services{
margin-bottom: 80px;}
}
@media (max-width: 1200px) {
.services{
padding-left: 20px;
padding-right: 20px;
}
.page__work-process{
padding-left: 20px;
padding-right: 20px;
margin-top: 20px;
}
}
@media (max-width: 768px) {
.services__background-image {
position: absolute;
top: -100px;
right: 0;
z-index: -1;
}
.services-item__short {
padding: 29px 75px 29px 50px;
}
.services__body_item-1 {
/* align-self: flex-end; */
}
.services__body_item-2 {
float: right;
align-self: flex-end;
}
.services__body_item-3 {
/* align-self: flex-end; */
}
.services-item__image_container {
position: relative;
width: 496px;
height: 175px;
}
.services-item__image_container img {
width: 601px;
position: absolute;
transition: ease-out 0.3s;
top: -18px;
left: -52.5px;
object-fit: cover;
object-position: center;
transform-style: preserve-3d;
transform: translateY(var(--move-y-services)) translateX(var(--move-x-services));
}
@media (max-width: 1366px) {
.services-item__short {
width: 550px;
padding: 29px 75px 29px 50px;
}
}
@media (max-width: 1280px) {
.services-item__short {
width: 500px;
padding: 29px 30px 29px 50px;
}
}
@media (max-width: 1280px) {
.services{
padding-left: 20px;
padding-right: 20px;
}
.services-item__short {
height: 175px;
width: 772px;
background-color: #F8F8F8; /* Темно-серый фон */
border-radius: 0px 16px 16px 0px;
padding: 20px 30px;
display: flex;
flex-direction: column;
}
.services__body_item-2 {
align-self: unset;
}
}
@media (max-width: 1024px) {
.services__background-image {
right: -100px;
}
}
@media (max-width: 768px) {
.services-item {
display: flex;
flex-direction: column;
}
.services-item__short {
width: auto;
}
.services-item__content {
width: auto;
}
.services__body {
padding: 0px;
}
.services-item__content {
border-radius: 0px 0px 16px 16px;
}
.services-item__image {
border-radius: 16px 16px 0px 0px;
}
.services-item__image_container img {
transform-style: unset;
transform: unset;
position: static;
}
.services-item__image_container {
width: 100%;
height: 80px;
}
.services__background-image {
right: -200px;
}
}
.services-item__content {
height: unset;
}
}
@media (max-width: 768px) {
.services-item__title {
font-size: 18px;
font-weight: 400;
}
}
.team{
margin-top: 160px;
padding-bottom: 0;
}
.team__name{
margin-bottom: 8px;
}
.team__position{
font-size: 14px;
color: #767676;
margin-bottom: 60px;
}
.team__wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 60px;
}
.team__card {
min-width: 120px;
flex-shrink: 0;
text-align: center;
}
.team__photo {
width: 120px;
height: 120px;
background-image: url('img/team_all.webp');
background-size: 120px auto; /* Масштабируем всю картинку по ширине */
background-repeat: no-repeat;
border-radius: 18px;
margin-bottom: 20px;
}
.photo-1 { background-position: 0 0; }
.photo-2 { background-position: 0 -120px; }
.photo-3 { background-position: 0 -240px; }
.photo-4 { background-position: 0 -360px; }
.photo-5 { background-position: 0 -480px; }
.photo-6 { background-position: 0 -600px; }
.photo-7 { background-position: 0 -720px; }
.photo-8 { background-position: 0 -840px; }
.photo-9 { background-position: 0 -960px; }
/* Настройка позиций спрайтов */
/* Десктоп */
@media (min-width: 1432px) {
.team__wrapper {
flex-wrap: wrap;
justify-content: center;
overflow: visible;
}
.team__card {
width: 100px;
}
}
@media (max-width: 576px) {
.team__wrapper {
gap: 20px;
}
.team__photo {
margin: 0 auto;
width: 80px;
height: 80px;
background-size: 80px auto;
margin-bottom: 12px;
border-radius: 20px;
}
/* Пересчитываем позиции для 80px */
.photo-1 { background-position: 0 0; }
.photo-2 { background-position: 0 -80px; }
.photo-3 { background-position: 0 -160px; }
.photo-4 { background-position: 0 -240px; }
.photo-5 { background-position: 0 -320px; }
.photo-6 { background-position: 0 -400px; }
.photo-7 { background-position: 0 -480px; }
.photo-8 { background-position: 0 -560px; }
.photo-9 { background-position: 0 -640px; }
.team{
margin-top: 80px;
padding-bottom: 0;
}
.team__name{
margin: 0 auto;
max-width: 80px;
}
.team__position{
font-size: 12px;
margin: 0 auto;
max-width: 90px;
margin-bottom: 60px;
}
}
ul {
padding-inline-start: 20px;
}
@media (max-width: 1800px) {
.team__wrapper {
gap: 14px;
}
.team__photo {
margin: 0 auto;
width: 80px;
height: 80px;
background-size: 80px auto;
margin-bottom: 12px;
border-radius: 20px;
}
/* Пересчитываем позиции для 80px */
.photo-1 { background-position: 0 0; }
.photo-2 { background-position: 0 -80px; }
.photo-3 { background-position: 0 -160px; }
.photo-4 { background-position: 0 -240px; }
.photo-5 { background-position: 0 -320px; }
.photo-6 { background-position: 0 -400px; }
.photo-7 { background-position: 0 -480px; }
.photo-8 { background-position: 0 -560px; }
.photo-9 { background-position: 0 -640px; }
.team{
margin-top: 80px;
padding-bottom: 0;
}
}
.logos {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 20px;
justify-items: center;
}
.logo1 {
width: 100px;
height: 75px;
background-image: url('img/brands/logo_trust.svg');
background-repeat: no-repeat;
background-size: 100% auto;
}
/* Позиции логотипов */
.logo-1 { background-position: 0 0; }
.logo-2 { background-position: 0 -75px; }
.logo-3 { background-position: 0 -150px; }
.logo-4 { background-position: 0 -225px; }
.logo-5 { background-position: 0 -300px; }
.logo-6 { background-position: 0 -375px; }
.logo-7 { background-position: 0 -450px; }
.logo-8 { background-position: 0 -525px; }
.logo-9 { background-position: 0 -600px; }
.logo-10 { background-position: 0 -675px; }
.logo-11 { background-position: 0 -750px; }
.logo-12 { background-position: 0 -825px; }
.logo-13 { background-position: 0 -900px; }
.logo-14 { background-position: 0 -975px; }
.logo-15 { background-position: 0 -1050px; }
.logo-16 { background-position: 0 -1125px; }
.logo-17 { background-position: 0 -1200px; }
.logo-18 { background-position: 0 -1275px; }
/* ... до logo-18 */
@media (max-width: 1090px) {
.logos {
grid-template-columns: repeat(3, 1fr);
}
}
/* === CSS === */
/* Структура и общий сброс */
.reviews {
padding: 0 120px;
margin-top: 160px;
}
.reviews-swiper-wrapper {
position: relative;
overflow: visible;
}
.reviews-swiper {
position: relative;
overflow: hidden;
padding: 20px 0;
}
.reviews-swiper .swiper-wrapper {
display: flex;
}
.reviews-swiper .swiper-slide {
flex: 0 0 auto;
}
/* Мобильные и планшеты (<1200px): по одной карточке на весь контейнер */
@media (max-width: 1199.98px) {
.swiper-slide.review-card {
width: calc(100% - 40px) !important;
}
.reviews {
padding: 0 20px;
margin-top: 60px;
}
.swiper-button-prev,
.swiper-button-next {
display: none !important;
}
.swiper-slide.review-card.long, .swiper-slide.review-card.short {
height: 500px;
}
}
/* Десктоп (>=1200px): long/short ширины */
@media (min-width: 1200px) {
/* gap между карточками = 30px */
.swiper-slide.review-card.short {
/* 1 доля из 4: (100%−3*30px)÷4 = 25%−22.5px */
width: calc(25% - 22.5px) !important;
height: 350px;
}
.swiper-slide.review-card.long {
/* 2 доли + 1 gap: 2*(25%−22.5px)+30px = 50%−15px */
width: calc(50% - 115px) !important;
height: 350px;
}
}
/* Карточки */
.review-card {
position: relative; /* Добавить! */
background: #F8F8F8;
border-radius: 24px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start; /* <-- чтобы текст шёл с верха */
}
.review-card__text {
display: none;
font-size: 0px;
color: #333;
}
.review-card__author {
position: absolute;
font-size: 16px;
bottom: 30px; /* отступ от низа карточки */
left: 30px; /* отступ слева (как у padding карточки) */
right: 30px; /* отступ справа */
text-align: right; /* сохраняем выравнивание имени/должности */
}
.review-card__name {
font-weight: 500;
font-size: 16px;
color: #333;
margin-bottom: 8px;
}
.review-card__position {
font-size: 14px;
color: #777;
}
.short p, .long p{
font-size: 18px;
}
@media (max-width: 1200px) {
.short p, .long p{
font-size: 16px;
}
}
@media (max-width: 768px) {
.short p{
font-size: 14px;
}
.long p{
font-size: 14px;
}
}
/* Стрелки */
.swiper {
position: relative; /* якорь для absolute-кнопок */
overflow: visible; /* стрелки могут выходить за край; убери, если нужно внутри */
}
/* ==== SWIPER: кнопки навигации (коробочки) ==== */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50% !important;
transform: translateY(-50%);
z-index: 10;
width: 42px !important;
height: 42px !important;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
color: #2F2F2F !important; /* БАЗОВЫЙ цвет стрелки */
box-shadow: inset 0 0 0 1px #767676;
border-radius: 8px;
transition: background-color .3s, color .3s, box-shadow .3s;
/* Сбросы странных выравниваний у Swiper */
margin-top: 0 !important;
inset-inline-start: auto !important;
inset-inline-end: auto !important;
cursor: pointer;
}
/* точные отступы от ленты */
.swiper-button-prev { left: -52px !important; }
.swiper-button-next { right: -52px !important; }
/* ==== SWIPER: убираем встроенные SVG Swiper (чтобы не было второй стрелки) ==== */
.swiper-button-prev .swiper-navigation-icon,
.swiper-button-next .swiper-navigation-icon,
.swiper-button-prev > svg,
.swiper-button-next > svg {
display: none !important;
}
/* ==== SWIPER: рисуем свою стрелку через mask (цвет берёт из currentColor) ==== */
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
display: block;
width: 14px;
height: 14px;
/* маска-иконка (тонкий чеврон, stroke-width=1.5) */
-webkit-mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
background-color: currentColor; /* ← цвет стрелки = color у кнопки */
}
/* поворот для prev */
.swiper-button-prev::after { transform: rotate(180deg); }
/* Ховер: зелёная коробка + белая стрелка */
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: #FFDD2D;
box-shadow: none;
}
/* Disabled-состояние */
.swiper-button-disabled {
pointer-events: none;
opacity: 0.9 !important;
background-color: #f5f5f5 !important;
color: #ccc !important; /* стрелка серая */
box-shadow: none !important;
}
/* Фокус для клавиатуры (а11y) */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
outline: 2px solid #FFDD2D;
outline-offset: 2px;
}
/* Адаптив: на узких экранах держим стрелки внутри карусели */
@media (max-width: 767px) {
.swiper { overflow: hidden; }
.swiper-button-prev { left: 8px !important; }
.swiper-button-next { right: 8px !important; }
}
/* ==== FAQ: стрелка в квадрате, тот же стиль и логика цветов ==== */
.faq-question__arrow {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px #767676;
transition: background-color .3s, color .3s, box-shadow .3s;
color: #2F2F2F; /* базовый цвет стрелки */
cursor: pointer;
}
@media (min-width: 1200px) {
.faq-question__arrow:hover {
background: #FFDD2D;
color: #2f2f2f; /* стрелка станет белой */
box-shadow: none;
}
}
/* иконка-стрелка через mask, тонкая (1.5) */
.faq-question__arrow::after {
content: "";
display: block;
width: 14px;
height: 14px;
-webkit-mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
background-color: currentColor; /* цвет стрелки */
transform: rotate(90deg); /* вниз */
transition: transform .3s ease;
}
/* открыть/закрыть — поворот */
.faq-question[aria-expanded="true"] .faq-question__arrow::after {
transform: rotate(-90deg); /* вверх */
}
/* === CSS для пагинации === */
.swiper-pagination {
position: absolute;
bottom: -40px!important; /* отступ от низа слайдера */
left: 0;
right: 0;
text-align: center; /* центрируем точки внутри */
z-index: 10;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #ccc;
opacity: 1;
margin: 0 4px;
border-radius: 50%;
transition: background-color 0.3s, transform 0.3s;
}
.swiper-pagination-bullet-active {
background: #FFDD2D!important;
transform: scale(1.2);
}
.swiper-button-next svg,
.swiper-button-prev svg {
width: auto !important;
height: auto !important;
}
@media (max-width: 1440px) {
.swiper-slide.review-card.long, .swiper-slide.review-card.short {
height: 500px;
}
}
.popular_work__container {}
.popular_work {
margin-bottom: 150px;
margin-top: 160px;
padding-left: 120px;
padding-right: 120px;
}
.popular_work_wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.popular_work_wrapper_item {
padding: 31px;
border-radius: 24px;
background: #F8F8F8; /* Темно-серый фон */
display: flex;
flex-direction: column;
gap: 20px;
color: #2F2F2F; /* Белый текст */
transition: background-color .25s ease;
}
/* Стили для изменения фона при наведении на карточку */
@media (min-width: 1200px) {
.popular_work_wrapper_item:hover {
background-color: #FFE663;
}
/* Стили для изменения цвета текста при наведении на карточку */
.popular_work_wrapper_item:hover,
.popular_work_wrapper_item:hover .popular_item_header_name,
.popular_work_wrapper_item:hover .popular_item_text,
.popular_work_wrapper_item:hover .popular_item_footer_price,
.popular_work_wrapper_item:hover .popular_item_footer_data,
.popular_work_wrapper_item:hover .popular_item_list_item {
color: #2F2F2F; /* Темный текст */
}
}
.popular_work_wrapper a{
text-decoration: none;
}
/* Стили для изменения цвета подложек при наведении на карточку */
.popular_work_wrapper_item:hover .popular_item_main_tags_item {
background: #FFF; /* Белый фон подложки */
color: #2F2F2F; /* Темный текст */
}
/* Стили для изменения цвета hit при наведении на карточку */
.popular_work_wrapper_item:hover .popular_item_header_hit {
color: #BAC76B; /* Темный текст */
}
.popular_work_wrapper_item--green {
background: #FFDD2D;
}
.popular_work_wrapper_item--blue {
background: #d3d4db;
}
.popular_work_wrapper_item--first {
grid-column: 1/3;
}
.popular_work_wrapper_item--second {
grid-column: 2/4;
}
.popular_item_header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
}
.popular_item_header_name {
color: #2F2F2F; /* Белый текст */
font-size: 24px;
font-weight: 500;
line-height: normal;
}
.popular_work_wrapper_item{ --pad:32px; position: relative; }
.popular_hit_badge{
position: absolute;
top: 0; /* игнорируем внутренние отступы */
right: 0;
pointer-events: none;
}
@media screen and (max-width: 1200px) {
.popular_hit_badge{
height: 50px;
}
}
@media screen and (max-width: 433px) {
.popular_hit_badge{
height: 0px;
}
}
.popular_item_footer {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: auto;
}
.popular_item_footer_price {
color: #2F2F2F; /* Белый текст */
font-size: 20px;
font-weight: 500;
line-height: normal;
white-space: nowrap;
}
.popular_item_footer_data {
color: #2F2F2F; /* Белый текст */
font-size: 15px;
font-weight: 400;
line-height: 150%;
white-space: nowrap;
text-decoration: underline;
}
.popular_item_main {
display: flex;
flex-direction: column;
gap: 20px;
}
.popular_item_text {
color: #2F2F2F; /* Белый текст */
font-size: 18px;
line-height: 150%;
}
@media (max-width: 1200px) {
.popular_item_text {
font-size: 16px;
}
}
.popular_item_main_tags{
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.popular_item_main_tags_item{
padding: 5px 16px;
border-radius: 32px;
background: #f0f0f0;
color: #2F2F2F;
font-size: 18px;
font-weight: 400;
line-height: 140%;
}
.popular_work_wrapper_item--green .popular_item_main_tags_item{
background: #ffffff;
}
.popular_work_wrapper_item:hover .popular_item_main_tags_item{
background: #FFF;
}
.popular_item_list{
display: flex;
flex-direction: column;
gap: 20px;
}
.popular_item_list_item{
color: #2F2F2F;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
position: relative;
}
@media screen and (max-width: 768px) {
.popular_item_footer_price {
color: #2F2F2F; /* Белый текст */
font-size: 17px;
}
.popular_item_header_name, .popular_item_header_hit {
font-size: 17px;
}
.popular_item_text{
font-size: 13px;
}
.popular_item_list_item, .popular_item_main_tags_item {
font-size: 13px;
}
.popular_work__container {
margin-top: 160px;
margin-bottom: 40px;
}
}
@media(max-width: 768px) {
.popular_work_wrapper {
grid-template-columns: repeat(2, 1fr);
}
.popular_work_wrapper_item--first, .popular_work_wrapper_item--second {
grid-column: 1/3;
}
.popular_work_wrapper_item--second {
grid-row: 3/4;
}
.popular_work {
margin-bottom: 70px;
}
}
@media(max-width: 576px) {
.popular_work {
margin-bottom: 20px;
}
.popular_work_wrapper {
grid-template-columns: 1fr;
}
.popular_work_wrapper_item {
grid-column: 1/2;
}
.popular_work_wrapper_item--second {
grid-row: 3/4;
}
.reviews {
margin-bottom: 70px;
}
.reviews_item {
padding-left: 30px;
padding-right: 30px;
}
.swiper-button-next, .swiper-button-prev {
display: none;
}
.swiper-pagination {
display: block;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: -28px;
}
}
@media(max-width: 1200px) {
.popular_work {
margin-bottom: 50px;
margin-top: 60px;
padding-left: 20px;
padding-right: 20px;
}
}
/* =========================================================
Основная секция
========================================================= */
/* =========================================================
Основная секция
========================================================= */
.contact-form-section {
background-size: cover;
background-position: center;
padding: 60px 120px;
color: #333;
}
.contact-form-section .container-f {
max-width: 800px;
margin: 0 auto;
text-align: left;
}
.contact-form-description {
font-size: 18px;
margin: 20px 0 40px;
max-width: 700px;
}
.title-f {
margin-bottom: 20px;
}
/* =========================================================
Форма и шаги
========================================================= */
.custom-contact-form {
background: #fff;
padding: 40px;
border-radius: 24px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
position: relative;
height: 480px; /* фиксированная высота для шагов */
display: flex;
flex-direction: column;
}
.custom-contact-form .form-step {
display: none;
}
.custom-contact-form .form-step.active {
display: flex;
flex-direction: column;
height: 100%;
}
.form-step-header {
text-align: right;
margin-bottom: 20px;
color: #999;
}
.form-step-count { font-size: 14px; }
.form-step-title {
font-size: 24px;
margin-bottom: 10px;
font-weight: 400;
margin-top: 0;
}
.form-step-text {
font-size: 16px;
color: #666;
margin-bottom: 20px;
margin-left: 0;
}
@media(max-width: 1200px) {
.form-step-text{
font-size: 16px;
}
}
/* =========================================================
Поля ввода и textarea
========================================================= */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
width: calc(100% - 30px);
padding: 18px 15px;
margin-bottom: 20px;
border: 1px solid transparent;
background-color: #F8F8F8;
border-radius: 12px;
font-size: 18px;
transition: border 0.3s;
outline: none;
resize: vertical;
}
.custom-contact-form input:focus,
.custom-contact-form textarea:focus {
border: 1px solid #ccc;
}
@media(max-width: 1200px) {
.custom-contact-form input[type="text"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
font-size: 16px;
}
}
.custom-contact-form textarea{
height: 100%;
margin-bottom: 40px;
}
/* =========================================================
Кнопки «Далее» и «Отправить»
========================================================= */
.form-next-button,
.form-submit-button {
background-color: #2F2F2F;
color: #fff;
padding: 18px 30px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
width: 100%;
margin-top: auto; /* прижимает кнопку к низу шага */
}
.form-next-button:hover,
.form-submit-button:hover {
background-color: #FFDD2D;
color: #2f2f2f;
}
.form-next-button:disabled,
.form-submit-button:disabled {
background-color: #D8D8D8;
cursor: not-allowed;
}
/* =========================================================
Кастомный чекбокс
========================================================= */
.checkbox-wrapper-29 {
--size: 1rem;
--background: #ffffff;
font-size: var(--size);
line-height: 1.4;
}
.checkbox-wrapper-29 *,
.checkbox-wrapper-29 *::before,
.checkbox-wrapper-29 *::after {
box-sizing: border-box;
}
/* сам лейбл — блочный элемент с отступом слева под иконку */
.checkbox-wrapper-29 .checkbox {
display: block;
position: relative;
padding-left: calc(var(--size) * 1.8); /* ширина квадрата + отступ */
cursor: pointer;
color: inherit;
text-decoration: none;
white-space: normal; /* позволяем переносить текст по словам */
}
/* скрываем родной чекбокс */
.checkbox-wrapper-29 input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* квадрат-фон */
.checkbox-wrapper-29 .checkbox__label:before {
content: '';
position: absolute;
top: calc((1.4rem - var(--size)) / 2); /* вертикально по центру строки */
left: 0;
width: var(--size);
height: var(--size);
background: var(--background);
}
/* рамка и галочка */
.checkbox-wrapper-29 .checkbox__label:after {
content: '';
position: absolute;
top: calc((1.4rem - var(--size)) / 2);
left: 0;
width: var(--size);
height: var(--size);
border: calc(var(--size) * .14) solid #000;
transition: 100ms ease-in-out;
background: var(--background);
}
.checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label:after {
border-top-style: none;
border-right-style: none;
transform: rotate(-45deg);
height: calc(var(--size) * .5);
border-color: #000;
}
/* ссылка — обычный inline, без nowrap */
.checkbox-wrapper-29 a {
color: inherit;
text-decoration: underline;
white-space: normal;
}
/* =========================================================
Адаптив
========================================================= */
@media(max-width: 1200px) {
.contact-form-section { padding: 40px 20px 60px; }
.custom-contact-form { padding: 20px; }
.form-step-title { font-size: 20px; }
.form-step-count { font-size: 12px; }
}
.checkbox{
font-size: 12px;
padding-top: 2px;
}
@media screen and (max-width: 768px) {
.checkbox-wrapper-29{
margin-bottom: 10px;
}
}
.title-section__title-with-icons {
display: inline-flex;
align-items: center;
gap: 20px; /* Отступ между заголовком и иконками */
}
.social-icons {
display: flex;
gap: 8px; /* Отступы между иконками */
}
.icon {
display: block;
width: 38px;
height: 38px;
background-image: url('img/soc-cet-icons.svg');
background-repeat: no-repeat;
background-size: auto;
}
/* Позиции иконок в спрайте */
.icon-dzen {
background-position: 0 0;
}
.icon-telegram {
background-position: 0 -38px;
}
.icon-vc {
background-position: 0 -76px;
}
.icon-vk {
background-position: 0 -114px;
}
.title-soc{
margin-bottom: 0;
}
@media (max-width: 600px) {
.title-section__title-with-icons {
display: block;
}
.social-icons {
margin-top: 10px;
}
}
.icon:hover {
filter: brightness(0.9);
}
/* Общие стили футера */
.site-footer {
padding: 60px 120px 0px 120px;
font-family: sans-serif;
font-size: 16px;
color: #333;
}
.footer-container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-column {
flex: 1;
min-width: 220px;
margin-bottom: 20px;
}
/* Логотип */
.footer-logo img {
width: 200px;
height: auto;
margin-bottom: 32px;
transition: filter 0.2s; /* плавный переход */
}
.footer-logo img:hover {
filter: brightness(1.7);
}
.footer-logo {
margin: 0;
text-align: left;
}
.footer-logo p{
margin: 0;
}
/* Ссылки */
.footer-links-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.footer-links-row a {
margin-right: 40px;
color: #333;
text-decoration: none;
transition: color .3s;
}
.footer-links-row a:hover {
color: #E6B92A;
}
/* Контакты */
.footer-contact .contact-row {
display: flex;
align-items: center;
margin-bottom: 13px;
}
.footer-contact .contact-row img {
margin-right: 8px;
}
.footer-contact .contact-text {
margin-right: 20px;
color: #333;
text-decoration: none;
transition: color .3s;
}
.footer-contact .contact-text:hover {
color: #E6B92A;
}
.mail-link{
margin-left: 80px ;
}
/* Адаптивность */
@media (min-width: 1600px) {
.footer-links-row a{
margin-right: 100px;
}
}
@media (max-width: 1200px) {
.site-footer {
padding: 0px 20px 0px 20px;
font-size: 14px;
}
}
@media (max-width: 854px) {
.footer-container {
flex-direction: column;
align-items: left;
}
.footer-column {
text-align: left;
}
.footer-links-row,
.contact-row {
justify-content: left;
}
.site-footer {
padding: 0px 20px 0px 20px;
font-size: 14px;
}
.footer-links-row a{
margin-right: 20px;
}
.footer-logo img {
margin-bottom: 10px;
transition: color .3s;
}
.footer-logo{
margin-bottom: 40px;
}
.footer-links-row{
margin-bottom: 20px;
}
}
.footer-logo { flex: 0 0 30%; }
.footer-links { flex: 0 0 47%; }
.footer-contact { flex: 0 0 23%; }
@media (max-width: 1400px) {
.footer-logo { flex: 0 0 27%; }
.footer-links { flex: 0 0 42%; }
.footer-contact { flex: 0 0 30%; }
}
/* Эффект подсветки иконок */
.footer-contact .contact-row a:hover img {
filter: brightness(1.5);
transition: filter 0.2s ease-in-out;
}
/* 1) Общие стили для хедера */
.site-header {
width: 100%;
transition: transform 0.3s ease;
}
/* 2) Когда он «прилипает» после прокрутки выше его высоты */
.site-header.sticky {
position: fixed;
top: 0;
left: 0;
z-index: 1003;
/* изначально спрятан */
transform: translateY(-100%);
}
/* 3) Видимый/скрытый состояния */
.site-header.sticky.visible {
transform: translateY(0);
}
.site-header.sticky.hidden {
transform: translateY(-100%);
}
.site-header.menu-open {
display: none;
}
.page-portfolio{
margin-bottom: 80px;
}
/* ----------------------------------
Общие контейнеры
---------------------------------- */
.container-portfolio-page2 {
padding-left: 120px;
padding-right: 120px;
}
/* ----------------------------------
Кнопка «Назад»
---------------------------------- */
.portfolio-single__back {
display: inline-flex;
align-items: center;
margin-bottom: 30px;
color: #2F2F2F;
text-decoration: none;
font-weight: 400;
}
.portfolio-single__back-icon {
width: 16px;
height: auto;
margin-right: 0.5em;
display: block;
}
.portfolio-single__back:hover {
text-decoration: underline;
}
/* ----------------------------------
Заголовок
---------------------------------- */
.portfolio-h1 {
margin: 0 0 40px;
}
/* ----------------------------------
Основное изображение
---------------------------------- */
.portfolio-single__image--main img {
display: block;
width: 100%;
height: auto;
border-radius: 32px;
object-fit: cover;
margin-bottom: 60px;
}
/* ----------------------------------
Блок «Задача + Результат»
---------------------------------- */
.portfolio-single__info-wrapper {
display: flex;
align-items: flex-start;
gap: 60px;
margin-bottom: 60px;
}
.portfolio-single__side-image {
flex: 0 0 auto;
max-width: 250px;
}
.portfolio-single__side-image img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.portfolio-single__text-block {
flex: 1 1 auto;
}
.portfolio-single__heading {
font-weight: 400;
font-size: 32px;
margin: 0 0 0.5em;
}
.portfolio-single__text {
max-width: 900px;
margin-bottom: 80px;
line-height: 1.6;
}
/* ----------------------------------
Бегущая карусель
---------------------------------- */
.portfolio-single__gallery {
width: 100%;
overflow: hidden;
position: relative;
}
.portfolio-single__marquee {
display: flex;
gap: 1em;
animation: marquee 40s linear infinite;
will-change: transform;
}
.portfolio-single__gallery-item img {
display: block;
border-radius: 32px;
height: 500px;
}
.portfolio-single__marquee{
margin-bottom: 60px;
}
.work-port2{
margin-bottom: 60px;
}
/* Анимация прокрутки на ровно половину ширины (первый клон) */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-192%); }
}
/* ----------------------------------
Адаптив (мобилка)
---------------------------------- */
@media (max-width: 1200px) {
.container-portfolio-page2 {
padding: 0 20px;
margin-top: 60px;
}
.portfolio-single__image--main img {
border-radius: 16px;
margin-bottom: 20px;
}
.portfolio-single__back {
margin-top: 40px;
}
.portfolio-h1 {
margin-bottom: 20px;
}
.portfolio-single__heading {
margin: 10px 0 20px;
font-size: 24px;
}
.portfolio-single__text {
margin-bottom: 40px;
font-size: 14px;
}
.portfolio-single__text p{
margin: 0;
}
.portfolio-single__gallery-item img {
border-radius: 16px;
height: 170px;
}
/* Скрываем боковую иллюстрацию на мобильных */
.portfolio-single__info-wrapper {
flex-direction: column;
margin-bottom: 0;
}
.portfolio-single__side-image {
display: none;
}
.portfolio-single__marquee{
margin-bottom: 0px;
}
.work-process__cards a{
text-decoration: none;
}
}
.work-process__btn {
display: inline-block;
padding: 12px 184px;
font-size: 16px;
color: #2F2F2F;
border: 1px solid #2F2F2F;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 6px;
text-decoration: none;
}
.work-process__btn:hover {
background: #2F2F2F;
color: #fff;
}
@media (max-width: 1200px) {
.work-process__btn {
padding: 12px 0;
width: 100%;
}
.all-work-page-h1 {
margin-top: 40px;
}
}
.services_page {
margin-top: 80px;
padding-left: 120px;
padding-right: 120px;
}
.popular_work__container2{
margin-bottom: 100px;
}
.title_page{
margin-bottom: 40px;
}
._container_portfolio_page{
padding: 0;
}
@media (max-width: 1200px) {
.services_page {
margin-top: 60px;
padding-left: 20px;
padding-right: 20px;
}
.popular_work__container2{
margin-top: 100px;
margin-bottom: 100px;
}
}
.thank {
height: calc(100vh - 396px);
}
@media (max-width: 1474px) {
.thank {
height: 100vh;
}
}
@media (max-width: 768px) {
.thank {
height: calc(100vh - 420px);
}
}
.thank-p{
margin: 0;
}
/* ===== Контейнер и сетка ===== */
.news-container {
padding: 0 120px;
margin: 80px auto;
max-width: 1920px;
}
/* 3 колонки + "прокладка" между 2 и 3 */
.news-grid-3cols {
--gap: 100px; /* обычные промежутки */
--gap-23: 100px; /* увеличенный отступ между 2-й и 3-й колонкой */
display: grid;
grid-template-columns: 1fr 1fr var(--gap-23) 1fr; /* 3-й трек — пустой зазор */
column-gap: var(--gap);
row-gap: var(--gap);
align-items: start;
}
/* Раскладка секций */
.news-col--left { grid-column: 1; }
.news-col--middle { grid-column: 2; }
.news-col--articles { grid-column: 4; }
.news-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.news-col-title {
margin: 0 0 8px;
font-size: 32px;
font-weight: 500;
color: #2F2F2F;
}
/* ===== Карточка ===== */
.news-card {
background: #F8F8F8; /* базовый фон (статьи) */
border: 1px solid #FFFFFF;
border-radius: 32px;
transition: background .3s, border-color .3s, box-shadow .3s;
display: flex;
flex-direction: column;
height: auto; /* НЕ растягиваем */
}
.news-card a {
display: block;
text-decoration: none;
height: auto; /* НЕ растягиваем */
}
.news-card h2 {
font-size: 24px;
color: #2F2F2F;
font-weight: 400;
padding: 20px 20px 8px;
margin: 0;
}
.news-card p {
color: #555;
padding: 0 20px 12px;
margin: 0;
font-size: 16px;
line-height: 1.5;
}
/* Кнопка в карточке */
.read-more { display: none; }
/* ===== Различия: НОВОСТИ ===== */
.news-card--news { background: #FFF;
margin-bottom: 80px;
}
/* Превью у новостей фикс. пропорции и своё скругление */
.news-card--news .news-thumb {
position: relative;
width: 100%;
overflow: hidden; /* чтобы скругление работало */
border-radius: 12px;
/* ВАЖНО: без aspect-ratio */
}
.news-card--news .news-thumb img {
display: block;
width: 100%;
height: auto; /* ключевое: никакого 100% */
object-fit: initial;/* на всякий случай убираем cover */
}
/* Кнопка "Подробнее" всегда видна у новостей */
.news-card--news .read-more {
display: flex !important;
align-items: center;
gap: 8px;
color: #E6B92A;
font-size: 16px;
font-weight: 400;
padding: 0 20px 40px 0px;
opacity: 1 !important;
transform: none !important;
}
/* ===== Различия: СТАТЬИ ===== */
/* Превью у статей — как было: естественная высота, верхние углы 32px */
.news-card--article .news-thumb {
position: relative;
width: 100%;
overflow: visible;
border-radius: 32px 32px 0 0; /* как раньше */
}
.news-card--article .news-thumb img {
width: 100%;
height: auto; /* НЕТ фиксированной высоты */
display: block;
}
/* На десктопе у статей "Читать" всплывает на ховере */
@media (min-width: 768px) {
.news-card--article:hover {
border-color: #E6B92A;
background: #FFF;
}
.news-card--article .read-more {
display: flex;
align-items: center;
gap: 8px;
color: #E6B92A;
font-size: 16px;
font-weight: 400;
opacity: 0;
transform: translateY(10px);
transition: all .3s ease;
padding: 0 20px 20px 20px;
text-align: right;
}
.news-card--article:hover .read-more {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Мобилка (раздельные списки) ===== */
.news-mobile { display: none; }
.news-mobile-section { margin-bottom: 32px; }
.news-mobile-head {
display:flex; align-items:center; justify-content:space-between;
margin: 8px 0 12px;
}
.news-mobile-head h2 {
margin: 0;
font-size: 24px;
color: #2F2F2F;
font-weight: 500;
margin-bottom: 20px;
}
.news-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.btn-more {
display: inline-block;
margin: 20px auto 40px;
border: 1px solid #2F2F2F;
background:#fff;
border-radius: 6px;
padding: 12px 16px;
cursor:pointer;
font-size: 14px;
width: 100%;
}
.btn-more:disabled { opacity:.6; cursor: default; }
.news-loader {
text-align:center;
margin: 16px 0;
font-size: 14px;
color: #777;
}
.news-card--article .news-thumb img { border-radius: 32px 32px 0 0; }
@media (max-width: 1500px) {
.news-grid-3cols {
--gap: 50px;
--gap-23: 30px;}
.news-card--news{
margin-bottom: 40px;
}
}
/* ===== Адаптив ===== */
@media (max-width: 1200px) {
.news-card--news .read-more {
padding: 0 20px 20px 0px;
}
.news-container {
padding: 0 20px;
margin-top: 100px;
}
.news-card h2 { font-size: 20px; }
.news-card p { font-size: 14px; }
}
@media (max-width: 1024px) {
.news-grid-3cols {
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
.news-col--left,
.news-col--middle,
.news-col--articles { grid-column: auto; }
.news-col--articles { grid-column: span 2; } /* статьи на всю ширину под новостями */
}
@media (max-width: 768px) {
.news-grid-3cols { display: none; }
.news-mobile { display: block; margin-top: 0px; }
}
.news-card--news h2 { padding-left: 0; padding-right: 0; }
.news-card--news p { padding-left: 0; padding-right: 0; }
/* Метадата для НОВОСТЕЙ (дата над картинкой) */
.news-card--news .news-meta {
font-size: 13px;
color: #8A8A8A;
margin: 0 0 8px 0;
padding: 0; /* без боковых отступов, как просил */
line-height: 1.3;
}
.news-card--news .news-meta time {
display: inline-block;
}
.news-card {width: 100%;}
.single-wrapper {
display: flex;
justify-content: space-between;
gap: 40px;
margin: 0 auto;
padding: 0px 120px;
}
/* Основная часть */
.single-post-container {
flex: 1 1 70%;
padding-right: 40px;
}
/* Sidebar */
.single-sidebar {
flex: 1 1 25%;
display: none; /* по умолчанию скрыт */
}
.single-sidebar h3 {
font-size: 24px;
margin-bottom: 20px;
font-weight: 400;
color: #2F2F2F;
}
.sidebar-news-card {
margin-bottom: 20px;
border: 1px solid #ffffff;
border-radius: 16px;
overflow: hidden;
background: #F9F9F9;
transition: 0.3s;
}
.sidebar-news-card:hover {
background: #FFF;
border-color: #B1CE00;
}
.sidebar-news-card a {
text-decoration: none;
color: #2F2F2F;
display: block;
}
.sidebar-thumb img {
width: 100%;
height: auto;
display: block;
border-radius: 8px 0 0;
}
.single-thumb img{
width: 100%;
height: 100%;
border-radius: 32px;
margin-bottom: 40px;
}
.wp-block-image img{
border-radius: 32px;
width: 100%;
}
.sidebar-news-card h4 {
font-size: 16px;
margin: 20px;
font-weight: 400;
}
.single-content p{
margin-bottom: 40px;
margin-top: 20px;
line-height: 140%; /* 21px */
}
.single-content a {
color: #859900;
}
/* Показываем sidebar только на больших экранах */
@media (min-width: 1400px) {
.single-sidebar {
display: block;
}
}
.back-to-blog {
margin-bottom: 30px;
}
.back-to-blog a {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #2F2F2F;
font-size: 16px;
font-weight: 400;
transition: color 0.3s ease;
}
.back-to-blog a img {
width: 16px;
height: 16px;
}
.back-to-blog a:hover {
text-decoration: underline;
}
.blog-title-pg{
margin-top: 0;
}
@media (max-width: 1200px) {
.single-wrapper {
padding: 0px 20px;
margin-top: 100px;
}
.single-post-container{
padding-right: 0;
}
.blog-title-pg{
margin-bottom: 20px;
}
.single-thumb img{
border-radius: 16px;
height: 100%;
margin-bottom: 20px;
}
.single-content p{
margin: 10px 0 20px 0;
}
.wp-block-image img{
border-radius: 16px;
}
}
/* --- мультистраница/sidebar --- */
/* 1) Скрываем мобильный блок по умолчанию */
.sidebar-mobile {
display: none;
margin: 40px auto;
/* по умолчанию тот же паддинг что у .single-wrapper */
padding: 0 120px;
}
/* 2) Показываем его только на экранах меньше 1400px */
@media (max-width: 1399px) {
.sidebar-mobile {
display: block;
}
/* Стек для .single-wrapper */
.single-wrapper {
display: flex;
flex-direction: column;
}
.sidebar-mobile-title{
font-weight: 400;
font-size: 24px;
margin-top: 60px;
}
.sidebar-thumb img{
height: 103px;
width: 272px;
}
.sidebar-news-card{
width: 272px;
min-height: 240px;
}
}
/* 3) Подгоняем паддинги под уже имеющуюся логику */
/* На <1200px у .single-wrapper padding:0 20px */
@media (max-width: 1199px) {
.sidebar-mobile {
padding: 0 20px;
margin-top: 20px;
}
}
/* Если вдруг захочется явно скрыть на >=1400 */
@media (min-width: 1400px) {
.sidebar-mobile {
display: none;
}
}
/* Swiper-перекрытия */
.sidebar-news-mobile {
overflow: hidden;
}
.sidebar-news-mobile .swiper-wrapper {
display: flex;
}
.sidebar-news-mobile .swiper-slide {
width: auto; /* slide по ширине контента */
flex-shrink: 0;
}
/* ------------------
Share Button & Modal
------------------ */
.share-container {
text-align: left;
margin: 40px 0;
}
.share-button {
display: inline-flex;
align-items: center;
gap: 8px; /* расстояние между иконкой и текстом */
background: #2F2F2F;
color: #ffffff;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background .3s;
}
.share-button:hover {
background: #E6B92A;
}
.share-button .share-icon {
width: 20px;
height: 20px;
display: block;
}
/* Модальное окно */
.share-modal {
display: none; /* скрыто по умолчанию */
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9999;
align-items: center;
justify-content: center;
}
.share-modal-content {
background: #fff;
padding: 24px;
width: 90%;
max-width: 400px;
border-radius: 12px;
position: relative;
text-align: left;
margin-left: 10px;
margin-right: 10px;
}
.share-close {
position: absolute;
top: 12px; right: 12px;
font-size: 24px;
cursor: pointer;
color: #888;
}
.share-close:hover {
color: #333;
}
.share-title {
margin-top: 0;
font-size: 20px;
color: #2F2F2F;
font-weight: 400;
}
.share-link {
display: flex;
gap: 8px;
margin: 16px 0;
}
.share-link input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.copy-button {
padding: 8px 12px;
background: #2F2F2F;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: background .3s;
}
.copy-button:hover {
background: #444;
}
.share-icons {
display: flex;
gap: 12px;
justify-content: left;
flex-wrap: wrap;
}
.share-icons a img {
width: 32px;
height: 32px;
display: block;
}
.service-page{
padding: 0 120px;
}
.service-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 40px;
}
.service-header__image {
max-width: 65%;
}
.service-header__image img {
max-width: 100%;
height: auto;
display: block;
}
.service-header__content {
max-width: 50%;
}
@media (min-width: 1200px) {
.service-header__image img {
border-radius: 24px;
}
}
@media (max-width: 1570px) {
.service-header__image {
max-width: 40%;
}
}
@media (max-width: 1440px) {
.service-header__image {
max-width: 50%;
}
}
/* Мобильная версия */
@media (max-width: 1200px) {
.contact-form-description {
font-size: 14px;
}
.service-header {
flex-direction: column;
text-align: left;
}
.service-header__content{
max-width: 100%;
}
.service-header__image {
order: -1; /* Переносим картинку наверх */
margin-bottom: 20px;
margin-top: 100px;
width: 100%;
max-width: 100%;
}
.service-header__image img{
max-width: 100%;
width: 100%;
}
.service-page{
padding: 0;
}
.title_page{
margin-bottom: 20px;
}
.hero-shab {
margin-top: 20px;
}
}
/* Основной контейнер */
.color-tool {
display: flex;
gap: 30px;
align-items: flex-start;
}
/* Палитра */
.color-palette {
width: 300px;
}
/* Блок с полем и превью */
.color-input-block {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.color-preview {
width: 114px;
height: 40px;
border: 1px solid #ccc;
margin-right: 10px;
background-color: #DDE992;
cursor: default;
border-radius: 16px;
}
.color-input {
padding: 5px 10px;
border: 1px solid #ccc;
width: 100px;
font-family: monospace;
font-size: 18px;
}
/* Кнопки */
.color-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
min-width: 250px;
}
.color-buttons button {
padding: 12px 12px;
border: none;
background-color: #2F2F2F;
color: #fff;
cursor: pointer;
transition: background 0.3s;
border-radius: 16px;
font-size: 14px;
}
.color-buttons button:hover {
background-color: #474747;
}
/* Результаты */
.result-colors {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.result-colors .copy-color {
text-align: center;
cursor: pointer;
}
.result-colors .copy-color div:first-child {
width: 40px;
height: 40px;
border: 1px solid #ccc;
margin: 0 auto;
border-radius: 4px;
}
.result-colors .copy-color div:last-child {
font-size: 12px;
margin-top: 5px;
font-family: monospace;
user-select: none;
}
/* Toast уведомление */
.toast-message {
position: fixed;
bottom: 20px;
right: 20px;
background: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
opacity: 0.9;
z-index: 9999;
font-size: 14px;
}
.color-instruct {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 80px;
}
.color-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.color-icon {
width: 160px;
height: auto;
flex-shrink: 0;
padding-right: 40px;
padding-bottom: 40px;
}
.color-h3{
font-size: 24px;
margin-left: 0;
margin-right: 0;
}
.color-p {
margin: 20px 0 40px 0;
max-width: 800px;
}
.docs-load{
max-width: 300px;
border: 1px solid #2F2F2F;
text-decoration: none;
color: #2F2F2F;
padding: 12px 32px;
border-radius: 16px;
}
.docs-load:hover{
background-color: #2F2F2F;
text-decoration: none;
color: #ffffff;
}
.color-icon2 {
width: 140px;
}
@media (max-width: 768px) {
.color-tool {
flex-direction: column;
}
.docs-load{
margin-bottom: 40px;
}
.doc-item{
margin-bottom: 30px;
}
.color-h3{
font-size: 18px;
margin-bottom: 8px;
}
.color-p{
font-size: 14px;
margin-top: 0;
}
.color-icon {
width: 80px;
padding-right: 20px;
padding-bottom: 20px;
}
.color-icon2 {
width: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 20px;
}
.color-palette {
width: 100% !important;
max-width: 300px;
}
.color-buttons button{
width: 100%;
max-width: 100%;
min-width: 100%;
}
.color-controls{
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
@media (min-width: 1200px) {
.submenu li {
padding-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.submenu li:first-child {
padding-top: 30px;
}
.submenu {
background-color: #fff;
border-radius: 16px;
}
}
.calculator-container {
margin: 0 auto;
padding: 0 120px;
min-height: calc(100vh - 396px);
}
.calculator-label {
display: block;
margin: 10px 0 5px;
font-weight: 400;
}
.calculator-input {
font-size: 16px;
max-width: 400px;
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 16px;
min-height: 25px;
}
.calculator-description{
max-width: 800px;
margin-bottom: 40px;
margin-left: 0;
margin-right: 0;
}
.calc-block h2 {
font-weight: 400;
}
.calc-block p {
margin: 20px 0;
}
.calculator-button {
max-width: 400px;
min-height: 50px;
width: 100%;
padding: 12px;
background-color: #2F2F2F;
color: #fff;
border: none;
border-radius: 16px;
cursor: pointer;
transition: background 0.3s;
margin-bottom: 60px;
font-size: 16px;
}
.calculator-button:hover {
background-color: #474747;
}
.calculator-result {
margin-top: 20px;
font-size: 18px;
text-align: left;
margin-bottom: 100px;
}
.qr-button {
max-width: 300px;
min-height: 50px;
width: 100%;
padding: 12px;
background-color: #FFDD2D;
color: #2f2f2f;
border: none;
border-radius: 16px;
cursor: pointer;
transition: background 0.3s;
margin-bottom: 60px;
margin-top: 20px;
font-size: 16px;
}
.qr-button:hover {
color: #fff;
background-color: #2f2f2f;
}
@media (max-width: 1200px) {
.calculator-container {
padding: 0 20px;
margin-top: 100px;
}
.calc-block h2 {
font-size: 18px;
}
.calc-block p {
font-size: 14px;
}
.calculator-input {
width: calc(100% - 25px);
}
.qr-button {
max-width: 100%;
}
.qr-result {
display: flex;
justify-content: center;
align-items: center;
}
/* Опционально: ограничить ширину SVG/IMG и центрировать его */
.qr-result svg,
.qr-result img {
max-width: 100%;
height: auto;
}
/* Применить только на экранах до 600px (мобильные) */
@media (max-width: 600px) {
.qr-result {
/* если нужно, можно добавить ещё отступы сверху/снизу */
padding: 10px 0;
}
}
}
::selection {
background: #FFDD2D;
color: #000000; /* Цвет текста при выделении, можно изменить под дизайн */
}
/* Для Firefox (необязательно, но можно добавить для совместимости) */
::-moz-selection {
background: #FFDD2D;
color: #000000;
}
.policy-content p{
margin-left: 0;
margin-right: 0;
}
@media (max-width: 1400px) {
.clients__container1{
padding-left: 20px;
padding-right: 20px;
}
}
.services-404-wrapper {
display: flex;
align-items: left;
gap: 40px; /* Расстояние между картинкой и текстом */
flex-wrap: wrap; /* Чтобы на мобилке перестраивалось */
}
.services-404-image {
flex: 0 0 300px; /* Ширина блока с картинкой, можешь менять */
max-width: 100%;
}
.services-404-image img {
width: 100%;
max-width: 400px;
height: auto;
display: block;
}
.services__title-section {
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 768px) {
.services-404-wrapper {
flex-direction: column;
}
.pg404{
margin-bottom: 400px;
}
.services-404-image img {
width: 100%;
height: auto;
display: block;
}
}
@media (max-width: 400px) {
.pg404{
margin-bottom: 300px;
}
}
.faq-section {
margin: 0 120px 200px 120px;
}
.faq-section-main{
margin-top: 200px;
}
/* Общий блок "вопрос+ответ" */
.faq-box {
position: relative;
border-radius: 10px;
padding: 20px 0;
margin-bottom: 20px;
transition: background-color 0.3s;
}
/* При открытии можно чуть затемнить фон */
.faq-question[aria-expanded="true"] ~ .faq-answer,
.faq-question[aria-expanded="true"] {
}
/* Вопрос (без тени и рамок) */
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: 24px;
color: #2F2F2F;
text-align: left; /* Важно: выравнивание текста влево */
gap: 16px; /* Отступ между текстом и стрелкой */
}
/* Квадратик со стрелкой (визуально как в Swiper) */
/* Коробочка */
.faq-question__arrow {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px #767676;
transition: background-color 0.3s, box-shadow 0.3s;
}
@media (min-width: 1200px) {
/* Ховер по коробочке */
.faq-question__arrow:hover {
background: #FFDD2D;
box-shadow: none;
}
}
/* Стрелка внутри (SVG чеврон, как у swiper) */
.faq-question__arrow::after {
content: "";
display: block;
width: 14px;
height: 14px;
background: no-repeat center/contain
url("data:image/svg+xml;utf8,");
transform: rotate(90deg);
transition: transform 0.3s ease, filter 0.3s;
}
/* Когда вопрос открыт — поворот */
.faq-question[aria-expanded="true"] .faq-question__arrow::after {
transform: rotate(-90deg);
}
/* Ответ */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
font-size: 18px;
max-width: 1000px;
}
.faq-question[aria-expanded="true"] + .faq-answer {
max-height: 1000px;
}
.faq-list {
list-style: none;
padding: 0;
margin: 0;
}
/* Разделительная линия снизу */
.faq-box::after {
content: '';
display: block;
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background-color: #ddd;
}
/* Убираем линию у последнего */
.faq-item:last-child .faq-box::after {
display: none;
}
@media (max-width: 1200px) {
.faq-section {
margin: 0 20px 80px 20px;
}
.faq-section-main{
margin-top: 80px;
}
.faq-question {
font-size: 18px;
}
.faq-answer{
font-size: 14px;
margin-left: 0;
}
.faq-answer p {
margin-left: 0;
}
}
.short p, .long p {
line-height: 140%; /* 19.6px */
}
.wp-block-list li {
margin-bottom: 20px;
}
.reveal {
--reveal-dur: .6s;
--reveal-ease: cubic-bezier(.22,.61,.36,1);
--reveal-transform: translateY(24px);
opacity: 0;
transform: var(--reveal-transform);
transition:
opacity var(--reveal-dur) var(--reveal-ease),
transform var(--reveal-dur) var(--reveal-ease);
will-change: opacity, transform;
visibility: hidden; /* чтобы не мигало до старта */
}
.reveal.is-visible {
opacity: 1;
transform: none;
visibility: visible;
}
/* направления (по желанию) */
.reveal[data-reveal="up"] { --reveal-transform: translateY(24px); }
.reveal[data-reveal="down"] { --reveal-transform: translateY(-24px); }
.reveal[data-reveal="left"] { --reveal-transform: translateX(24px); }
.reveal[data-reveal="right"] { --reveal-transform: translateX(-24px); }
.reveal[data-reveal="fade"] { --reveal-transform: none; }
.reveal[data-reveal="zoom"] { --reveal-transform: scale(.96); }
/* временно отключи это, если подозреваешь Reduce Motion
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none; transform: none; opacity: 1; visibility: visible; }
}
*/
@media (max-width: 425px) {
.sp-card::before{
top: auto !important; /* перестаем растягивать по всей высоте */
bottom: 0 !important; /* прижимаем к низу */
height: 150px !important; /* высота маски на мобиле */
background-position: right bottom !important;
background-size: auto 100% !important; /* подгоняем по высоте, сохраняем пропорции */
}
.sp-card__text {
max-width: calc(100% - 90px) !important;
}
}
.popular_work_wrapper_item--blue {
background-color: #333;
}
.popular_item_text2 {
color: #FFF;
}
.popular_work_wrapper_item--blue {
position: relative; /* нужно, чтобы псевдоэлемент позиционировался внутри карточки */
overflow: hidden; /* чтобы ничего не вылезало за границы */
}
.popular_work_wrapper_item--blue::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
right: -100px;
height: 240px; /* регулируй под размер изображения */
background: url("img/Mask group4.webp") no-repeat center bottom;
background-size: contain; /* или cover — если нужно растянуть */
pointer-events: none; /* чтобы клик проходил по ссылке */
}
@media (max-width: 1540px) {
.popular_work_wrapper_item--blue::after {
bottom: -80px;
}
}
@media (max-width: 1523px) {
.popular_work_wrapper_item--blue::after {
bottom: -100px;
}
}
@media (max-width: 768px) {
.popular_work_wrapper_item--blue::after {
bottom: -80px;
right: -100px;
height: 200px; /* регулируй под размер изображения */
}
}
@media (max-width: 576px) {
.popular_work_wrapper_item--blue::after {
bottom: 0px;
top: -30px;
right: -410px;
height: 90px; /* регулируй под размер изображения */
}
}
@media (max-width: 522px) {
.popular_work_wrapper_item--blue::after {
bottom: 0px;
top: -30px;
right: -320px;
height: 90px; /* регулируй под размер изображения */
}
}
@media (max-width: 438px) {
.popular_work_wrapper_item--blue::after {
bottom: 0px;
top: -30px;
right: -280px;
height: 90px; /* регулируй под размер изображения */
}
}
@media (max-width: 438px) {
.popular_work_wrapper_item--blue::after {
bottom: 0px;
top: -30px;
right: -240px;
height: 90px; /* регулируй под размер изображения */
}
}
.dark_block {
background-color: #ebebeb;
}
.shablonwebp {
max-width: 600px;
}
@media(max-width: 1200px) {
.shablonwebp {
display: none;
}
}
@media(max-width: 768px) {
.calc_row {
gap: 12px;
margin-bottom: 12px;
}
.block_full{
margin-bottom: 12px;
}
}
.tg-fixed {
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
align-items: center;
background: #ffffff;
box-shadow: 0 4px 18px rgba(0,0,0,0.1);
border-radius: 14px;
padding: 24px 36px 24px 24px;
z-index: 9999;
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* состояние "скрыто" — окно не видно и не кликабельно */
.tg-fixed.hidden {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
}
.tg-fixed__inner {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
}
.tg-fixed__icon {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.tg-fixed__text {
font-size: 18px;
line-height: 1.25;
color: #2F2F2F;
}
.tg-fixed__close {
position: absolute;
top: 4px;
right: 8px;
background: none;
border: none;
font-size: 26px;
color: #adadad;
cursor: pointer;
line-height: 1;
padding: 4px;
transition: color 0.2s;
}
.tg-fixed__close:hover {
color: #2F2F2F;
}
@media (max-width: 768px) {
.tg-fixed {
bottom: 20px;
right: 20px;
padding: 12px;
padding-right: 40px;
}
.tg-fixed__text {
font-size: 16px;
}
.tg-fixed__icon {
width: 52px;
height: 52px;
}
}