/* =========================================
СТИЛІ (BASE)
========================================= */
html {
overscroll-behavior-y: none;
/* Гарантуємо, що ширина не стрибає при зникненні скролу */
scrollbar-gutter: stable;
/* Перевизначаємо стилі обгортки тільки для Home сторінки */
}
body {
/* ВИПРАВЛЕННЯ: Додав дві крапки, щоб вийти з папки css */
background-image: url('../png/white.JPG');
background-attachment: fixed;
background-position: center;
background-size: cover;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
/* === КРИТИЧНІ ЗМІНИ ТУТ === */
/* Жорстко ховаємо все, що вилазить за ширину */
overflow-x: hidden !important;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
position: relative;
/* Починаємо з прихованого вертикального скролу */
overflow-y: hidden;
}
/* Додаємо клас-помічник, щоб JS міг намертво блокувати скрол */
body.animation-locked {
overflow: hidden !important;
touch-action: none;
}
:root {
--base-size: 12vw;
--gap: 2vw;
--glass-bg: linear-gradient(135deg, rgba(235, 245, 255, 0.2) 0%, rgba(190, 220, 255, 0.05) 100%);
--glass-border: rgba(255, 255, 255, 0.25);
--blue-shadow: rgba(0, 50, 150, 0.2);
--text-color: #0f3460;
--orange-gradient: linear-gradient(#ffc837, #ff8008);
--nav-width: 6px;
--card-size: 165px;
--solid-bg: #ffffff;
--card-shadow: 0 10px 40px rgba(0, 30, 80, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 1);
--orange-glow: rgba(255, 128, 8, 0.6);
--orange-gradient-h: linear-gradient(90deg, #ffc837 0%, #ff8008 100%);
--main-btn-gradient: linear-gradient(135deg, rgba(255, 200, 55, 0.9) 0%, rgba(255, 128, 8, 0.9) 100%);
--accent-color: #0f3460; /* Основний синій колір */
--text-dark: #333333;
--text-light: #666666;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img {
max-width: 100%;
height: auto;
display: block; /* Це теж корисна фішка, прибирає невидимий відступ під картинками */
}
body::before {
content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, rgba(15, 52, 96, 0.2) 100%);
z-index: -1;
}
.content-wrapper {
display: block !important; /* Робимо видимим */
margin: 0 !important; /* Прибираємо відступ зверху 130px */
padding: 0 !important; /* Прибираємо внутрішні відступи 30px */
max-width: none !important; /* Прибираємо ліміт 1400px */
width: 100% !important; /* Розтягуємо на всю ширину */
flex: none !important; /* Якщо base використовує flex */
}
/* === SIDEBAR === */
.side-navbar {
position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
width: var(--nav-width);
display: flex; flex-direction: column; gap: 8px; z-index: 2000;
}
.nav-segment {
width: 100%; background: rgba(15, 52, 96, 0.2); border-radius: 4px; cursor: pointer;
position: relative; overflow: hidden; transition: all 0.3s ease;
}
.nav-segment:hover { width: 10px; margin-left: -2px; }
/* Розміри сегментів */
.hero-seg { height: 40px; }
.catalog-seg { height: 120px; }
.sticky-small { height: 30px; }
.sticky-long { height: 80px; }
.nav-fill {
position: absolute; top: 0; left: 0; width: 100%; height: 0%;
background: #ff8008; transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* FIX 1: Hero bar stays full opacity when active/passed */
.side-navbar[data-state="hero"] .hero-seg .nav-fill { height: 100%; }
.side-navbar[data-state="catalog"] .hero-seg .nav-fill { height: 100%; opacity: 1; } /* Changed from 0.6 to 1 */
/* HERO */
.hero-wrapper {
height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center;
position: fixed; top: 0; left: 0; flex-direction: column; transition: all 1s ease; z-index: 50;
}
.hero-wrapper.hero-exit { pointer-events: none; }
.hero-exit .viewport-frame { transform: scale(2.5); opacity: 0; pointer-events: none; }
.hero-exit .nav-btn.prev { transform: translateX(-100vw) translateY(-50%); opacity: 0; }
.hero-exit .nav-btn.next { transform: translateX(100vw) translateY(-50%); opacity: 0; }
.hero-exit .side-panel { transform: translateX(100%); opacity: 0; }
.viewport-frame {
width: 90%;
height: 85%;
border-radius: 60px;
position: relative;
top: 3vh;
/* === НАЛАШТУВАННЯ ФОНУ === */
background-image: url('../png/background_test.png');
/* ГОЛОВНА ЗМІНА:
Перше число (40%) - це ширина.
Друге число (100%) - це висота.
Тепер картинка буде розтягнута на всю висоту рамки. */
background-size: 40% 100%;
/* Притискаємо вліво */
background-position: left top;
background-repeat: no-repeat;
/* ========================== */
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
box-shadow: 0 25px 50px -12px rgba(0, 50, 150, 0.2), inset 2px 2px 3px rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.25);
overflow: hidden;
margin-bottom: 20px;
transform-origin: center center;
transition: transform 1.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 1s ease 0.5s;
}
.slider-track {
display: flex; width: 200%; height: 100%; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.slider-track.anim-left {
transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
transform: translateX(-150%) !important; opacity: 0;
}
.slide { width: 50%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.car-image { position: absolute; bottom: 5%; left: 0; width: 55%; z-index: 5; pointer-events: none; }
.main-title-new {
position: absolute;
/* Позиція зліва зверху */
top: 15%;
left: 5%;
/* Скидаємо центрування, якщо воно було */
transform: none;
text-align: left;
/* Стилі шрифту (підлаштуй під себе) */
font-size: 4vw; /* Великий розмір */
line-height: 1.1; /* Міжрядковий інтервал */
font-weight: 800; /* Жирність */
color: #0f3460; /* Твій темно-синій колір */
z-index: 10;
}
/* Стиль для слова "Європи" (зсув вправо) */
.main-title-new .shift-right {
display: block; /* Робимо окремим блоком */
margin-left: 3em; /* Зсув вправо (чим більше число, тим далі) */
/* Можна також спробувати padding-left: 15vw; для адаптивності */
}
.side-panel {
position: absolute; top: 0; right: 6%; bottom: 6%; width: 450px;
background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(45px); -webkit-backdrop-filter: blur(45px);
border-radius: 0 0 50px 50px; border: 1px solid rgba(255, 255, 255, 0.3); border-top: none;
box-shadow: -15px 15px 40px rgba(0, 40, 120, 0.1); z-index: 20; padding: 80px 40px 40px;
display: flex; flex-direction: column; gap: 15px;
transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s ease;
}
/* === АДАПТАЦІЯ ПАНЕЛІ ПОШУКУ ТІЛЬКИ ДЛЯ ПК (ЕКРАНИ > 900px) === */
@media (min-width: 901px) {
.side-panel {
/* Переводимо жорсткі пікселі у відсотки висоти (vh) */
padding: 10vh 40px 4vh 40px;
gap: 2vh;
justify-content: flex-start;
/* Страховка: якщо екран сплюснутий, з'явиться внутрішній скрол */
overflow-y: auto;
}
/* Робимо скролбар всередині панелі тонким і красивим */
.side-panel::-webkit-scrollbar { width: 4px; }
.side-panel::-webkit-scrollbar-track { background: transparent; }
.side-panel::-webkit-scrollbar-thumb { background: rgba(15, 52, 96, 0.2); border-radius: 10px; }
}
/* === ДЛЯ НОУТБУКІВ З НИЗЬКИМИ ЕКРАНАМИ (АЛЕ НЕ ДЛЯ ТЕЛЕФОНІВ) === */
@media (min-width: 901px) and (max-height: 800px) {
.side-panel {
padding: 8vh 30px 2vh 30px;
gap: 1.5vh;
width: 425px; /* Трохи звужуємо панель, щоб зекономити місце */
}
.new-design-title {
font-size: 2.2rem;
margin-bottom: 5px;
}
.custom-select, .search-btn {
padding: 12px 15px;
font-size: 0.9rem;
}
}
.new-design-title { font-size: 2.8rem; font-weight: 800; color: #0f3460; line-height: 1.1; margin-bottom: 10px; letter-spacing: -1px; }
.search-label { font-size: 0.8rem; font-weight: 700; color: rgba(15, 52, 96, 0.6); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 10px; }
.select-container { position: relative; width: 100%; }
.custom-select {
width: 100%; padding: 16px 20px; background: rgba(0, 40, 100, 0.04); border: none; border-radius: 20px;
font-size: 1rem; color: #0f3460; outline: none;
box-shadow: inset 4px 4px 8px rgba(0, 40, 100, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.8);
transition: all 0.4s ease;
}
.custom-select:focus {
background: rgba(0, 40, 100, 0.07);
box-shadow: inset 6px 6px 12px rgba(0, 40, 100, 0.18), inset -4px -4px 8px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(255, 128, 8, 0.3);
}
.search-btn {
margin-top: 25px; padding: 20px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2); color: rgba(15, 52, 96, 0.4); font-size: 1.1rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05); pointer-events: none;
}
.search-btn.active {
opacity: 1; pointer-events: auto; color: #fff; border: 1px solid rgba(255, 255, 255, 0.6);
background: linear-gradient(135deg, rgba(255, 200, 55, 0.85) 0%, rgba(255, 128, 8, 0.85) 100%);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(255, 128, 8, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.4), inset -5px -5px 15px rgba(200, 100, 0, 0.4);
}
.search-btn.active:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, rgba(255, 210, 80, 0.9) 0%, rgba(255, 140, 20, 0.9) 100%);
box-shadow: 0 15px 40px rgba(255, 128, 8, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.6);
}
.options-list {
position: absolute; top: 115%; left: 0; width: 100%;
background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(15px);
border-radius: 20px; max-height: 200px; overflow-y: auto; display: none; z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); scrollbar-gutter: stable;
overscroll-behavior: contain;
}
.options-list::-webkit-scrollbar { width: 8px; }
.options-list::-webkit-scrollbar-track { background: rgba(15, 52, 96, 0.05); margin: 15px; border-radius: 10px; }
.options-list::-webkit-scrollbar-thumb { background: var(--orange-gradient); border-radius: 10px; box-shadow: 0 0 5px rgba(255, 128, 8, 0.3); }
.option-item { padding: 14px 22px; cursor: pointer; color: #0f3460; transition: 0.3s; border-bottom: 1px solid rgba(15, 52, 96, 0.05); }
.option-item:hover { background: rgba(255, 128, 8, 0.1); padding-left: 30px; color: #e65100; }
/* === НОВЕ: ХОВАЄМО МОБІЛЬНИЙ ПОШУК НА ПК === */
.mobile-list-search {
display: none;
}
.nav-btn {
position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px;
border-radius: 50%; cursor: pointer; z-index: 40; display: flex; justify-content: center; align-items: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s ease;
background: var(--main-btn-gradient);
backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 25px rgba(255, 128, 8, 0.4), inset 2px 2px 10px rgba(255, 255, 255, 0.5), inset -3px -3px 10px rgba(200, 100, 0, 0.3);
}
.nav-btn span { font-size: 28px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 2; }
.nav-btn:hover {
transform: translateY(-50%) scale(1.15);
background: linear-gradient(135deg, rgba(255, 200, 55, 0.95) 0%, rgba(255, 128, 8, 0.95) 100%);
box-shadow: 0 15px 40px rgba(255, 128, 8, 0.6), inset 3px 3px 15px rgba(255, 255, 255, 0.7);
}
.nav-btn:active { transform: translateY(-50%) scale(0.95); }
.prev { left: 10px; }
.next { right: 10px; }
/* CATALOG */
.catalog-section {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 5vw 0;
perspective: 1200px;
position: relative;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
margin-top: 100vh;
}
.catalog-section.active { opacity: 1; pointer-events: auto; margin-top: 0; z-index: 60; }
.catalog-header-ui {
width: 100%;
height: 55vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 4vh;
position: relative;
/* Анімація (перенесено сюди) */
transition: transform 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.6s ease;
opacity: 1;
transform: translateY(0);
}
.scroll-up-hint {
display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; opacity: 0.7; transition: all 0.3s ease; margin-bottom: 20px;
}
.scroll-up-hint:hover { opacity: 1; transform: translateY(-3px); }
.scroll-text { font-size: 0.9rem; font-weight: 700; color: #0f3460; text-transform: uppercase; letter-spacing: 1px; }
@keyframes bounceUp {
0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
40% { transform: translateY(10px) rotate(45deg); }
60% { transform: translateY(5px) rotate(45deg); }
}
.catalog-main-title {
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-size: 3.5vw; font-weight: 900; color: #0f3460; text-align: center; text-transform: uppercase;
letter-spacing: -1px; text-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* --- АНІМАЦІЯ ЗАГОЛОВКА КАТАЛОГУ --- */
/* 1. Стиль для контейнера (щоб він міг плавно зникати) */
/* Цей клас додається, коли ми йдемо На Головну (зникнення) */
.catalog-header-ui.exit-anim {
opacity: 0 !important;
transform: translateY(-50px) scale(0.9); /* Трохи вгору і зменшується */
}
/* 2. Стиль для окремих букв (Поява зліва направо) */
.catalog-main-title .char {
display: inline-block;
opacity: 0;
transform: translateX(-30px); /* Виїжджають зліва */
filter: blur(10px); /* Ефект розмиття при появі */
transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
/* transition-delay розраховується в JS */
}
/* Стан, коли букви видно */
.catalog-main-title .char.visible {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
/* Пробіл між словами має мати ширину, інакше слова злипнуться */
.catalog-main-title .char-space {
display: inline-block;
width: 0.3em;
}
.bento-grid {
display: grid; grid-template-columns: repeat(7, var(--base-size)); grid-template-rows: repeat(4, var(--base-size));
gap: var(--gap); width: fit-content; flex-shrink: 0; margin-top: 2vh;
}
.tablet {
background: var(--glass-bg);
/* ОПТИМІЗАЦІЯ 1: Зменшуємо блюр. 25px це дуже багато для анімації. 15px виглядає так само, але легше */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 1.5vw; border: 1px solid var(--glass-border);
box-shadow: 0 1vw 2vw -0.5vw var(--blue-shadow), inset 1px 1px 2px rgba(255, 255, 255, 0.4);
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
cursor: pointer; overflow: visible; z-index: 1; transform-origin: center center; opacity: 0;
/* ОПТИМІЗАЦІЯ 2: Повідомляємо браузеру, що ми будемо анімувати, щоб він виділив пам'ять */
will-change: transform, opacity;
/* ОПТИМІЗАЦІЯ 3: Хак для включення GPU (Hardware Acceleration) */
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
/* ОПТИМІЗАЦІЯ 4: Трохи пришвидшуємо час анімації на ПК (з 1.2s до 1.0s), щоб зменшити навантаження */
transition: transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tablet.init-left { transform: translate(-100vw, 50vh) rotate(-45deg) scale(0.5); }
.tablet.init-right { transform: translate(100vw, 50vh) rotate(45deg) scale(0.5); }
.tablet.init-center { transform: translate(0, 100vh) scale(0.2); }
.tablet.init-top-left { transform: translate(-100vw, -100vh) rotate(-90deg); }
.tablet.init-top-right { transform: translate(100vw, -100vh) rotate(90deg); }
.tablet.in-place { opacity: 1; transform: translate(0, 0) rotate(0) scale(1) !important; }
.tablet.exit-anim { opacity: 0 !important; transform: scale(0.8) translateY(200px) !important; }
.tablet:hover {
z-index: 100; transform: scale(1.08, 1.12) !important;
background: rgba(235, 245, 255, 0.4); box-shadow: 0 2vw 4vw -1vw rgba(0, 50, 150, 0.4);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
}
.img-container { flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; padding: 1vw; transition: transform 0.5s ease; }
.img-container img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.tablet:hover .img-container img { transform: scale(0.92, 0.89); }
.title-wrapper { width: 100%; height: 20%; display: flex; justify-content: center; align-items: center; padding: 0 1.2vw 0.6vw 1.2vw; }
.category-name { font-family: 'Montserrat', sans-serif;
font-size: 0.75vw; font-weight: 800; color: var(--text-color); text-transform: uppercase; text-align: center; line-height: 1.1; transition: all 0.5s ease; }
.tablet:hover .category-name { font-size: 1.3vw; transform: scale(0.92, 0.89); font-family: 'Montserrat', sans-serif;}
/* Grid Areas */
.item-1 { grid-area: 1 / 1 / 2 / 4; }
.item-2 { grid-area: 1 / 4 / 2 / 5; }
.item-3 { grid-area: 1 / 5 / 3 / 6; }
.item-4 { grid-area: 1 / 6 / 2 / 7; }
.item-5 { grid-area: 1 / 7 / 2 / 8; }
.item-6 { grid-area: 2 / 1 / 3 / 2; }
.item-7 { grid-area: 2 / 2 / 3 / 3; }
.item-8 { grid-area: 2 / 3 / 4 / 5; }
.item-9 { grid-area: 2 / 6 / 3 / 7; }
.item-10 { grid-area: 2 / 7 / 4 / 8; }
.item-11 { grid-area: 3 / 1 / 4 / 3; }
.item-12 { grid-area: 3 / 5 / 4 / 7; }
.item-13 { grid-area: 4 / 1 / 5 / 2; }
.item-14 { grid-area: 4 / 2 / 5 / 4; }
.item-15 { grid-area: 4 / 4 / 5 / 5; }
.item-16 { grid-area: 4 / 5 / 5 / 7; }
.item-17 { grid-area: 4 / 7 / 5 / 8; }
/* CAROUSEL */
.bottom-section-merged {
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
margin-top: 0 !important;
/* === ЗМІНЮЄМО ТУТ === */
padding-top: 20px; /* Збільшуємо відступ, щоб заголовок поїхав вниз */
/* ==================== */
}
.bottom-section-merged.active-view { opacity: 1; }
.carousel-wrapper {
position: relative; width: 100%; max-width: 1600px; height: 450px;
display: flex; justify-content: center; align-items: center; perspective: 1200px; pointer-events: none;
}
.carousel-stage {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d; display: flex; justify-content: center; align-items: center;
}
.carousel-wrapper .nav-btn { z-index: 500; pointer-events: auto; opacity: 0; }
.carousel-wrapper .prev { left: 17%; }
.carousel-wrapper .next { right: 17%; }
.nav-btn.hidden { opacity: 0 !important; pointer-events: none !important; transform: translateY(-50%) scale(0.5); }
.nav-btn.fade-in { opacity: 1; }
.logo-card {
position: absolute; width: var(--card-size); height: var(--card-size);
border-radius: 50%; background: var(--solid-bg);
box-shadow: var(--card-shadow); border: 1px solid rgba(255,255,255, 0.8);
display: flex; flex-direction: column; justify-content: center; align-items: center;
pointer-events: auto; cursor: pointer;
transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
}
.logo-card.entry-hidden { transform: translateX(400px) translateZ(-500px) rotateY(-45deg) !important; opacity: 0 !important; transition: none; }
.logo-card.entry-animating { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease; }
.logo-card::after {
content: ''; position: absolute; bottom: -30px; width: 80%; height: 40px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
transform: rotateX(70deg); pointer-events: none; z-index: -1;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.logo-card.hide-shadow::after { opacity: 0 !important; }
.logo-card img { width: 65%; height: 65%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); transition: transform 0.3s ease; }
.brand-name {
position: absolute; bottom: 20px; font-size: 15px; font-weight: 800; color: var(--text-color);
text-transform: uppercase; letter-spacing: 1px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease;
}
.logo-card[data-visible="true"]:hover {
border-radius: 35px; z-index: 1000 !important;
transform: var(--base-transform) scale(1.05) translateY(-5px) !important;
box-shadow: 0 20px 50px rgba(0, 40, 100, 0.15);
}
.logo-card[data-visible="true"]:hover::after { opacity: 0.3; transform: rotateX(70deg) scale(0.8); }
.logo-card[data-visible="true"]:hover .brand-name { opacity: 1; transform: translateY(0); }
.logo-card[data-visible="true"]:hover img { transform: translateY(-8px) scale(0.95); }
.scroll-container {
width: 60%; max-width: 500px; height: 40px; display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 1000; pointer-events: auto; margin-top: -40px; position: relative;
}
.scroll-track {
height: 6px; background: rgba(15, 52, 96, 0.15); position: relative; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); width: 6px; border-radius: 50%; opacity: 0; margin-left: auto;
transition: height 0.3s ease;
}
.scroll-container:hover .scroll-track { height: 8px; }
.scroll-thumb {
position: absolute; top: 0; left: 100%; height: 100%; width: 10%;
background: var(--orange-gradient-h); border-radius: 10px; box-shadow: 0 0 15px var(--orange-glow);
transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; transform: scale(0);
}
.scroll-container:hover .scroll-thumb { filter: brightness(1.2); }
.scroll-track.animate { animation: expandTrack 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.scroll-thumb.animate { animation: thumbAppear 0.8s ease forwards 1s; }
@keyframes expandTrack {
0% { width: 6px; border-radius: 50%; opacity: 0; }
20% { opacity: 1; width: 6px; }
100% { width: 100%; border-radius: 10px; opacity: 1; }
}
@keyframes thumbAppear {
0% { opacity: 0; transform: scale(0); }
60% { opacity: 1; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
/* =========================================
СТИЛІ З 2 ФАЙЛУ (MERGED)
========================================= */
.outro-section {
height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5;
}
.section-text {
font-size: 8rem; font-weight: 900; color: #0f3460; text-transform: uppercase; text-align: center;
}
/* === ТРЕК СЛАЙДЕРА (Sticky) === */
.sticky-scroll-track {
position: relative;
/* Тут залишив 700vh, бо ви казали, що 1500 це бред. Повернув як у вас було. */
height: 700vh;
z-index: 10;
}
/* === ЛИПКЕ ВІКНО === */
.sticky-viewport {
position: -webkit-sticky; position: sticky;
top: 0; width: 100%; height: 100vh;
overflow: hidden;
}
/* === СЛАЙДИ (Renamed to info-card to avoid conflict with Hero) === */
.info-card {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; justify-content: center; align-items: center;
transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s ease;
will-change: transform, opacity;
}
.info-card { transform: translateY(100%); opacity: 0; }
.info-card.active { transform: translateY(0); opacity: 1; }
.info-card.passed { transform: scale(0.95); opacity: 0; }
.info-card:nth-child(1) { z-index: 10; }
.info-card:nth-child(2) { z-index: 20; }
.info-card:nth-child(3) { z-index: 30; }
.info-card:nth-child(4) { z-index: 40; }
.info-card:nth-child(5) { z-index: 50; }
.frame-content {
width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
/* === СТРІЛКИ === */
.nav-arrow {
position: absolute; left: 50%; transform: translateX(-50%);
width: 50px; height: 30px; cursor: pointer; z-index: 100;
display: flex; justify-content: center; align-items: center;
opacity: 0.7; transition: all 0.3s ease;
}
.nav-arrow svg {
width: 30px;
height: 100%;
/* Колір та лінії тепер беруться з глобального svg polyline в кінці файлу */
/* Додаємо анімацію стрибків */
animation: doubleBounceHint 5s infinite ease-in-out;
}
/* --- МАГІЯ НАПРЯМКУ --- */
/* Верхня стрілка стрибає як зазвичай (ВГОРУ) */
.nav-arrow-up svg {
animation-name: doubleBounceHint;
}
/* Нижня стрілка має стрибати ВНИЗ (інвертуємо анімацію) */
.nav-arrow-down svg {
animation-name: doubleBounceHintDown;
}
/* Спеціальна анімація для стрибків ВНИЗ (щоб було дзеркально) */
@keyframes doubleBounceHintDown {
0%, 20%, 100% { transform: translateY(0); }
/* Стрибок ВНИЗ (плюсове значення) */
5% { transform: translateY(6px); }
10% { transform: translateY(0); }
/* Другий менший стрибок */
15% { transform: translateY(3px); }
}
.nav-arrow:hover { opacity: 1; transform: translateX(-50%) scale(1.1); }
.nav-arrow-up { top: 2%; }
.nav-arrow-down { bottom: 2%; }
.nav-arrow-up:hover { margin-top: -5px; }
.nav-arrow-down:hover { margin-bottom: -5px; }
/* === UI === */
.text-block { margin-bottom: 50px; z-index: 2; }
.main-title { font-size: 4vw; font-weight: 900; color: #0f3460; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px; }
.subtitle { font-size: 1.5rem; font-weight: 300; color: #0f3460; opacity: 0.9; max-width: 700px; margin: 0 auto; line-height: 1.5; }
.buttons-container { display: flex; gap: 25px; align-items: center; z-index: 2; flex-wrap: wrap; justify-content: center; }
.btn { padding: 18px 45px; border-radius: 30px; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; cursor: pointer; border: none; min-width: 200px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn-orange { color: #fff; background: var(--main-btn-gradient); box-shadow: 0 10px 30px rgba(255, 128, 8, 0.4); }
.btn-orange:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px rgba(255, 128, 8, 0.6); }
.btn-pale { background: rgba(15, 52, 96, 0.08); color: #0f3460; border: 1px solid rgba(15, 52, 96, 0.1); backdrop-filter: blur(5px); }
.btn-pale:hover { background: rgba(15, 52, 96, 0.15); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(15, 52, 96, 0.1); }
.vin-search-container { display: flex; gap: 15px; width: 100%; max-width: 700px; position: relative; z-index: 5; }
.box-image { position: absolute; bottom: 5%; right: 5%; width: 18%; aspect-ratio: 1/1; object-fit: contain; z-index: 1; pointer-events: none; opacity: 0.9; }
/* 1. Ховаємо мобільну стрілку на ПК */
.mobile-toggle-indicator {
display: none;
}
/* 2. "Магія" для обгортки на ПК */
.mobile-inputs-wrapper {
display: contents;
}
/* --- РОЗУМНИЙ ПЕРЕНОС РЯДКА --- */
.responsive-break {
display: block; /* На ПК це працює як
(новий рядок) */
height: 0;
width: 100%;
content: "";
}
/* =========================================
ФІНАЛЬНА МОБІЛЬНА АДАПТАЦІЯ
========================================= */
@media (max-width: 900px) {
.responsive-break {
display: inline; /* На мобільному це стає частиною рядка */
height: auto;
width: auto;
}
/* Додаємо пробіл замість переносу */
.responsive-break::after {
content: "\00a0"; /* Символ пробілу */
}
.viewport-frame {
width: 96% !important;
height: 96% !important;
margin: 2vh auto !important;
border-radius: 25px !important;
position: relative !important;
transition: transform 0.8s ease, opacity 0.8s ease !important;
/* === ФОН ДЛЯ МОБІЛЬНОГО === */
background-image: url('../png/background4_mobile.png ') !important;
/* РОЗРАХУНОК:
Машина на мобільному = 100%.
Пропорція з ПК (40/55) = 0.73.
Тому ширина фону = 73%. Висота = auto. */
background-size: 100% 100% !important;
/* Позиція: зліва знизу */
background-position: left bottom !important;
}
/* АНІМАЦІЯ "ВИБУХУ" */
.hero-exit .viewport-frame {
background: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
.hero-exit .main-title-new {
transform: translateY(-120vh) scale(0.5) !important;
opacity: 0 !important;
transition: all 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
}
.hero-exit .car-image {
transform: translateX(-150%) !important;
opacity: 0 !important;
transition: all 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
}
.hero-exit .side-panel {
transform: translateY(150%) !important;
opacity: 0 !important;
transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
}
/* 2. ЕЛЕМЕНТИ HERO */
.hero-wrapper .nav-btn { display: none !important; }
.slide { display: block !important; }
.main-title-new {
font-size: 12vw; /* Більший шрифт на телефоні */
top: 20%; /* Трохи нижче на телефоні */
left: 20px;
}
.main-title-new .shift-right {
margin-left: 1.5em; /* Менший зсув на телефоні, щоб влізло */
}
/* Автомобіль */
.car-image {
width: 100% !important; height: auto !important;
left: -6% !important; bottom: 12% !important;
transition: opacity 0.4s ease, transform 0.5s ease !important;
opacity: 1;
}
.viewport-frame.panel-expanded .car-image { opacity: 0 !important; pointer-events: none; }
/* 3. ПАНЕЛЬ ПОШУКУ */
.side-panel {
top: auto !important; bottom: 0 !important;
height: auto !important;
min-height: 220px !important; /* Висота в згорнутому стані */
border-radius: 30px 30px 0 0 !important;
border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
position: absolute !important; left: 0 !important; width: 100% !important;
padding: 20px 20px 40px 20px !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: flex-start !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(30px) !important;
box-shadow: 0 -5px 20px rgba(0,0,0,0.05) !important;
/* Анімація тільки для трансформації */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
transform: translateY(calc(100% - 80px)); /* Схована (видно тільки заголовок) */
z-index: 50;
}
/* СТАН 1 (РОЗГОРНУТА) */
.side-panel.expanded {
transform: translateY(0);
}
/* ФІКС ДЛЯ КЛАВІАТУРИ */
.side-panel.keyboard-active {
transform: translateY(0);
padding-bottom: 20px !important;
}
/* СТРІЛКА */
.mobile-toggle-indicator {
display: block !important; position: absolute; top: 20px; left: 50%;
width: 14px; height: 14px;
border-left: 3px solid #ff8008; border-top: 3px solid #ff8008;
transform: translateX(-50%) rotate(45deg);
transition: all 0.4s ease; z-index: 60; cursor: pointer;
}
.side-panel.expanded .mobile-toggle-indicator { transform: translateX(-50%) rotate(225deg); top: 25px; }
/* ЗАГОЛОВОК (В один рядок) */
.new-design-title {
margin-top: 15px !important;
font-size: 1.4rem !important;
/* Дозволяємо перенос слів, якщо не влазить */
white-space: normal !important;
text-align: center;
width: 100%;
}
.side-panel.expanded .new-design-title { margin-top: 40px !important; font-size: 1.4rem !important; }
/* ІНПУТИ */
.mobile-inputs-wrapper {
display: flex !important; flex-direction: column; justify-content: flex-start; gap: 15px;
width: 100%;
opacity: 0; pointer-events: none; max-height: 0;
transition: opacity 0.3s ease, max-height 0s linear 0.3s;
}
.side-panel.expanded .mobile-inputs-wrapper,
.side-panel.keyboard-active .mobile-inputs-wrapper {
opacity: 1; pointer-events: auto; max-height: 1000px;
transition: opacity 0.3s ease, max-height 0s linear 0s;
margin-top: 10px;
}
.search-label { font-size: 0.75rem !important; font-weight: 700 !important; color: #6c829d !important; margin: 0 !important; text-transform: uppercase; padding-left: 5px; }
.custom-select { height: 45px !important; padding: 0 15px !important; font-size: 1rem !important; border-radius: 12px !important; background: rgba(235, 240, 255, 0.6) !important; border: none !important; }
.select-container { margin-bottom: 0 !important; }
/* === КНОПКА ПОШУКУ (ЗАВЖДИ ВИДИМА) === */
.search-btn {
margin-top: 15px !important;
padding: 15px !important;
height: auto !important;
border-radius: 12px !important;
font-size: 1rem !important;
width: 100%;
background: rgba(15, 52, 96, 0.08) !important;
color: rgba(15, 52, 96, 0.4) !important;
border: 1px solid rgba(15, 52, 96, 0.1) !important;
pointer-events: none;
transition: all 0.3s ease;
}
.search-btn.active {
background: var(--main-btn-gradient) !important;
color: #fff !important;
border: none !important;
pointer-events: auto !important;
box-shadow: 0 10px 20px rgba(255, 128, 8, 0.3) !important;
}
/* === СПИСОК ОПЦІЙ (Фікс білого фону) === */
.options-list {
position: relative !important;
top: 0 !important;
bottom: auto !important;
width: 100%;
max-height: 250px;
overflow-y: auto;
box-shadow: none !important;
border: 1px solid rgba(15, 52, 96, 0.1) !important;
background: rgba(255, 255, 255, 0.5) !important;
margin-top: 10px;
border-radius: 12px;
}
/* === НОВЕ: ВНУТРІШНІЙ ПОШУК (Тільки на мобільному) === */
.mobile-list-search {
display: block;
width: 100%;
padding: 12px 15px;
border: none;
border-bottom: 2px solid #ff8008;
background: #fff;
font-size: 1rem;
color: #0f3460;
outline: none;
position: sticky;
top: 0;
z-index: 10;
border-radius: 12px 12px 0 0;
}
.mobile-list-search::placeholder {
color: rgba(15, 52, 96, 0.4);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
}
/* --- 4. КАТАЛОГ (GRID) --- */
.catalog-section { margin-top: 0 !important; padding-top: 100vh; }
.catalog-section.active { margin-top: 0; padding-top: 5vh; }
.catalog-header-ui { height: auto; padding: 40px 0 20px; }
.catalog-main-title { font-size: 1.8rem; margin-bottom: 10px; }
.bento-grid {
display: grid !important;
/* Змінюємо 100% на 100vw, щоб ігнорувати ширину контейнера */
width: 100% !important;
margin: 0 !important;
/* === ГОЛОВНЕ ВИПРАВЛЕННЯ === */
--gap-size: 2vw;
/* Формула: (100vw ширини екрану - 5 проміжків по 2vw) / 4 стовпці
100 - 10 = 90 / 4 = 22.5vw
Це гарантує, що клітинка буде залежати ТІЛЬКИ від ширини екрану
*/
--u: 22.5vw;
grid-template-columns: repeat(4, var(--u)) !important;
/* Використовуємо ту саму змінну --u для висоти.
Тепер висота рядка = ширині стовпця = КВАДРАТ */
grid-template-rows: repeat(7, var(--u)) !important;
/* Додаємо це, щоб сітка не розтягувалася на весь екран по вертикалі */
align-content: start !important;
padding: 0 var(--gap-size) 100px var(--gap-size) !important;
gap: var(--gap-size) !important;
justify-content: center !important;
}
/* Картки */
.tablet {
background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
border-radius: 1.5vw; border: 1px solid var(--glass-border);
box-shadow: 0 1vw 2vw -0.5vw var(--blue-shadow), inset 1px 1px 2px rgba(255, 255, 255, 0.4);
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
cursor: pointer; overflow: visible; z-index: 1; transform-origin: center center; opacity: 0;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, background 0.3s ease, box-shadow 0.3s ease;
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateZ(0);
}
.tablet.init-left { transform: translateX(-100vw) !important; opacity: 0; }
.tablet.init-right { transform: translateX(100vw) !important; opacity: 0; }
.tablet.init-center { transform: translateY(50vh) scale(0.5) !important; opacity: 0; }
.tablet.init-top-left { transform: translate(-50vw, -50vh) !important; opacity: 0; }
.tablet.init-top-right { transform: translate(50vw, -50vh) !important; opacity: 0; }
.tablet.in-place { transform: translate(0, 0) scale(1) !important; opacity: 1 !important; }
/* Вміст карток */
.img-container { height: 65%; pointer-events: none; }
.img-container img { transform: scale(1.4) !important; width: 100%; height: auto; object-fit: contain; }
.title-wrapper { height: 35%; padding: 4px; align-items: flex-start;}
.category-name { font-size: 0.65rem; line-height: 1.1; word-wrap: break-word; font-family: 'Montserrat', sans-serif;}
/* Grid Area */
.item-1 { grid-column: 1 / span 3 !important; grid-row: 1 !important; }
.item-2 { grid-column: 4 !important; grid-row: 1 !important; }
.item-3 { grid-column: 1 !important; grid-row: 2 / span 2 !important; }
.item-4 { grid-column: 2 !important; grid-row: 2 !important; }
.item-11{ grid-column: 3 / span 2 !important; grid-row: 2 !important; }
.item-8 { grid-column: 2 / span 2 !important; grid-row: 3 / span 2 !important; }
.item-9 { grid-column: 4 !important; grid-row: 3 !important; }
.item-6 { grid-column: 1 !important; grid-row: 4 !important; }
.item-7 { grid-column: 4 !important; grid-row: 4 !important; }
.item-12{ grid-column: 1 / span 2 !important; grid-row: 5 !important; }
.item-5 { grid-column: 3 !important; grid-row: 5 !important; }
.item-10{ grid-column: 4 !important; grid-row: 5 / span 2 !important; }
.item-15{ grid-column: 1 !important; grid-row: 6 !important; }
.item-14{ grid-column: 2 / span 2 !important; grid-row: 6 !important; }
.item-13{ grid-column: 1 !important; grid-row: 7 !important; }
.item-16{ grid-column: 2 / span 2 !important; grid-row: 7 !important; }
.item-17{ grid-column: 4 !important; grid-row: 7 !important; }
/* Інше */
.side-navbar { display: none; }
.carousel-wrapper { width: 100% !important; overflow: visible !important; perspective: 400px !important; height: 380px !important; }
.carousel-wrapper .nav-btn { display: flex !important; opacity: 1 !important; pointer-events: auto !important; width: 40px !important; height: 40px !important; top: auto !important; bottom: 0 !important; transform: none !important; background: var(--orange-gradient) !important; }
.carousel-wrapper .prev { left: 4.5%; } .carousel-wrapper .next { right: 4.5%; }
.logo-card { width: 85px !important; height: 85px !important; } .brand-name { display: none !important; } .logo-card[data-visible="false"] { display: none !important; }
.scroll-container { margin-top: -39px !important; width: 66% !important; max-width: none !important; z-index: 1001 !important; }
.scroll-track { height: 8px !important; background: rgba(15, 52, 96, 0.1) !important; }
.viewport-frame { width: 92% !important; padding: 15px !important; }
.main-title { font-size: 2rem !important; margin-bottom: 15px !important; }
.subtitle { font-size: 1rem !important; line-height: 1.4 !important; }
.section-text { font-size: 3rem !important; }
.buttons-container { flex-direction: column; width: 100%; gap: 10px !important; }
.btn { width: 100% !important; padding: 15px 0 !important; font-size: 1rem !important; }
.vin-search-container { flex-direction: column; width: 100%; }
.vin-input { width: 100% !important; margin-bottom: 10px; }
/* Приховуємо тег переносу рядка
*/
.new-design-title br {
display: none !important;
}
/* Зменшуємо шрифт, якщо текст дуже довгий */
.new-design-title {
font-size: 1.5rem !important;
white-space: nowrap;
}
}
/* =========================================
НОВІ SVG СТРІЛКИ ТА АНІМАЦІЯ (5 СЕКУНД)
========================================= */
/* Анімація "М'ячик": подвійний стрибок */
@keyframes doubleBounceHint {
0%, 20%, 100% { transform: translateY(0); }
/* Перший великий стрибок */
5% { transform: translateY(-6px); }
10% { transform: translateY(0); }
/* Другий менший стрибок */
15% { transform: translateY(-3px); }
/* Решту часу (з 20% до 100%) стоїть нерухомо (пауза 4 сек) */
}
/* Загальний стиль для ліній SVG (щоб всі стрілки були однакові) */
svg polyline {
fill: none;
stroke: #ff8008; /* Оранжевий */
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s ease;
}
/* --- 1. МОБІЛЬНА СТРІЛКА (Вгорі панелі) --- */
.mobile-toggle-indicator {
display: none;
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
border: none !important; /* Прибираємо старі рамки */
z-index: 60;
cursor: pointer;
transition: transform 0.4s ease;
}
@media (max-width: 900px) {
.mobile-toggle-indicator {
display: block !important;
}
}
/* Застосовуємо анімацію 5 секунд */
.mobile-toggle-indicator svg {
width: 100%; height: 100%;
animation: doubleBounceHint 5s infinite ease-in-out;
}
/* Коли панель відкрита - перевертаємо і зупиняємо стрибки */
.side-panel.expanded .mobile-toggle-indicator {
transform: translateX(-50%) rotate(180deg);
top: 25px;
}
.side-panel.expanded .mobile-toggle-indicator svg {
animation: none;
}
/* --- 2. СТРІЛКА "НА ГОЛОВНУ" (В каталозі) --- */
.scroll-arrow {
width: 30px;
height: 30px;
border: none !important; /* Прибираємо старі рамки */
transform: none !important; /* Скидаємо старий нахил */
animation: none !important; /* Скидаємо стару анімацію */
margin-bottom: 5px;
}
.scroll-arrow svg {
width: 100%; height: 100%;
animation: doubleBounceHint 5s infinite ease-in-out;
/* Невелика затримка, щоб стрибали не синхронно */
animation-delay: 1s;
}
/* =========================================
МОДАЛЬНЕ ВІКНО (WHITE SHEET)
========================================= */
/* Затемнений фон на весь екран */
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 52, 96, 0.4); /* Напівпрозорий синій відтінок */
backdrop-filter: blur(8px); /* Розмиття заднього плану */
z-index: 9999; /* Поверх усього */
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
display: flex;
justify-content: center;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
/* Сама біла "планшетка" */
.white-sheet {
position: absolute;
top: 25%; /* Відступ зверху 25% */
bottom: 0; /* Притиснуто до низу */
left: 2%; /* Відступ зліва 2% */
width: 96%; /* Ширина (100% - 2% - 2%) */
background: #ffffff;
border-radius: 30px 30px 0 0; /* Заокруглення тільки зверху */
box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
transform: translateY(100%); /* Спочатку ховаємо вниз */
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto; /* Якщо контенту багато - з'явиться скрол */
}
/* Анімація появи */
.modal-overlay.active .white-sheet {
transform: translateY(0);
}
/* Кнопка закриття (Хрестик) */
.close-modal-btn {
position: absolute;
top: 20px;
right: 20px;
width: 40px; height: 40px;
background: rgba(0,0,0,0.05);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
}
.close-modal-btn:hover { background: rgba(0,0,0,0.1); transform: rotate(90deg); }
.close-modal-btn svg { width: 20px; height: 20px; stroke: #0f3460; stroke-width: 2.5; stroke-linecap: round; }
/* Стилі контенту всередині */
.modal-content-inner {
width: 100%; max-width: 800px;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 20px;
}
#modalTitle {
font-size: 2.5rem; color: #0f3460; font-weight: 900;
text-transform: uppercase; margin-bottom: 10px;
}
.modal-img-wrapper {
width: 200px; height: 200px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
#modalImage {
max-width: 100%; max-height: 100%; object-fit: contain;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}
.modal-desc {
font-size: 1.1rem; color: #555; line-height: 1.6; max-width: 600px;
}
.modal-action-btn {
margin-top: 20px;
width: 100%; max-width: 300px;
}
/* Мобільна адаптація */
@media (max-width: 900px) {
.white-sheet {
top: 15%; /* На мобільному можна підняти трохи вище, щоб було більше місця */
border-radius: 20px 20px 0 0;
}
#modalTitle { font-size: 1.8rem; }
.modal-img-wrapper { width: 150px; height: 150px; }
/* Жорстко обрізаємо все, що вилазить за межі секцій */
.hero-wrapper,
.catalog-section,
.side-panel {
max-width: 100vw;
overflow-x: hidden !important;
}
/* Додаткова страховка для body */
body {
overflow-x: hidden !important;
position: relative;
width: 100%;
}
}
/* Контейнер залишається без змін */
.hero-text-container {
position: absolute;
top: 10%;
left: 8%;
z-index: 10;
text-align: left;
}
/* Скидаємо стандартні відступи H1 */
.main-seo-title {
margin: 0;
padding: 0;
line-height: 1;
}
/* Стиль для слова ROALGO */
.brand-part {
font-family: 'Montserrat', sans-serif;
font-style: italic;
display: block; /* Робить перенос рядка після бренду */
font-size: 6vw;
font-weight: 800;
color: #0f3460;
letter-spacing: -3px;
text-transform: uppercase;
margin-bottom: 10px; /* Відступ до слогану */
}
/* Стиль для слогану */
.slogan-part {
font-family: 'Onest', sans-serif;
display: block; /* Теж займає свій рядок */
font-size: 2vw;
font-weight: 600;
color: #6c829d; /* Твій сіро-блакитний колір */
margin-left: 8vw; /* Сходинка вправо */
letter-spacing: 1px;
}
/* === АНІМАЦІЯ (Залишається та сама) === */
.char-anim {
display: inline-block;
opacity: 0;
transform: translateY(100%);
animation: revealText 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
white-space: pre;
}
@keyframes revealText {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
/* === АДАПТАЦІЯ ПІД МОБІЛЬНИЙ === */
@media (max-width: 900px) {
.hero-text-container {
top: 15%;
left: 5%;
}
.brand-part {
font-size: 15vw;
line-height: 0.9;
}
.slogan-part {
font-size: 4.5vw;
margin-left: 10vw;
color: #0f3460; /* Темніший колір для читабельності на телефоні */
}
}
/* Стилі для сітки моделей в модальному вікні */
.models-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
gap: 15px;
width: 100%;
padding: 10px 0;
}
.model-card-item {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.model-card-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
border-color: #ff8008;
}
.model-card-img-wrapper {
width: 100%;
height: 100px; /* Фіксована висота картинки */
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
padding: 10px;
}
.model-card-img-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.model-card-name {
padding: 10px;
font-weight: 700;
font-size: 0.9rem;
color: #0f3460;
background: #fff;
border-top: 1px solid #eee;
}
/* Заглушка, якщо фото немає */
.no-photo {
color: #ccc;
font-size: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* === FIX ДЛЯ IPHONE (Встав в кінець style.css) === */
.carousel-stage {
/* Допомагає Safari правильно рендерити 3D простір */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.logo-card {
/* Забороняємо мерехтіння задньої частини */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* Зменшуємо складність рендеру */
will-change: transform, opacity;
}
.logo-card img {
/* iPhone не любить drop-shadow на 3D об'єктах - це головна причина зникнення */
/* Замінюємо важку тінь на простішу або прибираємо для тесту */
filter: none !important;
/* Або використовуємо box-shadow на батьківському елементі, як у тебе вже є */
/* Цей хак змушує Safari малювати картинку окремим шаром */
transform: translateZ(1px);
-webkit-transform: translateZ(1px);
}
/* Робимо переходи швидшими, щоб не було "лагів" при появі нових карток */
.logo-card {
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
}
/* =========================================
НОВИЙ ДИЗАЙН МОДАЛКИ v2 (GLASS TILES)
========================================= */
/* 1. СІТКА (Рівно 2 колонки, великі проміжки) */
.models-grid-container {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important; /* Більший відступ між плитками */
width: 100% !important;
padding: 15px 5px !important;
box-sizing: border-box !important;
}
/* 2. КАРТКА (Скляний ефект як у .tablet) */
.model-card-item {
/* Ефект скла (Glassmorphism) */
background: linear-gradient(135deg, rgba(235, 245, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
/* Рамка та тінь */
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 20px !important; /* Сильне закруглення */
box-shadow: 0 10px 30px rgba(0, 40, 100, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
/* Розміри та позиціонування */
min-height: 300px !important; /* Робимо їх високими */
width: 50vh;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important; /* Розтягуємо контент */
cursor: pointer !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
box-shadow: 0 5px 10px rgba(0, 50, 150, 0.4) !important;
}
/* Ефект при наведенні */
.model-card-item:hover {
transform: translateY(-7px) !important;
box-shadow: 0 15px 40px rgba(0, 50, 150, 0.4) !important; /* Оранжеве світіння */
border-color: rgba(128, 255, 245, 0.5) !important;
background: linear-gradient(135deg, rgba(235, 245, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
}
/* 3. ФОТО (Без фону, велике) */
.model-card-img-wrapper {
width: 100% !important;
flex-grow: 1 !important; /* Займає все вільне місце */
background: transparent !important; /* Прибрали білий/сірий фон */
padding: 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Співвідношення сторін для фото, щоб машини гарно виглядали */
aspect-ratio: 16/9 !important;
}
.model-card-img-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Вписуємо фото, не обрізаючи */
filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2)) !important; /* Гарна тінь під машиною */
transition: transform 0.4s ease !important;
}
.model-card-item:hover .model-card-img-wrapper img {
transform: scale(1.08) !important; /* Легкий зум машини */
}
/* 4. ТЕКСТ (Без рамок, внизу) */
.model-card-name {
width: 100% !important;
padding: 15px 10px 20px 10px !important; /* Більше відступу знизу */
background: transparent !important; /* Прибрали фон */
border: none !important; /* Прибрали рамку зверху */
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #0f3460 !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
/* 5. СКРОЛБАР (Оранжевий) */
.white-sheet::-webkit-scrollbar { width: 6px; }
.white-sheet::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03); margin: 20px 0; border-radius: 10px; }
.white-sheet::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #ffc837, #ff8008); border-radius: 10px; }
/* Адаптація під маленькі екрани */
@media (max-width: 450px) {
.models-grid-container {
gap: 12px !important;
}
.model-card-item {
min-height: 160px !important;
border-radius: 15px !important;
}
.model-card-name {
font-size: 0.85rem !important;
padding: 10px 5px 15px 5px !important;
}
}
/* 1. Назва бренду "ROALGO" (Ефект глибокого вирізу) */
/* 1. Назва бренду "ROALGO" (Виправлений плавний градієнт) */
/* 1. Назва бренду "ROALGO" (Ефект "Hard Shadow" / Зсув шарів) */
.brand-part {
display: block;
font-size: 6vw;
font-weight: 900;
letter-spacing: -3px;
text-transform: uppercase;
margin-bottom: 10px;
/* --- НОВИЙ ЕФЕКТ --- */
/* 1. Верхній шар (основний яскравий колір) */
color: #ff8008;
/* Відключаємо попередні ефекти градієнтів та фільтрів, щоб не заважали */
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
filter: none;
}
.slogan-part {
display: inline-block;
/* === 1. БІЛА ПЛАШКА === */
background-color: #ffffff; /* Чистий білий фон */
border-radius: 12px;
padding: 6px 20px; /* Трохи компактніші відступи */
/* Тінь самої плашки (щоб вона висіла над гаражем) */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
margin-left: 3vw;
/* === 2. ТЕКСТ (Виглядає вдавленим у білий пластик) === */
font-size: 2vw;
font-weight: 900;
letter-spacing: 0.5px;
/* Колір "ями" (темно-сірий) */
color: #0f3460;
/* Скидаємо старі конфліктні стилі */
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
filter: none;
-webkit-text-stroke: 0;
}
/* === АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (Без змін, як просив) === */
@media (max-width: 900px) {
.brand-part {
font-size: 15vw;
/* На телефоні градієнт може виглядати погано, тому повертаємо суцільний колір */
color: #ff8008;
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
filter: none;
}
.slogan-part {
font-size: 4.5vw;
color: #0f3460;
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
filter: none;
opacity: 1;
}
}
/* =========================================
PORSCHE SCENE INTEGRATION
========================================= */
.scene-section {
position: relative;
width: 100%;
/* Висота, щоб вмістити анімацію, але не перекривати все */
min-height: 80vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5vh; /* Відступ від плиток */
perspective: 1000px;
}
/* --- БЛОКИ (UI Selectors) --- */
.blocks-container {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
display: flex;
gap: 2vw;
z-index: 1;
}
/* ЗАГАЛЬНИЙ СТИЛЬ БЛОКІВ (Card Style) */
.ui-block {
width: 220px;
background: #ffffff;
border-radius: 12px;
padding: 35px 25px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
color: var(--text-dark);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
position: relative;
/* Анімація появи */
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Стилі всередині блоку */
.block-number {
font-size: 2.2rem;
font-weight: 900;
color: var(--accent-color);
margin-bottom: 20px;
line-height: 1;
}
.block-title {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 15px 0;
color: var(--accent-color);
letter-spacing: 0.5px;
}
.block-text {
font-size: 0.8rem;
line-height: 1.6;
color: var(--text-light);
margin: 0 0 30px 0;
flex-grow: 1;
}
.block-bar {
width: 40px;
height: 3px;
background-color: var(--accent-color);
border-radius: 2px;
}
/* --- СПЕЦИФІЧНІ СТИЛІ ДЛЯ СЕРЕДНЬОГО БЛОКУ (02) --- */
.block-2 {
background-color: var(--accent-color);
color: #ffffff;
box-shadow: 0 25px 50px rgba(15, 52, 96, 0.4);
}
.block-2 .block-number,
.block-2 .block-title {
color: #ffffff;
}
.block-2 .block-text {
color: rgba(255, 255, 255, 0.7);
}
.block-2 .block-bar {
background-color: #ffffff;
}
/* Розміри та зміщення */
.block-1 { height: 320px; }
.block-2 { height: 400px; margin-top: -40px; }
.block-3 { height: 320px; }
/* Висота блоків */
.block-1 { height: 350px; }
.block-2 { height: 450px; margin-top: -50px; }
.block-3 { height: 350px; }
.ui-block.visible {
opacity: 1;
transform: translateY(0);
}
/* --- МАШИНА --- */
.porsche-wrapper {
position: absolute;
width: 60%;
max-width: 700px;
top: 75%;
left: 50%;
transform: translate(-200%, -50%); /* Схована зліва */
z-index: 10;
}
.car-body {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 10;
filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
}
.wheel {
position: absolute;
height: auto;
image-rendering: high-quality;
}
/* Колеса (координати підігнані під картинку) */
.wheel-visible { z-index: 20; }
.wheel-rear { width: 15.77%; left: 20%; top: 45.56%; }
.wheel-front { width: 15.45%; left: 68.9%; top: 47.1%; }
.wheel-blind { z-index: 5; filter: brightness(0.4); }
.wheel-rear-blind { width: 15.77%; left: 20%; top: 41.56%; }
.wheel-front-blind { width: 15.45%; left: 68.9%; top: 43.1%; }
/* --- АНІМАЦІЇ --- */
.porsche-wrapper.drive-in {
animation: carEnter 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.porsche-wrapper.drive-in .wheel {
animation: spinEnter 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes carEnter {
from { transform: translate(-150vw, -50%); }
to { transform: translate(-50%, -50%); }
}
@keyframes spinEnter {
from { transform: rotate(0deg); }
to { transform: rotate(1080deg); }
}
/* === MOBILE ADAPTATION (< 900px) === */
@media (max-width: 900px) {
.scene-section {
min-height: 500px;
margin-top: 0;
}
.blocks-container {
top: 35%;
width: 100%;
justify-content: center;
gap: 10px;
}
.ui-block {
width: 28vw;
font-size: 0.9rem;
padding-top: 20px;
border-radius: 15px;
}
/* Зменшуємо висоту блоків на мобільному */
.block-1 { height: 200px; }
.block-2 { height: 260px; margin-top: -30px; }
.block-3 { height: 200px; }
.porsche-wrapper {
width: 90%; /* Більша машина на телефоні */
top: 60%;
}
}
/* 1. Забираємо відступ у заголовка */
#brandCarouselSection .catalog-main-title {
margin-bottom: 0px !important;
}
/* 2. Сильно підтягуємо карусель вгору (мінусовий відступ) */
.carousel-wrapper {
margin-top: -100px !important; /* Чим більше число (наприклад -150px), тим ближче буде */
}
/* === МОБІЛЬНА ВЕРСІЯ: ЗБЛИЖЕННЯ ЗАГОЛОВКА І ЛОГОТИПІВ === */
@media (max-width: 900px) {
.carousel-wrapper {
/* На телефонах відступ треба менший, ніж на ПК */
margin-top: -100px !important; /* Спробуйте змінити на -40px або -80px */
}
/* Гарантуємо, що заголовок не штовхає вниз */
#brandCarouselSection .catalog-main-title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* =========================================
СТИЛІ ДЛЯ ПІДКАТЕГОРІЙ (КВАДРАТНІ ПЛИТКИ)
========================================= */
/* Сітка адаптивна, але з фіксованим мінімумом для квадратів */
.models-grid-container {
display: grid !important;
/* Автоматичне заповнення, мінімум 160px ширини */
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 15px !important;
padding: 15px 5px !important;
width: 100% !important;
}
/* Квадратна картка */
.model-card-item.square-card {
/* Робимо її квадратною через aspect-ratio */
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
min-height: unset !important; /* Скидаємо старі обмеження */
display: flex !important;
flex-direction: column !important;
padding: 0 !important; /* Прибираємо внутрішні відступи контейнера */
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.1) !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
border-radius: 15px !important;
}
/* Верхні 80% - Картинка */
.model-card-item.square-card .model-card-img-wrapper {
height: 80% !important;
width: 100% !important;
flex-grow: 0 !important; /* Фіксуємо висоту */
padding: 10px !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.model-card-item.square-card .model-card-img-wrapper img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important; /* Картинка вписується, не обрізається */
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}
/* Нижні 20% - Текст */
.model-card-item.square-card .model-card-name {
height: 20% !important;
width: 100% !important;
padding: 0 5px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8f9fa !important; /* Легкий фон для тексту */
border-top: 1px solid rgba(0,0,0,0.05) !important;
font-size: 0.85rem !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #0f3460 !important;
text-transform: uppercase !important;
text-align: center !important;
}
/* Ефект при наведенні */
.model-card-item.square-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 20px rgba(255, 128, 8, 0.2) !important;
border-color: #ff8008 !important;
}
/* Адаптація для мобільних */
@media (max-width: 600px) {
.models-grid-container {
grid-template-columns: repeat(2, 1fr) !important; /* 2 в ряд */
gap: 10px !important;
}
.model-card-item.square-card .model-card-name {
font-size: 0.7rem !important; /* Менший шрифт */
padding: 2px !important;
}
}
/* =========================================
ВИПРАВЛЕННЯ ДЛЯ НИЖНІХ СЛАЙДІВ (STICKY)
========================================= */
/* Знаходимо .viewport-frame, але ТІЛЬКИ ті, що всередині .info-card (нижні слайди) */
.info-card .viewport-frame {
background-image: none !important; /* Прибираємо картинку */
/* Опціонально: якщо без картинки фон стане занадто прозорим,
можна додати легку білу заливку. Розкоментуйте рядок нижче, якщо треба: */
/* background-color: rgba(255, 255, 255, 0.5) !important; */
}
/* === MOBILE ADAPTATION (< 900px) === */
@media (max-width: 900px) {
.viewport-frame {
top: 0vh; !important;
}
.scene-section {
min-height: 500px; /* Фіксуємо висоту сцени */
}
/* 1. Контейнер: тримаємо в рядок (row), але зменшуємо проміжки */
.blocks-container {
display: flex !important;
flex-direction: row !important; /* В РЯДОК */
align-items: flex-start !important; /* Вирівнювання по верху */
justify-content: center !important;
gap: 8px !important; /* Дуже малий відступ між блоками */
width: 98% !important; /* На всю ширину екрану */
padding: 0 !important;
left: 50% !important;
top: 40% !important;
transform: translate(-50%, -50%) !important;
}
/* 2. Блоки: однакова ширина і стиснення */
.ui-block {
flex: 1 !important; /* Всі блоки займають рівну ширину */
width: auto !important;
min-width: 0 !important; /* Дозволяє блоку стискатися менше контенту */
padding: 15px 5px !important; /* Мінімальні внутрішні відступи */
border-radius: 8px !important;
/* Висота блоків */
height: 180px !important;
}
/* Центральний блок трохи вищий і зсунутий, як на ПК */
.block-2 {
height: 210px !important;
margin-top: -15px !important; /* Менший зсув вгору */
z-index: 5;
}
.block-1, .block-3 {
height: 180px !important;
}
/* 3. ТЕКСТ: Максимально зменшуємо, щоб влізло */
.block-number {
font-size: 1.2rem !important; /* Менша цифра */
margin-bottom: 5px !important;
}
.block-title {
font-size: 0.6rem !important; /* Дуже маленький заголовок */
line-height: 1.1 !important;
margin-bottom: 5px !important;
word-wrap: break-word !important; /* Перенос слів */
hyphens: auto !important;
}
.block-text {
font-size: 0.5rem !important; /* Мікро-текст */
line-height: 1.2 !important;
margin: 0 !important;
/* Обрізаємо текст, якщо він задовгий (до 6 рядків) */
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.block-bar {
width: 20px !important; /* Менша смужка */
height: 2px !important;
margin-top: auto !important; /* Притискаємо до низу */
}
/* 4. Машина: опускаємо нижче, щоб не закривала текст */
.porsche-wrapper {
width: 95% !important;
top: 65% !important; /* Опустили нижче */
}
}
/* =========================================
ІНДИВІДУАЛЬНІ ФОНИ ДЛЯ СЛАЙДІВ
========================================= */
/* Слайд 1: Доставка з Allegro */
.info-card:nth-child(1) .viewport-frame {
/* Замініть 'image_1.jpg' на назву вашого файлу */
background-image: url('../png/image_1.png') !important;
background-size: cover !important; /* Розтягнути на весь блок */
background-position: center !important; /* Центрувати */
background-repeat: no-repeat !important;
}
/* Слайд 2: Точний підбір (VIN) */
.info-card:nth-child(2) .viewport-frame {
background-image: url('../png/image_2_1.png') !important;
background-size: 80% !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
padding-left: 45%;
padding-right: 5%;
justify-content: center;
align-items: center;
}
/* Слайд 3: Швидка доставка */
.info-card:nth-child(3) .viewport-frame {
background-image: url('../png/image_3.png') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Слайд 4: Програма лояльності */
.info-card:nth-child(4) .viewport-frame {
background-image: url('../png/image_4.jpg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Слайд 5: Магазин у Львові */
.info-card:nth-child(5) .viewport-frame {
background-image: url('../png/image_5.png') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* === КОНТАКТНІ МОДАЛКИ === */
.modal-contact-title {
font-size: 2rem;
font-weight: 800;
color: #0f3460;
margin-bottom: 25px;
text-align: center;
}
/* Стилі для телефонів */
.phones-wrapper {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
margin-bottom: 25px;
}
.phone-link {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
background: #fff;
border: 1px solid rgba(15, 52, 96, 0.1);
border-radius: 15px;
text-decoration: none;
color: #0f3460;
font-size: 1.2rem;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.phone-link:hover {
transform: translateY(-3px);
border-color: #ff8008;
box-shadow: 0 8px 20px rgba(255, 128, 8, 0.15);
}
.phone-icon {
margin-right: 15px;
color: #ff8008;
display: flex;
align-items: center;
}
.phone-icon svg { width: 24px; height: 24px; }
/* Розділювач */
.divider-text {
font-size: 0.9rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
position: relative;
width: 100%;
text-align: center;
}
.divider-text::before, .divider-text::after {
content: '';
position: absolute;
top: 50%;
width: 30%;
height: 1px;
background: #eee;
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }
/* Форма */
.callback-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
}
/* === СТИЛІ ДЛЯ МЕСЕНДЖЕРІВ === */
.messengers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
width: 100%;
}
.messenger-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 10px;
border-radius: 20px;
text-decoration: none;
transition: all 0.3s ease;
color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.messenger-card:hover {
transform: translateY(-5px);
filter: brightness(1.1);
}
.msg-icon svg { width: 32px; height: 32px; margin-bottom: 10px; }
.messenger-card span { font-weight: 700; font-size: 0.9rem; }
/* Кольори брендів */
.telegram { background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%); box-shadow: 0 8px 20px rgba(34, 158, 217, 0.3); }
.viber { background: linear-gradient(135deg, #7360F2 0%, #665CAC 100%); box-shadow: 0 8px 20px rgba(115, 96, 242, 0.3); }
.whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); }
/* Адаптація месенджерів на мобільному */
@media (max-width: 500px) {
.messengers-grid {
grid-template-columns: 1fr; /* В стовпчик */
}
.messenger-card {
flex-direction: row;
justify-content: flex-start;
padding: 15px 25px;
}
.msg-icon svg { margin-bottom: 0; margin-right: 15px; }
}
/* ============================================================
ФІНАЛЬНИЙ FIX: РІВНОМІРНЕ ЗАПОВНЕННЯ (ЗЛІВА-НАПРАВО)
============================================================ */
/* 1. РОЗШИРЮЄМО ВІКНО (Щоб 4 колонки влізли) */
.modal-content-inner {
width: 100% !important;
max-width: 1400px !important; /* Даємо багато місця */
padding: 20px !important;
box-sizing: border-box !important;
}
/* 2. НАЛАШТУВАННЯ СІТКИ */
.models-grid-container {
display: grid !important;
width: 100% !important;
box-sizing: border-box !important;
/* Відступи між картками */
gap: 20px !important;
/* ГОЛОВНЕ: Як заповнювати сітку */
grid-auto-flow: row !important; /* Заповнювати рядки (зліва направо) */
align-content: start !important; /* Притискати до верху */
}
/* === ПК ВЕРСІЯ (Жорстко 4 колонки) === */
@media (min-width: 901px) {
.models-grid-container {
/* "repeat(4, 1fr)" означає:
Розбий ширину на 4 РІВНІ частини.
Якщо буде 20 карток -> буде 5 рядів по 4 штуки. */
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* === МОБІЛЬНА ВЕРСІЯ (Жорстко 2 колонки) === */
@media (max-width: 900px) {
.models-grid-container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.modal-content-inner {
padding: 20px 5px !important;
}
}
/* 3. КАРТКА (Скляний стиль + Фікс ширини) */
.glass-card {
/* Цей хак (min-width: 0) критичний!
Він дозволяє Grid стискати картку, щоб вона влізла в колонку.
Без цього картка може думати, що їй треба 100% ширини екрану. */
min-width: 0 !important;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
/* Скляний фон */
background: linear-gradient(135deg, rgba(235, 245, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 50, 150, 0.1);
cursor: pointer;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
transform: translateY(-5px);
border-color: #ff8008;
box-shadow: 0 15px 30px rgba(255, 128, 8, 0.25);
}
/* Картинка */
.glass-card .img-box {
width: 100%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.glass-card .img-box img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}
/* Текст */
.glass-card .title-box {
width: 100%;
height: 25%;
display: flex;
justify-content: center;
align-items: center; /* Центруємо вертикально */
padding: 0 5px 10px 5px;
text-align: center;
}
.glass-card .category-text {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 800;
color: #0f3460;
text-transform: uppercase;
line-height: 1.1;
word-break: break-word; /* Переносити довгі слова */
}
/* Мобільний шрифт */
@media (max-width: 900px) {
.glass-card .category-text { font-size: 0.7rem; }
}
/* ============================================================
FIX: КАТАЛОГ БРЕНДІВ (МАШИНИ AUDI, BMW тощо)
============================================================ */
/* 1. НОВА СІТКА ДЛЯ МАШИН */
.brand-models-grid {
display: grid !important;
width: 100% !important;
box-sizing: border-box !important;
gap: 20px !important;
padding: 10px !important;
/* Центрування */
justify-content: center !important;
}
/* === МОБІЛЬНА ВЕРСІЯ (Жорстко 1 стовпчик) === */
@media (max-width: 900px) {
.brand-models-grid {
/* 1 колонка на всю ширину */
grid-template-columns: 1fr !important;
padding: 0 10px 40px 10px !important;
}
}
/* === ПК ВЕРСІЯ (2-3 стовпчики залежно від ширини) === */
@media (min-width: 901px) {
.brand-models-grid {
/* minmax(320px, 1fr) означає:
- Якщо екран широкий, влазить 3 штуки.
- Якщо вужчий (ноутбук), влазить 2 штуки.
- Картки не будуть менші за 320px. */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}
}
/* 2. ВИПРАВЛЕННЯ КАРТОК АВТОМОБІЛІВ (.model-card-item) */
.brand-models-grid .model-card-item {
/* Скидаємо все зайве, що могло прилипнути */
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important; /* Не квадратні, а прямокутні */
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
background: #fff !important; /* Білий фон, як на фото */
border: 1px solid rgba(0,0,0,0.1) !important;
border-radius: 20px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.brand-models-grid .model-card-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
border-color: #ff8008 !important;
}
/* Картинка машини */
.brand-models-grid .model-card-img-wrapper {
width: 100% !important;
height: 200px !important; /* Фіксована висота фото */
padding: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
}
.brand-models-grid .model-card-img-wrapper img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
transition: transform 0.4s ease !important;
}
.brand-models-grid .model-card-item:hover img {
transform: scale(1.05) !important;
}
/* Назва машини */
.brand-models-grid .model-card-name {
padding: 15px 20px !important;
font-size: 1rem !important;
font-weight: 800 !important;
color: #0f3460 !important;
text-align: center !important;
background: #f8f9fa !important;
border-top: 1px solid rgba(0,0,0,0.05) !important;
}
/* =========================================
OUTRO SECTION (ВАНТАЖІВКА В КІНЦІ)
========================================= */
.outro-truck {
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: auto;
z-index: 1;
object-fit: contain;
display: block;
pointer-events: none; /* Щоб фото не перекривало випадкові кліки */
}
.outro-text {
position: absolute;
bottom: 25%; /* Піднімаємо трохи вище від низу для гарної композиції */
left: 5%; /* Розміщуємо у вільних 30% зліва */
width: 25%; /* Займаємо залишок ширини без прилипання до країв */
z-index: 2;
/* Стиль шрифту точнісінько як у .catalog-main-title */
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-size: 3.5vw;
font-weight: 900;
color: #0f3460;
text-transform: uppercase;
letter-spacing: -1px;
text-shadow: 0 5px 15px rgba(0,0,0,0.1);
line-height: 1.1;
}
/* === АДАПТАЦІЯ ДЛЯ ТЕЛЕФОНІВ === */
@media (max-width: 900px) {
.outro-truck {
width: 100%; /* На телефоні вантажівка на всю ширину */
right: 0;
}
.outro-text {
width: 90%;
left: 5%;
bottom: 50%; /* На телефоні текст буде над машиною, а не збоку */
font-size: 2rem;
text-align: center;
}
}
/* Ховаємо блок з логотипом у верхньому меню */
.glass-header .logo {
opacity: 0;
pointer-events: none; /* Щоб на нього не можна було клікнути */
}
/* (Опціонально) Якщо хочеш, щоб логотип з'являвся, коли скролиш вниз: */
.glass-header.scrolled .logo {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s ease;
}