/* ────────────────────────────────────────────────────────────────────────── scam-notification.css — styling for Pulse "security caution" cards. A scamGuarded decision (BEC / phishing / payment-fraud markers) is rendered with this high-visibility treatment so it stands apart from ordinary cards. Authored for Nevlar. Loaded from index.html . ────────────────────────────────────────────────────────────────────────── */ /* The caution card itself — red alert framing, always sorted to the top. */ .sing-card.scam-card { order: -1; /* high-value placement: floats above normal cards */ border: 1px solid rgba(239, 68, 68, 0.45); border-left: 4px solid #ef4444; background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.035)); box-shadow: 0 6px 26px rgba(239,68,68,0.12); cursor: default; } /* Top banner with the alert-triangle */ .scam-card-banner { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #ff6b6b; margin-bottom: 8px; } .scam-card-banner svg { flex-shrink: 0; } .scam-card-banner .scam-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-left: auto; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); animation: scamPulse 1.8s ease-out infinite; } @keyframes scamPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); } 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .scam-card .sing-card-title { color: #ffe2e2; } .scam-card-desc { font-size: 12.5px; line-height: 1.6; color: rgba(255,220,220,0.82); margin: 4px 0 10px; } /* Disclaimer line — small print under the description */ .scam-disclaimer { display: flex; align-items: flex-start; gap: 6px; font-size: 10.5px; line-height: 1.5; color: rgba(255,180,180,0.62); background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.16); border-radius: 8px; padding: 7px 9px; margin-bottom: 12px; } .scam-disclaimer svg { flex-shrink: 0; margin-top: 1px; opacity: 0.8; } /* Trust controls */ .scam-actions { display: flex; flex-wrap: wrap; gap: 8px; } .scam-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--mid, #a08060); transition: background 0.15s, border-color 0.15s, color 0.15s; } .scam-btn svg { flex-shrink: 0; } .scam-btn.scam-known { color: #4ade80; border-color: rgba(34,197,94,0.3); } .scam-btn.scam-known:hover { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.5); } .scam-btn.scam-quarantine { color: #fbbf24; border-color: rgba(251,191,36,0.3); } .scam-btn.scam-quarantine:hover { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.5); } .scam-btn.scam-report { color: #ff7b7b; border-color: rgba(239,68,68,0.35); } .scam-btn.scam-report:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.55); }