passkey-toast.css

1/* Palette — hardcoded equivalents of the popup's CSS vars (shadow DOM cannot2   inherit :root variables from the host page). */34.peach-passkey-toast {5  position: fixed;6  top: 16px;7  right: 16px;8  z-index: 2147483647;910  width: 260px;1112  background: #0C0A06;13  border: 0.5px solid rgba(240, 232, 216, 0.07);14  border-radius: 14px;15  box-shadow:16    0 4px 6px rgba(0, 0, 0, 0.4),17    0 12px 32px rgba(0, 0, 0, 0.55),18    0 0 0 0.5px rgba(0, 0, 0, 0.6);1920  overflow: hidden;2122  /* Initial state — hidden before animation */23  opacity: 0;24  transform: translateY(-12px) scale(0.96);25  pointer-events: none;2627  /* Font reset — page styles must not bleed in */28  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;29  font-size: 14px;30  line-height: 1.4;31  -webkit-font-smoothing: antialiased;32  box-sizing: border-box;33}3435.peach-passkey-toast * {36  box-sizing: border-box;37  margin: 0;38  padding: 0;39}4041.peach-passkey-toast.is-visible {42  animation: peach-passkey-in 280ms cubic-bezier(0, 0, 0, 1) forwards;43  pointer-events: auto;44}4546.peach-passkey-toast.is-exiting {47  animation: peach-passkey-out 200ms cubic-bezier(0.3, 0, 1, 1) forwards;48  pointer-events: none;49}5051@keyframes peach-passkey-in {52  from { opacity: 0; transform: translateY(-12px) scale(0.96); }53  to   { opacity: 1; transform: translateY(0) scale(1); }54}5556@keyframes peach-passkey-out {57  from { opacity: 1; transform: translateY(0) scale(1); }58  to   { opacity: 0; transform: translateY(-12px) scale(0.96); }59}6061/* Body — centered column */62.peach-passkey-toast-body {63  display: flex;64  flex-direction: column;65  align-items: center;66  padding: 16px 16px 14px;67  gap: 8px;68  text-align: center;69}7071/* Key icon */72.peach-passkey-toast-icon {73  width: 36px;74  height: 36px;75  border-radius: 10px;76  background: #1A1710;77  border: 1px solid rgba(240, 232, 216, 0.07);78  display: flex;79  align-items: center;80  justify-content: center;81  flex-shrink: 0;82  color: #E8956D;83}8485/* Domain */86.peach-passkey-toast-domain {87  font-size: 0.75rem;88  color: rgba(240, 232, 216, 0.20);89  letter-spacing: 0.03em;90  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;91}9293/* Headline */94.peach-passkey-toast-headline {95  font-family: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;96  font-style: italic;97  font-size: 18px;98  font-weight: 300;99  color: #F0E8D8;100  line-height: 1.1;101  margin: 1px 0;102}103104/* User pill */105.peach-passkey-toast-user {106  font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;107  font-size: 0.6875rem;108  color: rgba(240, 232, 216, 0.50);109  background: #1A1710;110  border: 1px solid rgba(240, 232, 216, 0.07);111  border-radius: 4px;112  padding: 3px 8px;113}114115/* Notice */116.peach-passkey-toast-notice {117  font-size: 0.625rem;118  color: rgba(240, 232, 216, 0.20);119  line-height: 1.5;120  max-width: 220px;121}122123/* Countdown bar */124.peach-passkey-toast-countdown {125  width: 100%;126  height: 2px;127  background: rgba(240, 232, 216, 0.06);128  border-radius: 1px;129  overflow: hidden;130  margin-top: 2px;131}132133.peach-passkey-toast-countdown-bar {134  height: 100%;135  background: var(--peach-accent, #F49C70);136  border-radius: 1px;137  transform-origin: left;138  animation: peach-passkey-countdown linear forwards;139  /* animation-duration set inline */140}141142@keyframes peach-passkey-countdown {143  from { width: 100%; }144  to   { width: 0%; }145}146147/* Actions */148.peach-passkey-toast-actions {149  display: flex;150  gap: 8px;151  width: 100%;152}153154.peach-passkey-toast-btn {155  flex: 1;156  min-height: 32px;157  padding: 6px 9px;158  border-radius: 8px;159  border: none;160  font-size: 0.6875rem;161  font-weight: 500;162  cursor: pointer;163  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;164  letter-spacing: -0.01em;165  transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;166}167168.peach-passkey-toast-btn:focus {169  outline: none;170}171172.peach-passkey-toast-btn:focus-visible {173  outline: none;174  box-shadow: 0 0 0 2px #0C0A06, 0 0 0 4px color-mix(in srgb, var(--peach-accent, #F49C70) 50%, transparent);175}176177.peach-passkey-toast-btn:active {178  opacity: 0.75;179  transform: scale(0.97);180}181182.peach-passkey-toast-btn--deny {183  background: transparent;184  color: rgba(240, 232, 216, 0.50);185  border: 1px solid rgba(240, 232, 216, 0.07);186}187188.peach-passkey-toast-btn--deny:hover {189  color: rgba(240, 232, 216, 0.80);190  border-color: rgba(240, 232, 216, 0.12);191}192193.peach-passkey-toast-btn--signin {194  background: var(--peach-accent, #F49C70);195  color: rgba(0, 0, 0, 0.92);196  font-weight: 500;197  box-shadow:198    0 1px 0 rgba(255, 255, 255, 0.08) inset,199    0 3px 16px color-mix(in srgb, var(--peach-accent, #F49C70) 16%, transparent);200}201202.peach-passkey-toast-btn--signin:hover {203  filter: brightness(1.10) saturate(1.05);204}