/** * Obmedzený režim eshopu — informačný pás, popup, zablokovaná pokladňa. * * Dočasný povrch (PX_Limited_Mode v site plugine). Po spustení * ostrej prevádzky sa dá celý súbor spolu s partmi odstrániť. * Tokeny sú rovnaké ako v base.css / archive.css (.pc-scope). */ /* .pc-scope dáva border-box len sebe, nie potomkom — dialóg s paddingom a width:100% by inak pretiekol cez max-width. */ .px-limited-bar, .px-limited-bar *, .px-limited-popup, .px-limited-popup *, .px-limited-cart, .px-limited-cart *, .px-limited-checkout, .px-limited-checkout * { box-sizing: border-box; } /* --------------------------- Informačný pás --------------------------- */ .px-limited-bar { --pxl-bar-bg: 0 122 64; /* --pc-accent #007A40 — rovnaká zelená ako tlačidlá */ --pxl-bar-ink: 255 255 255; --pxl-bar-edge: 0 98 58; /* Lepí sa rovnako ako hlavička a ostáva nad ňou (.px-header má 990). */ position: sticky; top: 0; z-index: 991; background: rgb(var(--pxl-bar-bg)); color: rgb(var(--pxl-bar-ink)); border-bottom: 1px solid rgb(var(--pxl-bar-edge)); font-family: inherit; } /* .px-limited-bar--bypassed má zámerne rovnakú farbu — admina odlišuje štítok v texte, nie iný pás. */ /* Admin lišta je nad 782px fixed — pás sa musí zalepiť pod ňu. */ @media (min-width: 783px) { body.admin-bar .px-limited-bar { top: 32px; } } /* Otvorený panel hlavičky (mini-košík, drawer): panely aj backdrop žijú vnútri stacking contextu .px-header (990), takže pás s 991 by ich prekrýval. Pri zámku scrollu klesne pod hlavičku — panel ho prekryje a backdrop stmaví ako zvyšok stránky. */ body.px-header-lock .px-limited-bar { z-index: 989; } /* Hlavička sa lepí tesne pod pás. Výšku meria JS (--pxl-bar-h na ), lebo text je editovateľný a na mobile sa zalamuje; fallback = jeden riadok. Nad 768px si hlavička odscrolluje topbar, preto ten odpočet ostáva. */ body.px-limited-mode .px-header { top: var(--pxl-bar-h, 2.375rem); } @media (min-width: 768px) { body.px-limited-mode .px-header { top: calc(var(--pxl-bar-h, 2.375rem) - var(--px-header-topbar-h)); } } @media (min-width: 783px) { body.admin-bar.px-limited-mode .px-header { top: calc(32px + var(--pxl-bar-h, 2.375rem) - var(--px-header-topbar-h)); } } .px-limited-bar__inner { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin: 0 auto; width: 100%; max-width: var(--pc-container); padding: 0.5rem 1rem; } .px-limited-bar__icon { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; opacity: 0.85; } /* Viewport orezáva bežiaci track; mimo marquee sa len zmenšuje s obsahom, takže ikona ostáva prilepená k centrovanému textu. */ .px-limited-bar__viewport { min-width: 0; overflow: hidden; } .px-limited-bar__track { display: flex; justify-content: center; } .px-limited-bar__text { margin: 0; font-size: 0.8125rem; line-height: 1.45; text-align: center; text-wrap: balance; } /* Druhá kópia textu existuje len pre bezšvový marquee */ .px-limited-bar__text[aria-hidden] { display: none; } /* Marquee mód — prepína JS (limited-mode.js), keď sa text nezmestí na riadok. Medzera medzi kópiami je padding-right (nie flex gap), aby mali obe kópie rovnakú šírku a translateX(-50%) sadol presne na jednu. */ .px-limited-bar--marquee .px-limited-bar__track { width: max-content; justify-content: flex-start; animation: px-limited-marquee var(--pxl-marquee-d, 18s) linear infinite; } .px-limited-bar--marquee .px-limited-bar__text { white-space: nowrap; text-align: left; padding-right: 3rem; } .px-limited-bar--marquee .px-limited-bar__text[aria-hidden] { display: block; } /* Pohybujúci sa text sa musí dať zastaviť (WCAG 2.2.2) — hover/fokus pauzne, prefers-reduced-motion ho vypína úplne (nižšie). */ .px-limited-bar--marquee:hover .px-limited-bar__track, .px-limited-bar--marquee:focus-within .px-limited-bar__track { animation-play-state: paused; } @keyframes px-limited-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Bez animácií sa pás vráti k zalamovaniu — orezaný nehybný riadok by bol nečitateľný. JS potom pretečenie nenamerá a marquee mód sám zloží. */ @media (prefers-reduced-motion: reduce) { .px-limited-bar--marquee .px-limited-bar__track { width: auto; justify-content: center; animation: none; } .px-limited-bar--marquee .px-limited-bar__text { white-space: normal; text-align: center; padding-right: 0; } .px-limited-bar--marquee .px-limited-bar__text[aria-hidden] { display: none; } } .px-limited-bar__note { display: inline-block; margin-left: 0.5rem; padding: 0.0625rem 0.5rem; /* Tmavý overlay namiesto bieleho — biela na zosvetlenej zelenej nemá 4.5:1 */ background: rgb(4 40 23 / 0.25); border-radius: var(--pc-radius-pill); color: rgb(var(--pxl-bar-ink)); font-weight: 700; } @media (min-width: 768px) { .px-limited-bar__text { font-size: 0.875rem; } } /* ------------------------------- Popup -------------------------------- */ .px-limited-popup[hidden] { display: none; } .px-limited-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .px-limited-popup__backdrop { position: absolute; inset: 0; background: rgb(4 40 23 / 0.55); backdrop-filter: blur(2px); animation: px-limited-fade 0.2s ease-out; } .px-limited-popup__dialog { position: relative; width: 100%; max-width: 30rem; padding: 2.25rem 1.75rem 1.75rem; background: rgb(var(--pc-paper)); border-radius: var(--pc-radius-lg); box-shadow: 0 24px 60px rgb(4 40 23 / 0.28); text-align: center; animation: px-limited-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .px-limited-popup__close { position: absolute; top: 0.5rem; right: 0.75rem; padding: 0.25rem 0.5rem; background: none; border: 0; color: rgb(var(--pc-muted)); font-size: 1.75rem; line-height: 1; cursor: pointer; transition: color 0.15s ease; } .px-limited-popup__close:hover { color: rgb(var(--pc-ink)); } .px-limited-popup__title { margin: 0 0 0.75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: rgb(var(--pc-ink)); } .px-limited-popup__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--pc-muted)); text-wrap: pretty; } .px-limited-popup__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid rgb(var(--pc-line)); } .px-limited-popup__contacts a { color: rgb(var(--pc-accent-deep)); font-weight: 600; text-decoration: none; } .px-limited-popup__contacts a:hover { text-decoration: underline; } .px-limited-popup__button { margin-top: 1.375rem; width: 100%; padding: 0.8125rem 1.5rem; background: rgb(var(--pc-accent)); border: 0; border-radius: var(--pc-radius-control); color: #fff; font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .px-limited-popup__button:hover { background: rgb(var(--pc-accent-deep)); } @keyframes px-limited-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes px-limited-pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .px-limited-popup__backdrop, .px-limited-popup__dialog { animation: none; } } /* ------------------------------- Košík -------------------------------- */ .px-limited-cart { margin-top: 1rem; padding: 0.875rem 1rem; background: rgb(var(--pc-line, 231 243 237) / 0.6); border: 1px solid rgb(var(--pc-accent, 0 191 99) / 0.25); border-radius: var(--pc-radius); text-align: center; } .px-limited-cart__text { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: rgb(var(--pc-ink, 4 40 23)); } .px-limited-cart__button { display: block; width: 100%; padding: 0.8125rem 1.25rem; background: rgb(var(--pc-soft, 244 246 247)); border-radius: var(--pc-radius-control, 9999px); color: rgb(var(--pc-muted, 84 104 95)); font-size: 0.875rem; font-weight: 600; text-align: center; cursor: not-allowed; user-select: none; } /* -------------------------- Blokovaná pokladňa ------------------------ */ .px-limited-checkout { margin: 0 auto; max-width: 34rem; padding: 2.5rem 1.5rem 3rem; text-align: center; } .px-limited-checkout__icon { width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; color: rgb(var(--pc-accent, 0 191 99)); } .px-limited-checkout__title { margin: 0 0 0.875rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: rgb(var(--pc-ink, 4 40 23)); } .px-limited-checkout__text { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: rgb(var(--pc-muted, 84 104 95)); text-wrap: pretty; } .px-limited-checkout__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; } .px-limited-checkout__contact { color: rgb(var(--pc-accent-deep, 0 145 75)); font-size: 1.0625rem; font-weight: 700; text-decoration: none; } .px-limited-checkout__contact:hover { text-decoration: underline; } .px-limited-checkout__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin-top: 2rem; } .px-limited-checkout__button { padding: 0.8125rem 1.75rem; background: rgb(var(--pc-accent, 0 191 99)); border-radius: var(--pc-radius-control, 9999px); color: #fff; font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease; } .px-limited-checkout__button:hover { background: rgb(var(--pc-accent-deep, 0 145 75)); color: #fff; } .px-limited-checkout__link { color: rgb(var(--pc-muted, 84 104 95)); font-size: 0.875rem; text-decoration: underline; }