/* ======================================================= USTAWIENIA MENU DESKOPT ======================================================= */ /* .my-user-icon i, .womenucart i { font-size: 20px; } .my-user-item { margin-right: -15px; top:4px; } */ /* ========================================================== USTAWIENIA MENU ========================================================== */ /* ========================================================== ATLAS — HEADER ICONS ========================================================== */ /* USER */ #site-navigation .my-user-icon i { font-size: 22px !important; } /* KOSZYK */ #site-navigation .wcmenucart i.icon-basket { font-size: 20px !important; } /* LUPA */ #site-navigation .search-toggle-li i.icon-magnifier { font-size: 20px !important; } .my-user-item { margin-left: 8px !important; margin-right: 0 !important; top: 4px; } #site-navigation li.woo-menu-icon { margin-left: 5px !important; margin-right: 0 !important; } #site-navigation li.search-toggle-li { margin-left: 10px !important; } /* ========================================================== ATLAS — HEADER MENU SPACING ========================================================== */ #site-navigation .menu-link { padding-left: 18px !important; padding-right: 18px !important; } /* ========================================================== ATLAS — ODSTĘP MENU → IKONY ========================================================== */ #site-navigation .my-user-item { margin-left: 14px !important; } /* ========================================================== ATLAS — HEADER ICON SPACING TEST ========================================================== */ #site-navigation .my-user-item { margin-left: 20px !important; } #site-navigation .woo-menu-icon { margin-left: 10px !important; margin-right: 10px !important; } #site-navigation .search-toggle-li { margin-left: 10px !important; } /* ========================================================== ATLAS — HEADER ICONS ALIGNMENT ========================================================== */ #site-navigation .my-user-icon i, #site-navigation .wcmenucart i.icon-basket, #site-navigation .search-toggle-li i.icon-magnifier { vertical-align: middle !important; } #site-navigation .my-user-item, #site-navigation li.woo-menu-icon, #site-navigation li.search-toggle-li { display: flex !important; align-items: center !important; } /* ========================================================= ATLAS – LICZNIK KOSZYKA ========================================================= */ /* ========================================================= ATLAS – BADGE LICZNIKA KOSZYKA ========================================================= */ /* ========================================================= ATLAS – BADGE LICZNIKA KOSZYKA ========================================================= */ /* Kotwica tylko dla badge — nie zmienia układu menu */ #site-navigation .wcmenucart-count { position: relative !important; } /* Fioletowy badge */ #site-navigation .wcmenucart-count .wcmenucart-details.count { position: absolute !important; top: -7px !important; right: -14px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 12px !important; line-height: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #5f0ebe !important; color: #ffffff !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; font-weight: 700 !important; z-index: 20 !important; } /* Usuwamy ewentualne stare elementy dekoracyjne */ #site-navigation .wcmenucart-count .wcmenucart-details.count::before, #site-navigation .wcmenucart-count .wcmenucart-details.count::after { content: none !important; display: none !important; } /* ========================================================= ATLAS – ROZMIAR IKON HEADERA ========================================================= */ #site-navigation .wcmenucart .icon-basket, #site-navigation .search-toggle-li .icon-magnifier { font-size: 24px !important; } /* ========================================================== NUMMERI AIO — MENU SYSTEM KROK 1 — HAMBURGER NA DESKTOPIE ========================================================== */ @media (min-width: 769px) { /* pokazujemy hamburger również na desktopie */ #site-header .oceanwp-mobile-menu-icon { display: flex !important; align-items: center !important; } /* ukrywamy klasyczną nawigację desktopową */ /* #site-navigation-wrap { display: none !important; } */ } /* ========================================================== NUMMERI AIO — MENU SYSTEM KROK 2 — IKONY + CENTROWANIE LOGO ========================================================== */ /* ------------------------------------------------------ 2. UKRYWAMY ZWYKŁE POZYCJE MENU ZOSTAWIAMY TYLKO IKONY ------------------------------------------------------ */ #site-navigation #menu-main-menu > li:not(.my-user-item):not(.woo-menu-icon):not(.search-toggle-li) { display: none !important; } /* ------------------------------------------------------ 3. LOGO — CENTRUM NAGŁÓWKA ------------------------------------------------------ */ #site-logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } } /* ======================================================= ATLAS – MOBILE HEADER ICONS ======================================================= */ /* .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user { font-size: 22px !important; } .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user::before { font-size: 22px !important; } */ /* KOSZYK */ /* .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket { font-size: 22px !important; } .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket::before { font-size: 22px !important; }*/ /* UKRYWANIE IKON USERA KOSZYKA Z MENU MOBILNEGO GDZIE NIE DZIALA DROP ANI KOSZYK */ .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user { display: none !important; } .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user::before { display: none !important; } /* KOSZYK */ .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket { display: none !important; } .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket::before { display: none !important; } /* UKRYWAMY LICZNIK KOSZYKA Z MOBILNEGO MENU */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-count, .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count::before { display: none !important; } /* ========================================================== ATLAS — PRZYWRÓCENIE IKON W WIDOKU MOBILNYM ========================================================== */ @media (max-width: 768px) { /* USER */ .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user { display: inline-block !important; } .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user::before { display: inline-block !important; } /* KOSZYK */ .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket { display: inline-block !important; } .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket::before { display: inline-block !important; } /* LICZNIK KOSZYKA */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-count { display: inline-block !important; } .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count::before { display: block !important; } } /* ========================================================== ATLAS — PRZYWRÓCENIE IKON NA TABLECIE 769–960 px ========================================================== */ @media (min-width: 769px) and (max-width: 960px) { /* USER */ .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user { display: inline-block !important; } .oceanwp-mobile-menu-icon a.mobile-user-icon i.fa-user::before { display: inline-block !important; } /* KOSZYK */ .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket { display: inline-block !important; } .oceanwp-mobile-menu-icon a.wcmenucart i.icon-basket::before { display: inline-block !important; } /* LICZNIK */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-count { display: inline-block !important; } .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count::before { display: block !important; } } /* ========================================================== ATLAS — LICZNIK KOSZYKA MOBILE + TABLET ========================================================== */ @media (max-width: 960px) { /* Kotwica dla licznika */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-count { position: relative !important; } /* Fioletowe kółko z liczbą */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count { position: absolute !important; top: 42px !important; right: -12px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #5f0ebe !important; color: #ffffff !important; border: none !important; border-radius: 50% !important; font-size: 11px !important; line-height: 18px !important; font-weight: 700 !important; z-index: 20 !important; } /* Usuwamy stare dekoracje licznika */ .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count::before, .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count::after { content: none !important; display: none !important; } } /* ========================================================== ATLAS — ODSTĘPY IKON HEADERA MOBILE + TABLET ========================================================== */ @media (max-width: 960px) { /* USER */ .oceanwp-mobile-menu-icon a.mobile-user-icon { margin-right: -5px !important; } /* KOSZYK */ .oceanwp-mobile-menu-icon a.wcmenucart { margin-left: 0 !important; margin-right: 5px !important; } /* LUPA — jeśli jest aktywna w tym układzie */ .oceanwp-mobile-menu-icon a.search-toggle-li { margin-left: 0 !important; } } /* ========================================================== ATLAS — ODSTĘPY IKON HEADERA TABLET ========================================================== */ @media (min-width: 768px) and (max-width: 960px) { .oceanwp-mobile-menu-icon a.mobile-user-icon { margin-right: 8px !important; } .oceanwp-mobile-menu-icon a.wcmenu-cart { margin-left: 8px !important; } } /* ====================================================================================== */ /* ========================================================== ATLAS — HAMBURGER MENU KROK 2 — PODSTAWOWY STYL PANELU ========================================================== */ #mobile-dropdown { width: 430px !important; max-width: calc(100vw - 30px) !important; min-height: 560px !important; /* TŁO */ background: #f1f5f9 !important; /* DELIKATNE ZAOKRĄGLENIE */ border-radius: 8px !important; /* TYPOGRAFIA */ font-family: "Manrope", sans-serif !important; color: #334155 !important; } /* ========================================================== ATLAS — HAMBURGER MENU KOLOR I CZCIONKA POZYCJI ========================================================== */ #mobile-dropdown #mobile-nav ul.menu > li > a { font-family: "Manrope", sans-serif !important; color: #334155 !important; } /* ========================================================== ATLAS — HAMBURGER MENU SUBMENU — TŁO ========================================================== */ #mobile-dropdown, #mobile-dropdown #mobile-nav, #mobile-dropdown #mobile-nav ul, #mobile-dropdown #mobile-nav .sub-menu { background: #f1f5f9 !important; } /* ========================================================== ATLAS — WŁASNY SCROLLBAR HAMBURGER MENU ========================================================== */ /* ========================================================== ATLAS — CUSTOM SCROLLBAR MENU Cienki scrollbar 1px — wersja stabilna ========================================================== */ /* ========================================================== OBSZAR MENU ========================================================== */ #mobile-dropdown { overflow-y: auto !important; overflow-x: hidden !important; /* ukrywamy natywny scrollbar */ scrollbar-width: none !important; } #mobile-dropdown::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ========================================================== TOR SCROLLA Jest poza #mobile-dropdown, więc nie przewija się razem z treścią. ========================================================== */ .atlas-menu-scrollbar { position: fixed !important; width: 1px !important; background: transparent !important; z-index: 999999 !important; pointer-events: none !important; display: none; } /* ========================================================== UCHWYT SCROLLA ========================================================== */ .atlas-menu-scrollbar-thumb { position: absolute !important; top: 0; right: 0; width: 1px !important; min-height: 30px !important; background: #334155 !important; border-radius: 10px !important; cursor: grab !important; pointer-events: auto !important; } /* ========================================================== PODCZAS PRZECIĄGANIA ========================================================== */ .atlas-menu-scrollbar-thumb.is-dragging { cursor: grabbing !important; } /* ========================================================== ATLAS — MENU LEVEL SYSTEM ========================================================== */ #mobile-nav .atlas-original-menu { display: none !important; } /* ========================================================== KONTENER POZIOMÓW ========================================================== */ #atlas-menu-levels { position: relative !important; width: 100% !important; min-height: 100% !important; box-sizing: border-box !important; } /* ========================================================== POJEDYNCZY POZIOM ========================================================== */ .atlas-menu-level { display: block !important; width: 100% !important; box-sizing: border-box !important; opacity: 0; transform: translateX(20px); transition: opacity 0.25s ease, transform 0.25s ease; } .atlas-menu-level.is-active { opacity: 1; transform: translateX(0); } /* ========================================================== NAGŁÓWEK POZIOMU ========================================================== */ .atlas-menu-level-header { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; margin-bottom: 8px !important; box-sizing: border-box !important; } /* ========================================================== POWRÓT ========================================================== */ .atlas-menu-back { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: none !important; background: transparent !important; color: #334155 !important; font-family: "Manrope", sans-serif !important; font-size: 26px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } /* ========================================================== TYTUŁ POZIOMU ========================================================== */ .atlas-menu-level-title { color: #334155 !important; font-family: "Manrope", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; } /* ========================================================== LISTA ========================================================== */ .atlas-menu-level-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== POZYCJE ========================================================== */ .atlas-menu-level-item { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* ========================================================== LINKI ========================================================== */ .atlas-menu-level-link { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; padding: 13px 10px !important; color: #334155 !important; background: transparent !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; border: none !important; box-shadow: none !important; } .atlas-menu-level-link:hover { color: #334155 !important; background: transparent !important; } /* ========================================================== STRZAŁKA ========================================================== */ .atlas-menu-arrow { flex: 0 0 auto !important; margin-left: 15px !important; color: #334155 !important; font-family: Arial, sans-serif !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; } /* ========================================================== ATLAS — STRZAŁKI POZIOMÓW MENU ========================================================== */ /* Strzałka przejścia do kolejnego poziomu */ .atlas-menu-level-link { padding-right: 28px !important; } .atlas-menu-arrow { flex: 0 0 auto !important; margin-left: 20px !important; color: #334155 !important; font-family: Arial, sans-serif !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1 !important; /* transform: translateY(-10px);*/ position: relative !important; left: -10px !important; top: -1px !important; } /* ========================================================== STRZAŁKA POWROTU ========================================================== */ .atlas-menu-back { width: 30px !important; height: 42px !important; margin: 0 10px 0 0 !important; padding: 0 !important; color: #334155 !important; font-family: Arial, sans-serif !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ========================================================== ATLAS — WYSZUKIWANIE NA DOLE PANELU ========================================================== */ #mobile-dropdown { position: absolute !important; } /* Pole wyszukiwania */ #mobile-dropdown .atlas-menu-search { position: absolute !important; left: 24px !important; right: 24px !important; bottom: 18px !important; z-index: 10000 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== ZAPAS MIEJSCA DLA MENU ========================================================== */ #atlas-menu-levels { padding-bottom: 75px !important; } /* ========================================================== INPUT ========================================================== */ #mobile-dropdown .atlas-menu-search input { width: 100% !important; box-sizing: border-box !important; color: #334155 !important; font-family: "Manrope", sans-serif !important; } /* placeholder */ #mobile-dropdown .atlas-menu-search input::placeholder { color: #334155 !important; opacity: 0.65 !important; } /* ========================================================== ATLAS — WYSZUKIWANIE W JEDNYM RZĘDZIE ========================================================== */ #mobile-dropdown .atlas-menu-search { display: flex !important; align-items: center !important; flex-direction: row !important; width: auto !important; height: 42px !important; } #atlas-menu-levels > .atlas-menu-level.is-active > .atlas-menu-level-header:has(.atlas-menu-level-title:empty) { display: none !important; } /* ========================================================== ATLAS — CAŁY NAGŁÓWEK POZIOMU JEST KLIKALNY ========================================================== */ #mobile-dropdown .atlas-menu-level-header { cursor: pointer !important; } #mobile-dropdown .atlas-menu-level-header .atlas-menu-back { cursor: pointer !important; } /* ========================================================== ATLAS — FINALNY UKŁAD PANELU MENU MENU + STAŁA DOLNA WYSZUKIWARKA ========================================================== */ /* ========================================================== 1. SAM PANEL MENU ========================================================== */ #mobile-dropdown { position: relative !important; box-sizing: border-box !important; overflow: hidden !important; /* * Panel ma własną wysokość. * Nie pozwalamy mu rozciągać strony. */ height: min( 720px, calc(100dvh - 230px) ) !important; max-height: calc(100dvh - 230px) !important; } /* ========================================================== 2. PRZEWIJANA CZĘŚĆ MENU ========================================================== */ #mobile-dropdown #atlas-menu-levels { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 82px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } /* Chrome / Safari */ #mobile-dropdown #atlas-menu-levels::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* ========================================================== 3. STAŁA DOLNA STREFA WYSZUKIWANIA ========================================================== */ #mobile-dropdown .atlas-menu-search-footer { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 82px !important; margin: 0 !important; padding: 12px 24px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; background: #f1f5f9 !important; z-index: 99999 !important; /* * Bardzo ważne: * footer nie bierze udziału * w przewijaniu menu. */ transform: translateZ(0) !important; } /* ========================================================== 4. FORMULARZ WYSZUKIWANIA ========================================================== */ #mobile-dropdown .atlas-menu-search { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: stretch !important; flex-direction: row !important; } /* ========================================================== 5. INPUT ========================================================== */ #mobile-dropdown .atlas-menu-search input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 58px !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================== 6. PRZYCISK ========================================================== */ #mobile-dropdown .atlas-menu-search button { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; height: 58px !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================== 7. TABLET ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { #mobile-dropdown { height: min( 760px, calc(100dvh - 210px) ) !important; max-height: calc(100dvh - 210px) !important; } } /* ========================================================== 8. TELEFON ========================================================== */ @media (max-width: 767px) { #mobile-dropdown { height: min( 720px, calc(100dvh - 230px) ) !important; max-height: calc(100dvh - 230px) !important; /* * Zaokrąglenie tylko panelu menu. */ border-radius: 0 0 14px 14px !important; } } /* ========================================================== 9. DESKTOP — PANEL NIE MOŻE ROZCIĄGAĆ HEADERA ========================================================== */ @media (min-width: 1025px) { #mobile-dropdown { height: min( 620px, calc(100dvh - 180px) ) !important; max-height: calc(100dvh - 180px) !important; } } /* ========================================================== ATLAS — TESTOWY UKŁAD MENU + STAŁA WYSZUKIWARKA ========================================================== */ #mobile-dropdown { position: relative !important; overflow: hidden !important; } /* PRZEWIJANA CZĘŚĆ MENU */ #mobile-dropdown #atlas-menu-levels { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 82px !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 0 20px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch !important; } /* STAŁA DOLNA STREFA */ #mobile-dropdown .atlas-menu-search-footer { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 82px !important; margin: 0 !important; padding: 12px 24px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; background: #f1f5f9 !important; z-index: 999999 !important; } /* FORMULARZ */ #mobile-dropdown .atlas-menu-search { position: static !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; display: flex !important; box-sizing: border-box !important; } /* POLE TEKSTOWE */ #mobile-dropdown .atlas-menu-search input { flex: 1 1 auto !important; min-width: 0 !important; height: 58px !important; margin: 0 !important; box-sizing: border-box !important; } /* PRZYCISK SZUKANIA */ #mobile-dropdown .atlas-menu-search button { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; height: 58px !important; margin: 0 !important; box-sizing: border-box !important; } /* TELEFON + TABLET */ @media (max-width: 1024px) { #mobile-dropdown { height: calc(100dvh - 230px) !important; max-height: calc(100dvh - 230px) !important; } } /* DESKTOP */ @media (min-width: 1025px) { #mobile-dropdown { height: 430px !important; max-height: calc(100dvh - 180px) !important; } } /* ========================================================== ATLAS — MENU NIE ROZCIĄGA GŁÓWNEGO HEADERA ========================================================== */ /* ========================================================== ATLAS — PANEL MENU DESKTOP 430px / MOBILE RESPONSIVE ========================================================== */ #mobile-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; width: 430px !important; max-width: calc(100vw - 20px) !important; margin: 0 !important; z-index: 99999 !important; box-sizing: border-box !important; } /* ========================================================== PANEL WEWNĘTRZNY ========================================================== */ #mobile-dropdown #atlas-menu-levels { width: 100% !important; box-sizing: border-box !important; } /* ========================================================== WYSZUKIWANIE — DÓŁ PANELU ========================================================== */ #mobile-dropdown .atlas-menu-search-footer { position: absolute !important; left: 0 !important; bottom: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* ========================================================== TELEFON / TABLET ========================================================== */ @media (max-width: 767px) { #mobile-dropdown { width: calc(100vw - 20px) !important; max-width: 430px !important; } } /* * Header pozostaje normalnej wysokości. * Menu jest jego warstwą poniżej. */ #mobile-dropdown.is-open, #mobile-dropdown[style*="display: block"] { position: absolute !important; top: 100% !important; left: 0 !important; } /* * Sam panel menu zachowuje własną wysokość. */ #mobile-dropdown #atlas-menu-levels { position: absolute !important; } /* * Footer wyszukiwarki pozostaje wewnątrz * panelu menu, a nie headera. */ #mobile-dropdown .atlas-menu-search-footer { position: absolute !important; bottom: 0 !important; } /* ========================================================== ATLAS — FINAL VISUAL STYLE Inspiracja: minimalistyczne menu premium ========================================================== */ /* ========================================================== 1. GŁÓWNA TYPOGRAFIA MENU ========================================================== */ #mobile-dropdown, #mobile-dropdown .atlas-menu-level, #mobile-dropdown .atlas-menu-level-list, #mobile-dropdown .atlas-menu-level-link, #mobile-dropdown .atlas-menu-level-title, #mobile-dropdown .atlas-menu-back { font-family: "Manrope", sans-serif !important; color: #314455 !important; } /* ========================================================== 2. POZYCJE MENU ========================================================== */ #mobile-dropdown .atlas-menu-level-link { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 14px !important; color: #314455 !important; background: transparent !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.35 !important; text-decoration: none !important; border: none !important; box-shadow: none !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* ========================================================== 3. HOVER — FIOLET ========================================================== */ #mobile-dropdown .atlas-menu-level-link:hover { color: #7b32ff !important; background: transparent !important; } /* ========================================================== 4. STRZAŁKI SUBMENU ========================================================== */ #mobile-dropdown .atlas-menu-arrow { flex: 0 0 auto !important; margin-left: 20px !important; color: #314455 !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; transition: color 0.2s ease, transform 0.2s ease !important; } #mobile-dropdown .atlas-menu-level-link:hover .atlas-menu-arrow { color: #7b32ff !important; transform: translateX(2px) translateY(-1px); } /* ========================================================== 5. NAGŁÓWEK POZIOMU ========================================================== */ #mobile-dropdown .atlas-menu-level-header { min-height: 58px !important; margin: 0 0 12px 0 !important; padding: 0 14px !important; box-sizing: border-box !important; border-bottom: 1px solid rgba(49, 68, 85, 0.10) !important; } /* ========================================================== 6. TYTUŁ POZIOMU ========================================================== */ #mobile-dropdown .atlas-menu-level-title { color: #314455 !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; } /* ========================================================== 7. POWRÓT ========================================================== */ #mobile-dropdown .atlas-menu-back { width: 34px !important; height: 42px !important; margin: 0 12px 0 0 !important; padding: 0 !important; color: #314455 !important; font-family: Arial, sans-serif !important; font-size: 30px !important; font-weight: 300 !important; line-height: 1 !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: color 0.2s ease, transform 0.2s ease !important; } #mobile-dropdown .atlas-menu-level-header:hover .atlas-menu-back { color: #7b32ff !important; } /* ========================================================== 8. DELIKATNE SEPARATORY ========================================================== */ #mobile-dropdown .atlas-menu-level-item { border-bottom: 1px solid rgba(49, 68, 85, 0.07) !important; } #mobile-dropdown .atlas-menu-level-item:last-child { border-bottom: none !important; } /* ========================================================== 9. ODSTĘP LISTY OD NAGŁÓWKA ========================================================== */ #mobile-dropdown .atlas-menu-level-list { padding: 2px 0 10px 0 !important; } /* ========================================================== 10. WYSZUKIWARKA — POZOSTAJE OSOBNĄ WARSTWĄ ========================================================== */ #mobile-dropdown .atlas-menu-search { font-family: "Manrope", sans-serif !important; background: #f1f5f9 !important; border-top: 1px solid rgba(49, 68, 85, 0.08) !important; box-shadow: 0 -8px 18px rgba(49, 68, 85, 0.04) !important; } /* ========================================================== 11. TEKST WYSZUKIWANIA ========================================================== */ #mobile-dropdown .atlas-menu-search input { color: #314455 !important; font-family: "Manrope", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; } #mobile-dropdown .atlas-menu-search input::placeholder { color: #314455 !important; opacity: 0.65 !important; } /* ========================================================== 12. PRZYCISK WYSZUKIWANIA ========================================================== */ #mobile-dropdown .atlas-menu-search button, #mobile-dropdown .atlas-menu-search input[type="submit"] { background: #5f0ebe !important; border: none !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } #mobile-dropdown .atlas-menu-search button:hover, #mobile-dropdown .atlas-menu-search input[type="submit"]:hover { background: #7b32ff !important; } /* ========================================================== ATLAS — HOVER NAGŁÓWKA POWROTU ========================================================== */ #mobile-dropdown .atlas-menu-level-header:hover .atlas-menu-level-title { color: #7b32ff !important; } #mobile-dropdown .atlas-menu-level-header:hover .atlas-menu-back { color: #7b32ff !important; } /* ================================= Z DOSTOSUJ PRZENIESIONE FUNKCJE ========================================= */ /* usuwa ramkę hamburgera */ .oceanwp-mobile-menu-icon a, .oceanwp-mobile-menu-icon div { outline: none !important; border: none !important; box-shadow: none !important; } /* usuwa efekt po kliknięciu (focus) */ .oceanwp-mobile-menu-icon a:focus, .oceanwp-mobile-menu-icon div:focus, .oceanwp-mobile-menu-icon a:active, .oceanwp-mobile-menu-icon div:active { outline: none !important; border: none !important;    box-shadow: none !important; } @media (max-width: 768px) { .mobile-user-icon i { font-size: 18px; }