/* Кнопка-тригер (Базові стилі) */ #maw-trigger { position: fixed!important; box-sizing: border-box; bottom: 20px; left: 30px; width: 120px; height: 120px; padding: 0; object-fit: contain; overflow: hidden; cursor: pointer; z-index: 9998; background: transparent; /* Анімація появи + пульсація (без тіні) */ animation: maw-slide-in 0.5s ease-out 0.5s backwards, maw-pulse 2s ease-in-out 3s infinite; /* Тінь прибрана */ /* box-shadow: 0 4px 10px rgba(0,0,0,0.2); */ } /* Базові стилі для картинки */ #maw-trigger img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; /* Завжди звичайний режим */ } /* --- АДАПТИВНІ СТИЛІ ПРИБРАНО --- */ /* Оверлей модального вікна */ .maw-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Клас, який додає JS для показу */ .maw-modal-overlay.maw-modal-open { opacity: 1; visibility: visible; } /* Клас для , щоб зупинити скрол */ body.maw-modal-is-open { overflow: hidden; } /* Вміст модального вікна */ .maw-modal-content { position: relative; background: #fff; padding: 20px; max-width: 90%; max-height: 90%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transform: scale(0.9); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .maw-modal-open .maw-modal-content { transform: scale(1); opacity: 1; } .maw-modal-close { position: absolute; top: -15px; right: -15px; width: 36px; height: 36px; background: #fff; color: #555; border-radius: 50%; border: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; font-weight: bold; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .maw-modal-close:hover { background: #555; color: #fff; transform: scale(1.1); } /* Галерея (без змін) */ .maw-gallery .maw-slide { display: none; } .maw-gallery .maw-slide.active { display: block; } .maw-gallery img { max-width: 100%; max-height: 80vh; display: block; } /* Кнопки "Вперед/Назад" (без змін) */ .maw-prev, .maw-next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; background-color: rgba(0,0,0,0.3); font-weight: bold; font-size: 18px; transition: 0.3s ease; user-select: none; } .maw-next { right: 0; border-radius: 3px 0 0 3px; } .maw-prev { left: 0; border-radius: 0 3px 3px 0; } .maw-prev:hover, .maw-next:hover { background-color: rgba(0,0,0,0.8); } /* Анімації */ @keyframes maw-slide-in { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Анімація пульсації (але без тіні) */ @keyframes maw-pulse { 0% { transform: scale(1); /* box-shadow: 0 4px 10px rgba(0,0,0,0.2); */ } 50% { transform: scale(1.05); /* Збільшуємо */ /* box-shadow: 0 6px 15px rgba(0,0,0,0.3); */ } 100% { transform: scale(1); /* box-shadow: 0 4px 10px rgba(0,0,0,0.2); */ } } /* --- (НОВЕ) Мобільна адаптація --- */ @media (max-width: 767px) { #maw-trigger { /* Робимо віджет меншим */ width: 90px; height: 90px; /* Робимо відступи меншими */ bottom: 15px; left: 15px; } .maw-modal-content { /* Зменшуємо внутрішні відступи на мобільному */ padding: 15px; /* Робимо модалку трохи ширшою на малих екранах */ max-width: 95%; } .maw-modal-close { /* Зменшуємо кнопку і ставимо її ближче до краю, щоб вона не "вилітала" за екран */ width: 32px; height: 32px; top: -10px; right: -10px; font-size: 22px; } .maw-prev, .maw-next { /* Робимо стрілки галереї трохи меншими */ padding: 12px; font-size: 16px; } }