/** * Petka_FreeShippingNotification * * Colours and sizing come from the --pfsn-* custom properties, which the admin * configuration re-declares in an inline style block after this file. */ .pfsn-root { --pfsn-bg: #d0021b; --pfsn-color: #ffffff; --pfsn-bg-ok: #2e7d32; --pfsn-color-ok: #ffffff; --pfsn-offset: 0px; --pfsn-z-index: 9500; --pfsn-padding: 10px; --pfsn-font-size: 14px; --pfsn-font-weight: 600; --pfsn-text-align: center; } .pfsn-bar { position: relative; box-sizing: border-box; width: 100%; padding: var(--pfsn-padding) 44px; background: var(--pfsn-bg); color: var(--pfsn-color); font-size: var(--pfsn-font-size); font-weight: var(--pfsn-font-weight); line-height: 1.3; text-align: var(--pfsn-text-align); transition: background-color 280ms ease, color 280ms ease; } /* In the page flow, not fixed: the browser moves the page down by the bar's height, so the bar can never cover the header. The root is the sticky element because it is a direct child of ; a sticky child could only stick inside its own small parent. */ .pfsn-root { display: block; width: 100%; } .pfsn-root.pfsn--sticky { position: -webkit-sticky; position: sticky; top: var(--pfsn-offset); z-index: var(--pfsn-z-index); } .pfsn-bar--qualified { background: var(--pfsn-bg-ok); color: var(--pfsn-color-ok); } .pfsn-bar__inner { display: block; color: inherit; text-decoration: none; } a.pfsn-bar__inner:hover, a.pfsn-bar__inner:focus { color: inherit; text-decoration: underline; } /* One line, always - a long message is trimmed rather than pushing the page around. */ .pfsn-bar__text { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .pfsn-amount { font-weight: 800; white-space: nowrap; } .pfsn-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: 0.75; -webkit-appearance: none; appearance: none; box-shadow: none; transition: opacity 160ms ease, background-color 160ms ease; } .pfsn-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); } .pfsn-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .pfsn-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.55); transition: width 450ms ease; } @media (max-width: 767px) { .pfsn-bar { padding-left: 12px; padding-right: 40px; font-size: calc(var(--pfsn-font-size) - 1px); } } @media (prefers-reduced-motion: reduce) { .pfsn-bar, .pfsn-progress { transition-duration: 1ms; } } /* ------------------------------------------------------------------ mini cart */ /* * The same message repeated inside the mini cart: part of the panel, never pinned, and * wrapping over two lines rather than being cut off - there is little width to spare. */ .pfsn-mini { display: block; margin: 0 0 12px; } .pfsn-mini .pfsn-bar { padding: 9px 12px; border-radius: 3px; font-size: calc(var(--pfsn-font-size) - 1px); } .pfsn-mini .pfsn-bar__text { white-space: normal; overflow: visible; text-overflow: clip; }