/** Shopify CDN: Minification failed Line 56:41 Unexpected "/" **/ /* ========================================================================== ps-shop-fx.css — PEAKSPAN H2 storefront furniture + global button polish SPEC-ROUND4 sections D (new storefront furniture) and E (buttons). Owns, and only owns: .psfx-dock / .psfx-wa WhatsApp floating button (D1) .psfx-seen* "Last seen" recently-viewed strip (D2) .psfx-pop* Bundle discount popup (D3/D4) .psfx-btn + polish layer Global button polish (E) Rules honoured: transform/opacity(+filter) animation only, no layout thrash, no external requests (logo + imagery are local site assets), prefers-reduced-motion fallbacks throughout, works on BOTH page design systems (index.html = ps.css silver system, subpages = site.css system) because every value here is self-contained with a hard fallback. ========================================================================== */ :root { --psfx-silver: var(--ps-silver, #C7CCD4); --psfx-platinum: var(--ps-platinum, #E8EAEE); --psfx-ink: var(--ps-ink, #14181e); --psfx-charcoal: var(--ps-charcoal, #1e242c); --psfx-pulse: var(--ps-pulse, #1D7A46); --psfx-chrome: var(--ps-chrome-grad, linear-gradient(135deg, #f4f6f8, #c7ccd4 45%, #9aa2ad)); --psfx-head: var(--ps-font-head, "Cormorant Garamond", Georgia, serif); --psfx-body: var(--ps-font-body, "Nunito Sans", -apple-system, "Segoe UI", sans-serif); /* focus ring colour — flipped to silver inside dark containers below */ --psfx-ring: #1D7A46; /* dock geometry. Two independent lifts keep the WhatsApp button clear of everything else that can own the bottom-inline-end corner: --psfx-dock-lift JS-measured, raised when a FIXED basket button is there --ps-fab-offset ps.css's own convention — it sets 8.4rem on while the sticky mini buy-bar is on screen. Inherited, so the dock rises the moment the buy-bar appears and drops again when it hides, with no JS in the loop. */ --psfx-dock-gap: 1.6rem; --psfx-dock-lift: 0px; --psfx-spring: cubic-bezier(0.2, 1.6, 0.4, 1); } /* index.html sets html{font-size:62.5%} (1rem = 10px); the site.css pages do not. Normalise the few rem values this file depends on by using px for the furniture and rem only where both systems agree. */ /* ========================================================================== E. GLOBAL BUTTON POLISH Spring hover pop + sheen sweep + press + focus-visible ring + disabled. ps.css already ships this for .ps-btn/.ps-pill/.ps-basket/.ps-swatch/ .ps-pill-nav__*/.ps-cmp__toggle button/.ps-hero__scroll-cue — this layer picks up EVERY remaining control on EVERY page (site.css .btn family, cert chips, doc thumbs, FAQ/tech heads, drawer + mailpop chrome, plus anything JS stamps with .psfx-btn). ========================================================================== */ .psfx-btn, .btn, .ps-cta, .cert-chip, .doc-thumb, .doc-dl, .ps-cert-card__dl, .ps-faq__q, .ps-tech-card__head, .ps-drawer__close, .ps-drawer__reserve, .ps-mailpop__close, .psfx-wa, .psfx-pop__cta, .psfx-pop__close, .psfx-seen__card { transition: transform 0.45s var(--psfx-spring), filter 0.3s ease, box-shadow 0.45s var(--psfx-spring), border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease; } /* hover / focus pop */ .psfx-btn:hover, .psfx-btn:focus-visible, .btn:hover, .btn:focus-visible, .ps-cta:hover, .ps-cta:focus-visible, .cert-chip:hover, .cert-chip:focus-visible, .doc-thumb:hover, .doc-thumb:focus-visible, .ps-cert-card__dl:hover, .ps-cert-card__dl:focus-visible, .psfx-wa:hover, .psfx-wa:focus-visible, .psfx-pop__cta:hover, .psfx-pop__cta:focus-visible { transform: translateY(-2px) scale(1.06); filter: brightness(1.06); box-shadow: 0 16px 38px rgba(20, 24, 30, 0.28); } /* heads and chrome buttons pop without the lift (they sit inside panels) */ .ps-faq__q:hover, .ps-faq__q:focus-visible, .ps-tech-card__head:hover, .ps-tech-card__head:focus-visible, .ps-drawer__close:hover, .ps-drawer__close:focus-visible, .ps-mailpop__close:hover, .ps-mailpop__close:focus-visible, .psfx-pop__close:hover, .psfx-pop__close:focus-visible { transform: scale(1.06); filter: brightness(1.05); } /* press */ .psfx-btn:active, .btn:active, .ps-cta:active, .cert-chip:active, .doc-thumb:active, .ps-cert-card__dl:active, .ps-faq__q:active, .ps-tech-card__head:active, .ps-drawer__close:active, .ps-mailpop__close:active, .psfx-wa:active, .psfx-pop__cta:active, .psfx-pop__close:active, .psfx-seen__card:active { transform: scale(0.96); transition-duration: 0.12s; box-shadow: 0 6px 16px rgba(20, 24, 30, 0.22); } /* sheen sweep for the site.css .btn family + stamped buttons (ps.css already sheens .ps-btn / .ps-btn-chrome). position/overflow are set on the element so the pre-painted highlight can slide across without touching layout. */ .psfx-sheen { position: relative; overflow: hidden; isolation: isolate; } .psfx-sheen::after { content: ""; position: absolute; inset-block: -40%; inset-inline-start: -60%; width: 45%; background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)); transform: skewX(-18deg) translateX(0); transition: transform 0.6s ease; pointer-events: none; z-index: -1; } .psfx-sheen:hover::after, .psfx-sheen:focus-visible::after { transform: skewX(-18deg) translateX(420%); } /* focus-visible ring — every focusable control, both design systems. Green reads on the light pages; the dark containers flip it to platinum. */ a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--psfx-ring); outline-offset: 3px; } /* NB: no border-radius here on purpose — browsers already curve the outline to the element's own radius, and forcing one would reshape controls on focus. */ .ps-header, .ps-hero, .ps-footer, .ps-section--dark, .announce, footer.site, .psfx-pop__card, .psfx-dock { --psfx-ring: #E8EAEE; } /* disabled / aria-disabled — one look everywhere, never clickable-looking */ .psfx-btn[disabled], .btn[disabled], button[disabled], [aria-disabled="true"] { opacity: 0.45; filter: grayscale(0.35); cursor: not-allowed; box-shadow: none; pointer-events: none; } [aria-disabled="true"]:hover, [aria-disabled="true"]:focus-visible { transform: none; filter: grayscale(0.35); } /* The PPB animation's replay button centres ITSELF with transform: translateX(-50%) (ps.css .ps-anim__replay, ps-modules.css .ps-anim .ps-anim__replay). A shared pop rule would overwrite that translate and throw the button half its own width to the right, so it gets its own state set that carries the centring through hover, press and reduced motion. The doubled selectors match ps-modules.css's specificity. */ .ps-anim__replay, .ps-anim .ps-anim__replay { transition: transform 0.45s var(--psfx-spring), filter 0.3s ease, box-shadow 0.45s var(--psfx-spring), border-color 0.25s ease, background 0.25s ease; } .ps-anim__replay:hover, .ps-anim__replay:focus-visible, .ps-anim .ps-anim__replay:hover, .ps-anim .ps-anim__replay:focus-visible { transform: translateX(-50%) translateY(-2px) scale(1.06); filter: brightness(1.06); box-shadow: 0 16px 38px rgba(20, 24, 30, 0.28); } .ps-anim__replay:active, .ps-anim .ps-anim__replay:active { transform: translateX(-50%) scale(0.96); transition-duration: 0.12s; } @media (prefers-reduced-motion: reduce) { .ps-anim__replay, .ps-anim .ps-anim__replay { transition: none; } .ps-anim__replay:hover, .ps-anim__replay:focus-visible, .ps-anim__replay:active, .ps-anim .ps-anim__replay:hover, .ps-anim .ps-anim__replay:focus-visible, .ps-anim .ps-anim__replay:active { transform: translateX(-50%); } } /*

disclosures (41 of them across faq / studies / certificates / best-hydrogen-water-bottle) are text rows, not buttons — they get a cursor, a 2px nudge and the focus ring, never a scale that would shove the text. */ summary { cursor: pointer; transition: transform 0.28s var(--psfx-spring), color 0.2s ease; } summary:hover, summary:focus-visible { transform: translateX(2px); } summary:active { transform: translateX(1px); transition-duration: 0.1s; } /* bare inline links and the studies list's titled links stay text: no transform, just an honest hover underline */ .psfx-link-hover:hover, .st-title:hover { text-decoration: underline; text-underline-offset: 0.22em; } @media (prefers-reduced-motion: reduce) { .psfx-btn, .btn, .ps-cta, .cert-chip, .doc-thumb, .ps-cert-card__dl, .ps-faq__q, .ps-tech-card__head, .ps-drawer__close, .ps-mailpop__close, .psfx-wa, .psfx-pop__cta, .psfx-pop__close, .psfx-seen__card, summary, .psfx-sheen::after { transition: none; animation: none; } summary:hover, summary:focus-visible, summary:active { transform: none; } .psfx-btn:hover, .psfx-btn:focus-visible, .psfx-btn:active, .btn:hover, .btn:focus-visible, .btn:active, .ps-cta:hover, .ps-cta:focus-visible, .ps-cta:active, .cert-chip:hover, .cert-chip:focus-visible, .cert-chip:active, .doc-thumb:hover, .doc-thumb:focus-visible, .doc-thumb:active, .ps-cert-card__dl:hover, .ps-cert-card__dl:focus-visible, .ps-cert-card__dl:active, .ps-faq__q:hover, .ps-faq__q:focus-visible, .ps-faq__q:active, .ps-tech-card__head:hover, .ps-tech-card__head:focus-visible, .ps-tech-card__head:active, .ps-drawer__close:hover, .ps-drawer__close:focus-visible, .ps-drawer__close:active, .ps-mailpop__close:hover, .ps-mailpop__close:focus-visible, .ps-mailpop__close:active, .psfx-wa:hover, .psfx-wa:focus-visible, .psfx-wa:active, .psfx-pop__cta:hover, .psfx-pop__cta:focus-visible, .psfx-pop__cta:active, .psfx-pop__close:hover, .psfx-pop__close:focus-visible, .psfx-pop__close:active, .psfx-seen__card:hover, .psfx-seen__card:focus-visible, .psfx-seen__card:active { transform: none; } .psfx-sheen:hover::after, .psfx-sheen:focus-visible::after { transform: skewX(-18deg); } } /* ========================================================================== D1. WHATSAPP FLOATING BUTTON Fixed bottom-inline-end dock. --psfx-dock-lift is raised by JS when a FIXED basket button occupies the same corner, so the two never overlap on mobile. The dock hides itself while the basket drawer or a popup owns the screen (html.psfx-modal-open). ========================================================================== */ .psfx-dock { position: fixed; inset-block-end: calc( var(--psfx-dock-gap) + var(--psfx-dock-lift) + var(--ps-fab-offset, 0px) + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--psfx-dock-gap); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; transition: transform 0.32s var(--psfx-spring), opacity 0.24s ease; } .psfx-dock > * { pointer-events: auto; } html.psfx-modal-open .psfx-dock, html.ps-drawer-lock .psfx-dock { opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none; } .psfx-wa { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; border: 1.5px solid rgba(232, 234, 238, 0.55); background: linear-gradient(150deg, #1f8f52, var(--psfx-pulse) 55%, #14653a); color: #fff; box-shadow: 0 10px 26px rgba(20, 24, 30, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; } .psfx-wa svg { width: 28px; height: 28px; display: block; } /* a slow silver halo so it reads as brand furniture, not a bolted-on widget */ .psfx-wa::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid rgba(199, 204, 212, 0.5); opacity: 0; animation: psfx-halo 4.2s ease-out infinite; pointer-events: none; } @keyframes psfx-halo { 0%, 70%, 100% { opacity: 0; transform: scale(1); } 76% { opacity: 0.85; transform: scale(1); } 92% { opacity: 0; transform: scale(1.22); } } .psfx-wa__tip { position: absolute; inset-inline-end: calc(100% + 12px); inset-block-start: 50%; white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: rgba(20, 24, 30, 0.92); color: var(--psfx-platinum); border: 1px solid rgba(199, 204, 212, 0.32); font-family: var(--psfx-body); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; box-shadow: 0 10px 24px rgba(20, 24, 30, 0.3); opacity: 0; transform: translateY(-50%) translateX(8px) scale(0.96); transform-origin: 100% 50%; transition: opacity 0.24s ease, transform 0.32s var(--psfx-spring); pointer-events: none; } .psfx-wa:hover .psfx-wa__tip, .psfx-wa:focus-visible .psfx-wa__tip, .psfx-wa.is-peeking .psfx-wa__tip { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } /* very narrow screens: the tooltip would run off-canvas — sit it above */ @media (max-width: 420px) { .psfx-wa__tip { inset-inline-end: 0; inset-block-start: auto; inset-block-end: calc(100% + 10px); transform: translateY(6px) scale(0.96); transform-origin: 100% 100%; font-size: 12px; } .psfx-wa:hover .psfx-wa__tip, .psfx-wa:focus-visible .psfx-wa__tip, .psfx-wa.is-peeking .psfx-wa__tip { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .psfx-dock, .psfx-wa, .psfx-wa__tip { transition: none; } .psfx-wa::before { animation: none; } .psfx-wa__tip { transform: translateY(-50%); } .psfx-wa:hover .psfx-wa__tip, .psfx-wa:focus-visible .psfx-wa__tip, .psfx-wa.is-peeking .psfx-wa__tip { transform: translateY(-50%); } html.psfx-modal-open .psfx-dock, html.ps-drawer-lock .psfx-dock { transform: none; } @media (max-width: 420px) { .psfx-wa__tip, .psfx-wa:hover .psfx-wa__tip, .psfx-wa:focus-visible .psfx-wa__tip, .psfx-wa.is-peeking .psfx-wa__tip { transform: none; } } } /* ========================================================================== D2. "LAST SEEN" RECENTLY-VIEWED STRIP Silver card row mounted just before the footer on every page. Hidden entirely when there is nothing to show (JS never mounts it empty). ========================================================================== */ .psfx-seen { background: linear-gradient(180deg, #f7f8fa, var(--psfx-platinum)); border-block-start: 1px solid rgba(20, 24, 30, 0.1); border-block-end: 1px solid rgba(20, 24, 30, 0.08); padding: 34px 0 38px; color: var(--psfx-ink); } .psfx-seen[hidden] { display: none; } .psfx-seen__inner { max-width: 1180px; margin-inline: auto; padding-inline: 24px; } .psfx-seen__head { display: flex; align-items: baseline; gap: 12px; margin-block-end: 16px; } .psfx-seen__eyebrow { font-family: var(--psfx-body); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; /* WCAG AA: 5.02:1 on the #E8EAEE end of the card gradient, 5.69:1 on #f7f8fa. The previous #6B7A8A measured 3.65:1 — below 4.5:1 for 11px text. */ color: #586470; } .psfx-seen__title { font-family: var(--psfx-head); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--psfx-ink); } .psfx-seen__row { display: flex; gap: 14px; list-style: none; margin: 0; padding: 2px 2px 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .psfx-seen__row::-webkit-scrollbar { height: 6px; } .psfx-seen__row::-webkit-scrollbar-thumb { background: rgba(20, 24, 30, 0.18); border-radius: 999px; } .psfx-seen__item { flex: 0 0 auto; scroll-snap-align: start; } .psfx-seen__card { display: flex; align-items: center; gap: 14px; width: 268px; padding: 12px 16px 12px 12px; border-radius: 16px; border: 1px solid rgba(199, 204, 212, 0.9); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 234, 238, 0.9)), var(--psfx-chrome); box-shadow: 0 8px 22px rgba(20, 24, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8); color: var(--psfx-ink); text-decoration: none; } .psfx-seen__thumb { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(199, 204, 212, 0.8); display: flex; align-items: center; justify-content: center; } .psfx-seen__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .psfx-seen__meta { min-width: 0; } .psfx-seen__name { font-family: var(--psfx-body); font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--psfx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .psfx-seen__again { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; font-family: var(--psfx-body); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--psfx-pulse); } .psfx-seen__card:hover, .psfx-seen__card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 24, 30, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9); border-color: var(--psfx-silver); } @media (max-width: 600px) { .psfx-seen { padding: 26px 0 30px; } .psfx-seen__inner { padding-inline: 16px; } .psfx-seen__title { font-size: 22px; } .psfx-seen__card { width: 232px; } } @media (prefers-reduced-motion: reduce) { .psfx-seen__card:hover, .psfx-seen__card:focus-visible { transform: none; } } /* ========================================================================== D3. BUNDLE POPUP (the EXISTING AED 999 bundle offer — no new discount) Own overlay (not