/* ============================================================================ fm-toast.css — brand toast notifications ---------------------------------------------------------------------------- Replaces the fancybox add-to-cart / add-to-favourites popups. Spec: foremost-digital-standards.html section 05. SCOPING: every rule is under .fm-toast* or .fm-toasts. Nothing here can collide with the legacy Bootstrap sheet. TOKENS: declared on BOTH :root and .fm-toasts. The toast container is position:fixed and appended to , so it sits OUTSIDE any page-scoped token root — tokens defined only on a page root would not reach it and the toasts would render unstyled. ========================================================================== */ :root, .fm-toasts { --fm-blue1: #0061fe; --fm-blue5: #e8effd; --fm-navy: #121d3c; --fm-neon: #ccff00; --fm-white: #ffffff; --fm-red: #e74c3c; --fm-navy60: rgba(18, 29, 60, 0.6); --fm-navy30: rgba(18, 29, 60, 0.3); --fm-radius-box: 30px; --fm-shadow-modal: 0 24px 80px rgba(18, 29, 60, 0.25); --fm-font-body: 'Ambit', 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } /* ---- container ---- */ .fm-toasts { position: fixed; top: 20px; right: 20px; z-index: 2000; /* above fancybox overlay (1100) and navbar */ display: flex; flex-direction: column; gap: 8px; pointer-events: none; font-family: var(--fm-font-body); } /* ---- toast ---- */ .fm-toast { background: var(--fm-white); border-radius: var(--fm-radius-box); padding: 16px 20px; box-shadow: var(--fm-shadow-modal); display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px; pointer-events: auto; border-left: 4px solid var(--fm-neon); position: relative; box-sizing: border-box; animation: fmToastIn 300ms ease-out; transition: transform 200ms ease, opacity 200ms ease; } .fm-toast--info { border-left-color: var(--fm-blue1); } .fm-toast--error { border-left-color: var(--fm-red); } /* retreating stack (max 3 visible) */ .fm-toast--retreat-1 { transform: scale(0.95); opacity: 0.85; } .fm-toast--retreat-2 { transform: scale(0.90); opacity: 0.70; } .fm-toast__icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; flex-shrink: 0; background: var(--fm-neon); color: var(--fm-navy); } .fm-toast--info .fm-toast__icon { background: var(--fm-blue1); color: var(--fm-white); } .fm-toast--error .fm-toast__icon { background: var(--fm-red); color: var(--fm-white); } .fm-toast__body { flex: 1; min-width: 0; } .fm-toast__title { font-size: 13px; font-weight: 700; color: var(--fm-navy); line-height: 1.3; } .fm-toast__msg { font-size: 12px; color: var(--fm-navy60); margin-top: 2px; line-height: 1.4; } .fm-toast__msg a, .fm-toast__msg a:visited { color: var(--fm-blue1); text-decoration: underline; } .fm-toast__msg a:hover { color: var(--fm-navy); } .fm-toast__close { background: none; border: none; color: var(--fm-navy30); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; margin: -4px -4px -4px 0; transition: color 150ms; flex-shrink: 0; } .fm-toast__close:hover, .fm-toast__close:focus { color: var(--fm-navy); } .fm-toast__close:focus-visible { outline: 2px solid var(--fm-blue1); outline-offset: 2px; border-radius: 4px; } .fm-toast--exit { animation: fmToastOut 200ms ease-in forwards; } @keyframes fmToastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes fmToastOut { to { opacity: 0; transform: translateX(40px); } } /* ---- mobile ---- */ @media (max-width: 767px) { .fm-toasts { top: 10px; right: 10px; left: 10px; } .fm-toast { min-width: 0; max-width: none; width: 100%; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .fm-toast, .fm-toast--exit { animation: none !important; } .fm-toast { transition: none; } }