/** * Breadcrumbs стилизация * Дата создания:16.11.2025 */ .breadcrumbs-nav{background-color:#f8f9fa;border-bottom:1px solid #e5e7eb;padding:12px 0;margin-bottom:0;}.breadcrumbs-nav .container{max-width:1400px;margin:0 auto;padding:0 40px;}.breadcrumbs-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:13px;line-height:1.5;}.breadcrumbs-item{display:flex;align-items:center;margin:0;padding:0;}.breadcrumbs-link{color:#3b82f6;text-decoration:none;transition:color 0.2s ease;}.breadcrumbs-link:hover{color:#2563eb;text-decoration:underline;}.breadcrumbs-link:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px;}.breadcrumbs-separator{color:#9ca3af;margin:0 8px;font-size:14px;user-select:none;}.breadcrumbs-current{color:#6b7280;font-weight:500;}@media (max-width:768px){.breadcrumbs-nav{padding:10px 0;}.breadcrumbs-nav .container{padding:0 20px;}.breadcrumbs-list{font-size:12px;}.breadcrumbs-separator{margin:0 6px;font-size:12px;}.breadcrumbs-item{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.breadcrumbs-link, .breadcrumbs-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}}@media (max-width:480px){.breadcrumbs-list{font-size:11px;}.breadcrumbs-item{max-width:120px;}}.breadcrumbs-nav [itemprop]{}/** * Button Positions - Phone & Chat * Дата:27.11.2025 * Телефон внизу справа (зелений), Чат вище телефона */ .btnCall{position:fixed !important;right:20px !important;left:auto !important;bottom:20px !important;width:60px !important;height:60px !important;z-index:2147483640 !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;border-radius:50% !important;box-shadow:0 4px 15px rgba(225, 29, 72, 0.4) !important;border:none !important;cursor:pointer !important;transition:transform 0.2s, box-shadow 0.2s !important;}.btnCall:hover{transform:scale(1.1) !important;box-shadow:0 6px 20px rgba(225, 29, 72, 0.5) !important;}.btnCall svg, .btnCall i, .btnCall img{color:white !important;fill:white !important;width:28px !important;height:28px !important;}app-root, .wrapper-chat{--chat-bottom:90px !important;}#openChat{bottom:90px !important;}@media (max-width:768px){.btnCall{width:56px !important;height:56px !important;right:15px !important;bottom:15px !important;}#openChat{bottom:80px !important;right:15px !important;}}#openChat, .chat-button, .westelecom-chat-button, [id*='chat'], .wrapper-chat{z-index:2147483641 !important;}.btnCall{z-index:2147483642 !important;}/** * Pink Glow для всех кнопок на главной (05.11.2025) */ .button-pink-neon:hover:not(:disabled), button.button-pink-neon:hover{box-shadow:0 0 25px rgba(255, 20, 147, 0.7), 0 0 50px rgba(255, 20, 147, 0.5), 0 0 75px rgba(255, 20, 147, 0.3) !important;transform:translateY(-2px) !important;filter:brightness(1.1) !important;}.gigabit-order-btn:hover, .fixed-gigabit-btn:hover{box-shadow:0 0 25px rgba(255, 20, 147, 0.7), 0 0 50px rgba(255, 20, 147, 0.5), 0 0 75px rgba(255, 20, 147, 0.3) !important;transform:translateY(-2px) !important;filter:brightness(1.1) !important;}.offer-btn-m:hover{box-shadow:0 0 25px rgba(255, 20, 147, 0.7), 0 0 50px rgba(255, 20, 147, 0.5) !important;transform:translateY(-2px) !important;}.button-pink-neon:active:not(:disabled), .gigabit-order-btn:active, .offer-btn-m:active{box-shadow:0 0 15px rgba(255, 20, 147, 0.6) !important;transform:translateY(0) !important;}.btn-custom:hover, a.btn-custom:hover{box-shadow:0 0 25px rgba(255, 20, 147, 0.7), 0 0 50px rgba(255, 20, 147, 0.5), 0 0 75px rgba(255, 20, 147, 0.3) !important;transform:translateY(-2px) !important;}.btn-custom:active, a.btn-custom:active{box-shadow:0 0 15px rgba(255, 20, 147, 0.6) !important;transform:translateY(0) !important;}/** * Color Contrast Fixes (04.11.2025) * Виправлення контрастності кольорів для відповідності WCAG AA (4.5:1) */ /* ============================================ 1. SEO PAGES - TABLE HEADERS ============================================ */ /** * Заголовки таблиць (thead th) * Проблема:низька контрастність тексту * Рішення:темніший колір тексту */ .seo-page-content table thead th{color:#1f2937 !important;background:#f3f4f6 !important;}.seo-page-content table th{color:#1f2937 !important;font-weight:600;}/* ============================================ 2. SEO PAGES - TABLE CELLS ============================================ */ /** * Комірки таблиць з текстом * Проблема:сірий текст (#6b7280) має контраст 4.6:1 (недостатньо) * Рішення:темніший колір #4b5563 (контраст 7:1) */ .seo-page-content table td{color:#374151 !important;}.seo-page-content table td[style*="color:#6b7280"]{color:#374151 !important;}/* ============================================ 3. SEO PAGES - CONTENT TEXT ============================================ */ /** * Основний текст на SEO сторінках */ .seo-page-content{color:#1f2937 !important;}.seo-page-content p{color:#374151 !important;}.seo-page-content div{color:inherit;}/* ============================================ 4. BUTTONS - GIGABIT ORDER ============================================ */ /** * Кнопка "Підключити Гігабіт" * Білий текст на рожевому фоні має контраст 5.5:1 ✅ * Додатково підвищуємо контраст тіні */ .gigabit-order-btn{color:#ffffff !important;text-shadow:0 1px 2px rgba(0, 0, 0, 0.2);}/* ============================================ 5. SPECIFIC COLOR FIXES ============================================ */ /** * Вторинний текст (сірий) * Було:#6b7280 (контраст 4.6:1) ❌ * Стало:#4b5563 (контраст 7:1) ✅ */ [style*="color:#6b7280"]{color:#4b5563 !important;}/** * Світло-сірий текст * Було:#9ca3af (контраст 2.8:1) ❌ * Стало:#6b7280 (контраст 4.6:1) ⚠️ або #4b5563 (7:1) ✅ */ [style*="color:#9ca3af"]{color:#4b5563 !important;}/** * Помаранчевий текст * Було:#fbbf24 (контраст 1.8:1 на білому) ❌ * Стало:#d97706 (контраст 4.5:1) ✅ */ [style*="color:#fbbf24"]{color:#d97706 !important;}/** * Жовтий текст * Було:#f59e0b (контраст 2.4:1) ❌ * Стало:#d97706 (контраст 4.5:1) ✅ */ [style*="color:#f59e0b"]{color:#d97706 !important;}/** * Світло-фіолетовий * Було:#8b5cf6 (контраст 3.2:1) ❌ * Стало:#6d28d9 (контраст 5.2:1) ✅ */ [style*="color:#8b5cf6"]{color:#6d28d9 !important;}/* ============================================ 6. FOOTER & SECONDARY TEXT ============================================ */ /** * Футер і вторинний текст */ .footer__list-item a{color:#9ca3af;}/* ============================================ 7. PLACEHOLDERS ============================================ */ /** * Placeholder текст у полях вводу * Було:#999 (контраст 2.8:1) ❌ * Стало:#6b7280 (контраст 4.6:1) ✅ */::placeholder{color:#6b7280 !important;opacity:1;}:-ms-input-placeholder{color:#6b7280 !important;}::-ms-input-placeholder{color:#6b7280 !important;}/* ============================================ 8. LINKS ============================================ */ /** * Посилання мають бути достатньо контрастними */ a{color:#2563eb;}a:hover{color:#1d4ed8;}.footer a, [style*="background:#1d1d1f"] a, [style*="background:#1d1d1f"] a{color:#93c5fd;}/* ============================================ 9. BUTTONS - CONTRAST FIXES (04.11.2025) ============================================ */ /** * Кнопка "Завантажити" (рожевий неон) - CONTRAST FIXED 05.11.2025 * Проблема:білий текст на рожевому фоні має низький контраст (3.2:1) * Рішення:посилена text-shadow + жирніший шрифт (WCAG AA:4.5:1) */ .button-pink-neon, .offer-btn-m{color:#ffffff !important;text-shadow:0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9) !important;font-weight:700 !important;letter-spacing:0.03em !important;}/** * Кнопка "Обрати пристрій" (btn-custom) - CONTRAST FIXED 05.11.2025 * Проблема:може бути низький контраст на різних фонах * Рішення:темний текст на білому фоні + рамка (WCAG AA:12:1) */ .btn-custom{color:#000000 !important;background-color:#ffffff !important;font-weight:700 !important;border:2px solid #1f2937 !important;text-shadow:none !important;}.btn-custom:hover{background-color:#f9fafb !important;color:#000000 !important;border-color:#000000 !important;}.btn-custom.white-space-nowrap{background:#ffffff !important;color:#000000 !important;border:2px solid #1f2937 !important;}/* ============================================ 10. SEO ARTICLES CARDS - CONTRAST FIX ============================================ */ /** * Посилання "Читати далі →" в SEO статтях * Проблема:світлий колір тексту * Рішення:темніший колір для кращої читабельності */ .seo-articles__card-link{color:#1f2937 !important;font-weight:600 !important;}.seo-articles__card:hover .seo-articles__card-link{color:#2563eb !important;}.seo-articles__card{color:#374151 !important;}.seo-articles__card-title{color:#1f2937 !important;font-weight:600 !important;}/* ============================================ 11. NEWS SECTION - DATE CONTRAST ============================================ */ /** * Дати в новинах * Проблема:"24 жовт. 2025 р." має низький контраст * Рішення:темніший колір */ .news-slider__item-date{color:#4b5563 !important;font-weight:500 !important;}.news{color:#374151 !important;}.news h2, .news h3, .news h4{color:#1f2937 !important;}.news h2[style*="font-size:28px"]{color:#1a1a1a !important;font-weight:600 !important;}/* ============================================ 12. ADDITIONAL CONTRAST IMPROVEMENTS ============================================ */ /** * Загальні покращення контрастності */ span.link, span[class*="link"]{color:#2563eb !important;font-weight:500 !important;}.slick-prev, .slick-next{color:#1f2937 !important;background:rgba(255, 255, 255, 0.95) !important;border:2px solid #e5e7eb !important;}.slick-prev:hover, .slick-next:hover{background:#f3f4f6 !important;border-color:#d1d5db !important;}/* ============================================ END OF COLOR CONTRAST FIXES ============================================ */ /* ============================================ 13. BLOG CARDS - DATE SPACING FIX (07.12.2025) ============================================ */ /** * Виправлення:дата наїжджає на назву статті * Рішення:збільшуємо min-height контенту картки */ .mainCards .news-slider__content{min-height:200px !important;padding-bottom:50px !important;}.mainCards .news-slider__item-title{margin-bottom:18px !important;line-height:1.4 !important;}.mainCards .news-slider__item-bottom-group{bottom:12px !important;}/** * FAQ Section for Homepage * Created:04.11.2025 * Font:Inter (Corporate) */ .faq-homepage{background:#f8f9fa;padding:60px 0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}.faq-homepage__title{font-size:32px;font-weight:600;text-align:center;margin-bottom:50px;color:#1a1a1a;letter-spacing:-0.02em;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}.faq-homepage__list{max-width:900px;margin:0 auto;}.faq-homepage__item{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:16px;overflow:hidden;transition:all 0.3s ease;}.faq-homepage__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);}.faq-homepage__question{padding:24px;font-size:14px;font-weight:600;color:#1a1a1a;cursor:pointer;display:flex;align-items:center;gap:16px;line-height:1.4;}.faq-homepage__number{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);color:#ffffff;border-radius:8px;font-size:16px;font-weight:600;flex-shrink:0;}.faq-homepage__answer{padding:0 24px 24px 76px;font-size:14px;font-weight:400 !important;color:#4b5563;line-height:1.6;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;}.faq-homepage__answer *{font-weight:400 !important;color:#4b5563 !important;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;}.faq-homepage__answer p{margin:0 0 12px 0;}.faq-homepage__answer p:last-child{margin-bottom:0;}.faq-homepage__answer ul{margin:0;padding-left:20px;list-style:none;}.faq-homepage__answer ul li{position:relative;padding-left:24px;margin-bottom:8px;}.faq-homepage__answer ul li:before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:600;}.faq-homepage__answer strong, .faq-homepage__answer b{font-weight:400 !important;color:#4b5563 !important;}@media (max-width:768px){.faq-homepage{padding:40px 0;}.faq-homepage__title{font-size:24px;margin-bottom:30px;}.faq-homepage__question{padding:18px;font-size:16px;gap:12px;}.faq-homepage__number{min-width:32px;height:32px;font-size:14px;}.faq-homepage__answer{padding:0 18px 18px 62px;font-size:14px;}}@media (max-width:480px){.faq-homepage__question{padding:16px;font-size:15px;}.faq-homepage__number{min-width:28px;height:28px;font-size:13px;}.faq-homepage__answer{padding:0 16px 16px 56px;font-size:13px;}}/** * FOOTER FIX - Исправление "прыгающих" кнопок при hover + Тёмная тема * Дата:03.11.2025 * Цель:Убрать Layout Shift при наведении на ссылки в футере + тёмный дизайн * Влияние:ТОЛЬКО футер, остальной сайт не затронут */ /* ============================================ ТЁМНЫЙ ФОН ФУТЕРА (УСИЛЕННЫЕ ПРАВИЛА) ============================================ */ footer, footer.footer, .footer, body footer, body .footer{background:linear-gradient(180deg, #0F172A 0%, #1E293B 50%, #0F172A 100%) !important;background-color:#0F172A !important;color:#94a3b8 !important;}.footer__inner{color:#94a3b8 !important;border-bottom-color:rgba(100, 116, 139, 0.3) !important;}/* ============================================ ЗАГОЛОВКИ ФУТЕРА ============================================ */ .footer__title{font-size:16px;font-weight:600;margin-bottom:16px;color:#e0e0e0 !important;letter-spacing:-0.01em;}.company__color{color:#c6ff4d !important;}.home__color{background-color:#ff4cc7 !important;-webkit-background-clip:text !important;color:transparent !important;}.business__color{background-color:#315efb !important;-webkit-background-clip:text !important;color:transparent !important;}/* ============================================ ОСНОВНЫЕ ССЫЛКИ В ФУТЕРЕ ============================================ */ .footer__list-item, .footer__list-item a{color:#94a3b8 !important;}.footer__list-item a{display:inline-block;position:relative;font-size:14px;font-weight:400;line-height:1.6;text-decoration:none;transition:color 0.2s ease;}.footer__list-item a:hover, .footer__list-item:hover, .footer__list-item:hover a{color:#ffffff !important;text-decoration:none;}.footer__list-item a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#ffffff;transition:width 0.3s ease;}.footer__list-item a:hover::after{width:100%;}/* ============================================ АККОРДЕОН (МОБИЛЬНАЯ ВЕРСИЯ) ============================================ */ .footer__accordion{color:#94a3b8 !important;border-bottom-color:rgba(100, 116, 139, 0.3) !important;}.accordion__list .footer__list-item, .accordion__list .footer__list-item a{color:#94a3b8 !important;}.accordion__list .footer__list-item a{display:inline-block;position:relative;font-size:14px;font-weight:400;line-height:1.6;text-decoration:none;transition:color 0.2s ease;}.accordion__list .footer__list-item a:hover, .accordion__list .footer__list-item:hover a{color:#ffffff !important;text-decoration:none;}.accordion__list .footer__list-item a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#ffffff;transition:width 0.3s ease;}.accordion__list .footer__list-item a:hover::after{width:100%;}.acc__title{color:#e0e0e0 !important;}/* ============================================ СОЦИАЛЬНЫЕ КНОПКИ ============================================ */ .footer-link__social-item{display:inline-block;transition:transform 0.2s ease, opacity 0.2s ease;background-color:#343b4c !important;}.footer-link__social-item:hover{transform:translateY(-3px);opacity:0.85;}.footer-link__social-item__img img{filter:brightness(0) invert(1);opacity:0.7;transition:opacity 0.2s ease;}.footer-link__social-item:hover .footer-link__social-item__img img{opacity:1;}/* ============================================ КНОПКИ APP STORE / PLAY MARKET ============================================ */ .btn__link{display:inline-block;transition:transform 0.2s ease, opacity 0.2s ease;}.btn__link:hover{transform:translateY(-2px);opacity:0.9;}.btn__link img{filter:brightness(0) invert(1);opacity:0.8;transition:opacity 0.2s ease;}.btn__link:hover img{opacity:1;}/* ============================================ SPEEDTEST КНОПКА ============================================ */ .footer-link__speedTest{display:inline-block;transition:transform 0.2s ease, opacity 0.2s ease;}.footer-link__speedTest:hover{transform:scale(1.05);opacity:0.9;}.speedTest{fill:#b0b0b0 !important;transition:fill 0.2s ease;}.footer-link__speedTest:hover .speedTest{fill:#ffffff !important;}/* ============================================ НИЖНЯЯ ЧАСТЬ ФУТЕРА (footer-link) ============================================ */ .footer-link{color:#94a3b8 !important;}/* ============================================ АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ============================================ */ @media (max-width:768px){.footer__list-item a{font-size:15px;padding:8px 0;display:block;}.accordion__list .footer__list-item a{font-size:15px;padding:8px 0;display:block;}}/* ============================================ ACCESSIBILITY (ДОСТУПНОСТЬ) ============================================ */ .footer__list-item a:focus, .accordion__list .footer__list-item a:focus{outline:2px solid #ffffff;outline-offset:2px;border-radius:2px;}.footer__list-item a:focus:not(:focus-visible), .accordion__list .footer__list-item a:focus:not(:focus-visible){outline:none;}.logo{display:flex;flex-direction:column;align-items:flex-start;}.header-rating{display:flex;align-items:center;gap:5px;margin-top:4px;padding:0;background:none;border:none;}.header-rating__stars{display:flex;gap:1px;}.header-rating__star{width:12px;height:12px;fill:#FFD700;}.header-rating__score{font-size:13px;font-weight:600;color:#fff;}.header-rating__label{font-size:11px;color:rgba(255,255,255,0.6);font-weight:400;}@media (max-width:768px){.header-rating{display:none;}}/** * Image Dimensions Fix - CLS Prevention (05.11.2025) * * Для динамічних зображень з /uploads/* задаємо aspect-ratio * щоб запобігти Cumulative Layout Shift (CLS) */ .news-slider__item-img{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;}.cards-view_img-OLD-DISABLED{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;max-width:800px;}.blog-view__img{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;}.blog__item-img{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;}.promotion__img-big{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;}.promotion__img-small{aspect-ratio:16 / 9;object-fit:cover;width:100%;height:auto;}.product-view-img img, .product-slider-item img{aspect-ratio:4 / 3;object-fit:contain;width:100%;height:auto;}.logo-card img, img[data-lazy*="/uploads/slider-clients/"]{aspect-ratio:1 / 1;object-fit:contain;width:100%;height:auto;}.sertificate-slider-item img{aspect-ratio:3 / 4;object-fit:contain;width:100%;height:auto;max-width:400px;}img[src*="/uploads/"]{height:auto;}img[data-lazy]{min-height:200px;background:#f0f0f0;}.cards-view_item .cards-view_img{aspect-ratio:auto !important;object-fit:fill !important;width:100% !important;height:auto !important;max-width:100% !important;}/** * Image Size Optimization Fix (04.11.2025) * Додає явні розміри для зображень та оптимізує розміри SVG * Виправляє проблему:фактичні розміри > відображувані розміри */ #openChat img[src*="chat.svg"], button#openChat > img.ng-tns-c11-0{width:32px !important;height:8px !important;}img[src*="iconBig/Viber.svg"], img[src*="iconBig/Instagram.svg"], img[src*="iconBig/Facebook.svg"]{width:20px !important;height:40px !important;}img[src*="PlayMarket.svg"]{width:103px !important;height:26px !important;}img[src*="Appstore.svg"]{width:103px !important;height:26px !important;}.modal__send-img{width:auto !important;height:auto !important;max-width:100%;object-fit:contain;}.news-slider__item-img{width:100% !important;max-width:317px !important;height:auto !important;object-fit:cover;}img[src*="image__social/twitter.svg"]{width:22px !important;height:18px !important;}img[src*="image__social/linken.svg"]{width:20px !important;height:19px !important;}img[src*="image__social/facebook.svg"]{width:19px !important;height:19px !important;}img[src*="easypay.png"]{width:85px !important;height:34px !important;}.mobile__image[src*="app-phone.png"]{width:500px !important;height:500px !important;max-width:100%;object-fit:contain;}.promotion-slider__img{width:100% !important;height:auto !important;max-width:1920px !important;aspect-ratio:1920 / 600;object-fit:cover;}/** * Image Size Optimization - Performance Fix (05.11.2025) * * Зменшуємо фактичні розміри зображень до відображуваних * для економії трафіку та швидшого завантаження */ .mobile__image{max-width:500px !important;max-height:500px !important;width:auto !important;height:auto !important;object-fit:contain;}.footer-link__social-item__img img{max-width:20px !important;max-height:40px !important;width:20px !important;height:40px !important;}app-root button#openChat img{max-width:32px !important;max-height:32px !important;width:auto !important;height:auto !important;}.btn__link img[src*="Appstore.svg"], .btn__link img[src*="PlayMarket.svg"], .center_link img[src*="Appstore.svg"], .center_link img[src*="PlayMarket.svg"]{display:block !important;width:auto !important;height:26px !important;}.promotion-slider__img{max-width:100% !important;height:auto !important;object-fit:cover;}img{max-width:100%;height:auto;}@media (max-width:768px){.mobile__image{max-width:300px !important;max-height:300px !important;}.promotion-slider__img{width:100% !important;height:auto !important;}}/** * Mobile Critical CSS - оптимизация для мобильных устройств * Загружается синхронно для предотвращения FOUC и CLS * Дата создания:16.11.2025 */ @media (max-width:768px){header{min-height:60px;position:relative;}.container{padding-left:20px;padding-right:20px;max-width:100%;}.breadcrumbs-nav{min-height:40px;padding:10px 0;}.breadcrumbs-list{font-size:12px;}.promotion, .main__background{min-height:400px;}.promotion-slider__item{min-height:400px;}.promotion__content{height:400px;padding:20px;}.promotion__content-title{font-size:28px;line-height:1.2;margin-bottom:12px;}.promotion__content-text{font-size:16px;line-height:1.5;max-width:100%;margin-bottom:16px;}.promotion__content-btn{min-height:44px;padding:12px 24px;font-size:16px;font-weight:600;}.main-hero-title h1{font-size:24px;line-height:1.3;padding:20px 0;}.mobile-fixed-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:998;padding:12px 15px;}body{padding-bottom:80px;}button, .btn, a.button, .promotion__content-btn, .button-pink-neon, .offer-btn-m, .button-secondary, .rate-btn-m, input[type="submit"], input[type="button"], .gigabit-order-btn{min-height:44px;min-width:44px;padding:12px 20px;font-size:16px;line-height:1.5;}.button-pink-neon, .offer-btn-m{min-height:48px;min-width:150px;padding:12px 24px;}input[type="text"], input[type="tel"], input[type="email"], select, textarea{min-height:44px;padding:12px 16px;font-size:16px;}.right-menu__list-item a, .right-menu__category .category__item a, nav a, .breadcrumbs-link{min-height:44px;padding:12px 16px;display:flex;align-items:center;}.burger{min-width:48px;min-height:48px;padding:12px;}.btn-call, .chat-button, .social-link{min-width:44px;min-height:44px;padding:10px;}}@media (max-width:480px){.promotion, .main__background{min-height:350px;}.promotion-slider__item{min-height:350px;}.promotion__content{height:350px;padding:15px;}.promotion__content-title{font-size:24px;}.promotion__content-text{font-size:14px;}.main-hero-title h1{font-size:20px;padding:15px 0;}.container{padding-left:15px;padding-right:15px;}}@media (max-width:768px){.promotion__content{padding-top:60px !important;display:flex;flex-direction:column;justify-content:center;}.promotion__content-wrap{text-align:center;}.promotion__content-title{margin-top:0;padding-top:10px;}}@media (max-width:991px){.middle-line{padding:10px 15px !important;}.middle-line__wrapper-right{display:none !important;}.middle-line__wrapper-left{width:100% !important;padding-bottom:0 !important;}.middle-line .logo img{max-width:150px !important;height:auto !important;}.header-rating{display:none !important;}}@media (max-width:991px){.middle-line{display:none !important;}}/* =================================== FIXED CTA КНОПКА ДЛЯ МОБИЛЬНЫХ Задача 1.2 - Added 2025-10-10 =================================== */ .mobile-fixed-cta{display:none;}@media (max-width:768px){.mobile-fixed-cta{display:block !important;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;z-index:9990 !important;background:linear-gradient(90deg, #ff4cc7 0%, #e91e63 100%);box-shadow:0 -2px 10px rgba(0, 0, 0, 0.15);padding:12px 15px;animation:slideUp 0.3s ease-out;}.mobile-fixed-cta__button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;background:rgba(255, 255, 255, 0.15);border:none;border-radius:8px;color:#ffffff;font-size:17px;font-weight:600;text-decoration:none;text-align:center;transition:all 0.2s ease;backdrop-filter:blur(10px);}.mobile-fixed-cta__button:hover, .mobile-fixed-cta__button:active{background:rgba(255, 255, 255, 0.25);transform:scale(0.98);color:#ffffff;text-decoration:none;}.mobile-fixed-cta__icon{margin-right:8px;width:20px;height:20px;}@keyframes slideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}body{padding-bottom:80px;}.mobile-fixed-cta.hidden{display:none;}}@media (max-width:768px){.btn, button, a.link{min-height:44px;min-width:44px;padding:12px;}}.pay-input{background:rgba(255, 255, 255, 0.85) !important;border:2px solid rgba(0, 0, 0, 0.15) !important;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.08);color:#1D1D1F !important;transition:border-color 0.2s ease, box-shadow 0.2s ease;}.pay-input::placeholder{color:#6B7280 !important;}.pay-input:focus{border-color:#FF4CC7 !important;box-shadow:0 0 0 3px rgba(255, 76, 199, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.08);outline:none;}.pay-input:hover{border-color:rgba(0, 0, 0, 0.25);}/** * Select2 Rounded Corners (05.11.2025) * Максимально агрессивные селекторы для всех вариантов */ .select2-container.rounded-select .select2-selection{border-radius:16px !important;}.options-connect__select .select2-selection{border-radius:16px !important;}.select2-dropdown.rounded-dropdown{border-radius:16px !important;}.select2-dropdown{border-radius:16px !important;}.select2-search__field{border-radius:12px !important;}.select2-results__option{color:#1f2937 !important;}.select2-results__option--highlighted{background-color:rgba(141, 150, 178, 0.2) !important;color:#000 !important;}.select2-selection__rendered{display:block !important;width:100% !important;white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;}.select2-container{width:100% !important;}.select2-selection{width:100% !important;min-width:100% !important;}/** * SEO Articles Section (Корисні статті) * Created:04.11.2025 * Font:Inter (Corporate) */ .seo-articles{background:#ffffff;padding:60px 0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}.seo-articles__title{font-size:32px;font-weight:600;text-align:center;margin-bottom:40px;color:#1a1a1a;letter-spacing:-0.02em;}.seo-articles__grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:20px;max-width:1400px;margin:0 auto;}.seo-articles__card{background:#f8f9fa;border:1px solid #e5e7eb;border-radius:12px;padding:24px;text-decoration:none;transition:all 0.3s ease;display:flex;flex-direction:column;justify-content:space-between;min-height:140px;}.seo-articles__card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);border-color:#3b82f6;background:#ffffff;}.seo-articles__card-title{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 16px 0;line-height:1.4;}.seo-articles__card-link{font-size:14px;font-weight:500;color:#3b82f6;display:inline-flex;align-items:center;gap:4px;}.seo-articles__card:hover .seo-articles__card-title{color:#3b82f6;}.seo-articles__card:hover .seo-articles__card-link{gap:8px;}@media (max-width:992px){.seo-articles__grid{grid-template-columns:repeat(2, 1fr);gap:20px;}.seo-articles__title{font-size:28px;margin-bottom:32px;}}@media (max-width:768px){.seo-articles{padding:40px 0;}.seo-articles__grid{grid-template-columns:1fr;gap:16px;}.seo-articles__title{font-size:24px;margin-bottom:24px;}.seo-articles__card{padding:20px;min-height:120px;}.seo-articles__card-title{font-size:16px;}}/** * SLIDER LAYOUT FIX * Предотвращение Layout Shift для WebP изображений * Добавлено:03.11.2025 * * Проблема:WebP изображения загружаются с задержкой и могут вызвать "прыжок" контента * Решение:Фиксированное aspect-ratio и object-fit для сохранения размеров */ .promotion-slider__img{width:100%;height:auto;aspect-ratio:1920 / 600;object-fit:cover;display:block;}@media (max-width:480px){.promotion-slider__img{aspect-ratio:375 / 600;}}@media (min-width:481px) and (max-width:1200px){.promotion-slider__img{aspect-ratio:1000 / 600;}}@media (min-width:1201px){.promotion-slider__img{aspect-ratio:1920 / 600;}}@supports not (aspect-ratio:1 / 1){.promotion-slider__img{min-height:400px;}}/** * WESTELECOM Sticky CTA Button (03.12.2025) * 4 варіанти для A/B тестування * Параметр:?btn=1,2,3,4 */ /* ═══════════════════════════════════════════════════════════════ STICKY BUTTON - Основні стилі ═══════════════════════════════════════════════════════════════ */ .sticky-cta{position:fixed;bottom:180px;right:20px;z-index:9997;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;}.sticky-cta__button{position:relative;display:flex;align-items:center;gap:10px;padding:14px 24px;border:none;border-radius:50px;cursor:pointer;font-size:15px;font-weight:600;color:#fff;text-decoration:none;box-shadow:0 4px 20px rgba(0, 0, 0, 0.25);transition:all 0.3s ease;animation:stickyPulse 4s ease-in-out infinite;white-space:nowrap;max-width:320px;}.sticky-cta__button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(0, 0, 0, 0.35);}.sticky-cta__button:active{transform:translateY(-1px) scale(0.98);}.sticky-cta__icon{width:24px;height:24px;flex-shrink:0;}@keyframes stickyPulse{0%, 100%{transform:scale(1);box-shadow:0 4px 20px rgba(0, 0, 0, 0.25);}50%{transform:scale(1.03);box-shadow:0 6px 25px rgba(0, 0, 0, 0.3);}}/* ═══════════════════════════════════════════════════════════════ ВАРІАНТИ КОЛЬОРІВ ═══════════════════════════════════════════════════════════════ */ .sticky-cta__button--orange{background:linear-gradient(135deg, #FF6B00 0%, #FF8C00 100%);}.sticky-cta__button--orange:hover{background:linear-gradient(135deg, #FF5500 0%, #FF7700 100%);}.sticky-cta__button--green{background:linear-gradient(135deg, #00C853 0%, #00E676 100%);}.sticky-cta__button--green:hover{background:linear-gradient(135deg, #00B848 0%, #00D866 100%);}.sticky-cta__button--blue{background:linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);}.sticky-cta__button--blue:hover{background:linear-gradient(135deg, #1E88E5 0%, #3D9EE8 100%);}.sticky-cta__button--red{background:linear-gradient(135deg, #F44336 0%, #EF5350 100%);}.sticky-cta__button--red:hover{background:linear-gradient(135deg, #E53935 0%, #E84A4A 100%);}/* ═══════════════════════════════════════════════════════════════ БЕЙДЖ "АКЦІЯ" ═══════════════════════════════════════════════════════════════ */ .sticky-cta__badge{position:absolute;top:-8px;right:-8px;background:#E91E63;color:#fff;font-size:10px;font-weight:700;padding:4px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 8px rgba(233, 30, 99, 0.4);animation:badgePulse 2s ease-in-out infinite;}@keyframes badgePulse{0%, 100%{transform:scale(1);}50%{transform:scale(1.1);}}/* ═══════════════════════════════════════════════════════════════ МІКРО-КОПІРАЙТИНГ ПІД КНОПКОЮ ═══════════════════════════════════════════════════════════════ */ .sticky-cta__microcopy{font-size:11px;color:#666;background:rgba(255, 255, 255, 0.95);padding:6px 12px;border-radius:20px;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);max-width:220px;text-align:center;}/* ═══════════════════════════════════════════════════════════════ POPUP ФОРМА ═══════════════════════════════════════════════════════════════ */ .sticky-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;}.sticky-popup-overlay.active{opacity:1;visibility:visible;}.sticky-popup{background:#fff;border-radius:20px;padding:32px;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);transform:translateY(20px) scale(0.95);transition:all 0.3s ease;position:relative;}.sticky-popup-overlay.active .sticky-popup{transform:translateY(0) scale(1);}.sticky-popup__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#666;transition:all 0.2s ease;}.sticky-popup__close:hover{background:#e0e0e0;color:#333;}.sticky-popup__title{font-size:22px;font-weight:700;color:#1a1a1a;margin:0 0 8px;padding-right:40px;}.sticky-popup__subtitle{font-size:14px;color:#666;margin:0 0 24px;}.sticky-popup__gift{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);padding:14px 18px;border-radius:12px;margin-bottom:24px;}.sticky-popup__gift-icon{font-size:28px;}.sticky-popup__gift-text{font-size:14px;font-weight:600;color:#E65100;}.sticky-popup__form{display:flex;flex-direction:column;gap:16px;}.sticky-popup__step{display:none;}.sticky-popup__step.active{display:block;}.sticky-popup__input-group{position:relative;}.sticky-popup__label{display:block;font-size:13px;font-weight:600;color:#333;margin-bottom:8px;}.sticky-popup__input{width:100%;padding:14px 18px;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;transition:all 0.2s ease;box-sizing:border-box;background-color:#fff !important;color:#1a1a1a !important;}.sticky-popup__input:focus{outline:none;border-color:#2196F3;box-shadow:0 0 0 4px rgba(33, 150, 243, 0.1);background-color:#fff !important;color:#1a1a1a !important;}.sticky-popup__input::placeholder{color:#999 !important;}.sticky-popup__input:-webkit-autofill, .sticky-popup__input:-webkit-autofill:hover, .sticky-popup__input:-webkit-autofill:focus{-webkit-text-fill-color:#1a1a1a !important;-webkit-box-shadow:0 0 0px 1000px #fff inset !important;background-color:#fff !important;}.sticky-popup__submit{width:100%;padding:16px 24px;border:none;border-radius:12px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg, #2196F3 0%, #1976D2 100%);cursor:pointer;transition:all 0.2s ease;}.sticky-popup__submit:hover{background:linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);transform:translateY(-2px);box-shadow:0 4px 15px rgba(33, 150, 243, 0.4);}.sticky-popup__submit:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none;}.sticky-popup__success{text-align:center;padding:20px 0;}.sticky-popup__success-icon{font-size:64px;margin-bottom:16px;}.sticky-popup__success-title{font-size:20px;font-weight:700;color:#1a1a1a;margin:0 0 8px;}.sticky-popup__success-text{font-size:14px;color:#666;margin:0;}/* ═══════════════════════════════════════════════════════════════ МОБІЛЬНА АДАПТАЦІЯ ═══════════════════════════════════════════════════════════════ */ @media (max-width:768px){.sticky-cta{bottom:160px;right:12px;}.sticky-cta__button{padding:12px 18px;font-size:13px;max-width:280px;}.sticky-cta__icon{width:20px;height:20px;}.sticky-cta__microcopy{font-size:10px;padding:5px 10px;max-width:180px;}.sticky-popup{padding:24px;margin:16px;}.sticky-popup__title{font-size:18px;}}@media (max-width:480px){.sticky-cta{bottom:140px;right:10px;}.sticky-cta__button{padding:10px 14px;font-size:12px;max-width:240px;gap:8px;}.sticky-cta__badge{font-size:9px;padding:3px 6px;}.sticky-cta__microcopy{display:none;}}/* ═══════════════════════════════════════════════════════════════ ПРИХОВАННЯ НА БІЗНЕС СТОРІНКАХ (через JS) ═══════════════════════════════════════════════════════════════ */ body.page-business .sticky-cta{display:none !important;}