/** * StaggeredMenu - panel nawigacji (design-references/StaggeredMenu-reactbits.md). * * NAJWAZNIEJSZA ZASADA: panel i warstwy tla sa odsuniete poza ekran * DOMYSLNIE, w czystym CSS. Nie czekamy z tym na JS ani na doladowanie * arkusza - to wlasnie brak stanu poczatkowego przed pierwszym malowaniem * powodowal wczesniej "eksplodujacy naglowek". JS tylko odgrywa animacje. */ .staggered-menu { position: fixed; inset: 0; z-index: var(--z-menu); /* Zamkniete menu nie moze przechwytywac klikniec w tresc pod spodem. */ pointer-events: none; visibility: hidden; } .staggered-menu.is-open { pointer-events: auto; visibility: visible; } /* Kliniecie poza panelem zamyka menu - ta warstwa lapie te klikniecia. */ .staggered-menu::before { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.55); opacity: 0; transition: opacity 0.35s ease; } .staggered-menu.is-open::before { opacity: 1; } .sm-panel, .sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: clamp(280px, 42vw, 460px); /* STAN ZAMKNIETY = DOMYSLNY, jeszcze zanim wykona sie JS. */ transform: translateX(100%); } /* * Przekazanie kontroli nad transformem do GSAP. * * GSAP nie potrafi zmapowac procentowego translate z arkusza na wlasna * wlasciwosc "x", wiec ZACHOWUJE go jako prefiks i dokleja swoja wartosc * obok. Inline wychodzilo wtedy "translate(100%, 0%) translate(390px, 0px)" * - czyli panel odsuniety dwa razy (780px zamiast 390px) i nigdy nie * wjezdzajacy na ekran. * * Dlatego menu.js dodaje te klase na w momencie przejecia sterowania * (tylko gdy GSAP faktycznie sie zaladowal) i od tej chwili baza transformu * jest czysta. Kolejnosc jest bezpieczna: dopoki klasy nie ma, obowiazuje * regula wyzej i panel stoi poza ekranem. */ .js-menu-ready .sm-panel, .js-menu-ready .sm-prelayer { transform: none; } .sm-prelayer { z-index: 5; } .sm-prelayer--1 { background: var(--color-accent); opacity: 0.9; } .sm-prelayer--2 { background: var(--color-bg-elevated); } .sm-panel { z-index: 10; background: var(--color-bg); border-left: 1px solid var(--color-border); overflow-y: auto; overscroll-behavior: contain; } .sm-panel-inner { min-height: 100%; display: flex; flex-direction: column; gap: var(--space-8); padding: calc(var(--space-24) + var(--admin-bar-offset)) var(--space-8) var(--space-8); } /* ---------- Pozycje menu ---------- */ .sm-list { display: flex; flex-direction: column; gap: var(--space-2); counter-reset: sm-item; } .sm-itemWrap { /* Kazda pozycja wjezdza spod wlasnej maski - stad overflow na opakowaniu. */ overflow: hidden; } .sm-item { display: block; position: relative; padding: var(--space-2) 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.1; color: var(--color-text); counter-increment: sm-item; transition: color 0.25s ease; } .sm-item::after { content: "0" counter(sm-item); position: absolute; top: var(--space-2); right: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-text); /* Sterowane przez GSAP - numeracja pojawia sie osobno od tekstu. */ opacity: var(--sm-num-opacity, 0); } .sm-item:hover, .sm-item:focus-visible { color: var(--color-accent-text); } /* ---------- Sekcja social ---------- */ .sm-socials { margin-top: auto; } .sm-socials-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin-bottom: var(--space-4); } .sm-socials-list { display: flex; flex-wrap: wrap; gap: var(--space-4); } .sm-socials-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; color: var(--color-text-muted); transition: color 0.2s ease; } .sm-socials-link:hover, .sm-socials-link:focus-visible { color: var(--color-accent-text); } .sm-panel-cta { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .sm-panel-phones { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.9; } /* ---------- Przycisk toggle ---------- */ .sm-toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); /* 44x44 - minimalny cel dotykowy wg WCAG 2.5.8. */ min-height: 44px; padding: 0 var(--space-4); font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; /* Bez wlasnego z-index. Przycisk siedzi w naglowku, a naglowek stoi nad menu (--z-header > --z-menu, patrz tokens.css). Poprzednie z-index:210 bylo zludzeniem: naglowek tworzy wlasny kontekst nakladania, wiec 210 liczylo sie tylko w jego wnetrzu. */ position: relative; } .sm-toggle:hover { border-color: var(--color-accent-text); } /* Tekst "Menu" / "Zamknij" przewija sie w pionie - stad maska i dwie linie. */ .sm-toggle-textWrap { position: relative; display: block; height: 1.15em; overflow: hidden; width: 4.2em; text-align: left; } .sm-toggle-textInner { display: flex; flex-direction: column; } .sm-toggle-line { height: 1.15em; line-height: 1.15em; } .sm-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .sm-icon-line { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: translateY(-50%); } /* Druga kreska pionowo - razem z pierwsza daje plus, obrocony daje krzyzyk. */ .sm-icon-line--v { transform: translateY(-50%) rotate(90deg); } /* * Menu jest dostepne na KAZDEJ szerokosci. Wczesniej znikalo powyzej 1200px, * bo naglowek pokazywal wtedy komplet siedmiu linkow. Po redesignie (sekcja 6) * w naglowku stoja cztery - reszta (procedura, blog, opinie, social, telefony) * zyje wylacznie tutaj, wiec dojscie do panelu musi byc zawsze. */ @media (max-width: 640px) { .sm-panel, .sm-prelayer { width: 100%; } } @media (prefers-reduced-motion: reduce) { .staggered-menu::before { transition: none; } } /* Ponizej 360px (iPhone SE i podobne) sam napis "Menu" wypychal naglowek poza ekran o 18px. Zostaje sama ikona - przycisk ma nadal cel dotykowy 44px i etykiete dla czytnikow ekranu w .screen-reader-text. */ @media (max-width: 359px) { .sm-toggle-textWrap { display: none; } .sm-toggle { padding-inline: var(--space-3); } }