/* Evoke Circular Menu */ .evk-cm { width: fit-content; height: fit-content; } /* Trigger wrapper */ .evk-cm-trigger { position: relative; z-index: 2; } /* Panel menu */ .evk-cm-content { position: fixed; display: flex; width: 100svw; height: 100svh; background: #c4c4c4; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; transform: none; transform-origin: 50% 50% 0px; --evk-cm-from-top: 24px; --evk-cm-from-left: 24px; --evk-cm-z-index: 9999; z-index: var(--evk-cm-z-index); pointer-events: none; clip-path: circle(0px at var(--evk-cm-from-left) var(--evk-cm-from-top)); --evk-cm-clip-open: circle(150% at var(--evk-cm-from-left) var(--evk-cm-from-top)); } /* ── PRZYCIEMNIENIE TŁA ──────────────────────────────────────────────────── * * Osobny element, nie tło panelu — panel bywa mniejszy od ekranu (ma własne * kontrolki szerokości i wysokości), a przyciemnić trzeba całą stronę. Leży * o jeden poziom pod panelem, więc panel zawsze jest nad nim niezależnie od * tego, jaki `z-index` ustawi użytkownik. * * Krycie, nie `display` — zmiana `display` nie da się animować, a przejście ma * trwać dokładnie tyle co rozwijanie kadru. Czas i krzywa idą z tej samej * osi czasu GSAP-a co `clip-path` panelu, więc nie ma tu żadnego `transition`: * dwie animacje tej samej rzeczy to prosta droga do rozjazdu. */ .evk-cm-scrim { position: fixed; inset: 0; background: var(--evk-cm-scrim, rgba(15, 23, 42, .55)); opacity: 0; /* ZAMKNIĘTE NIE JEST MALOWANE WCALE, nie tylko przezroczyste. * * ZGŁOSZONE Z UŻYCIA: „czy tło może nie barwić pasków na dole i na górze po * zamknięciu w Safari iOS". Safari koloruje swoje paski tym, co widzi przy * krawędziach kadru, a element rozciągnięty na cały ekran jest dokładnie * przy krawędziach. Samo `opacity: 0` zostawia go w drzewie jako element * MALOWANY, tylko całkiem przezroczysty; `visibility: hidden` wyjmuje go * z malowania. * * Krycie i widoczność chodzą razem, bo osobno rozjechałyby się przy * przerwanym zamykaniu — dlatego oś czasu rusza `autoAlpha`, czyli jedno * i drugie naraz. * * UWAGA O ZAKRESIE: to jest higiena po naszej stronie, a nie lekarstwo na * kolor pasków. Prawdziwym lekarstwem jest moduł „Kolor pasków przeglądarki" * (includes/91-theme-color.php): `theme-color` odbiera Safari decyzję * w ogóle, także na podstronach bez menu. Zabarwienia pasków w Safari na iOS * NIE DA SIĘ sprawdzić w tym zestawie — mierzymy to, co mierzalne: że * zamknięte przyciemnienie nie jest malowane. */ visibility: hidden; /* Zamknięte przyciemnienie nie może łapać kliknięć — leży na całej stronie i przechwyciłoby wszystko, także przy zamkniętym menu. */ pointer-events: none; } .evk-cm-scrim.is-open { pointer-events: auto; } /* Przy „ogranicz ruch" przyciemnienie pojawia się bez przejścia, ale POJAWIA SIĘ — jest informacją o stanie, nie ozdobą. Czas animacji jest wtedy wyzerowany w skrypcie, więc oś czasu ustawia krycie natychmiast. */ /* Gdy portal=0 (bez przenoszenia) — fallback na absolute */ .evk-cm[data-portal="0"] .evk-cm-content { position: absolute; inset: 0; } /* Otwórz w builderze — MALUJE tylko to, co zaznaczy skrypt. * * Do 1.86.0 stało tu `.evk-cm[data-open-builder="1"] .evk-cm-content`, czyli * reguła bez ANI SŁOWA o builderze: wystarczyło ustawienie, żeby panel był * odsłonięty także na froncie. Nie wybuchało to tylko przez przypadek — * portal wynosi panel do , więc przestaje być potomkiem `.evk-cm` * i selektor przestaje pasować. Przy WYŁĄCZONYM portalu panel zostaje na * miejscu, reguła trafia i menu jest otwarte na stałe; a że `!important` * przebija to, co GSAP wpisuje w styl, skrypt nie ma czym go zamknąć. * Przy włączonym portalu zostawało okno od sparsowania strony do startu * skryptu — czyli mignięcie otwartym menu przy każdym wejściu, i otwarte * na stałe, gdyby skrypt nie wystartował wcale. * * Stan ma jednego właściciela: `isBuilder && openBuilder` w skrypcie. Arkusz * tylko pokazuje to, co tamten zaznaczy — i dlatego na froncie nie ma * takiej ścieżki w ogóle. * * Klasa siedzi WPROST na panelu, a nie na przodku: panel bywa przeniesiony * do i każdy selektor przez pokrewieństwo znowu by się rozjechał. */ .evk-cm-content.evk-cm-builder { clip-path: none !important; pointer-events: auto !important; }