/* ============================================================ ЛІГА — WP-специфічні правки поверх liga.css ============================================================ */ /* Без демо-бара прототипу: хедер липне до самого верху. */ :root{--sw-h:0px} /* Адмін-бар WP: зсуваємо липкий хедер під нього. */ body.admin-bar .site-header{top:32px} @media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} } /* Контент статті (single.php): типографіка для the_content */ .a-body img{max-width:100%;height:auto;border-radius:14px} .a-body .wp-block-image{margin:24px 0} .a-body blockquote{border-left:4px solid #23a3c8;margin:24px 0;padding:6px 0 6px 20px;color:#444;font-weight:500} .a-body ul,.a-body ol{padding-left:22px} /* Скрін-рідер текст WP */ .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)} /* Пагінація блогу в стилі бренду */ .liga-pagination{display:flex;gap:8px;justify-content:center;margin-top:40px} .liga-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:12px;background:#fff;border:1.5px solid #e3e8ee;font-weight:700;color:#151515;text-decoration:none;transition:.2s} .liga-pagination .page-numbers:hover{border-color:#23a3c8;color:#23a3c8} .liga-pagination .page-numbers.current{background:#23a3c8;border-color:#23a3c8;color:#fff} /* ---------- Contact Form 7 у дизайні теми ---------- */ .book-body .wpcf7-form-control-wrap{display:block;width:100%} .book-body .wpcf7 .form-micro{margin-top:14px} .book-body .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:.78rem;font-weight:600;color:#ec3f20} .book-body .wpcf7-form-control.wpcf7-not-valid{border-color:#ec3f20} .book-body .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:2px solid #23a3c8;border-radius:12px;background:rgba(35,163,200,.08);color:#151515;font-size:.85rem;font-weight:600} .book-body .wpcf7 form.invalid .wpcf7-response-output, .book-body .wpcf7 form.failed .wpcf7-response-output, .book-body .wpcf7 form.aborted .wpcf7-response-output{border-color:#ec3f20;background:rgba(236,63,32,.06);color:#b3300f} .book-body .wpcf7 form.sent .wpcf7-response-output{display:none} .book-body .wpcf7-spinner{display:block;margin:10px auto 0} .book-body .wpcf7 select{appearance:auto;-webkit-appearance:auto} /* Назва тарифу в комірці повного прайсу — інакше «3 місяці» читаються як дешевші за «Місяць» */ table.ptbl .pt-name{display:block;margin-top:3px;font-size:.72rem;font-weight:600;color:#6f6f6f;line-height:1.25} /* .nav-links — клас і головного меню, і пагінації WP; медіа-правило шапки (@media max-width:1024px{.nav-links{display:none}}) інакше ховає пагінацію на мобільних. */ .liga-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-left:0} .liga-pagination .nav-links a{padding:0} /* ---------- Блок «Зміст» статті (ACF-layout ankornyjblok із продакшну) ---------- */ .a-toc{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:0 0 30px} .a-toc .a-toc-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.05rem;color:var(--ink);margin:0 0 12px} .a-toc ol{margin:0;padding-left:18px} .a-toc ol ol{padding-left:0} .a-toc li{margin:0 0 6px} .a-toc a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:.2s} .a-toc a:hover{border-bottom-color:var(--brand)} /* Ціль якірних посилань: компенсуємо липкий хедер, щоб заголовок не ховався під ним */ .article-body [id]{scroll-margin-top:110px} .a-anchor{display:block;height:0;overflow:hidden} /* Врізки code_text із продакшну */ .article-body blockquote p:last-child{margin-bottom:0} .article-body blockquote ol,.article-body blockquote ul{margin-bottom:0} /* ============ МЕГА-МЕНЮ ПОСЛУГ ============ */ .has-mega{position:static;display:flex;align-items:center} .mega-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:10px;font-weight:700;font-size:.95rem;color:var(--ink-2);transition:.2s} .mega-toggle svg{width:15px;height:15px;transition:transform .25s var(--ease)} .mega-toggle:hover,.mega-toggle.on,.has-mega.open .mega-toggle{color:var(--brand);background:var(--surface)} .has-mega.open .mega-toggle svg{transform:rotate(180deg)} .mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-top:1px solid var(--line); box-shadow:0 24px 48px -18px rgba(20,20,20,.22);opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:60} .has-mega.open .mega{opacity:1;visibility:visible;transform:translateY(0)} .mega[hidden]{display:block} .mega-in{display:grid;grid-template-columns:1fr 288px;gap:34px;padding:30px 0 34px;align-items:start} /* Багатоколонковий потік замість grid: групи мають різну кількість підпунктів, і рядкова сітка лишала б великі порожнечі під короткими колонками. */ .mega-cols{columns:4;column-gap:26px} .mega-col{min-width:0;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 14px;display:inline-block;width:100%} .mega-h{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.95rem;color:var(--ink); padding:8px 10px;border-radius:10px;transition:.18s} .mega-h:hover{background:var(--surface);color:var(--brand)} .mega-ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--brand); display:grid;place-items:center;flex:none} .mega-ic svg{width:17px;height:17px} .mega-sub{list-style:none;margin:2px 0 10px;padding:0 0 0 39px;display:grid;gap:1px} .mega-sub a{display:block;padding:5px 8px;border-radius:8px;font-size:.87rem;font-weight:600;color:var(--muted);transition:.16s} .mega-sub a:hover{color:var(--brand);background:var(--surface)} .mega-promo{background:var(--brand-grad);color:#fff;border-radius:var(--r);padding:22px;position:relative;overflow:hidden} .mega-promo::after{content:"";position:absolute;inset:0;background-image:var(--pattern-white);background-size:150px;opacity:.16;pointer-events:none} .mega-promo>*{position:relative;z-index:1} .mp-badge{display:inline-block;background:rgba(255,255,255,.2);border-radius:var(--r-pill);padding:5px 12px;font-size:.74rem;font-weight:800;margin-bottom:11px} .mega-promo h4{font-family:var(--font-display);font-weight:800;font-size:1.14rem;line-height:1.25;margin:0 0 8px} .mega-promo p{font-size:.85rem;opacity:.92;margin:0 0 15px;line-height:1.5} .mega-promo .btn-primary{background:#fff;color:var(--brand);box-shadow:none} .mega-promo .btn-primary:hover{background:#fff;transform:translateY(-2px)} .mp-more{display:block;text-align:center;margin-top:11px;font-size:.82rem;font-weight:700;color:#fff;opacity:.9} .mp-more:hover{opacity:1} @media(max-width:1240px){.mega-cols{columns:3}.mega-in{grid-template-columns:1fr 250px}} /* ============================================================ МОБІЛЬНЕ МЕНЮ — повна панель Один стиль рядка для всіх рівнів; липкі шапка й підвал; прокручується лише середня частина. ============================================================ */ .mobile-menu{padding:0;width:min(390px,90vw);gap:0} .mobile-menu .mm-head{position:sticky;top:0;z-index:3;background:var(--card);margin:0; padding:16px 18px;border-bottom:1px solid var(--line-2);flex:none} .mobile-menu .mm-head .logo img{height:30px;width:auto;display:block} .mm-close{width:40px;height:40px;border-radius:11px;background:var(--surface);border:0;color:var(--ink-2); display:grid;place-items:center;cursor:pointer;transition:.18s;font-size:0} .mm-close svg{width:18px;height:18px} .mm-close:active{background:var(--surface-2);color:var(--brand)} /* Прокручується тільки навігація */ .mm-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 12px 18px} .mm-nav{display:grid;gap:1px} /* Єдиний рядок меню — і для звичайних пунктів, і для розділів */ .mm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:11px 12px; border:0;background:none;border-radius:13px;text-align:left;cursor:pointer; font-family:var(--font);font-weight:700;font-size:1rem;color:var(--ink);transition:background .16s,color .16s} .mm-row:active{background:var(--surface)} .mm-row .mm-t{flex:1;min-width:0} .mm-row.on{color:var(--brand);background:var(--surface)} /* Іконка розділу */ .mm-ic{width:22px;height:22px;color:var(--brand);display:grid;place-items:center;flex:none} .mm-ic svg{width:20px;height:20px} /* Стрілка розкриття */ .mm-chev{width:18px;height:18px;color:var(--muted);flex:none;transition:transform .28s var(--ease),color .18s} .mm-row.open .mm-chev{transform:rotate(180deg);color:var(--brand)} /* Лічильник підпунктів */ .mm-count{flex:none;color:var(--muted);font-size:.82rem;font-weight:700} .mm-row.open .mm-count{color:var(--brand)} /* Тіло акордеона */ .mm-body{overflow:hidden} .mm-body[hidden]{display:none} .mm-body-in{display:grid;gap:1px;padding:2px 0 8px} /* Другий рівень — з напрямною лінією */ .mm-lvl2{padding-left:34px} .mm-lvl2 a{display:block;padding:9px 12px;border-radius:10px; font-size:.93rem;font-weight:600;color:var(--ink-2);transition:.16s} .mm-lvl2 a:active,.mm-lvl2 a.on{color:var(--brand);background:var(--surface)} .mm-all{color:var(--brand)!important;font-weight:800!important} /* Підвал: телефон, графік, соцмережі, CTA */ .mm-foot{position:sticky;bottom:0;z-index:3;margin-top:0;flex:none; background:var(--card);border-top:1px solid var(--line-2); padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:grid;gap:11px} .mm-foot .mm-phone{font-family:var(--font-display);font-size:1.32rem;font-weight:800;color:var(--brand);line-height:1.1} .mm-hours{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:-5px} .mm-soc{display:flex;gap:8px} .mm-soc a{width:38px;height:38px;border-radius:11px;background:var(--surface);color:var(--ink-2); display:grid;place-items:center;transition:.18s} .mm-soc a:active{background:var(--brand);color:#fff} .mm-soc svg{width:17px;height:17px} /* Прокрутку сторінки блокуємо, поки меню відкрите. position:fixed потрібен разом із inline top із JS, щоб зберегти позицію. */ body.menu-open{position:fixed;width:100%;overflow:hidden} /* Сама панель має бути вище фіксованого body та мати повну висоту в'юпорта */ .mobile-menu{height:100dvh;max-height:100dvh} /* Гасимо старе правило прототипу .mobile-menu a.mm-link (рамка + власні відступи): тепер геометрію рядка задає .mm-row, а .mm-link лишається тільки хуком для JS. */ .mobile-menu a.mm-link{border-bottom:0;border-radius:0;padding:0;font-size:inherit;font-weight:inherit} .mobile-menu a.mm-link:hover{background:none} .mobile-menu a.mm-row{padding:11px 12px;border-radius:13px;font-size:1rem;font-weight:700} .mobile-menu a.mm-row:active,.mobile-menu a.mm-row.on{background:var(--surface)} .mobile-menu .mm-lvl2 a{padding:10px 12px 10px 18px;border-radius:10px;font-size:.93rem;font-weight:600} .mobile-menu .mm-foot a.mm-link.btn{padding:0 26px;border-radius:var(--r-pill);font-weight:800;font-size:.98rem} .mobile-menu .mm-head a.mm-link{display:inline-flex;align-items:center} /* Блок клубів у мобільному меню — заповнює порожнечу корисним */ .mm-clubs{margin-top:22px} .mm-clubs-t{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);padding:0 12px;margin-bottom:6px} .mm-club{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:12px;transition:.16s} .mm-club svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:2px} .mm-club b{display:block;font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.3} .mm-club small{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:1px} .mm-club:active{background:var(--surface)} /* Низькі екрани: підвал не має з'їдати навігацію */ @media(max-height:700px){ .mm-foot{padding:11px 18px calc(11px + env(safe-area-inset-bottom));gap:9px} .mm-foot .mm-hours,.mm-foot .mm-soc{display:none} .mm-foot .mm-phone{font-size:1.15rem} .mobile-menu .mm-head{padding:12px 18px} .mm-clubs{margin-top:12px} } /* Дуже вузькі — трохи щільніше */ @media(max-width:360px){ .mm-row{gap:10px;padding:10px;min-height:48px;font-size:.96rem} .mm-ic{width:31px;height:31px} } /* ---- Кольори всередині мега-панелі ---- Панель лежить у