:root { --vpvai-ivory: #F8F5F2; --vpvai-lavender: #E7E0EE; --vpvai-accent: #CDBED8; --vpvai-purple: #57445A; --vpvai-eggplant: #2F2631; --vpvai-champagne: #D8C5A0; --vpvai-white: #FFFFFF; } .vpvai-transition-backdrop { position: fixed; z-index: 328; inset: 0 0 var(--vpvai-toolbar-height, 0px); pointer-events: none; background: var(--vpvai-ivory); } .vpvai-incoming-wrapper { position: fixed !important; z-index: 340 !important; inset: 0 0 var(--vpvai-toolbar-height, 0px) !important; width: 100% !important; max-width: none !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; margin: 0 !important; background: var(--vpvai-ivory); box-shadow: -22px 0 54px rgba(47, 38, 49, .18); border-radius: 24px 0 0 24px; will-change: transform; transition: transform var(--vpvai-duration, 440ms) cubic-bezier(.32, .72, 0, 1), border-radius var(--vpvai-duration, 440ms) cubic-bezier(.32, .72, 0, 1); pointer-events: none; -webkit-overflow-scrolling: touch; contain: paint; } .vpvai-incoming-wrapper.vpvai-from-right { transform: translate3d(100%, 0, 0); } .vpvai-incoming-wrapper.vpvai-from-left { transform: translate3d(-100%, 0, 0); box-shadow: 22px 0 54px rgba(47, 38, 49, .18); border-radius: 0 24px 24px 0; } .vpvai-incoming-wrapper.vpvai-transition-active { transform: translate3d(0, 0, 0); border-radius: 0; } .vpvai-outgoing-wrapper { position: relative; z-index: 330; transform-origin: center center; will-change: transform; transition: transform var(--vpvai-duration, 440ms) cubic-bezier(.32, .72, 0, 1), filter var(--vpvai-duration, 440ms) ease; pointer-events: none; } .vpvai-outgoing-wrapper.vpvai-to-left.vpvai-transition-active { transform: translate3d(-11%, 0, 0) scale(.988); filter: brightness(.965) saturate(.98); } .vpvai-outgoing-wrapper.vpvai-to-right.vpvai-transition-active { transform: translate3d(11%, 0, 0) scale(.988); filter: brightness(.965) saturate(.98); } .vpvai-link-loading { opacity: .78; } /* * VPN snackbar is a portal attached to . It never participates in the * theme layout and stays above WoodMart's visible sticky toolbar. */ .vpvai-vpn-snackbar { position: fixed !important; z-index: 2147483000 !important; left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important; bottom: var(--vpvai-vpn-bottom, 18px) !important; display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 36px !important; align-items: center !important; gap: 11px !important; width: auto !important; max-width: 520px !important; min-width: 0 !important; min-height: 72px !important; margin: 0 auto !important; padding: 13px 9px 13px 13px !important; border: 1px solid rgba(216, 197, 160, .72) !important; border-radius: 20px !important; background: var(--vpvai-purple, #57445A) !important; color: var(--vpvai-white, #FFFFFF) !important; box-shadow: 0 18px 44px rgba(47, 38, 49, .30), 0 2px 8px rgba(47, 38, 49, .16) !important; opacity: 0 !important; visibility: hidden !important; transform: translate3d(0, 18px, 0) scale(.98) !important; transform-origin: center bottom !important; transition: opacity .24s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s !important; box-sizing: border-box !important; isolation: isolate !important; overflow: hidden !important; pointer-events: auto !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; line-height: normal !important; -webkit-font-smoothing: antialiased; } .vpvai-vpn-snackbar.vpvai-vpn-visible { opacity: 1 !important; visibility: visible !important; transform: translate3d(0, 0, 0) scale(1) !important; transition-delay: 0s !important; } .vpvai-vpn-icon { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border: 1px solid rgba(216, 197, 160, .42) !important; border-radius: 50% !important; background: rgba(216, 197, 160, .12) !important; color: var(--vpvai-champagne, #D8C5A0) !important; box-sizing: border-box !important; } .vpvai-vpn-icon svg { display: block !important; width: 23px !important; height: 23px !important; } .vpvai-vpn-copy { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--vpvai-white, #FFFFFF) !important; text-align: left !important; } .vpvai-vpn-title { display: block !important; margin: 0 0 3px !important; padding: 0 !important; color: var(--vpvai-white, #FFFFFF) !important; font-family: "PT Serif", Georgia, serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } .vpvai-vpn-text { display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .88) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.32 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } .vpvai-vpn-close { all: unset !important; display: grid !important; place-items: center !important; align-self: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .07) !important; color: var(--vpvai-white, #FFFFFF) !important; box-shadow: none !important; opacity: .92 !important; cursor: pointer !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } .vpvai-vpn-close:hover, .vpvai-vpn-close:focus-visible { background: rgba(255, 255, 255, .16) !important; color: var(--vpvai-white, #FFFFFF) !important; outline: 2px solid rgba(216, 197, 160, .65) !important; outline-offset: 1px !important; } .vpvai-vpn-close svg { display: block !important; width: 18px !important; height: 18px !important; } @media (min-width: 620px) { .vpvai-vpn-snackbar { left: 50% !important; right: auto !important; width: min(520px, calc(100vw - 36px)) !important; transform: translate3d(-50%, 18px, 0) scale(.98) !important; } .vpvai-vpn-snackbar.vpvai-vpn-visible { transform: translate3d(-50%, 0, 0) scale(1) !important; } } @media (max-width: 380px) { .vpvai-vpn-snackbar { grid-template-columns: 36px minmax(0, 1fr) 32px !important; gap: 8px !important; padding: 11px 7px 11px 11px !important; border-radius: 17px !important; } .vpvai-vpn-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; } .vpvai-vpn-title { font-size: 15px !important; } .vpvai-vpn-text { font-size: 12px !important; } .vpvai-vpn-close { width: 32px !important; height: 32px !important; min-width: 32px !important; } } @media (prefers-reduced-motion: reduce) { .vpvai-incoming-wrapper, .vpvai-outgoing-wrapper, .vpvai-vpn-snackbar { transition-duration: .01ms !important; } }