/** * STW Dealmaker - frontend widget styles. * Every color/radius below is a CSS custom property so the 27 theme presets * (and user-created presets) can restyle the widget via an inline style on * the root element. Position variants: bottom-right, bottom-left, top-right. */ .stw-dm { /* Speed To Win brand defaults; overridden per theme preset. */ --stw-dm-white: #ffffff; --stw-dm-purple-dark: #321457; --stw-dm-purple-mid: #9370db; --stw-dm-green: #9acd32; --stw-dm-ink: #2a2438; --stw-dm-ink-soft: #6f6685; --stw-dm-line: #e6e1f2; --stw-dm-bubble: #ede7fb; --stw-dm-radius: 14px; --stw-dm-shadow: 0 12px 40px rgba(35, 9, 63, 0.25); position: fixed; z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; color: var(--stw-dm-ink); } .stw-dm[hidden], .stw-dm-panel[hidden], .stw-dm-launcher[hidden] { display: none !important; } /* ---------------- positions ---------------- * Each variant pins two viewport edges and explicitly releases the opposite * two (auto) so the chosen corner is always honored and no inherited/stray * offset can leak in. The root is position:fixed (see .stw-dm above); the JS * also promotes it to a direct child of so a transformed theme * ancestor can never hijack the fixed containing block. */ .stw-dm--bottom-right { right: 20px; bottom: 20px; left: auto; top: auto; } .stw-dm--bottom-left { left: 20px; bottom: 20px; right: auto; top: auto; } .stw-dm--top-right { right: 20px; top: 20px; left: auto; bottom: auto; } .stw-dm--bottom-left .stw-dm-panel, .stw-dm--bottom-left .stw-dm-launcher { transform-origin: bottom left; } .stw-dm * { box-sizing: border-box; } /* ---------------- avatar circle ---------------- */ .stw-dm-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: visible; background: var(--stw-dm-green); flex-shrink: 0; } .stw-dm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .stw-dm-avatar-initial { font-weight: 800; color: var(--stw-dm-purple-dark); } .stw-dm-avatar--launcher { width: 34px; height: 34px; border: 2px solid var(--stw-dm-green); } .stw-dm-avatar--launcher .stw-dm-avatar-initial { font-size: 16px; } .stw-dm-avatar--head { width: 44px; height: 44px; border: 2px solid var(--stw-dm-green); } .stw-dm-avatar--head .stw-dm-avatar-initial { font-size: 20px; } /* ---------------- launcher: 3D rotating sphere ---------------- * The "Make me an offer" prompt is a rotating globe. Every color is a * theme CSS variable, so each preset re-skins the sphere completely: * - surface: scrolling meridian stripes (rotation illusion) * - shade: fixed spherical lighting (highlight + dark rim) * - rings: gyroscope orbits spinning in 3D around the globe * --------------------------------------------------------------- */ .stw-dm-launcher { position: relative; display: inline-block; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .stw-dm-launcher:focus-visible { outline: 3px solid var(--stw-dm-green); outline-offset: 4px; border-radius: 50%; } .stw-dm-sphere { position: relative; display: block; width: 104px; height: 104px; border-radius: 50%; transform-style: preserve-3d; perspective: 600px; background: var(--stw-dm-purple-dark); box-shadow: 0 18px 38px color-mix(in srgb, var(--stw-dm-purple-dark) 45%, transparent), 0 0 0 0 color-mix(in srgb, var(--stw-dm-green) 45%, transparent); animation: stw-dm-sphere-bob 4.2s ease-in-out infinite, stw-dm-sphere-glow 2.8s ease-in-out infinite; transition: transform 0.2s ease; } .stw-dm-launcher:hover .stw-dm-sphere, .stw-dm-launcher:focus-visible .stw-dm-sphere { transform: scale(1.07); } /* Rotating surface: meridian stripes scrolling across the globe. */ .stw-dm-sphere-surface { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background-color: var(--stw-dm-purple-dark); background-image: repeating-linear-gradient( 100deg, transparent 0 16px, color-mix(in srgb, var(--stw-dm-green) 26%, transparent) 16px 19px, transparent 19px 38px, color-mix(in srgb, var(--stw-dm-purple-mid) 55%, transparent) 38px 41px ); background-size: 220% 100%; animation: stw-dm-sphere-spin 7s linear infinite; } /* Fixed lighting: top-left highlight, darkened rim = 3D ball. */ .stw-dm-sphere-shade { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 22%, transparent 42%), radial-gradient(circle at 50% 50%, transparent 52%, color-mix(in srgb, var(--stw-dm-purple-dark) 55%, #000000) 100%); box-shadow: inset -10px -14px 26px color-mix(in srgb, var(--stw-dm-purple-dark) 60%, #000000); } /* Gyroscope rings orbiting the sphere in 3D. */ .stw-dm-sphere-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; } .stw-dm-sphere-ring--1 { border-top-color: var(--stw-dm-green); border-bottom-color: color-mix(in srgb, var(--stw-dm-green) 35%, transparent); animation: stw-dm-ring-1 6s linear infinite; } .stw-dm-sphere-ring--2 { inset: -3px; border-left-color: color-mix(in srgb, var(--stw-dm-white) 65%, transparent); border-right-color: color-mix(in srgb, var(--stw-dm-white) 20%, transparent); animation: stw-dm-ring-2 9s linear infinite; } .stw-dm-sphere-ring--3 { inset: -11px; border-bottom-color: color-mix(in srgb, var(--stw-dm-purple-mid) 75%, transparent); border-top-color: color-mix(in srgb, var(--stw-dm-purple-mid) 30%, transparent); animation: stw-dm-ring-3 12s linear infinite; } /* The prompt text lives on the sphere. */ .stw-dm-launcher .stw-dm-launcher-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; border-radius: 50%; color: var(--stw-dm-white); font-size: 12.5px; font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 1px 6px color-mix(in srgb, var(--stw-dm-purple-dark) 80%, #000000); z-index: 2; } /* Avatar badge docked on the sphere. */ .stw-dm-launcher .stw-dm-avatar--launcher { position: absolute; top: -6px; right: -6px; z-index: 3; } @keyframes stw-dm-sphere-spin { from { background-position: 0% 0; } to { background-position: -220% 0; } } @keyframes stw-dm-sphere-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @keyframes stw-dm-sphere-glow { 0%, 100% { box-shadow: 0 18px 38px color-mix(in srgb, var(--stw-dm-purple-dark) 45%, transparent), 0 0 0 0 color-mix(in srgb, var(--stw-dm-green) 40%, transparent); } 50% { box-shadow: 0 18px 38px color-mix(in srgb, var(--stw-dm-purple-dark) 45%, transparent), 0 0 0 12px transparent; } } @keyframes stw-dm-ring-1 { from { transform: rotate3d(1, 0.6, 0, 72deg) rotateZ(0deg); } to { transform: rotate3d(1, 0.6, 0, 72deg) rotateZ(360deg); } } @keyframes stw-dm-ring-2 { from { transform: rotate3d(0.2, 1, 0, 78deg) rotateZ(360deg); } to { transform: rotate3d(0.2, 1, 0, 78deg) rotateZ(0deg); } } @keyframes stw-dm-ring-3 { from { transform: rotate3d(1, -0.5, 0.3, 65deg) rotateZ(0deg); } to { transform: rotate3d(1, -0.5, 0.3, 65deg) rotateZ(360deg); } } .stw-dm-launcher-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--stw-dm-green); border: 2px solid var(--stw-dm-purple-dark); animation: stw-dm-pulse 1.8s ease-in-out infinite; } @keyframes stw-dm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.65; } } /* ---------------- panel ---------------- */ .stw-dm-panel { width: min(370px, calc(100vw - 32px)); background: var(--stw-dm-white); border: 1px solid var(--stw-dm-line); border-radius: var(--stw-dm-radius); box-shadow: var(--stw-dm-shadow); overflow: hidden; display: flex; flex-direction: column; /* A DEFINITE height (not just max-height) so the flex body always fills * the panel. Without this the messages area (min-height:0, so it can yield * room to the deal card + footer) collapses to nothing and the panel looks * deformed/empty. The deal card scrolls internally and the footer stays * pinned within this height. */ height: min(730px, calc(100vh - 60px)); max-height: min(730px, calc(100vh - 60px)); } .stw-dm-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 0 auto; background: var(--stw-dm-purple-dark); background: radial-gradient(280px 110px at 88% -50%, rgba(154, 205, 50, 0.25), transparent 60%), linear-gradient( 120deg, color-mix(in srgb, var(--stw-dm-purple-dark) 72%, #000000) 0%, var(--stw-dm-purple-dark) 48%, color-mix(in srgb, var(--stw-dm-purple-dark) 70%, #ffffff) 150% ); } .stw-dm-head-id { flex: 1; min-width: 0; } .stw-dm-agent-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--stw-dm-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stw-dm-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--stw-dm-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stw-dm-close { position: relative; z-index: 3; border: 0; background: transparent; color: var(--stw-dm-white); font-size: 22px; line-height: 1; cursor: pointer; pointer-events: auto; padding: 2px 6px; border-radius: 6px; } .stw-dm-close:hover, .stw-dm-close:focus-visible { background: var(--stw-dm-purple-mid); } .stw-dm-consent { margin: 0; padding: 8px 16px; font-size: 11.5px; color: var(--stw-dm-ink-soft); background: var(--stw-dm-white); border-bottom: 1px solid var(--stw-dm-line); } /* ---------------- messages ---------------- */ .stw-dm-messages { flex: 1 1 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--stw-dm-white); /* Must be able to shrink so the deal card + contact row never push the * End-chat footer past the panel's clipped bottom edge. */ min-height: 0; } .stw-dm-bubble { max-width: 85%; padding: 9px 13px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; } .stw-dm-bubble--agent { align-self: flex-start; background: var(--stw-dm-bubble); border: 1px solid var(--stw-dm-line); border-bottom-left-radius: 4px; } .stw-dm-bubble--visitor { align-self: flex-end; background: var(--stw-dm-purple-mid); color: var(--stw-dm-white); border-bottom-right-radius: 4px; } .stw-dm-thinking { opacity: 0.6; font-style: italic; } .stw-dm-typing { opacity: 0.72; font-style: italic; } .stw-dm-typing::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: stw-dm-typing-dots 1s steps(4, end) infinite; } @keyframes stw-dm-typing-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } } /* ---------------- deal card ---------------- */ .stw-dm-deal { margin: 0 16px 12px; padding: 14px 16px; border: 2px solid var(--stw-dm-green); border-radius: 12px; background: var(--stw-dm-white); /* The revealed coupon card shares the panel with the messages, contact * row and the End-chat footer. Let it scroll internally if it ever grows * tall so it can never shove the footer out of view. */ flex: 0 1 auto; overflow-y: auto; max-height: 48%; } .stw-dm-deal p { margin: 0 0 8px; } .stw-dm-deal p:last-child { margin-bottom: 0; } .stw-dm-deal-price strong { font-size: 22px; color: var(--stw-dm-purple-dark); } .stw-dm-deal-code code { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--stw-dm-purple-dark); background: var(--stw-dm-bubble); padding: 3px 8px; border-radius: 6px; } .stw-dm-copy { margin-left: 8px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--stw-dm-green); color: var(--stw-dm-purple-dark); font-size: 12.5px; font-weight: 700; cursor: pointer; } .stw-dm-copy:hover, .stw-dm-copy:focus-visible { filter: brightness(1.08); } .stw-dm-btnbusy { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; } .stw-dm-btnbusy::after { content: ""; width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--stw-dm-green, #9acd32) 35%, transparent); border-top-color: var(--stw-dm-green, #9acd32); border-right-color: var(--stw-dm-green, #9acd32); border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--stw-dm-green, #9acd32) 55%, transparent); animation: stw-dm-btnspin .7s linear infinite; } @keyframes stw-dm-btnspin { to { transform: rotate(360deg); } } .stw-dm-timer strong { color: var(--stw-dm-purple-mid); font-variant-numeric: tabular-nums; } .stw-dm-applycart { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 11px 16px; border: 0; border-radius: 999px; background: var(--stw-dm-purple-dark); color: var(--stw-dm-white); font-size: 13.5px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); cursor: pointer; transition: filter .15s ease, transform .15s ease; } .stw-dm-applycart:hover, .stw-dm-applycart:focus-visible { color: var(--stw-dm-white); filter: brightness(1.12); transform: translateY(-1px); } .stw-dm-applycart:focus-visible { outline: 3px solid var(--stw-dm-green); outline-offset: 2px; } /* ---------------- deal sweeteners (bonus coupons) ---------------- */ .stw-dm-sweeteners { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--stw-dm-green); } .stw-dm-sweetener { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px !important; font-size: 13px; } .stw-dm-sweetener-name { font-weight: 600; color: var(--stw-dm-purple-dark); } .stw-dm-sweetener-badge { background: var(--stw-dm-green); color: var(--stw-dm-purple-dark); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; } .stw-dm-sweetener-code { font-weight: 700; letter-spacing: 1px; color: var(--stw-dm-purple-dark); background: var(--stw-dm-bubble); padding: 2px 8px; border-radius: 6px; cursor: pointer; } .stw-dm-sweetener-code.is-copied { background: var(--stw-dm-green); } /* -------- email me a copy of this conversation (post-deal) -------- */ .stw-dm-transcript { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--stw-dm-green); } .stw-dm-transcript-btn { display: block; width: 100%; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--stw-dm-purple-dark); color: var(--stw-dm-white); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: filter .15s ease; } .stw-dm-transcript-btn:hover, .stw-dm-transcript-btn:focus-visible { filter: brightness(1.12); } .stw-dm-transcript-btn:disabled { opacity: .6; cursor: default; } .stw-dm-transcript-ask { margin: 0 0 8px !important; font-size: 13px; color: var(--stw-dm-purple-dark); font-weight: 600; } .stw-dm-transcript-input { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--stw-dm-green); border-radius: 10px; font-size: 14px; } .stw-dm-transcript-input:focus { outline: none; border-color: var(--stw-dm-purple-mid); } .stw-dm-transcript-done { margin: 0 !important; font-size: 13.5px; font-weight: 600; color: var(--stw-dm-purple-dark); } /* Celebration effects + cheer banner styles live in stw-dealmaker-fx.css, * which is enqueued alongside this file (and standalone on the * order-received page and the dashboard Settings tab). */ /* ---------------- inputs ---------------- */ .stw-dm-composer, .stw-dm-contactform { padding: 12px 16px 16px; background: var(--stw-dm-white); border-top: 1px solid var(--stw-dm-line); margin: 0; flex: 0 0 auto; } .stw-dm-contact-title { margin: 0 0 8px; font-weight: 600; color: var(--stw-dm-purple-dark); } /* ---- customer-initiated "End chat" closure ---- */ .stw-dm-foot { display: flex; justify-content: center; padding: 4px 16px 14px; background: var(--stw-dm-white); /* The End-chat footer is always pinned at the bottom of the panel and is * never the element that gets clipped when the coupon card is showing. */ flex: 0 0 auto; } .stw-dm-endchat { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 280px; border: 0; background: var(--stw-dm-purple-dark, #3b1d6e); color: var(--stw-dm-white, #fff); font-size: 13.5px; font-weight: 700; letter-spacing: .2px; cursor: pointer; padding: 11px 20px; border-radius: 999px; box-shadow: 0 6px 16px -6px var(--stw-dm-purple-dark, #3b1d6e); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .stw-dm-endchat::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 17l5-5-5-5v3H9v4h7v3zM4 5h8V3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H4V5z'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 17l5-5-5-5v3H9v4h7v3zM4 5h8V3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H4V5z'/%3E%3C/svg%3E"); } .stw-dm-endchat:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 9px 20px -6px var(--stw-dm-purple-dark, #3b1d6e); } .stw-dm-endchat:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px -6px var(--stw-dm-purple-dark, #3b1d6e); } .stw-dm-endchat:focus-visible { outline: 3px solid var(--stw-dm-green, #18b07b); outline-offset: 2px; } .stw-dm-inputrow { display: flex; gap: 8px; } .stw-dm-inputcol { display: flex; flex-direction: column; gap: 8px; } .stw-dm-input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--stw-dm-line); border-radius: 999px; font-size: 15px; background: var(--stw-dm-white); color: var(--stw-dm-ink); } .stw-dm-input:focus { outline: none; border-color: var(--stw-dm-purple-mid); box-shadow: 0 0 0 3px rgba(110, 110, 140, 0.18); } .stw-dm-btn { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--stw-dm-purple-dark); color: var(--stw-dm-white); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .stw-dm-btn:hover:not(:disabled), .stw-dm-btn:focus-visible { background: var(--stw-dm-purple-mid); } .stw-dm-btn:focus-visible { outline: 3px solid var(--stw-dm-green); outline-offset: 2px; } .stw-dm-btn:disabled { opacity: 0.55; cursor: default; } /* ---------------- responsive + a11y ---------------- */ @media (max-width: 480px) { .stw-dm--bottom-right { right: 12px; bottom: 12px; } .stw-dm--bottom-left { left: 12px; bottom: 12px; } .stw-dm--top-right { right: 12px; top: 12px; } .stw-dm-panel { height: calc(100vh - 40px); max-height: calc(100vh - 40px); } } /* ---------------- Negotiation Fallback (delayed human hand-off) ----- */ .stw-dm-handoff-wait { font-style: italic; opacity: .92; } .stw-dm-handoff-dots { display: inline-block; animation: stw-dm-handoff-pulse 1.2s ease-in-out infinite; } @keyframes stw-dm-handoff-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } .stw-dm-handoff-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; padding: 12px; border: 1px solid var(--stw-dm-green); border-radius: 12px; background: rgba(0, 0, 0, .02); } .stw-dm-handoff-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--stw-dm-green); border-radius: 10px; font-size: 14px; } .stw-dm-handoff-input:focus { outline: none; border-color: var(--stw-dm-purple-mid); box-shadow: 0 0 0 3px rgba(110, 110, 140, 0.18); } .stw-dm-handoff-btn { width: 100%; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--stw-dm-purple-dark); color: var(--stw-dm-white); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: filter .15s ease; } .stw-dm-handoff-btn:hover:not(:disabled), .stw-dm-handoff-btn:focus-visible { filter: brightness(1.12); } .stw-dm-handoff-skip { width: 100%; padding: 6px 10px; border: 0; background: none; color: var(--stw-dm-purple-dark); font-size: 12.5px; text-decoration: underline; cursor: pointer; } .stw-dm-handoff-btn:disabled, .stw-dm-handoff-skip:disabled { opacity: .55; cursor: default; } @media (prefers-reduced-motion: reduce) { .stw-dm-launcher, .stw-dm-btn, .stw-dm-sphere { transition: none; } .stw-dm-launcher-dot, .stw-dm-sphere, .stw-dm-sphere-surface, .stw-dm-sphere-ring--1, .stw-dm-sphere-ring--2, .stw-dm-sphere-ring--3, .stw-dm-handoff-dots { animation: none; } } /* ---------------- "See my Deal" offer button + fancy tooltip ---------------- * Replaces the plain offer/claim flow: each avatar offer carries a prominent, * themed "See my Deal" button that pops a yellow-green fancy tooltip showing * the price with clear Accept / Decline actions. Tooltip styling is adapted * from fancy-tool-tip-yellowgreen.html, scoped under .stw-dm-* so it never * collides with the host theme. */ .stw-dm-seedeal-wrap { position: relative; display: flex; justify-content: center; margin: 6px 0 12px; } .stw-dm-seedeal { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 22px; background: linear-gradient(135deg, var(--stw-dm-purple-dark, #321457), var(--stw-dm-purple-mid, #9370db)); color: var(--stw-dm-white, #fff); font-size: 14px; font-weight: 800; letter-spacing: .2px; cursor: pointer; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--stw-dm-purple-dark, #321457) 60%, transparent); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .stw-dm-seedeal::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background-color: var(--stw-dm-green, #9acd32); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.84zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.84zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E"); } .stw-dm-seedeal:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--stw-dm-purple-dark, #321457) 65%, transparent); } .stw-dm-seedeal:focus-visible { outline: 3px solid var(--stw-dm-green, #9acd32); outline-offset: 2px; } .stw-dm-seedeal:disabled { opacity: .5; cursor: default; filter: grayscale(.4); } .stw-dm-fancytip { display: none; position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 180px; padding: 6px; background: #586a0a; /* yellow-green frame */ border-radius: 10px; z-index: 60; box-shadow: 11px 16px 39px -9px rgba(0, 0, 0, .55); } .stw-dm-fancytip.stw-dm-fancytip--open { display: block; animation: stw-dm-tip-in .16s ease; } @keyframes stw-dm-tip-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .stw-dm-fancytip::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 9px solid transparent; border-top-color: #586a0a; } .stw-dm-fancytip-inner { border: 1px solid #586a0a; border-radius: 7px; background: whitesmoke; padding: 14px 14px 12px; text-align: center; } .stw-dm-fancytip-title { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--stw-dm-ink-soft, #6f6685); } .stw-dm-fancytip-price { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: var(--stw-dm-purple-dark, #321457); font-variant-numeric: tabular-nums; } .stw-dm-fancytip-price del { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--stw-dm-ink-soft, #6f6685); } .stw-dm-fancytip-actions { display: flex; gap: 8px; justify-content: center; } .stw-dm-tip-accept, .stw-dm-tip-decline { appearance: none; border: 0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 800; cursor: pointer; transition: filter .15s ease, transform .12s ease; } .stw-dm-tip-accept { background: var(--stw-dm-green, #9acd32); color: var(--stw-dm-purple-dark, #321457); } .stw-dm-tip-decline { background: #ececec; color: var(--stw-dm-ink, #2a2438); } .stw-dm-tip-accept:hover, .stw-dm-tip-decline:hover { filter: brightness(1.06); transform: translateY(-1px); } .stw-dm-tip-accept:focus-visible, .stw-dm-tip-decline:focus-visible { outline: 3px solid var(--stw-dm-purple-mid, #9370db); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .stw-dm-seedeal, .stw-dm-tip-accept, .stw-dm-tip-decline { transition: none; } .stw-dm-fancytip.stw-dm-fancytip--open { animation: none; } }