/* ========================================================================= Doramis Cart Gift Notifier — modal styles Prefix: every selector starts with .dcgn- to guarantee zero collision with Woodmart, the wallet plugin, or the invoice plugin CSS. Typography intentionally has NO font-family declaration of its own: it inherits the theme's global font from , per spec. ========================================================================= */ :root { --dcgn-accent: rgb(240, 159, 63); --dcgn-accent-soft: rgba(240, 159, 63, 0.14); --dcgn-accent-softer: rgba(240, 159, 63, 0.07); --dcgn-ink: #2b2621; --dcgn-ink-muted: #75695c; --dcgn-surface: #fffaf3; --dcgn-border: rgba(240, 159, 63, 0.28); --dcgn-shadow: 0 18px 44px -14px rgba(43, 38, 33, 0.28), 0 4px 12px -4px rgba(240, 159, 63, 0.25); --dcgn-radius: 18px; --dcgn-gap: 16px; --dcgn-img-size: 64px; --dcgn-width: 420px; --dcgn-top-offset: 18px; --dcgn-side-offset: 18px; --dcgn-pad-block: 18px; --dcgn-pad-inline: 22px; --dcgn-duration: 420ms; --dcgn-ease: cubic-bezier(0.22, 1, 0.36, 1); } #dcgn-root { position: fixed; inset: 0 0 auto 0; top: var(--dcgn-top-offset); z-index: 100000; /* above Woodmart header/mini-cart, below native browser UI */ display: flex; justify-content: center; /* mobile / mobile-landscape / tablet: top-center */ direction: ltr; /* keeps flex-start/flex-end predictable regardless of page direction */ pointer-events: none; /* pass-through except the toast itself */ } .dcgn-toast { pointer-events: none; /* only the visible toast should ever be clickable */ visibility: hidden; /* extra guard: no hit-testing even if display gets overridden */ position: relative; width: min(var(--dcgn-width), calc(100vw - 24px)); display: flex; align-items: center; gap: var(--dcgn-gap); background: var(--dcgn-surface); border: 1px solid var(--dcgn-border); border-radius: var(--dcgn-radius); box-shadow: var(--dcgn-shadow); padding: var(--dcgn-pad-block) var(--dcgn-pad-inline); overflow: hidden; direction: rtl; font-family: inherit; /* inherit the site's global font */ color: var(--dcgn-ink); line-height: 1.6; /* entrance / exit animation state */ opacity: 0; transform: translateY(-18px) scale(0.96); transition: opacity var(--dcgn-duration) var(--dcgn-ease), transform var(--dcgn-duration) var(--dcgn-ease), visibility 0s linear var(--dcgn-duration); will-change: opacity, transform; } .dcgn-toast::before { /* soft fantasy glow, minimal — a single quiet accent, not decoration overload */ content: ""; position: absolute; inset: -40% -10% auto -10%; height: 90px; background: radial-gradient(60% 100% at 50% 0%, var(--dcgn-accent-soft), transparent 70%); pointer-events: none; } .dcgn-toast[data-state="visible"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity var(--dcgn-duration) var(--dcgn-ease), transform var(--dcgn-duration) var(--dcgn-ease); } .dcgn-toast[data-state="leaving"] { opacity: 0; visibility: visible; /* stays hit-testable only long enough to finish its exit animation */ pointer-events: none; transform: translateY(-14px) scale(0.97); } /* ---------- media (product image) ---------- */ .dcgn-media { flex: 0 0 auto; width: var(--dcgn-img-size); height: var(--dcgn-img-size); border-radius: 14px; overflow: hidden; background: var(--dcgn-accent-softer); display: flex; align-items: center; justify-content: center; position: relative; } .dcgn-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--dcgn-border); pointer-events: none; } .dcgn-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* small sparkle accent — a single restrained fantasy touch */ .dcgn-sparkle { position: absolute; top: -6px; inset-inline-end: -6px; width: 18px; height: 18px; color: var(--dcgn-accent); filter: drop-shadow(0 2px 4px rgba(240, 159, 63, 0.35)); animation: dcgn-twinkle 2.2s ease-in-out infinite; } @keyframes dcgn-twinkle { 0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(8deg); } } /* ---------- text body ---------- */ .dcgn-body { flex: 1 1 auto; min-width: 0; } .dcgn-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--dcgn-accent); background: var(--dcgn-accent-soft); border-radius: 999px; padding: 2px 9px; margin-bottom: 5px; } .dcgn-message { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--dcgn-ink); text-align: justify; text-align-last: right; /* keeps the last (shortest) line pinned to the natural RTL edge */ text-justify: inter-word; } /* ---------- close button ---------- */ .dcgn-close { flex: 0 0 auto; align-self: flex-start; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(43, 38, 33, 0.18); color: var(--dcgn-accent); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .dcgn-close:hover, .dcgn-close:focus-visible { background: #ffffff; box-shadow: 0 2px 8px rgba(43, 38, 33, 0.24); transform: scale(1.06); } .dcgn-close:focus-visible { outline: 2px solid var(--dcgn-accent); outline-offset: 2px; } /* ---------- countdown progress ---------- */ .dcgn-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; } .dcgn-progress-bar { display: block; height: 100%; width: 100%; background: var(--dcgn-accent); transform-origin: right center; /* RTL: shrinks from the left edge */ transform: scaleX(1); } .dcgn-toast[data-state="visible"] .dcgn-progress-bar { transition: transform linear; transform: scaleX(0); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .dcgn-toast, .dcgn-progress-bar, .dcgn-sparkle { transition: opacity 1ms linear !important; animation: none !important; } .dcgn-toast[data-state="visible"] { transform: none; } } /* ========================================================================= Responsive breakpoints — explicit per spec: mobile / mobile-landscape / tablet / laptop / desktop / widescreen ========================================================================= */ /* Mobile portrait: < 480px — top-center */ @media (max-width: 479px) { :root { --dcgn-width: calc(100vw - 20px); --dcgn-top-offset: 10px; --dcgn-img-size: 52px; --dcgn-radius: 14px; --dcgn-gap: 12px; --dcgn-pad-block: 14px; --dcgn-pad-inline: 16px; } #dcgn-root { justify-content: center; } .dcgn-message { font-size: 12.5px; } .dcgn-badge { font-size: 10px; } } /* Mobile landscape: 480px – 767px — top-center */ @media (min-width: 480px) and (max-width: 767px) { :root { --dcgn-width: 380px; --dcgn-top-offset: 12px; --dcgn-img-size: 56px; --dcgn-pad-block: 15px; --dcgn-pad-inline: 18px; } #dcgn-root { justify-content: center; } } /* Tablet: 768px – 1023px — top-center */ @media (min-width: 768px) and (max-width: 1023px) { :root { --dcgn-width: 400px; --dcgn-top-offset: 16px; --dcgn-img-size: 60px; } #dcgn-root { justify-content: center; } } /* Laptop: 1024px – 1365px — top-right */ @media (min-width: 1024px) and (max-width: 1365px) { :root { --dcgn-width: 420px; --dcgn-top-offset: 18px; --dcgn-side-offset: 18px; } #dcgn-root { justify-content: flex-end; padding-inline-end: var(--dcgn-side-offset); } } /* Desktop: 1366px – 1919px — top-right */ @media (min-width: 1366px) and (max-width: 1919px) { :root { --dcgn-width: 440px; --dcgn-top-offset: 20px; --dcgn-side-offset: 24px; --dcgn-img-size: 68px; } #dcgn-root { justify-content: flex-end; padding-inline-end: var(--dcgn-side-offset); } } /* Widescreen: >= 1920px — top-right */ @media (min-width: 1920px) { :root { --dcgn-width: 480px; --dcgn-top-offset: 24px; --dcgn-side-offset: 32px; --dcgn-img-size: 72px; } #dcgn-root { justify-content: flex-end; padding-inline-end: var(--dcgn-side-offset); } .dcgn-message { font-size: 14.5px; } }