@font-face { font-family: "DrukTextWideCyr"; src: url("../fonts/druktextwidecyr-medium.d41d8cd98f00.eot"); src: url("../fonts/druktextwidecyr-medium.d41d8cd98f00.eot?#iefix") format("embedded-opentype"), url("../fonts/druktextwidecyr-medium.726388e387d6.woff2") format("woff2"), url("../fonts/druktextwidecyr-medium.d41d8cd98f00.woff") format("woff"), url("../fonts/druktextwidecyr-medium.cce0b322e0f5.ttf") format("truetype"), url("../fonts/druktextwidecyr-medium.123f5b43b533.svg#druktextwidecyr-medium") format("svg"); } html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; background-color: #dddddd; } body { font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #0a0908; } h1, h2, h3, h4, h5, h6 { font-family: "DrukTextWideCyr", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; /* color: #dddddd; */ } h1 { font-size: 55px; } h2 { font-size: 50px; } p mark { background-color: #f5c0bf; } input::placeholder { color: #838383 !important; } :root, [data-bs-theme="dark"] { --bs-dark: #0a0908; --bs-body-color: #0a0908; --bs-body-bg: #f5f5f5; --bs-highlight-color: #0a0908; --bs-danger: #8c8c26; } .table { --bs-table-bg: none; --bs-table-color-type: #f6f6f6; --bs-table-bg-type: initial; --bs-table-color-state: #f6f6f6; --bs-table-bg-state: initial; --bs-table-color: #f6f6f6; --bs-table-border-color: var(--bs-border-color); --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-emphasis-color); --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05); --bs-table-active-color: var(--bs-emphasis-color); --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); --bs-table-hover-color: var(--bs-emphasis-color); --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); width: 100%; margin-bottom: 1rem; vertical-align: top; border-color: var(--bs-table-border-color); } .btn { font-size: 18px; font-family: "Manrope", sans-serif; padding: 10px 45px; border-radius: 20px; border: 0; } .btn-outline-light { --bs-btn-color: #dddddd; --bs-btn-border-color: #dada3c; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #dada3c; --bs-btn-hover-border-color: #dada3c; --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: #000; --bs-btn-active-bg: #dada3c; --bs-btn-active-border-color: #dada3c; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #dada3c; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #dada3c; --bs-gradient: none; } .btn-danger { --bs-btn-color: #000; --bs-btn-bg: #dada3c; --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: #8c8c26; --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-bg: #8c8c26; --bs-btn-active-border-color: #8c8c26; --bs-btn-disabled-bg: #8c8c26; --bs-btn-disabled-border-color: #8c8c26; } .btn-outline-success { border: 1px solid #1a8754; font-size: 12px; padding: 5px 15px; border-radius: 10px; --bs-btn-color: #f6f6f6; } .btn-secondary { --bs-btn-color: #f6f6f6; --bs-btn-bg: #1d1d1d; --bs-btn-hover-color: #f6f6f6; --bs-btn-hover-bg: #343434; } .pagination { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.375rem; --bs-pagination-font-size: 1rem; --bs-pagination-color: #000; --bs-pagination-bg: #dada3c; --bs-pagination-border-width: var(--bs-border-width); --bs-pagination-border-color: #000; --bs-pagination-border-radius: var(--bs-border-radius); --bs-pagination-hover-color: #f6f6f6; --bs-pagination-hover-bg: var(--bs-tertiary-bg); --bs-pagination-hover-border-color: var(--bs-border-color); --bs-pagination-focus-color: var(--bs-link-hover-color); --bs-pagination-focus-bg: var(--bs-secondary-bg); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #262628; --bs-pagination-active-border-color: #262628; --bs-pagination-disabled-color: var(--bs-secondary-color); --bs-pagination-disabled-bg: var(--bs-secondary-bg); --bs-pagination-disabled-border-color: var(--bs-border-color); display: flex; padding-left: 0; list-style: none; } #catalog .d-flex { gap: 10px; } #catalog select { background-color: #1d1d1d; color: #838383; border: 1px solid #303030; } #catalog input { background-color: #1d1d1d; color: #838383; border: 1px solid #303030; } .input-group-text { background-color: #1d1d1d; color: #838383; border: 1px solid #303030; } .breadcrumb a { color: #f6f6f6; text-decoration: none; } .pagination .page-item .page-link { height: 40px; /* Фиксированная высота */ min-width: 40px; /* Минимальная ширина (для цифр) */ display: flex; align-items: center; /* Вертикальное выравнивание содержимого */ justify-content: center; /* Горизонтальное выравнивание */ } /* Иконки Font Awesome */ .pagination .page-link i { line-height: 1; /* Убирает лишний отступ у иконок */ } /* header { position: relative; } header .logo { width: 100px; } */ .navbar { position: absolute; /* Абсолютное позиционирование */ top: 0; left: 0; right: 0; z-index: 1000; /* Убедитесь, что навигация поверх hero */ width: 100%; background: transparent !important; /* Прозрачный фон */ transition: all 0.5s ease; /* Плавные переходы */ } .logo { font-family: "DrukTextWideCyr", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 22px; color: #f6f6f6; text-decoration: none; } footer .logo { color: #000; } .nav-link { font-size: 19px; color: #f6f6f6; } .nav-link:hover { color: #dada3c; } .navbar.scrolled { position: fixed; background: rgba(29, 29, 29, 0.9) !important; box-shadow: 0 2px 10px rgba(29, 29, 29, 0.1); } .navbar .d-flex { gap: 10px; } /* .hero { position: relative; height: 80vh; overflow: hidden; filter: brightness(0.5); } .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; } */ /* Затемнение для лучшей читаемости текста */ .navbar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, rgba(29, 29, 29, 0.7) 0%, transparent 100%); z-index: -1; } .navbar i { color: #f6f6f6; font-size: 22px; } .navbar i:hover { color: #dada3c; } footer i { color: #f6f6f6; font-size: 22px; } footer i:hover { color: #dada3c; } .navbar-nav { gap: 10px; /* Расстояние между пунктами меню */ } .dropdown-menu { background-color: rgb(255, 255, 255, 0.1); backdrop-filter: blur(5px); /* Размытие фона за элементом */ -webkit-backdrop-filter: blur(5px); /* Для поддержки в Safari */ } .dropdown-menu .dropdown-item { color: #f6f6f6; } .carousel { height: 600px; } .carousel-item { height: 100%; overflow: hidden; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); } .carousel-caption { top: 5.25rem; left: 5%; right: 5%; color: #f6f6f6; } .carousel-caption .btn { margin-left: 60px; margin-bottom: 13px; } /* .text-cap { font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; color: #f6f6f6; } */ section { padding: 150px 0; } section svg { width: 45px; border-radius: 5px; } .bg-dark { background-color: #1d1d1d !important; color: #f6f6f6; } .bg-grey { background-color: #262628 !important; color: #f6f6f6; } .bg-light { background-color: #f6f6f6 !important; color: #000; } .card { border-radius: 15px; } #about .card { border: 0; } #advantages .card { background-color: none; border: 1px solid #000; } #catalogs .card { border: 0; } #steps .card { --bs-card-bg: none; border: 1px solid #616161; } #steps .card h5 { color: #dddddd; } #steps .card p { color: #dddddd; } .bg-light .card h5 { color: #000 !important; } .bg-light .card p { color: #000 !important; } #socials .card { border: 1px solid transparent; transition: border-color 0.3s ease; } #socials .card a { color: #dada3c; text-decoration: none; } #socials .card:hover { border-color: #dada3c; cursor: pointer; } #socials .card hr { transition: width 0.3s ease; width: 100%; margin: 20px auto; transform-origin: center; } #socials .card:hover hr { width: 80%; } #reviews .card { background-color: none; border: 1px solid #000; } #reviews .card i { color: gold; } #places .card { border: 1px solid transparent; transition: border-color 0.3s ease; } #places .card a { color: #dada3c; text-decoration: none; } #places .card:hover { border-color: #dada3c; cursor: pointer; } #places .card hr { transition: width 0.3s ease; width: 100%; margin: 20px auto; transform-origin: center; } #places .card:hover hr { width: 80%; } /* Десктопная версия (≥992px) */ @media (min-width: 992px) { .navbar-collapse { flex-grow: 0; /* Отключаем растягивание */ width: auto; } .navbar-nav { position: absolute; left: 50%; transform: translateX(-50%); } .navbar .logo { margin-right: 0; } } @media (max-width: 991px) { .desktop { display: none; } .navbar { position: fixed; background: rgba(0, 0, 0, 0.9) !important; } .carousel { height: 500px; } .carousel-caption { top: 9.25rem; } .carousel-caption .btn { margin-left: 0; margin-top: 20px; } section { padding: 50px 0; } h1 { font-size: 32px; } h2 { font-size: 28px; } } /* Улучшение вида крестика */ .modal-header .btn-close { filter: invert(0) brightness(100%); transition: opacity 0.3s ease; margin: -0.5rem -0.5rem -0.5rem auto; /* Позиционирование */ } .modal-header .btn-close:hover { opacity: 0.75; } /* Убираем стандартный крестик Bootstrap */ .modal-header .btn-close::after { display: none; } /* Альтернативный вариант с Font Awesome */ .modal-header .btn-close.fa-times { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25rem; background: none; opacity: 1; } /* Интерактивная карта мира */ .world-map-container { position: relative; /* background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); */ } .world-map-image { transition: all 0.3s ease; } /* Интерактивные точки на карте */ .map-point { cursor: pointer; transition: transform 0.2s ease; z-index: 5; } .map-point:hover { transform: scale(1.1); } .point-flag { font-size: 3.2rem; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 4px #000); animation: flag-pulse 2s infinite; user-select: none; pointer-events: none; display: flex; align-items: center; justify-content: center; } @keyframes flag-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } } /* Удаляем старые стили точек */ .point-dot, .point-ring { display: none !important; } /* Всплывающее окно */ .map-tooltip { position: fixed; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); min-width: 250px; max-width: 280px; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: auto; /* Изменили с none на auto */ } .map-tooltip.show { opacity: 1; visibility: visible; pointer-events: auto; } .map-tooltip::before { content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent; } .map-tooltip.position-bottom::before { top: -8px; left: 50%; transform: translateX(-50%); border-bottom-color: rgba(255, 255, 255, 0.95); } .map-tooltip.position-top::before { bottom: -8px; left: 50%; transform: translateX(-50%); border-top-color: rgba(255, 255, 255, 0.95); } .map-tooltip.position-right::before { left: -8px; top: 50%; transform: translateY(-50%); border-right-color: rgba(255, 255, 255, 0.95); } .map-tooltip.position-left::before { right: -8px; top: 50%; transform: translateY(-50%); border-left-color: rgba(255, 255, 255, 0.95); } .tooltip-content { padding: 20px; text-align: center; } /* Добавляем невидимую область вокруг tooltip для комфортного перехода мыши */ .map-tooltip::after { content: ""; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; z-index: -1; } .tooltip-title { color: #0a0908; margin-bottom: 10px; font-size: 18px; font-weight: 600; } .tooltip-description { color: #666; margin-bottom: 15px; font-size: 14px; line-height: 1.4; } .tooltip-button { border-radius: 20px; padding: 8px 20px; font-size: 14px; text-decoration: none; display: inline-block; } /* Мобильная версия */ .mobile-regions { padding: 20px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); } .region-card { background: rgba(255, 255, 255, 0.7); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .region-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .region-flag { font-size: 24px; } .region-card h6 { color: #0a0908; margin-bottom: 10px; font-size: 14px; } .region-card .btn { border-radius: 15px; padding: 5px 15px; font-size: 12px; } /* Дополнительные стили для контента поверх карты */ .content-overlay { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .content-overlay:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); } /* Адаптивные размеры для средних экранов */ @media (max-width: 1200px) and (min-width: 992px) { .content-overlay { max-width: 90% !important; } } /* Мобильные стили */ @media (max-width: 768px) { .mobile-regions { margin-top: 30px !important; } .region-card { margin-bottom: 15px; } .region-flag { font-size: 20px; } .region-card h6 { font-size: 13px; } .region-card .btn { font-size: 11px; padding: 4px 12px; } } /* Фон-карта и затемнение */ .world-map-bg { position: absolute; inset: 0; background: url("../images/world-map.638adc8f7ccb.png") no-repeat center center / cover; opacity: 0.85; z-index: 1; } .world-map-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2; } .world-map-container .map-point { z-index: 3; } .map-tooltip { z-index: 10_000 !important; } /* custom_new */ h5 { font-weight: 600; font-style: normal; } h1 { font-size: 55px; } h2 { font-size: 50px; } p mark { background-color: #f5c0bf; } input::placeholder { color: #838383 !important; } :root, [data-bs-theme="dark"] { --bs-dark: #0a0908; --bs-body-color: #0a0908; --bs-body-bg: #f5f5f5; --bs-highlight-color: #0a0908; --bs-danger: #8c8c26; } .btn { font-size: 18px; font-family: "Manrope", sans-serif; padding: 10px 45px; border-radius: 20px; border: 0; } .btn-outline-danger { border: 1px solid #dada3c; font-size: 12px; padding: 5px 15px; border-radius: 10px; --bs-btn-color: #f6f6f6; } .btn-outline-success { border: 1px solid #1a8754; font-size: 12px; padding: 5px 15px; border-radius: 10px; --bs-btn-color: #f6f6f6; } .btn-outline-secondary { border: 1px solid #f6f6f6; font-size: 12px; padding: 5px 15px; border-radius: 10px; --bs-btn-color: #f6f6f6; } .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: #dada3c; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #dada3c; --bs-btn-hover-border-color: #dada3c; --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: #000; --bs-btn-active-bg: #dada3c; --bs-btn-active-border-color: #dada3c; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #dada3c; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #dada3c; --bs-gradient: none; } .btn-danger { --bs-btn-color: #000; --bs-btn-bg: #dada3c; --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: #8c8c26; --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-bg: #8c8c26; --bs-btn-active-border-color: #8c8c26; --bs-btn-disabled-bg: #8c8c26; --bs-btn-disabled-border-color: #8c8c26; } .btn-secondary { --bs-btn-color: #f6f6f6; --bs-btn-bg: #1d1d1d; --bs-btn-hover-color: #f6f6f6; --bs-btn-hover-bg: #343434; } /* header { position: relative; } header .logo { width: 100px; } */ .navbar { position: absolute; /* Абсолютное позиционирование */ top: 0; left: 0; right: 0; z-index: 1000; /* Убедитесь, что навигация поверх hero */ width: 100%; background: transparent !important; /* Прозрачный фон */ transition: all 0.5s ease; /* Плавные переходы */ } .navbar .logo { font-family: "Montserrat", sans-serif; font-weight: normal; font-style: normal; font-size: 22px; color: #f6f6f6; text-decoration: none; } .nav-link { font-size: 19px; color: #f6f6f6; } .nav-link:hover { color: #dada3c; } .navbar { position: fixed; background: rgba(29, 29, 29, 0.9) !important; box-shadow: 0 2px 10px rgba(29, 29, 29, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .navbar .d-flex { gap: 10px; } /* .hero { position: relative; height: 80vh; overflow: hidden; filter: brightness(0.5); } .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; } */ /* Затемнение для лучшей читаемости текста */ .navbar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, rgba(29, 29, 29, 0.7) 0%, transparent 100%); z-index: -1; } footer i { color: #333; font-size: 22px; } .navbar-nav { gap: 10px; /* Расстояние между пунктами меню */ } .dropdown-menu { background-color: rgb(0, 0, 0, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .dropdown-menu .dropdown-item { color: #fff; } .carousel { height: 600px; } .carousel-item { height: 100%; overflow: hidden; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); } .carousel-caption { top: 5.25rem; left: 5%; right: 5%; color: #f6f6f6; } .carousel-caption .btn { margin-left: 60px; margin-bottom: 13px; } /* .text-cap { font-family: "Manrope", sans-serif; font-weight: normal; font-style: normal; color: #f6f6f6; } */ section { padding: 75px 0; } section svg { width: 60px; height: 60px; border-radius: 5px; } .bg-dark { background-color: #1d1d1d !important; color: #f6f6f6; } .bg-grey { background-color: #262628 !important; color: #f6f6f6; } .bg-light { background-color: #f6f6f6 !important; color: #000; } .card { border-radius: 15px; } #how-work .card { border: 0; min-height: 350px; background-color: rgba(0, 0, 0, 0.125); } #how-work .buy-auto { padding: 1rem; line-height: 70%; } #how-work .buy-auto h2 { font-size: 7rem; line-height: 70%; font-weight: 600; } .arrows { top: 15%; right: 5%; transform: translateY(-50%); display: flex; gap: 1rem; justify-content: space-between; pointer-events: none; /* чтобы не перекрывать слайд */ } .arrow-left, .arrow-right { background-color: #dada3c; border: none; font-size: 24px; /* padding: 1rem; */ cursor: pointer; pointer-events: all; /* вернуть кликабельность */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 50%; transition: background-color 0.2s ease; } .arrow-left:hover, .arrow-right:hover { background-color: #000; } .left-block { background-color: #d4d4d4; color: #000; padding: 40px; height: 60%; border-radius: 20px; } .btn-dark-custom { border: transparent; border-radius: 3rem; color: #dada3c; background-color: #000; font-size: 1.5rem; font-weight: 600; overflow: hidden; padding: 1rem 2rem; position: relative; text-decoration: none; transition: transform 0.2s ease-in-out; will-change: transform; z-index: 0; display: inline-block; /* Добавлено для правильного позиционирования */ } .btn-dark-custom::after { background-color: #fff; border-color: transparent; border-radius: 20px; content: ""; display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; transform: translate(-100%, 0) rotate(10deg); transform-origin: top left; transition: transform 0.2s ease-out; will-change: transform; z-index: -1; } .btn-dark-custom:hover::after { transform: translate(0, 0) rotate(0); } .btn-dark-custom:hover { transform: scale(1.05); color: #000; } .right-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .testimonial { background-color: #1c1c1c; color: white; /* position: relative; */ padding: 5%; font-size: 1.2rem; border-radius: 20px; /* margin-top: 5px; */ } #how-work .carousel-item img { width: 100px; height: 100px; } #how-work .carousel-item p { font-size: 1.2rem; } #how-work .carousel { height: 100%; } #how-work .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; z-index: 1; height: 40px; display: flex; align-items: center; width: 15%; padding: 0; color: #fff; text-align: center; background: none; filter: none; border: 0; opacity: 0.5; transition: opacity 0.15s ease; } #how-work .carousel-control-prev { left: 70%; } #how-work .carousel-control-prev-icon { background: url(/images/arrow_left.svg) no-repeat; } #how-work .carousel-control-next-icon { background: url(/images/arrow_right.svg) no-repeat; } #advantages .section-title { font-weight: 700; font-size: 1.5rem; } #advantages .service-item { font-weight: 600; font-size: 2rem; margin-bottom: 10px; cursor: pointer; transition: color 0.2s; } #advantages .service-item p { display: none; font-size: 1.2rem; } #advantages .service-item.active { color: #dada3c; border-left: 4px solid #dada3c; padding-left: 12px; margin-bottom: 1rem; } #advantages .service-item.active p { display: block; font-weight: 200; font-size: 1.2rem; } #advantages .service-image { max-height: 400px; border-radius: 12px; object-fit: cover; } #advantages .service-description { margin-bottom: 20px; } #advantages .fade { opacity: 1; transition: opacity 0.4s ease-in-out; } #advantages.fade-out { opacity: 0; } .bg-catalog { background: #f0f0f0 url(/images/bg.jpg) no-repeat center; } /* Tab Bar */ #catalogs .nav-tabs { --bs-nav-tabs-border-width: none; --bs-nav-tabs-border-color: none; --bs-nav-tabs-border-radius: none; --bs-nav-tabs-link-hover-border-color: none; --bs-nav-tabs-link-active-color: none; --bs-nav-tabs-link-active-bg: none; --bs-nav-tabs-link-active-border-color: none; border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } .tab-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto; /* padding-bottom: 10px; */ list-style-type: none; /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */ position: relative; overflow: hidden; } /* Individual Tabs */ .tab { flex-grow: 1; min-width: 120px; /* padding: 10px 20px; */ background: transparent; font-weight: 600; font-size: 3rem; color: #333; font-size: 16px; text-align: center; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; user-select: none; } @media (max-width: 768px) { .tab { font-size: 14px; padding: 8px 12px; min-width: 100px; } } /* Indicator Bar */ .indicator { height: 3px; background: #dada3c; position: absolute; bottom: 0; left: 0; transition: left 0.3s ease, width 0.3s ease; } .indicator:active { color: #0088cc; } /* Ripple Effect */ .cercle { position: absolute; border-radius: 50%; transform: scale(0); opacity: 0.4; animation: ripple 0.6s linear; z-index: 1; } .dark .cercle { background: black; } .light .cercle { background: white; } /* Кнопка связаться */ .share-icon { opacity: 0; font-size: 28px; color: #1f1e1e; will-change: transform; transform: scale(0.1); transition: all 0.3s ease; } .share-button-wrapper { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; width: 150px; height: 40px; background-color: #dada3c; border-radius: 20px; padding: 0 10px; transition: all 0.2s ease-in-out; } .share-button-wrapper:hover { transform: scale(1.1); } .share-label { position: absolute; z-index: 99; width: 240px; height: 72px; border-radius: 20px; font-size: 20px; text-align: center; line-height: 70px; font-weight: 300; letter-spacing: 2px; color: #fff; background-color: #000; padding: 0 18px; transition: all 1.2s ease; } .share-icon-container { display: flex; justify-content: space-around; align-items: center; width: 240px; height: 64px; border-radius: 80px; } .share-icon-container i:nth-of-type(1) { transition-delay: 1s; } .share-icon-container i:nth-of-type(2) { transition-delay: 0.9s; } .share-icon-container i:nth-of-type(3) { transition-delay: 0.7s; } .share-icon-container i:nth-of-type(4) { transition-delay: 0.4s; } .share-button-wrapper:hover .share-label { transition-delay: 0.25s; transform: translateX(-280px); } .share-button-wrapper:hover .share-icon { opacity: 1; transform: scale(1); } .dribbble-credit { position: absolute; bottom: 16px; right: 16px; width: 100px; } @keyframes ripple { to { transform: scale(10); opacity: 0; } } /* Steps */ .steps { border: 1px solid #e9e9e9; position: relative; padding: 16px 34% 30px 30px; } .steps img { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; max-height: 100%; } .process-model { list-style: none; padding: 0; position: relative; max-width: 600px; margin: 20px auto 26px; border: none; z-index: 0; display: flex; justify-content: space-between; } .process-model li { text-align: center; flex: 1; position: relative; } .process-model li::after { content: ""; position: absolute; top: 33px; left: 50%; width: 100%; height: 4px; background: #e5e5e5; z-index: -1; } .process-model li:last-child::after { content: none; } .process-model li i { display: block; height: 68px; width: 68px; margin: 0 auto; background: #fff; border: 2px solid #e5e5e5; line-height: 65px; font-size: 30px; border-radius: 50%; } .process-model li.active i, .process-model li.visited i { background: #fff; fill: #dada3c; border-color: #dada3c; } .process-model li.active p, .process-model li.visited p { font-weight: 600; color: #dada3c; } .process-model li p { font-size: 14px; margin-top: 10px; margin-bottom: 0; } .bg-social { background: #000 url("/static/images/contacts.33b0c7368c83.jpg") no-repeat center; } .share-buttons { max-width: 300px; margin: 0 auto; } .share-button { display: flex; align-items: center; margin: 80px 0; height: 40px; cursor: pointer; } .share-button-primary { width: 100px; height: 100px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: box-shadow 0.3s ease; } .share-button-icon { color: #242424; font-size: 16px; } .share-button-secondary { overflow: hidden; margin-left: -10px; height: 40px; transition: all 0.3s ease; z-index: 1; } .share-button-secondary-content { background-color: #fff; height: 40px; line-height: 40px; padding: 0 20px 0 40px; font-size: 1.2rem; border-radius: 0 20px 20px 0; transform: translateX(-100%); transition: transform 0.3s ease; color: #242424; white-space: nowrap; } .share-button:hover .share-button-secondary-content { transform: translateX(0); } .share-button:hover .share-button-primary { box-shadow: 1px 0 8px rgba(0, 0, 0, 0.1); } .instagram-gradient { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 48px; } .telegram-gradient { background: linear-gradient(45deg, #37aee2 0%, #1e96c8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 48px; } .whatsapp-gradient { background: linear-gradient(45deg, #25d366 0%, #128c7e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 48px; } .youtube-gradient { background: linear-gradient(45deg, #ff0000 0%, #c80000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 48px; } /* --- Общие стили --- */ .bg-social .btn__container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .btn-social-content { display: flex; color: #fff; flex-direction: column; align-items: center; } .btn-social-content-title { font-size: 32px; margin: 0; font-weight: 600; } .btn-social-content-subtitle { font-size: 18px; } .bg-social .btn-social, .bg-social .btn-facebook, .bg-social .btn-whatsapp, .bg-social .btn-youtube, .bg-social .btn-telegram { min-width: 110px; background-color: transparent; /* border: solid 2px #333; */ border-radius: 20%; padding: 1rem 2rem; text-decoration: none; display: flex; transition: all 0.2s ease-in-out; margin-bottom: 10px; } .bg-social .btn-social { color: #c71e7e; } .bg-social .btn-social i, .bg-social .btn-facebook i, .bg-social .btn-whatsapp i, .bg-social .btn-youtube i, .bg-social .btn-telegram i { font-size: 80px; padding-right: 30px; transition: all 0.3s ease-in-out; } .bg-social .btn-social i { color: #df3796; } .bg-social .btn-social p, .bg-social .btn-facebook p, .bg-social .btn-whatsapp p, .bg-social .btn-youtube p, .bg-social .btn-telegram p { font-family: "Roboto", sans-serif; align-self: center; transform: translateX(0px); transition: all 0.1s ease-in-out; opacity: 1; } /* Instagram hover */ .bg-social .btn-social:hover { transform: scale(1.1); background: linear-gradient(to right, #ff3019 0%, #c90477 100%); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } .bg-social .btn-social:hover i { transform: translateX(75px); padding-right: 0; color: #fff; } .bg-social .btn-social:hover p { transform: translateX(30px); opacity: 0; } .bg-social .btn-social:active { transform: scale(1); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } /* WhatsApp */ .bg-social .btn-whatsapp { color: #25d366; } .bg-social .btn-whatsapp i { color: #25d366; } .bg-social .btn-whatsapp:hover { transform: scale(1.1); background-color: #25d366; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } .bg-social .btn-whatsapp:hover i { transform: translateX(75px); padding-right: 0; color: #fff; } .bg-social .btn-whatsapp:hover p { transform: translateX(30px); opacity: 0; } .bg-social .btn-whatsapp:active { transform: scale(1); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } /* YouTube */ .bg-social .btn-youtube { color: #ff0000; } .bg-social .btn-youtube i { color: #ff0000; } .bg-social .btn-youtube:hover { transform: scale(1.1); background-color: #ff0000; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } .bg-social .btn-youtube:hover i { transform: translateX(75px); padding-right: 0; color: #fff; } .bg-social .btn-youtube:hover p { transform: translateX(30px); opacity: 0; } .bg-social .btn-youtube:active { transform: scale(1); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } /* Telegram */ .bg-social .btn-telegram { color: #0088cc; } .bg-social .btn-telegram i { color: #0088cc; } .bg-social .btn-telegram:hover { transform: scale(1.1); background-color: #0088cc; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } .bg-social .btn-telegram:hover i { transform: translateX(75px); padding-right: 0; color: #fff; } .bg-social .btn-telegram:hover p { transform: translateX(30px); opacity: 0; } .bg-social .btn-telegram:active { transform: scale(1); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } #reviews .card { background-color: none; border: 1px solid #000; } #reviews .card i { color: gold; } #places .card { border: 1px solid transparent; transition: border-color 0.3s ease; } #places .card a { color: #dada3c; text-decoration: none; } #places .card:hover { border-color: #dada3c; cursor: pointer; } #places .card hr { transition: width 0.3s ease; width: 100%; margin: 20px auto; transform-origin: center; } #places .card:hover hr { width: 80%; } /* Десктопная версия (≥992px) */ @media (min-width: 992px) { .navbar-collapse { flex-grow: 0; /* Отключаем растягивание */ width: auto; } .navbar-nav { position: absolute; left: 50%; transform: translateX(-50%); } .navbar .logo { margin-right: 0; } } @media (max-width: 991px) { .desktop { display: none; } .navbar { position: fixed; background: rgba(0, 0, 0, 0.9) !important; } .carousel { height: 500px; } .carousel-caption { top: 9.25rem; } .carousel-caption .btn { margin-left: 0; margin-top: 20px; } section { padding: 50px 0; } h1 { font-size: 32px; } h2 { font-size: 28px; } } @media screen and (max-width: 560px) { .process-model li i { width: 50px; height: 50px; line-height: 46px; font-size: 23px; } .service-item { font-weight: 400; font-size: 1rem; } .process-model li::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 4px; background: transparent; z-index: -1; } .indicator { display: none; } } @media screen and (max-width: 380px) { .process-model li { flex: 0 0 50%; } .process-model li i { width: 35px; height: 35px; line-height: 32px; font-size: 16px; .process-model li p { font-size: 10px; } } .arrows { display: none; } .btn-dark-custom { padding: 0.5rem 1rem; } } /* Улучшение вида крестика */ .modal-header .btn-close { filter: invert(0) brightness(100%); transition: opacity 0.3s ease; margin: -0.5rem -0.5rem -0.5rem auto; /* Позиционирование */ } .modal-header .btn-close:hover { opacity: 0.75; } /* Убираем стандартный крестик Bootstrap */ .modal-header .btn-close::after { display: none; } /* Альтернативный вариант с Font Awesome */ .modal-header .btn-close.fa-times { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25rem; background: none; opacity: 1; }