/* ========================================== ULTRAKIT SALES NOTIFICATION (WooCommerce) ========================================== */ .ultrakit-snf-wrapper { width: 100%; box-sizing: border-box; } .ultrakit-snf-editor-note { padding: 14px 18px; border-radius: 12px; background: #f3f1ff; border: 1.5px dashed #6c5ce7; color: #4b3fc0; font-size: 13px; font-weight: 600; text-align: center; } /* The popup carries its own copy of the design classes/variables (it can live on ) */ .ultrakit-snf-pop { --snf-accent: #6c5ce7; --snf-accent2: #a29bfe; --snf-w: 360px; --snf-off: 24px; --snf-r: 16px; --snf-z: 9990; box-sizing: border-box; font-family: inherit; } .ultrakit-snf-pop *, .ultrakit-snf-pop *::before, .ultrakit-snf-pop *::after { box-sizing: border-box; } .ultrakit-snf-pop.snf-fixed { position: fixed; z-index: var(--snf-z); width: var(--snf-w); max-width: calc(100vw - 2 * var(--snf-off)); pointer-events: none; visibility: hidden; } .ultrakit-snf-pop.snf-fixed.is-in, .ultrakit-snf-pop.snf-fixed.is-out { visibility: visible; } .ultrakit-snf-pop.snf-fixed.is-in .ultrakit-snf-card { pointer-events: auto; } .ultrakit-snf-pop.snf-pos-bottom-left.snf-fixed { left: var(--snf-off); bottom: var(--snf-off); } .ultrakit-snf-pop.snf-pos-bottom-right.snf-fixed { right: var(--snf-off); bottom: var(--snf-off); } .ultrakit-snf-pop.snf-pos-top-left.snf-fixed { left: var(--snf-off); top: var(--snf-off); } .ultrakit-snf-pop.snf-pos-top-right.snf-fixed { right: var(--snf-off); top: var(--snf-off); } .admin-bar .ultrakit-snf-pop.snf-pos-top-left.snf-fixed, .admin-bar .ultrakit-snf-pop.snf-pos-top-right.snf-fixed { top: calc(var(--snf-off) + 32px); } .ultrakit-snf-pop.snf-inline { position: relative; width: var(--snf-w); max-width: 100%; margin: 0 auto; min-height: 96px; } /* ---------- Card ---------- */ .ultrakit-snf-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 40px 14px 14px; overflow: hidden; background: #ffffff; color: #1a1a2e; border-radius: var(--snf-r); box-shadow: 0 18px 50px rgba(20,20,50,0.22), 0 0 0 1px rgba(20,20,50,0.05); } .ultrakit-snf-img { flex: 0 0 62px; width: 62px; height: 62px; border-radius: calc(var(--snf-r) * 0.7); background: #f0eef9 center / cover no-repeat; display: flex; align-items: center; justify-content: center; text-decoration: none; } .ultrakit-snf-img.is-icon { background: linear-gradient(135deg, var(--snf-accent), var(--snf-accent2)); color: #ffffff; } .ultrakit-snf-img svg { flex-shrink: 0; width: 24px; height: 24px; } .ultrakit-snf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ultrakit-snf-msg { font-size: 13px; line-height: 1.4; color: #5a5a75; } .ultrakit-snf-msg strong { color: #1a1a2e; font-weight: 800; } .ultrakit-snf-prod { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--snf-accent) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ultrakit-snf-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; } .ultrakit-snf-time { font-size: 11.5px; font-weight: 600; color: #8a8aa3; } .ultrakit-snf-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #00a382; } .ultrakit-snf-ver svg { flex-shrink: 0; width: 12px; height: 12px; } .ultrakit-snf-close { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 !important; box-sizing: border-box; background: rgba(20,20,50,0.06); color: #6b6b85 !important; border: 0; border-radius: 50%; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .ultrakit-snf-close:hover { background: #ff4d6d; color: #ffffff !important; } .ultrakit-snf-close svg { width: 12px; height: 12px; flex-shrink: 0; } .ultrakit-snf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(20,20,50,0.06); } .ultrakit-snf-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--snf-accent), var(--snf-accent2)); transform-origin: left center; transform: scaleX(1); } /* ---------- Styles ---------- */ .snf-style-glass .ultrakit-snf-card { background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 18px 50px rgba(20,20,50,0.2), inset 0 0 0 1px rgba(255,255,255,0.7); } .snf-style-dark .ultrakit-snf-card { background: #17172b; color: #ffffff; box-shadow: 0 18px 50px rgba(0,0,0,0.45); } .snf-style-dark .ultrakit-snf-msg { color: #b8b8d2; } .snf-style-dark .ultrakit-snf-msg strong { color: #ffffff; } .snf-style-dark .ultrakit-snf-prod { color: color-mix(in srgb, var(--snf-accent2) 85%, #ffffff) !important; } .snf-style-dark .ultrakit-snf-time { color: #8f8fb0; } .snf-style-dark .ultrakit-snf-close { background: rgba(255,255,255,0.1); color: #c4c4dc !important; } .snf-style-dark .ultrakit-snf-bar { background: rgba(255,255,255,0.08); } .snf-style-accent .ultrakit-snf-card { background: linear-gradient(135deg, var(--snf-accent), var(--snf-accent2)); color: #ffffff; box-shadow: 0 18px 50px color-mix(in srgb, var(--snf-accent) 45%, transparent); } .snf-style-accent .ultrakit-snf-msg { color: rgba(255,255,255,0.85); } .snf-style-accent .ultrakit-snf-msg strong, .snf-style-accent .ultrakit-snf-prod, .snf-style-accent .ultrakit-snf-ver, .snf-style-accent .ultrakit-snf-time { color: #ffffff !important; } .snf-style-accent .ultrakit-snf-img.is-icon { background: rgba(255,255,255,0.22); } .snf-style-accent .ultrakit-snf-close { background: rgba(255,255,255,0.22); color: #ffffff !important; } .snf-style-accent .ultrakit-snf-bar { background: rgba(255,255,255,0.2); } .snf-style-accent .ultrakit-snf-bar span { background: #ffffff; } .snf-style-pill .ultrakit-snf-card { padding: 8px 44px 8px 8px; border-radius: 60px; gap: 12px; } .snf-style-pill .ultrakit-snf-img { flex-basis: 48px; width: 48px; height: 48px; border-radius: 50%; } .snf-style-pill .ultrakit-snf-prod { -webkit-line-clamp: 1; font-size: 14px; } .snf-style-pill .ultrakit-snf-msg { font-size: 12px; } .snf-style-pill .ultrakit-snf-close { top: 50%; right: 12px; margin-top: -12px; } .snf-style-pill .ultrakit-snf-bar { display: none; } .snf-style-pill .ultrakit-snf-meta { display: none; } /* ---------- Animations ---------- */ .ultrakit-snf-pop .ultrakit-snf-card { opacity: 0; } .ultrakit-snf-pop.is-in .ultrakit-snf-card { opacity: 1; } .ultrakit-snf-pop.snf-inline:not(.is-in) .ultrakit-snf-card { visibility: hidden; } .snf-anim-slide .ultrakit-snf-card { transform: translateX(-120%); transition: transform 0.5s cubic-bezier(.22,.9,.3,1), opacity 0.4s ease; } .snf-anim-slide.snf-pos-bottom-right .ultrakit-snf-card, .snf-anim-slide.snf-pos-top-right .ultrakit-snf-card { transform: translateX(120%); } .snf-anim-slide.snf-inline .ultrakit-snf-card { transform: translateX(-40px); } .snf-anim-slide.is-in .ultrakit-snf-card { transform: none; } .snf-anim-fade .ultrakit-snf-card { transform: translateY(24px); transition: transform 0.5s ease, opacity 0.5s ease; } .snf-anim-fade.snf-pos-top-left .ultrakit-snf-card, .snf-anim-fade.snf-pos-top-right .ultrakit-snf-card { transform: translateY(-24px); } .snf-anim-fade.is-in .ultrakit-snf-card { transform: none; } .snf-anim-bounce .ultrakit-snf-card { transform: scale(0.4); transition: opacity 0.2s ease; } .snf-anim-bounce.is-in .ultrakit-snf-card { animation: ukSnfBounce 0.7s cubic-bezier(.34,1.56,.64,1) forwards; } .snf-anim-zoom .ultrakit-snf-card { transform: scale(0.85); transition: transform 0.45s cubic-bezier(.22,.9,.3,1), opacity 0.4s ease; } .snf-anim-zoom.is-in .ultrakit-snf-card { transform: none; } .snf-anim-flip .ultrakit-snf-card { transform: perspective(700px) rotateX(-70deg); transform-origin: bottom center; transition: transform 0.6s cubic-bezier(.22,.9,.3,1), opacity 0.4s ease; } .snf-anim-flip.is-in .ultrakit-snf-card { transform: none; } @keyframes ukSnfBounce { 0% { transform: scale(0.4); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } .ultrakit-snf-pop.is-out .ultrakit-snf-card { opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; } @media (max-width: 480px) { .ultrakit-snf-pop.snf-fixed { --snf-off: 12px; width: calc(100vw - 24px); } } @media (prefers-reduced-motion: reduce) { .ultrakit-snf-pop .ultrakit-snf-card { transition: opacity 0.2s ease !important; transform: none !important; animation: none !important; } }