/** * Bramka katalogu dla gości — style karty z zaproszeniem do logowania + * blokada scrolla. Enqueue: Aram\B2B\Catalog_Gate::assets() (WYŁĄCZNIE dla * gościa na widoku katalogu — patrz Catalog_Gate::dotyczy()). * * Treść produktów NIE jest już wysyłana z serwera dla gości (patrz * Catalog_Gate::template_include()), więc tu nie ma już żadnego `blur()` — * to warstwa WYŁĄCZNIE wizualna (karta logowania + zablokowanie przewijania), * nie mechanizm ukrywania danych. */ /* * Blokada przewijania strony. Klasy doklejane WYŁĄCZNIE po stronie serwera: * `aram-katalog-zamkniety` na (Catalog_Gate::body_class()), * `aram-katalog-zamkniety-html` na (Catalog_Gate::html_lock_attribute()). * Blokada na OBU elementach, bo w zależności od przeglądarki/trybu renderu * to , a nie , bywa faktycznym „scrolling elementem" dokumentu — * samo `overflow:hidden` na nie zawsze wystarcza. */ html.aram-katalog-zamkniety-html, body.aram-katalog-zamkniety { overflow: hidden; height: 100%; } /* Nawigacja ponad przyciemnieniem: nagłówek ma zostać klikalny i ostry. */ .aram-katalog-zamkniety .aram-hd { z-index: 9100; } .aram-gate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(21, 20, 15, .45); /* * Warstwa przepuszcza kliknięcia: bez tego nakładka na całą wysokość okna * zabijałaby też nagłówek — gość nie mógłby kliknąć ani „Zaloguj", ani * logo, ani menu. Klikalna jest wyłącznie karta (.aram-gate__karta niżej). */ pointer-events: none; } .aram-gate__karta { background: #fff; border-radius: 16px; padding: clamp(28px, 4vw, 44px); max-width: 460px; width: 100%; /* * Karta sama przewija się, gdy jest wyższa niż ekran (mały telefon w * poziomie itp.) — scroll strony jest zablokowany (wyżej), więc bez tego * dolna część karty (np. drugi przycisk) byłaby niedostępna. */ max-height: calc(100vh - 48px); overflow-y: auto; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); font-family: inherit; pointer-events: auto; } .aram-gate__eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #FE840C; } .aram-gate__title { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: #15140F; font-weight: 600; } .aram-gate__text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #55514a; } .aram-gate__akcje { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .aram-gate__btn { display: inline-block; padding: 13px 26px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid transparent; } .aram-gate__btn--main { background: #FE840C; color: #fff; } .aram-gate__btn--main:hover { background: #e57506; color: #fff; } .aram-gate__btn--alt { background: #fff; color: #15140F; border-color: #ddd8cd; } .aram-gate__btn--alt:hover { border-color: #15140F; color: #15140F; } .aram-gate__btn:focus-visible { outline: 2px solid #15140F; outline-offset: 2px; } @media (max-width: 480px) { .aram-gate { padding: 16px; } .aram-gate__karta { max-height: calc(100vh - 32px); } .aram-gate__akcje { flex-direction: column; } .aram-gate__btn { width: 100%; } }