/* ------------------------------------------------------------ *\ Zatr — Minimal Le Labo style popups (SweetAlert2 theme) Monochrome, square edges, typographic, cream/black. \* ------------------------------------------------------------ */ :root { --z-ink: #1c1b18; /* near-black ink */ --z-cream: #faf8f5; /* warm off-white */ --z-paper: #faf8f5; /* warm off-white */ --z-line: #1c1b18; /* hairline */ --z-muted: #6f6b63; /* muted grey */ } /* ---- container / backdrop ---- SweetAlert puts `swal2-toast-shown` on (NOT the container), so we key off the body class: dim the screen only for real modals, and keep the toast container fully transparent + click-through (no dark half-overlay). */ body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(28, 27, 24, 0.28) !important; } body.swal2-toast-shown .swal2-container, .swal2-container.swal2-backdrop-hide { background: transparent !important; pointer-events: none !important; } /* keep the toast itself clickable (so hover-to-pause still works) */ body.swal2-toast-shown .swal2-container .swal2-toast { pointer-events: auto !important; } /* ---- the popup card ---- */ .swal2-popup { font-family: "ModamWeb", serif !important; background: var(--z-paper) !important; color: var(--z-ink) !important; border: 1px solid var(--z-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 2.4rem 2rem 2rem !important; width: 30em !important; max-width: 92vw !important; } /* ---- title ---- */ .swal2-title { font-family: "ModamWeb", serif !important; font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--z-ink) !important; padding: 0 0 0.4em !important; margin: 0 !important; } /* ---- body text ---- */ .swal2-html-container { font-family: "ModamWeb", serif !important; font-size: 0.95rem !important; font-weight: 300 !important; line-height: 2 !important; letter-spacing: 0.02em !important; color: var(--z-ink) !important; margin: 0.6em 0 0 !important; } /* ---- actions / buttons ---- */ .swal2-actions { gap: 0.6rem !important; margin-top: 1.8em !important; } .swal2-styled { border-radius: 0 !important; box-shadow: none !important; font-family: "ModamWeb", serif !important; font-size: 0.78rem !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; padding: 0.85em 2.2em !important; margin: 0 !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* primary (confirm): solid ink — overrides any inline confirmButtonColor */ .swal2-styled.swal2-confirm { background: var(--z-ink) !important; color: #fff !important; border: 1px solid var(--z-ink) !important; } .swal2-styled.swal2-confirm:hover, .swal2-styled.swal2-confirm:focus { background: #000 !important; border-color: #000 !important; } /* secondary (cancel/deny): outline, ink on paper */ .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { background: transparent !important; color: var(--z-ink) !important; border: 1px solid var(--z-ink) !important; } .swal2-styled.swal2-cancel:hover, .swal2-styled.swal2-deny:hover { background: var(--z-ink) !important; color: #fff !important; } .swal2-styled:focus { outline: none !important; box-shadow: none !important; } /* ---- minimal monochrome line icons ---- */ .swal2-icon { border-color: var(--z-ink) !important; border-width: 1px !important; transform: scale(0.74); /* shrink without breaking line geometry */ transform-origin: center; margin: 0.2em auto 0.4em !important; } .swal2-icon .swal2-icon-content { color: var(--z-ink) !important; font-weight: 300 !important; } /* Minimal success mark: a single monochrome hairline check. */ .swal2-icon.swal2-success { display: flex !important; width: 38px !important; min-width: 38px !important; height: 32px !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; animation: none !important; transform: none; } .swal2-icon.swal2-success > * { display: none !important; } .swal2-icon.swal2-success::before { width: 10px; height: 20px; border: solid var(--z-ink); border-width: 0 1px 1px 0; content: ""; transform: rotate(45deg) translate(-2px, 2px); } .swal2-icon.swal2-success::after { display: none; }/* error cross — recolor only, keep native geometry */ .swal2-icon.swal2-error { border-color: var(--z-ink) !important; } .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--z-ink) !important; } /* warning / info / question */ .swal2-icon.swal2-warning, .swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--z-ink) !important; color: var(--z-ink) !important; } /* ---- close button ---- */ .swal2-close { color: var(--z-muted) !important; font-weight: 200 !important; box-shadow: none !important; outline: none !important; } .swal2-close:hover { color: var(--z-ink) !important; } /* ------------------------------------------------------------ *\ Toast variant (corner, auto-dismiss) \* ------------------------------------------------------------ */ .swal2-popup.swal2-toast { background: var(--z-cream) !important; border: 1px solid var(--z-line) !important; border-radius: 0 !important; box-shadow: 0 6px 24px rgba(28, 27, 24, 0.12) !important; padding: 1em 1.2em !important; width: auto !important; } .swal2-popup.swal2-toast .swal2-title { font-size: 0.65rem !important; letter-spacing: 0.12em !important; margin: 0 !important; padding: 0 !important; } .swal2-popup.swal2-toast .swal2-html-container { font-size: 0.86rem !important; line-height: 1.6 !important; margin: 0 !important; } .swal2-popup.swal2-toast .swal2-icon { transform: none !important; /* keep SweetAlert's native toast icon sizing */ margin: 0 0 0 0.85em !important; /* gap toward the text (icon sits at the side) */ } .swal2-popup.swal2-toast .swal2-icon.swal2-success { width: 25px !important; min-width: 25px !important; height: 23px !important; } .swal2-popup.swal2-toast .swal2-icon.swal2-success::before { width: 7px; height: 14px; } .swal2-popup.swal2-toast .swal2-title { padding-inline: 0.2em 0 !important; } /* thin progress bar in ink */ .swal2-timer-progress-bar { background: var(--z-ink) !important; height: 1px !important; }