. */ .nav,.nav__sub{list-style:none;margin:0} .nav{padding:0} @media (max-width:1024px){ .nav{padding:16px 24px 60px} } /* ---------- Логотип-зображення ---------- */ .logo__img{display:block;height:52px;width:auto;flex:none} @media (max-width:600px){ .logo__img{height:42px} } /* Логотип один на весь сайт — з налаштувань теми. Автоматичну інверсію для темного тла не робимо: герб із кольорами вона зіпсує. */ /* ---------- Дії в шапці: Facebook, пошта, телефон, пошук ---------- */ .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none} .header-actions__link, .header-actions .search-toggle{ width:44px;height:44px;display:grid;place-items:center;border-radius:50%; background:var(--grey);color:var(--dark); transition:background .2s var(--ease),color .2s var(--ease) } .header-actions__link:hover, .header-actions__link:focus-visible, .header-actions .search-toggle:hover, .header-actions .search-toggle:focus-visible{background:var(--teal);color:var(--white)} .header-actions svg{width:19px;height:19px} /* На тлі банера — світлі іконки */ .header-home .header-actions__link, .header-home .header-actions .search-toggle{background:rgba(255,255,255,.14);color:var(--white)} .header-home .header-actions__link:hover, .header-home .header-actions .search-toggle:hover{background:var(--teal)} /* Шапка вже має margin-left:auto на search-toggle — перебиваємо, бо тепер відступ тримає весь блок .header-actions */ .header-inner .header-actions .search-toggle{margin-left:0} @media (max-width:1024px){ .header-actions{margin-left:auto;order:2} .burger{order:3;margin-left:0} .header-actions__link{display:none} /* на мобільному лишаємо тільки пошук */ .header-actions__link--phone{display:grid} /* і телефон — він найпотрібніший */ } /* ---------- Живий пошук у попапі ---------- */ /* div.search-results, бо на сторінці результатів пошуку WordPress вішає клас search-results на — голий селектор дав би зайвий відступ зверху всієї сторінки. */ div.search-results{margin-top:26px} .search-results__status{font-size:14px;color:var(--muted);min-height:20px} .search-results__list{display:grid;gap:2px;margin-top:10px} .search-results__item{ display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-sm); transition:background .18s var(--ease) } .search-results__item:hover, .search-results__item:focus-visible{background:var(--grey)} .search-results__type{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)} .search-results__title{font-size:16px;font-weight:500;line-height:1.35} .search-results__title mark{background:rgba(44,151,167,.22);color:inherit;padding:0 2px;border-radius:3px} .search-results__all{margin-top:16px} .search-results.is-loading .search-results__list{opacity:.5} @media (max-width:600px){ .search-results__item{padding:12px 10px} } /* ---------- Картки в слайдерах ---------- */ /* Swiper обрізає все, що виходить за межі контейнера, тому підйом картки на ховері й тінь під нею зрізалися. Даємо контейнеру відступи й компенсуємо їх від'ємними полями — розкладка не змінюється. Горизонтальні відступи рівно 16px: це найменший spaceBetween слайдера, тож наступний слайд починається рівно на межі обрізання і не визирає збоку. */ .news-swiper, .tiles-swiper{ padding:16px 16px 40px; margin:-16px -16px -40px } /* Тінь із від'ємним spread: по горизонталі вона виходить лише на 3px, тому повністю вміщається у відступ. Стандартна тінь із блюром 50px не влізла б і знову обрізалася б рівною лінією. */ .news-swiper .card:hover, .tiles-swiper .card:hover{ box-shadow:0 16px 34px -14px rgba(0,37,53,.30) } /* Слайд і картинка картки не призначені для фокуса з клавіатури (у картинки tabindex="-1"), тому системний контур на них лише заважає. Заголовок картки свій фокус зберігає — по ньому й ходить Tab. */ .swiper-slide:focus, .swiper-slide:focus-visible, .card__media:focus, .card__media:focus-visible{outline:none;box-shadow:none} /* ---------- Секція без слайдера на десктопі ---------- */ /* Swiper на широких екранах знищується в JS, тому inline-стилі з .swiper-wrapper зникають і grid спрацьовує. У DOM лишаються всі картки — зайві просто ховаємо, щоб на мобільному слайдер гортався по повному списку. */ @media (min-width:1024px){ [data-desktop-static] .slider-nav, [data-desktop-static] .line-pagination{display:none} [data-desktop-static] .news-swiper .swiper-wrapper{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px } [data-desktop-static] .news-swiper .swiper-slide{width:auto;margin:0} [data-desktop-static] .news-swiper .swiper-slide:nth-child(n+4){display:none} } /* ---------- Фокус в полях пошуку ---------- */ /* Системний контур прибраний, але замість нього є власна помітна підсвітка — інакше клавіатурний користувач не бачив би, де він. */ .search-modal input:focus, .banner-search input:focus{outline:none} .search-modal form:focus-within{border-bottom-color:var(--teal)} .banner-search:focus-within{box-shadow:0 0 0 3px rgba(44,151,167,.55)} .banner-search{transition:box-shadow .2s var(--ease)} /* ---------- Попередження (єдине місце для червоного) ---------- */ .notice-warning{ display:flex;align-items:flex-start;gap:12px; padding:16px 20px;border-radius:var(--r-md); background:rgba(221,44,28,.08);border-left:3px solid var(--red); color:var(--black);font-size:15px;line-height:1.5 } .notice-warning__title{font-weight:500;color:var(--red)} /* Атрибут hidden має перемагати display з інших правил (наприклад .search-hints{display:flex}) */ [hidden]{display:none !important} /* ---------- Анімований градієнт банера ---------- */ /* Окремий шар під вмістом: у нього overflow:hidden, тому плями не вилазять за межі хедера. Сам .header-home тримає overflow:visible, інакше обрізалася б випадайка пошуку. Плями рухаються через transform, а не через background-position: transform віддається відеокарті й не змушує браузер перемальовувати градієнт на кожному кадрі. */ .header-home{background-color:var(--dark)} .header-home__bg{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; contain:paint; background:linear-gradient(135deg,#002535 0%,#0f3b4d 46%,#17616e 100%) } /* * М'якість дає сам радіальний градієнт, а не filter:blur(). * Це принципово: blur перемальовується щокадру на всій площі плями * (на широкому екрані це понад мільйон пікселів двічі), а градієнт * растеризується один раз, далі рухається лише transform. */ .header-home__bg::before, .header-home__bg::after{ content:"";position:absolute;will-change:transform } .header-home__bg::before{ width:78vw;height:78vw;left:-20vw;top:-30vw; background:radial-gradient(circle at center, rgba(44,151,167,.60) 0%, rgba(44,151,167,.30) 34%, rgba(44,151,167,.08) 55%, rgba(44,151,167,0) 72%); animation:dib-aurora-a 26s ease-in-out infinite alternate } .header-home__bg::after{ width:72vw;height:72vw;right:-18vw;bottom:-32vw; background:radial-gradient(circle at center, rgba(79,179,193,.42) 0%, rgba(79,179,193,.20) 36%, rgba(79,179,193,.05) 58%, rgba(79,179,193,0) 74%); animation:dib-aurora-b 34s ease-in-out infinite alternate } /* Коли банер прокручено за межі екрана, анімація зупиняється — немає сенсу рахувати кадри для того, чого не видно. */ .header-home__bg.is-paused::before, .header-home__bg.is-paused::after{animation-play-state:paused} @keyframes dib-aurora-a{ 0% {transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(20vw,9vh,0) scale(1.16)} 100%{transform:translate3d(42vw,-7vh,0) scale(.94)} } @keyframes dib-aurora-b{ 0% {transform:translate3d(0,0,0) scale(1.05)} 50% {transform:translate3d(-24vw,-11vh,0) scale(.9)} 100%{transform:translate3d(-46vw,7vh,0) scale(1.2)} } /* Рух вимикається для тих, хто просив менше анімації. */ @media (prefers-reduced-motion: reduce){ .header-home__bg::before, .header-home__bg::after{animation:none} } /* Вміст банера — над шаром градієнта. */ .header-home .banner{position:relative;z-index:2} /* ---------- Футер ---------- */ .footer__top{grid-template-columns:1.1fr 1.3fr auto} .footer .logo{align-items:center;gap:14px} .footer .logo__img{height:56px} .footer .logo__text{font-size:15px;max-width:280px;line-height:1.3} .footer__multiline{display:block} .footer__contacts a{display:inline-block} .footer__bottom{grid-template-columns:1fr;justify-items:start} .footer__copy{font-size:13px;max-width:none;text-align:left;opacity:.75} .footer__copy p{display:inline;margin:0} .footer__copy p + p{display:block;margin-top:4px} .footer__copy-year{white-space:nowrap} @media (max-width:900px){ .footer__top{grid-template-columns:1fr} } /* ---------- Живий пошук у банері ---------- */ .banner-search-wrap{position:relative;max-width:720px;margin:36px auto 0} .banner-search-wrap .banner-search{margin:0} .search-results--banner{ position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:130; margin-top:0;padding:18px 20px 20px; background:var(--white);color:var(--black); border-radius:var(--r-md);box-shadow:0 24px 60px rgba(0,37,53,.28); text-align:left;max-height:min(60vh,520px);overflow-y:auto } @media (max-width:600px){ .search-results--banner{padding:14px 12px 16px} } /* ---------- SVG-заглушка замість зображення ---------- */ /* preserveAspectRatio="xMidYMid slice" у самій розмітці працює як object-fit:cover, тому заглушка заповнює будь-яке співвідношення. */ .ph{display:block;width:100%;height:100%} /* Заглушка в ролі головного зображення сінгла — пропорції як у фото */ .entry .ph.hero-img{aspect-ratio:16/9;border-radius:var(--r-lg);margin-bottom:36px} /* ---------- Кнопка «наверх» ---------- */ .to-top-btn{ position:fixed;right:24px;bottom:24px;z-index:120; width:52px;height:52px;display:grid;place-items:center; border-radius:50%;background:var(--dark);color:var(--white); box-shadow:0 10px 30px rgba(0,37,53,.28); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .25s var(--ease),transform .25s var(--ease), visibility .25s var(--ease),background .2s var(--ease) } .to-top-btn.is-visible{opacity:1;visibility:visible;transform:none} .to-top-btn:hover, .to-top-btn:focus-visible{background:var(--teal)} .to-top-btn svg{width:20px;height:20px} @media (max-width:600px){ .to-top-btn{right:16px;bottom:16px;width:46px;height:46px} } @media (prefers-reduced-motion: reduce){ .to-top-btn{transition:opacity .01s} } /* ---------- Липка панель на головній ---------- */ /* Панель зафіксована ОДРАЗУ, а не після скролу: якщо перемикати position у момент прокрутки, елемент випадає з потоку і сторінка смикається. Хедеру одразу дається padding зверху на висоту панелі, тому банер стоїть там само, де стояв. Клас is-stuck змінює лише кольори — розкладка від нього не залежить. */ .header-home{padding-top:var(--header-h);overflow:visible;position:relative;z-index:20} /* Декоративне коло вимкнене: воно трималося на overflow:hidden, а той обрізав випадайку пошуку в банері. Підсвітку й так дає анімований градієнт. */ .header-home::after{display:none} .header-home__bar{ position:fixed;top:0;left:0;right:0;width:100%;max-width:none; padding:0;z-index:110;background:transparent } .header-home__bar .topbar{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter); position:relative;z-index:1 } /* ---------- Біла панель з блюром після скролу ---------- */ /* Тривалість переходу в одному місці — щоб фон, логотип, меню й іконки міняли стан синхронно. */ :root{--stick-time:.55s} /* Фон винесений в окремий шар і проявляється через opacity. Так плавно наростає і блюр: перехід із backdrop-filter:none в blur() браузер не інтерполює, він просто вмикається різко. */ .header-home__bar::before{ content:"";position:absolute;inset:0;pointer-events:none; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 6px 24px rgba(0,37,53,.10); opacity:0;transition:opacity var(--stick-time) var(--ease) } .header-home.is-stuck .header-home__bar::before{opacity:1} .header-inner{ position:relative; transition:background var(--stick-time) var(--ease), box-shadow var(--stick-time) var(--ease), border-color var(--stick-time) var(--ease) } .header-inner.is-stuck{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 6px 24px rgba(0,37,53,.10); border-bottom-color:transparent } /* Браузери без backdrop-filter отримують щільніший фон */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .header-home__bar::before, .header-inner.is-stuck{background:rgba(255,255,255,.96)} } @media (prefers-reduced-motion: reduce){ :root{--stick-time:.01s} } /* Меню й іконки на білій панелі — та сама тривалість, що й фон */ .header-home .nav__link, .header-home .burger, .header-home .header-actions__link, .header-home .header-actions .search-toggle{ transition:background var(--stick-time) var(--ease), color var(--stick-time) var(--ease) } .header-home.is-stuck .nav__link{color:var(--dark)} .header-home.is-stuck .nav__link:hover, .header-home.is-stuck .nav__item--open > .nav__link{background:var(--grey)} .header-home.is-stuck .header-actions__link, .header-home.is-stuck .header-actions .search-toggle{background:var(--grey);color:var(--dark)} .header-home.is-stuck .header-actions__link:hover, .header-home.is-stuck .header-actions .search-toggle:hover{background:var(--teal);color:var(--white)} .header-home.is-stuck .burger{color:var(--dark)} @media (max-width:1024px){ /* Мобільне меню відкривається під панеллю */ .header-home.is-stuck .nav{top:var(--header-h)} } /* ---------- Смуга прокрутки ---------- */ /* Тонка смуга: темна доріжка, світлий акцентний повзунок. Та сама пара, що й у прикладі, тільки в кольорах сайту. */ html{ scrollbar-width:thin; scrollbar-color:var(--teal) var(--dark) } /* Chrome, Edge, Safari. Якщо на елементі задані scrollbar-width або scrollbar-color, Chrome ігнорує ::-webkit-scrollbar — тому всередині стандартні властивості скидаються. */ @supports selector(::-webkit-scrollbar){ html{scrollbar-width:auto;scrollbar-color:auto} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background-color:var(--dark)} ::-webkit-scrollbar-thumb{ background-color:var(--teal); border-radius:0; border:0 } /* Ховер світлішає, а не темніє: на темній доріжці темний повзунок просто зник би. */ ::-webkit-scrollbar-thumb:hover{background-color:#4fb3c1} ::-webkit-scrollbar-corner{background-color:var(--dark)} }