/* ===================================================================== FOLAN MODAL ALERTS — premium, reusable, drop anywhere in Works standalone: falls back to sensible defaults if the page doesn't already define --first-color / --title-color / etc. If it does (e.g. your login page tokens), it picks those up automatically. ===================================================================== */ :root { --fma-first: var(--first-color, #ff0032); --fma-first-alt: var(--first-color-alt, #d40029); --fma-first-soft: var(--first-color-soft, #fff1f2); --fma-success: #17a558; --fma-success-soft: #e9f9ef; --fma-warning: #f5a524; --fma-warning-soft: #fff6e5; /* error reuses your brand red — it already reads as "danger" */ --fma-error: var(--fma-first); --fma-error-soft: var(--fma-first-soft); --fma-title: var(--title-color, #201a14); --fma-text: var(--text-color, #6b6259); --fma-text-light: var(--text-color-light, #b9b2a8); --fma-font: var(--body-font, "Satoshi", sans-serif); } .modal-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background-color: rgba(15, 10, 8, .55); backdrop-filter: blur(3px); font-family: var(--fma-font); } .modal-overlay.show { display: flex; } .modal-card { width: 100%; max-width: min(380px, 92vw); background-color: #fff; border-radius: 1.5rem; padding: clamp(28px, 6vw, 36px) clamp(22px, 5vw, 32px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .45); animation: fma-pop .3s cubic-bezier(.34, 1.56, .64, 1); } @keyframes fma-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- delivery route accent: a bike riding the rail, always in motion ---- */ .modal-route { position: relative; width: 64%; max-width: 150px; height: 18px; margin-bottom: -6px; } .modal-route::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background-image: linear-gradient(to right, var(--fma-first-soft) 0 6px, transparent 6px 12px); background-size: 12px 2px; background-repeat: repeat-x; } .modal-route i { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); color: var(--fma-first); font-size: 15px; animation: fma-ride 2.4s ease-in-out infinite; } @keyframes fma-ride { 0% { left: 0%; } 50% { left: 100%; } 50.01%{ transform: translate(-50%, -50%) scaleX(-1); } 100% { left: 0%; transform: translate(-50%, -50%) scaleX(-1); } } /* ---- icon circle ---- */ /* base = success (JS never adds an extra class for "success") */ .modal-call-icon { position: relative; width: clamp(52px, 10vw, 64px); height: clamp(52px, 10vw, 64px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 5.5vw, 30px); line-height: 1; background-color: var(--fma-success-soft); color: var(--fma-success); animation: fma-icon-in .4s .1s both cubic-bezier(.34, 1.56, .64, 1), fma-breathe 2.2s .5s ease-in-out infinite; } .modal-call-icon.error { background-color: var(--fma-error-soft); color: var(--fma-error); animation: fma-icon-in .4s .1s both cubic-bezier(.34, 1.56, .64, 1), fma-shake .5s .45s ease-in-out; } .modal-call-icon.warning { background-color: var(--fma-warning-soft); color: var(--fma-warning); animation: fma-icon-in .4s .1s both cubic-bezier(.34, 1.56, .64, 1); } /* pulsing ring — only the warning icon keeps signalling after it lands */ .modal-call-icon.warning::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--fma-warning); animation: fma-ring 1.8s .5s ease-out infinite; } @keyframes fma-icon-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes fma-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes fma-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @keyframes fma-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } } /* ---- text ---- */ .modal-card-title { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 700; color: var(--fma-title); margin: 0; } .modal-card-message { font-size: clamp(.85rem, .8rem + .2vw, .95rem); color: var(--fma-text); line-height: 1.5; margin: 0; } /* ---- actions row ---- */ .modal-card-actions { width: 100%; display: flex; gap: 12px; margin-top: 6px; } /* shared button base */ .folan-modal-btn, .folan-modal-btn-cancel, .folan-modal-btn-primary { flex: 1; height: clamp(46px, 6vh, 52px); display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 1rem; font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: filter .2s ease, transform .15s ease, background-color .2s ease; } .folan-modal-btn:active, .folan-modal-btn-cancel:active, .folan-modal-btn-primary:active { transform: scale(.97); } .folan-modal-btn:focus-visible, .folan-modal-btn-cancel:focus-visible, .folan-modal-btn-primary:focus-visible { outline: 2px solid var(--fma-first-alt); outline-offset: 2px; } /* cancel: neutral ghost button (JS never re-styles this one) */ .folan-modal-btn-cancel { background-color: #f3f1ee; color: var(--fma-text); } .folan-modal-btn-cancel:hover { background-color: #e8e4de; } /* info-only modal's single accept button — brand red, same family as the login CTA */ .folan-modal-btn-primary { background-color: var(--fma-first); color: #fff; box-shadow: 0 14px 26px -12px rgba(255, 0, 50, .5); } .folan-modal-btn-primary:hover { filter: brightness(.94); } /* confirm modal's OK button — className is reset to "folan-modal-btn" then one of these three is added back by your JS */ .folan-modal-btn { background-color: var(--fma-first); color: #fff; box-shadow: 0 14px 26px -12px rgba(255, 0, 50, .45); } .folan-modal-btn:hover { filter: brightness(.94); } .folan-btn-success { background-color: var(--fma-success); box-shadow: 0 14px 26px -12px rgba(23, 165, 88, .45); } .folan-btn-error { background-color: var(--fma-error); box-shadow: 0 14px 26px -12px rgba(255, 0, 50, .45); } .folan-btn-warning { background-color: var(--fma-warning); color: #3a2a05; box-shadow: 0 14px 26px -12px rgba(245, 165, 36, .45); } @media (prefers-reduced-motion: reduce) { .modal-card, .modal-call-icon, .modal-call-icon.error, .modal-call-icon.warning::after, .modal-route i { animation: none; } } /* very small phones */ @media screen and (max-width: 359px) { .modal-card-actions { flex-direction: column; } }