/* ============================================================ MENU MOBILNE — panel pełnoekranowy + animowany hamburger ============================================================ */ /* ---------------------------------------------------- panel */ .kp-mmenu { --mm-bg: #2B2724; --mm-ink: #F4F1EA; --mm-muted: #B8B0A2; --mm-accent: #C9A25A; --mm-line: rgba(244, 241, 234, 0.14); position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; overflow-y: auto; background: var(--mm-bg); color: var(--mm-ink); padding: 20px 24px calc(28px + env(safe-area-inset-bottom, 0px)); font-family: 'Inter', sans-serif; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .32s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .32s; } .kp-mmenu.is-open { opacity: 1; visibility: visible; transform: none; } /* Samo domięcie overflow — faktyczne zablokowanie scrolla (bez utraty pozycji strony, także na iOS Safari) robi JS przez position:fixed na z ujemnym top = zapamiętany scrollY. */ html.kp-mmenu-lock { overflow: hidden; } /* ------------------------------------------------ pasek górny */ .kp-mmenu__top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .kp-mmenu__logo { display: inline-flex; align-items: center; } .kp-mmenu__logo img { display: block; height: 34px; width: auto; } /* Zamykanie panelu = ten sam #kp-hamburger, patrz sekcja HAMBURGER niżej — nie ma tu osobnego przycisku "X". */ /* ----------------------------------------------------- linki */ .kp-mmenu__nav { flex: 1 1 auto; display: flex; align-items: center; margin: 24px 0; } .kp-mmenu__nav ul { list-style: none; margin: 0; padding: 0; width: 100%; } .kp-mmenu__nav li { border-bottom: 1px solid var(--mm-line); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(60ms * var(--i, 0)); } .kp-mmenu.is-open .kp-mmenu__nav li { opacity: 1; transform: none; } .kp-mmenu__nav a { display: block; padding: 16px 4px; font-size: clamp(22px, 6vw, 28px); font-weight: 500; color: var(--mm-ink); text-decoration: none; transition: color .2s ease; } .kp-mmenu__nav a:hover, .kp-mmenu__nav a:active { color: var(--mm-accent); } /* ------------------------------------------------- stopka CTA */ .kp-mmenu__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease .28s, transform .4s ease .28s; } .kp-mmenu.is-open .kp-mmenu__foot { opacity: 1; transform: none; } .kp-mmenu__cta { display: block; text-align: center; padding: 15px 20px; border-radius: 999px; background: var(--mm-accent); color: var(--mm-bg); font-weight: 600; text-decoration: none; transition: opacity .2s ease; } .kp-mmenu__cta:hover { opacity: .9; } .kp-mmenu__phone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--mm-line); border-radius: 999px; color: var(--mm-ink); text-decoration: none; font-weight: 500; transition: border-color .2s ease; } .kp-mmenu__phone:hover { border-color: var(--mm-accent); } .kp-mmenu__phone svg { width: 16px; height: 16px; fill: currentColor; } /* ============================================================ HAMBURGER — JEDEN przycisk, niezależny od nagłówka Elementora i od panelu (#kp-mmenu ma niższy z-index — przycisk zostaje widoczny NAD otwartym panelem i sam zamienia się w "X", które go zamyka — to nie jest osobny element). - position:fixed, transparentne tło wokół (tylko sam przycisk ma wypełnienie) — "przyklejony do góry" bez sticky sekcji; - domknięty: brąz z marki + białe linie; - otwarty (.is-active): białe tło + brązowy krzyżyk; - top ustawia JS (wyśrodkowanie względem logo w nagłówku); - pokazywany tylko do 767px (breakpoint "Mobile" w Elementorze — dopasuj, jeśli w Advanced → Responsive ustawiono inny próg). WAŻNE: motyw nadrzędny Hello Elementor ma w reset.css globalną regułę na sam element `button`/`[type="button"]` (różowy border, border-radius:3px, display:inline-block) — to selektor o TEJ SAMEJ specyficzności co pojedyncza klasa, więc w zależności od kolejności wczytania CSS mógł wygrywać z `.kp-hamburger` i nadpisywać kolor/tło/display. Dlatego celujemy tu w #kp-hamburger (ID = wyższa specyficzność) + !important na kluczowych właściwościach, żeby to było odporne niezależnie od kolejności wczytania arkuszy. ============================================================ */ #kp-hamburger { --kp-brand-brown: #C9A25A; position: fixed !important; top: 14px; right: 16px !important; z-index: 999999999 !important; display: none !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; background: var(--kp-brand-brown) !important; color: #FFFFFF !important; border: none !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(43, 39, 36, .22); padding: 0 !important; margin: 0 !important; cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .2s ease; } #kp-hamburger:hover { box-shadow: 0 4px 14px rgba(43, 39, 36, .28); } #kp-hamburger.is-active { background: #FFFFFF !important; color: var(--kp-brand-brown) !important; } #kp-hamburger:focus { outline: none; } #kp-hamburger:focus-visible { outline: 2px solid #2B2724; outline-offset: 3px; } @media (max-width: 767px) { #kp-hamburger { display: flex !important; } } .kp-burger__box { position: relative; display: block; width: 22px; height: 16px; } .kp-burger__line { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease, top .3s ease; } .kp-burger__line:nth-child(1) { top: 0; } .kp-burger__line:nth-child(2) { top: 7px; } .kp-burger__line:nth-child(3) { top: 14px; } #kp-hamburger.is-active .kp-burger__line:nth-child(1) { top: 7px; transform: rotate(45deg); } #kp-hamburger.is-active .kp-burger__line:nth-child(2) { opacity: 0; } #kp-hamburger.is-active .kp-burger__line:nth-child(3) { top: 7px; transform: rotate(-45deg); }