Floating Bottom-Left Card

<div class="nuda-ck-float">
  <div class="nuda-ck-float__pulse"></div>
  <div class="nuda-ck-float__top">
    <span class="nuda-ck-float__emoji">🍪</span>
    <div>
      <p class="nuda-ck-float__title">Cookies on this site</p>
      <p class="nuda-ck-float__time">Last updated Jun 2025</p>
    </div>
  </div>
  <p class="nuda-ck-float__body">
    We use essential cookies plus optional ones to measure engagement and show relevant content.
  </p>
  <div class="nuda-ck-float__actions">
    <button class="nuda-ck-float__btn nuda-ck-float__btn--settings">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"
           stroke-linecap="round" stroke-linejoin="round" width="11" height="11">
        <circle cx="8" cy="8" r="2.5" />
        <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.42 1.42M11.53 11.53l1.42 1.42M3.05 12.95l1.42-1.42M11.53 4.47l1.42-1.42" />
      </svg>
      Settings
    </button>
    <button class="nuda-ck-float__btn nuda-ck-float__btn--accept">Accept &amp; close</button>
  </div>
</div>

.nuda-ck-float {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  width: 230px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: _nuda-ckfloatIn .5s cubic-bezier(.16,1,.3,1) both;
}

.nuda-ck-float__pulse {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(228,255,84,.12) 0%,transparent 70%);
  animation: _nuda-ckfloatPulse 3s ease-in-out infinite;
  pointer-events: none;
}

.nuda-ck-float__top {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
}

.nuda-ck-float__emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.nuda-ck-float__title {
  color: #fafafa;
  font-size: .8rem;
  font-weight: 700;
  margin: 0;
}

.nuda-ck-float__time {
  color: #555;
  font-size: .63rem;
  margin: .1rem 0 0;
}

.nuda-ck-float__body {
  color: #777;
  font-size: .7rem;
  line-height: 1.5;
  margin: 0 0 .9rem;
}

.nuda-ck-float__actions {
  display: flex;
  gap: .45rem;
}

.nuda-ck-float__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: none;
  border-radius: 8px;
  padding: .45rem 0;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.nuda-ck-float__btn:hover {
  opacity: .8;
}

.nuda-ck-float__btn--settings {
  background: rgba(255,255,255,.06);
  color: #cfcfcf;
  border: 1px solid rgba(255,255,255,.1);
}

.nuda-ck-float__btn--accept {
  background: #e4ff54;
  color: #0a0a0a;
  font-weight: 700;
}

@keyframes _nuda-ckfloatIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes _nuda-ckfloatPulse {
  0%,100% {
    transform: scale(1);
    opacity: .6;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ck-float {
    animation: none;
  }
  .nuda-ck-float__pulse {
    animation: none;
  }
}