/** * Мобільний хедер + меню Voltaris (≤767px). * * Меню (.bricks-mobile-menu-wrapper) виноситься скриптом header-mobile-menu.js у * , тож на відкритті стан дублюється класом html.voltaris-menu-open. * Завдяки виносу хедер зберігає скломорфізм, а меню — повноекранне. * * 1) Кнопка-бургер: біла капсула, іконка menu.svg (1.125rem) + «Меню»; на * відкритті — хрестик. * 2) Хедер на відкритті: фон #FFFFFF1A (скломорфізм, blur лишається). * 3) Меню: фон #0C172B, пункти + соцмережі + телефон по центру (макет Figma). */ @media (max-width: 767px) { /* ======================================================== 1. КНОПКА-БУРГЕР ======================================================== */ /* Контейнер: прибираємо зайвий білий фон і padding-right:4.125rem (лишок від старого зовнішнього підпису) — капсулу малюємо на самому тоглі. */ #brx-header .brxw-header-02__nav-menu { background: transparent; padding: 0; } #brx-header .brxw-header-02__nav-menu .bricks-mobile-menu-toggle { display: inline-flex; align-items: center; align-self: center; gap: 0.5rem; width: auto; min-width: 0; height: auto; overflow: visible; background-color: #ffffff; padding: 0.625rem 1rem; /* зліва 1rem — як на макеті */ border-radius: 8px; } /* Ховаємо три дефолтні смужки Bricks */ #brx-header .brxw-header-02__nav-menu .bricks-mobile-menu-toggle span { display: none; } /* Іконка = menu.svg. position:static — інакше Bricks дає ::before position:absolute (хіт-оверлей), і іконка липне у верхній лівий кут. */ #brx-header .brxw-header-02__nav-menu .bricks-mobile-menu-toggle::before { content: ""; position: static; inset: auto; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22mask0_1509_2522%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2218%22%20height%3D%2218%22%3E%0A%3Crect%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cg%20mask%3D%22url%28%23mask0_1509_2522%29%22%3E%0A%3Cpath%20d%3D%22M2.625%2013.2259V12.1011H15.375V13.2259H2.625ZM2.625%209.56254V8.43754H15.375V9.56254H2.625ZM2.625%205.89898V4.77417H15.375V5.89898H2.625Z%22%20fill%3D%22%231C1B1F%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } /* Підпис «Меню» */ #brx-header .brxw-header-02__nav-menu .bricks-mobile-menu-toggle::after { content: "Меню"; position: static; white-space: nowrap; font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; color: #1c1b1f; } /* Відкритий стан: кнопка лишається на місці (набір інакше кидає її вбік). */ #brx-header .brxw-header-02__nav-menu.show-mobile-menu .bricks-mobile-menu-toggle { position: static; top: auto; right: auto; left: auto; } /* Іконка стає хрестиком */ #brx-header .brxw-header-02__nav-menu.show-mobile-menu .bricks-mobile-menu-toggle::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.2%204.2%2013.8%2013.8M13.8%204.2%204.2%2013.8%22%20stroke%3D%22%231C1B1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* ======================================================== 2. ПЛАВАЮЧИЙ ХЕДЕР-КАПСУЛА ======================================================== */ #brx-header { top: 20px !important; left: 16px !important; right: 16px !important; width: auto !important; } /* На відкритті меню — скломорфізм хедера: фон #FFFFFF1A (blur лишається). */ html.voltaris-menu-open #brx-header { background: rgba(255, 255, 255, 0.1) !important; /* #FFFFFF1A */ } /* Приховування при скролі вниз: капсула на top:20px заввишки ~60px, тож translateY(-100%) (=-60px) лишає ~20px видимими. Зсуваємо на всю висоту + верхній відступ, щоб капсула ховалась ПОВНІСТЮ за край екрана. */ #brx-header.hide { transform: translateY( calc( -100% - 28px ) ) !important; } /* ======================================================== 3. МЕНЮ НА ВЕСЬ ЕКРАН (винесене в скриптом) ======================================================== */ /* За замовчуванням приховане (Bricks-стилі після виносу не діють) */ body > .bricks-mobile-menu-wrapper { position: fixed; inset: 0; z-index: 900; /* нижче хедера (#brx-header ~9999) — хедер зверху меню */ /* !important — перебиваємо стороннє .bricks-mobile-menu-wrapper.left{display:block}, яке інакше вимикає flex (тоді контент угорі, лого не внизу, немає центрування). */ display: flex !important; flex-direction: column; align-items: center; width: 100%; max-width: 100vw; padding: 6rem 1rem 2rem; background: #0C172B; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0.25s; overflow-y: auto; overscroll-behavior: contain; /* скрол не «протікає» на сторінку під меню */ /* -webkit-overflow-scrolling:touch НЕ додаємо — на iOS ламає flex-центрування */ } /* Центральний блок (пункти + соцмережі + телефон) — по центру вертикалі. Відступи 38px через margin (а не gap) — flexbox gap ненадійний у старших Safari, елементи злипаються; margin працює скрізь однаково. */ body > .bricks-mobile-menu-wrapper .vt-menu-main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } body > .bricks-mobile-menu-wrapper .vt-menu-main > * + * { margin-top: 38px; } html.voltaris-menu-open body > .bricks-mobile-menu-wrapper { visibility: visible; opacity: 1; } /* overlay не потрібен (меню суцільне) */ body > .bricks-mobile-menu-overlay { display: none; } /* блокуємо прокрутку сторінки під меню */ html.voltaris-menu-open, html.voltaris-menu-open body { overflow: hidden; } /* --- пункти --- */ body > .bricks-mobile-menu-wrapper .bricks-mobile-menu { display: flex; flex-direction: column; align-items: center; width: auto; margin: 0; padding: 0; list-style: none; overflow: visible; } body > .bricks-mobile-menu-wrapper .bricks-mobile-menu > li { width: auto; } /* відступ 24px між пунктами через margin (Safari-safe) */ body > .bricks-mobile-menu-wrapper .bricks-mobile-menu > li + li { margin-top: 24px; } body > .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a { display: block; padding: 0; line-height: 1.35; text-align: center; text-decoration: none; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: 1.25rem; /* 20px */ letter-spacing: -0.01em; color: #ffffff; } /* --- соцмережі --- */ body > .bricks-mobile-menu-wrapper .vt-socials { display: flex; flex-direction: row; align-items: center; justify-content: center; } body > .bricks-mobile-menu-wrapper .vt-socials > * + * { margin-left: 10px; /* замість gap (Safari-safe) */ } body > .bricks-mobile-menu-wrapper .vt-social { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0.875rem; border-radius: 8px; } body > .bricks-mobile-menu-wrapper .vt-social svg { width: 1.438rem; height: 1.438rem; display: block; } /* Telegram — біла кнопка, темна іконка */ body > .bricks-mobile-menu-wrapper .vt-social--tg { background: #ffffff; } body > .bricks-mobile-menu-wrapper .vt-social--tg svg path { fill: #0C172B; } /* Instagram / Facebook — напівпрозорі кнопки, біла іконка */ body > .bricks-mobile-menu-wrapper .vt-social--ig, body > .bricks-mobile-menu-wrapper .vt-social--fb { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } body > .bricks-mobile-menu-wrapper .vt-social--ig svg path, body > .bricks-mobile-menu-wrapper .vt-social--fb svg path { fill: #ffffff; } /* --- телефон --- */ body > .bricks-mobile-menu-wrapper .vt-phone { text-decoration: none; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: 1.25rem; /* 20px */ line-height: 1.35; letter-spacing: -0.01em; color: #ffffff; } /* --- низ меню: роздільник + логотип --- */ body > .bricks-mobile-menu-wrapper .vt-menu-foot { display: flex; flex-direction: column; align-items: center; width: 100%; } body > .bricks-mobile-menu-wrapper .vt-menu-foot > * + * { margin-top: 16px; /* замість gap (Safari-safe) */ } body > .bricks-mobile-menu-wrapper .vt-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.15); /* border перед логотипом */ } body > .bricks-mobile-menu-wrapper .vt-logo { display: block; width: 22.438rem; max-width: 100%; height: auto; } }